@charset "UTF-8";
/* ==========================================================================
BERİL UÇAR — EYEBROW & LIP DESIGN · tüm stil tek dosyada
Uluslararası Tipografik Stil (Swiss). Kaynak sözleşme: SOZLESME.md
(1.1 renkler · 1.2 kontrast · 1.3 CTA · 1.4 tipografi · 1.5 ızgara ·
9 sınıf sözlüğü · 10 Swiss kuralları)
Sıra: 00 reset · 01 simgeler · 02 taban · 03 tipografi · 04 ızgara ·
05 zemin bağlamı · 06 düğme · 07 bileşen · 08 takvim · 09 form ·
10 yardımcı · 11 hareket · 12 baskı · 13 hareket-azalt · 14 kırılma ·
15 zorlanmış renk.
Değişmez kurallar: yarıçap 0 (azami 2px), gölge yok, gradient yalnız
fotoğraf perdesi ve dolu-slot taraması. Şeftali (--ten) açık zeminde
METİN rengi DEĞİL (2.08:1) — yalnız zemin, dolgu, ≥48px dekoratif harf.
Font @font-face assets/font/figtree.css içinde, 'de ayrı .
Mobil önce. Kırılma noktaları: 600 · 900 · 1200 · 1440.
========================================================================== */
/* ==========================================================================
00 — RESET
Minimum, görünür davranışı değiştirmeyen sıfırlama.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* Yapışkan üst bar altında kalan çapa bağlantıları için pay */
scroll-padding-top: 88px;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul[class],
ol[class] { list-style: none; }
img,
svg,
video,
canvas,
picture,
iframe { display: block; max-width: 100%; }
img,
video { height: auto; }
button,
input,
select,
textarea { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 0; height: 0; }
a { color: inherit; }
/* Odak halkası — sözleşme bölüm 9: 3px, ofset 3px.
Rengi zemin bağlamı devreder (koyu bölümde beyaz olur), bkz. bölüm 05. */
:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; }
/* Fare tıklamasında halka çıkmasın, klavyede çıksın */
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
::selection { background: var(--ten); color: var(--murekkep); }
/* ==========================================================================
01 — SİMGELER (:root)
Marka renkleri sözleşme 1.1'den BİREBİR. Türetilmiş olanlar altta işaretli.
========================================================================== */
:root {
/* --- Marka çekirdeği — SİYAH-BEYAZ SÜRÜM ---
Kimlik kılavuzunun şeftali/kahve paleti yerine nötr gri ölçek kullanılıyor.
Simge ADLARI bilerek korundu: bileşenler, zemin bağlamları ve kontrast
kuralları hiç değişmeden çalışsın diye. Renkli sürüme dönmek istenirse
yalnız aşağıdaki on değer geri alınır, başka hiçbir yere dokunulmaz.
Fotoğraflar RENKLİ kalır — tek renk kaynağı onlardır. --- */
--murekkep: #030404; /* saf siyah, ana metin ve zıt CTA zemini */
--kahve: #2E2E2E; /* marka ikinci tonu — siyah-beyaz sürümde koyu nötr (beyazda 13.6:1) */
--kahve-orta: #4A4A4A;
--kahve-acik: #5A5A5A;
--ten: #DEDEDE; /* ANA VURGU — açık nötr bant. Siyah metinle 15.0:1, siyah zeminde 16.2:1 */
--ten-koyu: #5E5E5E;
--gri-90: #333132;
--gri-30: #DCDDDE;
--gri-20: #EBEBEC;
--gri-10: #F3F4F5;
--beyaz: #FFFFFF;
/* --- Türetilmişler — sözleşme 1.1'de tanımlı --- */
--ten-sis: #F0F0F0; /* vurgunun açık karşılığı */
--kum: #F7F7F7; /* kağıt zemini */
--gri-50: #6A6A6A; /* ikincil metin. #9A9A9C idi ama açık zeminde 2.8:1 veriyordu
(WCAG AA 4.5:1 ister). Ölçüldü: beyazda 5.40:1, --kum 5.04:1,
--ten-sis 4.78:1. */
--gri-50-koyu: #A8A8A8; /* koyu zeminde ikincil metin. --gri-50 siyah üzerinde yalnız
3.8:1 verir; bu ton 8.6:1. Koyu bağlamların tamamı bunu kullanır. */
--cizgi: #E0E0E0; /* ince ayraç */
/* --- Ek türetmeler (sözleşmede yok, var olanları değiştirmez) --- */
--murekkep-yumusak: #1C1D1D; /* koyu bölümde ikinci kat zemin */
--kahve-sis: #EDEDED; /* koyu tonun çok açık düz karşılığı */
--cizgi-koyu: #3A3838; /* koyu zeminde ayraç */
--cizgi-ten: #BFBFBF; /* vurgu zeminde ayraç */
--basari: #1E6B4F; /* erişilebilir yeşil, beyazda 5.3:1 */
--hata: #B3261E; /* erişilebilir kırmızı, beyazda 6.4:1 */
--tarama: rgba(51, 49, 50, .22); /* dolu slot çapraz taraması */
/* --- Tipografi ölçeği — sözleşme 1.4 --- */
--t-dev: clamp(3.5rem, 9vw, 8rem);
--t-1: clamp(2.5rem, 5.5vw, 4.5rem);
--t-2: clamp(1.75rem, 3.2vw, 2.75rem);
--t-3: 1.375rem;
--t-govde: 1.0625rem;
--t-kucuk: 0.875rem;
--t-etiket: 0.75rem;
--font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Ağırlıklar — değişken font 300–900 */
--ag-ince: 300;
--ag-normal: 400;
--ag-orta: 500;
--ag-yari: 600;
--ag-kalin: 700;
--ag-siyah: 900;
/* --- Izgara — sözleşme 1.5 --- */
--olcu: 1440px;
--bosluk: clamp(16px, 3vw, 32px);
--kenar: clamp(20px, 5vw, 64px);
/* --- Dikey ritim, 8px katları --- */
--u: 8px;
--a1: 8px;
--a2: 16px;
--a3: 24px;
--a4: 32px;
--a5: 40px;
--a6: 48px;
--a7: 64px;
--a8: 80px;
--a9: 104px;
--a10: 136px;
/* --- Bölüm dikey boşluğu — sözleşme 10.3 --- */
--bolum-bosluk: clamp(80px, 12vh, 180px);
--bolum-bosluk-sik: clamp(40px, 6vh, 90px);
/* --- Ölçüler --- */
--dokunma: 44px; /* asgari dokunma hedefi */
--dugme-y: 48px; /* düğme yüksekliği */
--dugme-y-k: 40px; /* küçük düğme */
--girdi-y: 52px; /* form girdisi yüksekliği */
--ustbar-y: 72px;
/* --- Geçiş — yalnız renk, 120ms (Swiss: gösteriş yok) --- */
--gecis: 120ms linear;
/* --- Zemin bağlamı varsayılanı (bölüm 05 devreder) --- */
--zemin: var(--kum);
--metin: var(--murekkep);
--metin-yumusak: var(--gri-90);
--metin-sonuk: var(--gri-50);
--baslik-renk: var(--kahve);
--vurgu-metin: var(--kahve); /* şeftali açık zeminde metin OLAMAZ */
--cizgi-yerel: var(--cizgi);
--odak: var(--murekkep);
/* CTA — sözleşme 1.3 */
--cta-zemin: var(--murekkep);
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--ten);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
/* Bileşen zeminleri */
--kart-zemin: var(--beyaz);
--girdi-zemin: var(--beyaz);
}
/* ==========================================================================
02 — TABAN
========================================================================== */
html { font-size: 100%; }
body {
font-family: var(--font);
font-size: var(--t-govde);
font-weight: var(--ag-normal);
line-height: 1.65;
color: var(--metin);
background: var(--zemin);
/* Türkçe için tipografi ayarları */
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'tnum' 0;
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Türkçe uzun kelimelerde otomatik heceleme YOK, elle karar verilir */
hyphens: manual;
-webkit-hyphens: manual;
min-height: 100vh;
overflow-x: hidden;
}
/* Sayfa iskeleti: alt bilgi her zaman dipte */
.sayfa-govde { display: flex; flex-direction: column; min-height: 100vh; }
.sayfa-icerik { flex: 1 0 auto; }
/* Metin içi bağlantı — altı çizili, ince ofset, Swiss'te süs yok */
a:not([class]) { color: var(--metin); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--metin-sonuk); transition: color var(--gecis), text-decoration-color var(--gecis); }
a:not([class]):hover { color: var(--vurgu-metin); text-decoration-color: currentColor; }
/* Görselin altındaki açıklama */
figcaption { font-size: var(--t-kucuk); line-height: 1.55; color: var(--metin-sonuk); margin-top: var(--a2); }
strong, b { font-weight: var(--ag-yari); }
small { font-size: var(--t-kucuk); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
/* ==========================================================================
03 — TİPOGRAFİ
Ölçek sözleşme 1.4'ten. Metin blokları sola dayalı, sağı serbest (ragged-right).
========================================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: var(--ag-kalin); line-height: 1.1; letter-spacing: -.02em; color: var(--baslik-renk); text-wrap: balance; }
p { text-wrap: pretty; }
/* --- Dev tipografi: sayfa açılış hamlesi --- */
.dev {
font-size: var(--t-dev);
font-weight: var(--ag-siyah);
letter-spacing: -.04em;
line-height: .92;
color: var(--baslik-renk);
text-transform: none;
margin: 0;
text-wrap: balance;
}
/* İçi boş dev tipografi — Swiss afiş dili.
≥48px olduğu için şeftali burada kullanılabilir (dekoratif, metin değil). */
.dev--bos { color: transparent; -webkit-text-stroke: 2px var(--baslik-renk); }
@supports not (-webkit-text-stroke: 1px currentColor) {
.dev--bos { color: var(--baslik-renk); }
}
@media (min-width: 900px) {
.dev--bos { -webkit-text-stroke-width: 3px; }
}
.dev--ten { -webkit-text-stroke-color: var(--ten); }
.b1 { font-size: var(--t-1); font-weight: var(--ag-kalin); letter-spacing: -.03em; line-height: 1.02; color: var(--baslik-renk); margin: 0; }
.b2 { font-size: var(--t-2); font-weight: var(--ag-kalin); letter-spacing: -.02em; line-height: 1.1; color: var(--baslik-renk); margin: 0; }
.b3 { font-size: var(--t-3); font-weight: var(--ag-yari); letter-spacing: -.01em; line-height: 1.25; color: var(--baslik-renk); margin: 0; }
.govde {
font-size: var(--t-govde);
font-weight: var(--ag-normal);
line-height: 1.65;
letter-spacing: 0;
color: var(--metin-yumusak);
margin: 0;
max-width: 62ch;
}
.govde + .govde { margin-top: var(--a3); }
.kucuk { font-size: var(--t-kucuk); line-height: 1.55; color: var(--metin-sonuk); margin: 0; }
/* Giriş paragrafı — --t-3 ölçüsünde, hafif ince */
.spot {
font-size: var(--t-3);
font-weight: var(--ag-ince);
line-height: 1.45;
letter-spacing: -.01em;
color: var(--metin);
margin: 0;
max-width: 46ch;
}
/* --t-etiket: Swiss'in imzası. Menü, düğme, üst etiket, bölüm numarası. */
.etiket {
display: inline-block;
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
color: var(--metin-yumusak);
margin: 0;
}
/* Bölüm numarası — "01 —" biçiminde, başlığın üstünde, ince çizgiyle ayrılmış */
.numara {
display: block;
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
color: var(--vurgu-metin);
padding-top: var(--a2);
border-top: 1px solid var(--cizgi-yerel);
margin: 0 0 var(--a3);
}
.numara--sade { border-top: 0; padding-top: 0; }
/* Üst başlık bloğu — inc/yerlesim.php ustbaslik() çıktısı */
.ustbaslik { display: flex; flex-direction: column; gap: var(--a3); margin-bottom: var(--a6); }
.ustbaslik .numara { margin-bottom: 0; }
.ustbaslik .spot { margin-top: var(--a1); }
/* Şeftali arka planlı işaretleme — zemin olarak kullanım, metin siyah kalır */
.vurgu-ten { background: var(--ten); color: var(--murekkep); padding: .06em .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Sıralı/sırasız içerik listeleri (sınıfsız, gövde metni içinde) */
.govde ul,
.govde ol,
.metin ul,
.metin ol { margin: var(--a3) 0; padding-left: 1.25em; }
.govde li,
.metin li { margin-bottom: var(--a1); }
.metin > * + * { margin-top: var(--a3); }
.metin h2 { font-size: var(--t-2); margin-top: var(--a6); }
.metin h3 { font-size: var(--t-3); margin-top: var(--a5); }
/* Alıntı — çerçevesiz, yalnız sol kural çizgisi */
blockquote { border-left: 2px solid var(--vurgu-metin); padding-left: var(--a3); font-size: var(--t-3); font-weight: var(--ag-ince); line-height: 1.45; color: var(--metin); }
/* Rakamlar tablolarda hizalansın */
.rakam,
table td.rakam { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* ==========================================================================
04 — IZGARA VE YERLEŞİM
12 sütun. 900px altında 6, 600px altında tek sütun.
.s-N genişlik (grid-column-end: span N) · .b-N başlangıç (grid-column-start)
İkisi ayrı özelliğe yazar, birlikte kullanıldığında çakışmaz.
========================================================================== */
.kap { width: 100%; max-width: var(--olcu); margin-inline: auto; padding-inline: var(--kenar); }
.kap--dar { max-width: 900px; }
.kap--metin { max-width: 720px; }
.kap--tam { max-width: none; }
/* --- Izgara --- */
.izgara { display: grid; grid-template-columns: 1fr; gap: var(--bosluk); }
.izgara--sik { gap: var(--a2); }
.izgara--genis { gap: calc(var(--bosluk) * 2); }
.izgara--hizala-son { align-items: end; }
.izgara--hizala-orta { align-items: center; }
/* Tek sütun kipinde tüm genişlik/başlangıç sınıfları etkisiz */
.s-1, .s-2, .s-3, .s-4, .s-5, .s-6,
.s-7, .s-8, .s-9, .s-10, .s-11, .s-12,
.b-1, .b-2, .b-3, .b-4, .b-5, .b-6,
.b-7, .b-8, .b-9, .b-10, .b-11, .b-12 { grid-column: auto; }
/* --- 600px ve üstü: 6 sütun --- */
@media (min-width: 600px) {
.izgara { grid-template-columns: repeat(6, 1fr); }
.s-1 { grid-column-end: span 1; }
.s-2 { grid-column-end: span 2; }
.s-3 { grid-column-end: span 3; }
.s-4 { grid-column-end: span 4; }
.s-5 { grid-column-end: span 5; }
.s-6 { grid-column-end: span 6; }
/* 6'dan geniş istekler altı sütunun tamamına oturur */
.s-7 { grid-column-end: span 6; }
.s-8 { grid-column-end: span 6; }
.s-9 { grid-column-end: span 6; }
.s-10 { grid-column-end: span 6; }
.s-11 { grid-column-end: span 6; }
.s-12 { grid-column-end: span 6; }
.b-1 { grid-column-start: 1; }
.b-2 { grid-column-start: 2; }
.b-3 { grid-column-start: 3; }
.b-4 { grid-column-start: 4; }
.b-5 { grid-column-start: 5; }
.b-6 { grid-column-start: 6; }
/* 6'dan sonrası bu kipte anlamsız, akışa bırakılır */
.b-7 { grid-column-start: auto; }
.b-8 { grid-column-start: auto; }
.b-9 { grid-column-start: auto; }
.b-10 { grid-column-start: auto; }
.b-11 { grid-column-start: auto; }
.b-12 { grid-column-start: auto; }
}
/* --- 900px ve üstü: tam 12 sütun --- */
@media (min-width: 900px) {
.izgara { grid-template-columns: repeat(12, 1fr); }
.s-1 { grid-column-end: span 1; }
.s-2 { grid-column-end: span 2; }
.s-3 { grid-column-end: span 3; }
.s-4 { grid-column-end: span 4; }
.s-5 { grid-column-end: span 5; }
.s-6 { grid-column-end: span 6; }
.s-7 { grid-column-end: span 7; }
.s-8 { grid-column-end: span 8; }
.s-9 { grid-column-end: span 9; }
.s-10 { grid-column-end: span 10; }
.s-11 { grid-column-end: span 11; }
.s-12 { grid-column-end: span 12; }
.b-1 { grid-column-start: 1; }
.b-2 { grid-column-start: 2; }
.b-3 { grid-column-start: 3; }
.b-4 { grid-column-start: 4; }
.b-5 { grid-column-start: 5; }
.b-6 { grid-column-start: 6; }
.b-7 { grid-column-start: 7; }
.b-8 { grid-column-start: 8; }
.b-9 { grid-column-start: 9; }
.b-10 { grid-column-start: 10; }
.b-11 { grid-column-start: 11; }
.b-12 { grid-column-start: 12; }
}
/* --- Dikey ve yatay akış --- */
.yigin { display: flex; flex-direction: column; gap: var(--a3); }
.yigin--sik { gap: var(--a2); }
.yigin--dar { gap: var(--a1); }
.yigin--genis { gap: var(--a6); }
.yigin--bolum { gap: var(--a8); }
.satir { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a2); }
.satir--sik { gap: var(--a1); }
.satir--genis { gap: var(--a4); }
.satir--araci { justify-content: space-between; }
.satir--orta { justify-content: center; }
.satir--son { justify-content: flex-end; }
.satir--ust { align-items: flex-start; }
.satir--taban { align-items: baseline; }
/* --- Bölüm --- */
.bolum { padding-block: var(--bolum-bosluk); background: var(--zemin); color: var(--metin); }
.bolum--sik { padding-block: var(--bolum-bosluk-sik); }
.bolum--genis > .kap { max-width: none; }
.bolum--ustsuz { padding-top: 0; }
.bolum--altsiz { padding-bottom: 0; }
/* Ayraç — Swiss'in yatay kural çizgisi. Bölüm ayırıcı olarak bolca kullanılır. */
.ayrac { border-top: 1px solid var(--cizgi-yerel); width: 100%; height: 0; margin: 0; }
.ayrac--kalin { border-top-width: 2px; border-top-color: var(--metin); }
.ayrac--bosluklu { margin-block: var(--a6); }
.ayrac--kisa { width: 88px; border-top-width: 2px; border-top-color: var(--vurgu-metin); }
/* ==========================================================================
05 — ZEMİN BAĞLAMI
Sözleşme 1.3: CTA rengini kapsayıcı bölüm devreder.
Her bölüm kendi metin, ayraç, odak ve CTA renklerini tanımlar.
ŞEFTALİ AÇIK ZEMİNDE METİN OLARAK KULLANILMAZ (2.08:1) — bu yüzden
--vurgu-metin açık bağlamda --kahve, koyu bağlamda --ten olur.
========================================================================== */
/* --- Açık: beyaz zemin --- */
.bolum--acik {
--zemin: var(--beyaz);
--metin: var(--murekkep);
--metin-yumusak: var(--gri-90);
--metin-sonuk: var(--gri-50);
--baslik-renk: var(--kahve);
--vurgu-metin: var(--kahve); /* 11.6:1 */
--cizgi-yerel: var(--cizgi);
--odak: var(--murekkep);
--cta-zemin: var(--murekkep); /* 19.4:1 */
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--ten); /* şeftali ZEMİN, metin siyah */
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
--kart-zemin: var(--kum);
--girdi-zemin: var(--beyaz);
}
/* --- Kum: sıcak kağıt zemini (varsayılan sayfa zemini) --- */
.bolum--kum {
--zemin: var(--kum);
--metin: var(--murekkep);
--metin-yumusak: var(--gri-90);
--metin-sonuk: var(--gri-50); /* kum üzerinde 5.04:1 */
--baslik-renk: var(--kahve);
--vurgu-metin: var(--kahve);
--cizgi-yerel: var(--cizgi);
--odak: var(--murekkep);
--cta-zemin: var(--murekkep);
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--ten);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
--kart-zemin: var(--beyaz);
--girdi-zemin: var(--beyaz);
}
/* --- Koyu: mürekkep zemin --- */
.bolum--koyu {
--zemin: var(--murekkep);
--metin: var(--beyaz);
--metin-yumusak: var(--gri-30);
--metin-sonuk: var(--gri-50-koyu);
--baslik-renk: var(--beyaz);
--vurgu-metin: var(--ten); /* koyu zeminde açık nötr, 16:1 */
--cizgi-yerel: var(--cizgi-koyu);
--odak: var(--ten);
--cta-zemin: var(--ten); /* 9.8:1 */
--cta-metin: var(--murekkep);
--cta-zemin-uzeri: var(--beyaz);
--cta-metin-uzeri: var(--murekkep);
--ikincil-zemin: var(--beyaz);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--beyaz);
--kart-zemin: var(--murekkep-yumusak);
--girdi-zemin: var(--murekkep-yumusak);
}
/* --- Kahve: koyu kahve zemin (koyu ailesinin ikinci üyesi) --- */
.bolum--kahve {
--zemin: var(--kahve);
--metin: var(--beyaz); /* 11.1:1 */
--metin-yumusak: var(--ten-sis);
--metin-sonuk: var(--ten);
--baslik-renk: var(--beyaz);
--vurgu-metin: var(--ten);
--cizgi-yerel: var(--kahve-orta);
--odak: var(--ten);
--cta-zemin: var(--ten);
--cta-metin: var(--murekkep);
--cta-zemin-uzeri: var(--beyaz);
--cta-metin-uzeri: var(--kahve);
--ikincil-zemin: var(--beyaz);
--ikincil-metin: var(--kahve);
--cizgi-dugme: var(--beyaz);
--kart-zemin: var(--kahve-acik);
--girdi-zemin: var(--beyaz);
}
/* --- Ten: şeftali düz renk alanı. Metin daima siyah (9.8:1). --- */
.bolum--ten {
--zemin: var(--ten);
--metin: var(--murekkep);
--metin-yumusak: var(--murekkep);
--metin-sonuk: var(--kahve); /* şeftali üzerinde kahve ≥19px kalın */
--baslik-renk: var(--murekkep);
--vurgu-metin: var(--kahve);
--cizgi-yerel: var(--cizgi-ten);
--odak: var(--murekkep);
--cta-zemin: var(--murekkep); /* 19.4:1 */
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--beyaz);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
--kart-zemin: var(--ten-sis);
--girdi-zemin: var(--beyaz);
}
/* --- Sis: şeftalinin çok açık karşılığı, ara bölümler için --- */
.bolum--sis {
--zemin: var(--ten-sis);
--metin: var(--murekkep);
--metin-yumusak: var(--gri-90);
--metin-sonuk: var(--kahve-orta);
--baslik-renk: var(--kahve);
--vurgu-metin: var(--kahve);
--cizgi-yerel: var(--cizgi-ten);
--odak: var(--murekkep);
--cta-zemin: var(--murekkep);
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--beyaz);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
--kart-zemin: var(--beyaz);
--girdi-zemin: var(--beyaz);
}
/* --- Gri: nötr ara bölüm --- */
.bolum--gri {
--zemin: var(--gri-10);
--metin: var(--murekkep);
--metin-yumusak: var(--gri-90);
--metin-sonuk: var(--gri-50);
--baslik-renk: var(--kahve);
--vurgu-metin: var(--kahve);
--cizgi-yerel: var(--gri-30);
--odak: var(--murekkep);
--cta-zemin: var(--murekkep);
--cta-metin: var(--beyaz);
--cta-zemin-uzeri: var(--kahve);
--cta-metin-uzeri: var(--beyaz);
--ikincil-zemin: var(--ten);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--murekkep);
--kart-zemin: var(--beyaz);
--girdi-zemin: var(--beyaz);
}
/* Bağlam sınıfı bölüm dışında da (kart, kutu, alt bilgi) kullanılabilsin */
.bolum--acik,
.bolum--kum,
.bolum--koyu,
.bolum--kahve,
.bolum--ten,
.bolum--sis,
.bolum--gri { background: var(--zemin); color: var(--metin); }
/* ==========================================================================
06 — DÜĞMELER
Yükseklik ≥48px, yatay dolgu 32px, metin --t-etiket majüskül.
Geçiş yalnız background/color, 120ms. Yarıçap 0, gölge yok.
========================================================================== */
.dugme {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--a1);
min-height: var(--dugme-y);
padding: 0 var(--a4);
font-family: var(--font);
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
text-align: center;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 0;
background: transparent;
color: var(--metin);
cursor: pointer;
transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme:disabled,
.dugme[aria-disabled="true"] { cursor: not-allowed; background: var(--gri-20); color: var(--gri-90); border-color: var(--gri-30); }
/* --- Birincil: zeminin tam zıttı (sözleşme 1.3) --- */
.dugme--birincil { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
.dugme--birincil:hover,
.dugme--birincil:focus-visible { background: var(--cta-zemin-uzeri); color: var(--cta-metin-uzeri); border-color: var(--cta-zemin-uzeri); }
/* --- İkincil: bağlamın ikinci dolgu rengi --- */
.dugme--ikincil { background: var(--ikincil-zemin); color: var(--ikincil-metin); border-color: var(--ikincil-zemin); }
.dugme--ikincil:hover,
.dugme--ikincil:focus-visible { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
/* --- Çizgi: 1px kenarlık, şeffaf zemin, hover'da doldurur --- */
.dugme--cizgi { background: transparent; color: var(--metin); border-color: var(--cizgi-dugme); }
.dugme--cizgi:hover,
.dugme--cizgi:focus-visible { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
/* --- Küçük --- */
.dugme--kucuk { min-height: var(--dugme-y-k); padding: 0 var(--a3); font-size: var(--t-etiket); letter-spacing: .1em; }
/* --- Blok --- */
.dugme--blok { display: flex; width: 100%; }
/* --- Yalın bağlantı düğmesi: altı çizgili, ok işaretli --- */
.dugme--yalin { min-height: var(--dokunma); padding: 0; color: var(--metin); border: 0; border-bottom: 1px solid var(--cizgi-dugme); align-self: flex-start; }
.dugme--yalin:hover,
.dugme--yalin:focus-visible { color: var(--vurgu-metin); border-bottom-color: currentColor; }
/* Düğme grubu: mobilde alt alta, geniş ekranda yan yana */
.dugme-grup { display: flex; flex-direction: column; gap: var(--a2); align-items: stretch; }
@media (min-width: 600px) {
.dugme-grup { flex-direction: row; flex-wrap: wrap; align-items: center; }
.dugme-grup .dugme--blok { width: auto; display: inline-flex; }
}
/* ==========================================================================
07 — BİLEŞENLER
========================================================================== */
/* --------------------------------------------------------------------------
07.1 — Üst bar ve menü
JS yokken menü tam görünür kalır; daraltma yalnız body.js altında yapılır.
-------------------------------------------------------------------------- */
.ustbar { position: sticky; top: 0; z-index: 60; background: var(--kum); color: var(--murekkep); border-bottom: 1px solid var(--cizgi); }
.ustbar__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); min-height: var(--ustbar-y); padding-block: var(--a2); }
/* Kahraman görselin üstüne binen şeffaf bar (sayfa_basi 'seffaf') */
.ustbar--seffaf { position: absolute; inset-inline: 0; top: 0; background: transparent; border-bottom-color: transparent; color: var(--beyaz); }
.ustbar--seffaf .ustbar-logo .bl-1 { fill: var(--beyaz); }
.ustbar--seffaf .ustbar-logo .bl-2 { fill: var(--ten); }
.ustbar--seffaf .menu-baglanti { color: var(--beyaz); }
.ustbar--seffaf .menu-ac-cizgi { background: var(--beyaz); }
/* Sayfa aşağı kaydırılınca JS 'ustbar--yapisik' ekler */
.ustbar--yapisik { position: sticky; background: var(--kum); color: var(--murekkep); border-bottom-color: var(--cizgi); }
.ustbar-logo { display: inline-flex; align-items: center; gap: var(--a2); text-decoration: none; color: inherit; min-height: var(--dokunma); }
.ustbar-logo svg { height: 34px; width: auto; }
.ustbar-logo .bl-1 { fill: var(--kahve); }
.ustbar-logo .bl-2 { fill: var(--ten-koyu); }
@media (min-width: 900px) {
.ustbar-logo svg { height: 40px; }
}
/* --- Menü --- */
.menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--a1) var(--a4);
list-style: none;
margin: 0;
padding: 0;
}
.menu li { margin: 0; }
.menu-baglanti {
display: inline-flex;
align-items: center;
min-height: var(--dokunma);
padding: 0 2px;
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
color: var(--murekkep);
border-bottom: 2px solid transparent;
transition: color var(--gecis), border-color var(--gecis);
}
.menu-baglanti:hover { color: var(--kahve); border-bottom-color: var(--kahve); }
/* Etkin sayfa — renk tek başına bilgi taşımasın diye kenarlık da var */
.menu-baglanti[aria-current="page"] { color: var(--kahve); border-bottom-color: var(--ten-koyu); }
/* Menüdeki CTA düğmesi */
.menu .dugme { margin-left: var(--a1); }
/* Hamburger — 44x44 dokunma hedefi, üç çizgi */
.menu-ac {
display: none;
width: var(--dokunma);
height: var(--dokunma);
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid var(--cizgi);
background: transparent;
padding: 0;
}
.menu-ac-cizgi { display: block; width: 20px; height: 2px; background: var(--murekkep); }
.menu-ac[aria-expanded="true"] .menu-ac-cizgi:nth-child(2) { opacity: 0; }
/* JS varken 900px altında menü panele döner */
.js .menu-ac { display: none; }
@media (max-width: 899.98px) {
.js .menu-ac { display: inline-flex; }
/* Menü paneli. Görünürlük display ile yönetilir; visibility/opacity geçişi
panelin odak alamamasına yol açıyordu (gizli öğe focus() kabul etmez).
Sade kural hem çalışıyor hem de Swiss dilinde zaten geçiş istenmiyor. */
.js .menu {
display: none;
position: fixed;
inset: 0;
z-index: 70;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--a3);
padding: var(--a8) var(--kenar);
background: var(--murekkep);
color: var(--beyaz);
overflow-y: auto;
}
.js .menu.acik { display: flex; }
.js .menu .menu-baglanti { color: var(--beyaz); font-size: var(--t-3); letter-spacing: .1em; min-height: 56px; }
.js .menu .menu-baglanti:hover,
.js .menu .menu-baglanti[aria-current="page"] { color: var(--ten); border-bottom-color: var(--ten); }
.js .menu .dugme { margin-left: 0; background: var(--ten); color: var(--murekkep); border-color: var(--ten); }
/* Panel açıkken sayfa kaymasın */
.js body.menu-acik { overflow: hidden; }
}
/* Menü panelini kapatma düğmesi (panel içinde) */
.menu-kapat {
position: absolute;
top: var(--a3);
right: var(--kenar);
width: var(--dokunma);
height: var(--dokunma);
color: var(--beyaz);
border: 1px solid var(--cizgi-koyu);
font-size: 1.25rem;
line-height: 1;
}
/* --------------------------------------------------------------------------
07.2 — Kırıntı yolu
-------------------------------------------------------------------------- */
.kirinti {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--a1);
list-style: none;
margin: 0 0 var(--a5);
padding: 0;
font-size: var(--t-kucuk);
color: var(--metin-sonuk);
}
.kirinti li { display: flex; align-items: center; gap: var(--a1); margin: 0; }
.kirinti li + li::before { content: "/"; color: var(--metin-sonuk); }
.kirinti a { color: var(--metin-yumusak); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--gecis), border-color var(--gecis); }
.kirinti a:hover { color: var(--vurgu-metin); border-bottom-color: currentColor; }
.kirinti [aria-current="page"] { color: var(--metin); font-weight: var(--ag-orta); }
/* --------------------------------------------------------------------------
07.3 — Medya
Fotoğraf tam kanar ya da ızgaraya tam oturur; arada kalmaz.
-------------------------------------------------------------------------- */
.medya { position: relative; overflow: hidden; background: var(--gri-10); border-radius: 0; }
.medya img,
.medya video,
.medya picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.medya--oran-3-4 { aspect-ratio: 3 / 4; }
.medya--oran-16-9 { aspect-ratio: 16 / 9; }
.medya--oran-1-1 { aspect-ratio: 1 / 1; }
.medya--oran-4-3 { aspect-ratio: 4 / 3; }
.medya--oran-2-3 { aspect-ratio: 2 / 3; }
.medya--tam-kan { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.medya--sinir { border: 1px solid var(--cizgi-yerel); }
/* Fotoğraf üstü okunabilirlik perdesi — projedeki TEK gradient (sözleşme 10.6) */
.medya--perde::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 4, 4, 0) 35%, rgba(3, 4, 4, .68) 100%); pointer-events: none; }
.medya-yazi { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: var(--a4); color: var(--beyaz); }
.medya-yazi .b3,
.medya-yazi .etiket { color: var(--beyaz); }
/* --------------------------------------------------------------------------
07.4 — Kart
Kutu değil: üstten 1px kural çizgisi. Gölge yok, yarıçap yok.
-------------------------------------------------------------------------- */
.kart {
display: flex;
flex-direction: column;
gap: var(--a2);
padding-top: var(--a3);
border-top: 1px solid var(--cizgi-yerel);
background: transparent;
color: var(--metin);
border-radius: 0;
}
.kart--dolgulu { background: var(--kart-zemin); padding: var(--a4); border-top: 2px solid var(--metin); }
.kart-baslik { font-size: var(--t-3); font-weight: var(--ag-yari); letter-spacing: -.01em; line-height: 1.25; color: var(--baslik-renk); margin: 0; }
.kart-metin { font-size: var(--t-govde); line-height: 1.6; color: var(--metin-yumusak); margin: 0; }
.kart-alt { margin-top: auto; padding-top: var(--a3); }
/* Tüm kartı tıklanabilir yapan kaplama bağlantı */
.kart-baglanti { color: inherit; text-decoration: none; }
.kart-baglanti::after { content: ""; position: absolute; inset: 0; }
.kart--tiklanabilir { position: relative; }
.kart--tiklanabilir:hover .kart-baslik { color: var(--vurgu-metin); }
/* --- Hizmet kartı --- */
.kart--hizmet { gap: 0; padding-top: 0; border-top: 0; position: relative; }
.kart--hizmet .medya { margin-bottom: var(--a3); }
.kart--hizmet .numara { margin-bottom: var(--a2); }
.kart--hizmet .kart-baslik { font-size: var(--t-2); font-weight: var(--ag-kalin); letter-spacing: -.02em; margin-bottom: var(--a2); transition: color var(--gecis); }
.kart--hizmet .kart-metin { margin-bottom: var(--a3); }
.kart--hizmet img { transition: none; }
/* --- Bölge kartı: sıkı, listelenebilir --- */
.kart--bolge { gap: var(--a1); padding: var(--a3) 0; border-top: 1px solid var(--cizgi-yerel); position: relative; transition: background-color var(--gecis), color var(--gecis); }
.kart--bolge .kart-baslik { font-size: var(--t-govde); font-weight: var(--ag-yari); letter-spacing: 0; }
.kart--bolge .kucuk { color: var(--metin-sonuk); }
.kart--bolge:hover { background: var(--cta-zemin); color: var(--cta-metin); padding-inline: var(--a2); }
.kart--bolge:hover .kart-baslik,
.kart--bolge:hover .kucuk { color: var(--cta-metin); }
/* Kart ızgarası */
.kart-listesi { display: grid; grid-template-columns: 1fr; gap: var(--bosluk); }
@media (min-width: 600px) {
.kart-listesi { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.kart-listesi--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.kart-listesi--4 { grid-template-columns: repeat(4, 1fr); }
}
/* --------------------------------------------------------------------------
07.5 — Rozet
-------------------------------------------------------------------------- */
.rozet {
display: inline-flex;
align-items: center;
gap: var(--a1);
min-height: 28px;
padding: 0 10px;
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1;
border: 1px solid var(--cizgi-dugme);
border-radius: 0;
color: var(--metin);
background: transparent;
}
.rozet--dolu { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
/* Şeftali burada ZEMİN, metin siyah — kural ihlali değil */
.rozet--ten { background: var(--ten); color: var(--murekkep); border-color: var(--ten); }
.rozet--sinirsiz { border-color: transparent; padding-inline: 0; color: var(--metin-sonuk); }
/* --------------------------------------------------------------------------
07.6 — Akordeon (S.S.S.)
/ ve düğme tabanlı iki kurulumu da destekler.
-------------------------------------------------------------------------- */
.akordeon { border-top: 1px solid var(--cizgi-yerel); }
.akordeon:last-of-type { border-bottom: 1px solid var(--cizgi-yerel); }
.akordeon-baslik {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--a3);
width: 100%;
min-height: 64px;
padding: var(--a3) 0;
font-family: var(--font);
font-size: var(--t-3);
font-weight: var(--ag-yari);
letter-spacing: -.01em;
line-height: 1.3;
text-align: left;
color: var(--baslik-renk);
background: transparent;
border: 0;
cursor: pointer;
list-style: none;
transition: color var(--gecis);
}
/* varsayılan üçgenini kaldır */
.akordeon-baslik::-webkit-details-marker { display: none; }
.akordeon-baslik::marker { content: ""; }
.akordeon-baslik:hover { color: var(--vurgu-metin); }
/* Artı/eksi göstergesi — iki ince çizgi */
.akordeon-baslik::after {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
margin-top: 6px;
background:
linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
transition: transform var(--gecis);
}
.akordeon[open] > .akordeon-baslik::after,
.akordeon-baslik[aria-expanded="true"]::after {
background:
linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat;
}
.akordeon-govde { padding: 0 0 var(--a4); max-width: 68ch; }
.akordeon-govde > * + * { margin-top: var(--a2); }
.akordeon-govde p { font-size: var(--t-govde); line-height: 1.65; color: var(--metin-yumusak); margin: 0; }
/* JS ile açılıp kapanan kurulum: gövde gizli, JS yoksa görünür */
.js .akordeon-govde[hidden] { display: none; }
/* --------------------------------------------------------------------------
07.7 — Sürgü (önce / sonra karşılaştırma)
input[type=range] tabanlı: klavyeyle ok tuşları doğrudan çalışır.
-------------------------------------------------------------------------- */
.surgu {
position: relative;
overflow: hidden;
background: var(--gri-10);
aspect-ratio: 4 / 3;
touch-action: pan-y;
user-select: none;
--surgu-konum: 50%;
}
.surgu-kat { position: absolute; inset: 0; }
.surgu-kat img { width: 100%; height: 100%; object-fit: cover; }
/* Üst kat, sürgü konumuna göre kırpılır */
.surgu-kat--ust { clip-path: inset(0 calc(100% - var(--surgu-konum)) 0 0); }
.surgu-cizgi {
position: absolute;
top: 0;
bottom: 0;
left: var(--surgu-konum);
width: 2px;
margin-left: -1px;
background: var(--beyaz);
pointer-events: none;
z-index: 2;
}
.surgu-kol {
position: absolute;
top: 50%;
left: var(--surgu-konum);
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
z-index: 3;
background: var(--beyaz);
border: 2px solid var(--murekkep);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
color: var(--murekkep);
font-size: var(--t-kucuk);
font-weight: var(--ag-kalin);
}
/* Gerçek denetim: görünmez ama tam kaplar, klavye ve dokunma buradan gelir */
.surgu-girdi {
position: absolute;
inset: 0;
z-index: 4;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
appearance: none;
-webkit-appearance: none;
cursor: ew-resize;
}
.surgu-girdi::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.surgu-girdi::-moz-range-track { height: 100%; background: transparent; border: 0; }
.surgu-girdi::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 48px;
height: 48px;
background: transparent;
border: 0;
cursor: ew-resize;
}
.surgu-girdi::-moz-range-thumb { width: 48px; height: 48px; background: transparent; border: 0; cursor: ew-resize; }
/* Klavye odağı sürgünün kendisinde görünür olsun */
.surgu-girdi:focus-visible { outline: 3px solid var(--murekkep); outline-offset: -3px; }
.surgu-girdi:focus-visible ~ .surgu-kol { background: var(--ten); }
/* Önce / sonra etiketleri — köşelerde, siyah zemin beyaz metin */
.surgu-etiket {
position: absolute;
bottom: var(--a2);
z-index: 2;
padding: 6px 10px;
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
background: var(--murekkep);
color: var(--beyaz);
pointer-events: none;
}
.surgu-etiket--sol { left: var(--a2); }
.surgu-etiket--sag { right: var(--a2); }
@media (min-width: 900px) {
.surgu { aspect-ratio: 3 / 2; }
}
/* --------------------------------------------------------------------------
07.8 — Uyarı kutuları
Renk tek başına bilgi taşımaz: her uyarıda metin öneki de vardır.
-------------------------------------------------------------------------- */
.uyari {
display: flex;
align-items: flex-start;
gap: var(--a2);
padding: var(--a3);
border: 1px solid var(--cizgi-yerel);
border-left: 4px solid var(--metin);
background: var(--kart-zemin);
color: var(--metin);
font-size: var(--t-kucuk);
line-height: 1.6;
}
.uyari p { margin: 0; }
.uyari p + p { margin-top: var(--a1); }
.uyari-baslik { display: block; font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--a1); }
.uyari--bilgi { border-left-color: var(--kahve); background: var(--kahve-sis); color: var(--kahve); }
.uyari--basari { border-left-color: var(--basari); background: var(--beyaz); color: var(--basari); }
.uyari--hata { border-left-color: var(--hata); background: var(--beyaz); color: var(--hata); }
.uyari--bilgi .uyari-baslik,
.uyari--basari .uyari-baslik,
.uyari--hata .uyari-baslik { color: inherit; }
/* --------------------------------------------------------------------------
07.9 — Alt bilgi
-------------------------------------------------------------------------- */
.altbilgi {
--zemin: var(--murekkep);
--metin: var(--beyaz);
--metin-yumusak: var(--gri-30);
--metin-sonuk: var(--gri-50-koyu);
--baslik-renk: var(--beyaz);
--vurgu-metin: var(--ten);
--cizgi-yerel: var(--cizgi-koyu);
--odak: var(--ten);
--cta-zemin: var(--ten);
--cta-metin: var(--murekkep);
--cta-zemin-uzeri: var(--beyaz);
--cta-metin-uzeri: var(--murekkep);
--cizgi-dugme: var(--beyaz);
background: var(--zemin);
color: var(--metin);
padding-block: var(--a8) var(--a5);
margin-top: auto;
}
.altbilgi a { color: var(--metin-yumusak); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--gecis), border-color var(--gecis); }
.altbilgi a:hover { color: var(--ten); border-bottom-color: currentColor; }
.altbilgi .bl-1 { fill: var(--beyaz); }
.altbilgi .bl-2 { fill: var(--ten); }
.altbilgi-logo svg { height: 44px; width: auto; }
.altbilgi-baslik {
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
text-transform: uppercase;
/* Koyu zeminde --gri-50 yalnız 3.8:1. Koyu bağlam tonu 8.6:1 verir. */
color: var(--gri-50-koyu);
margin: 0 0 var(--a3);
padding-bottom: var(--a2);
border-bottom: 1px solid var(--cizgi-koyu);
}
.altbilgi-liste { display: flex; flex-direction: column; gap: var(--a2); list-style: none; margin: 0; padding: 0; }
.altbilgi-liste a { display: inline-flex; align-items: center; min-height: var(--dokunma); }
.altbilgi-alt {
margin-top: var(--a8);
padding-top: var(--a3);
border-top: 1px solid var(--cizgi-koyu);
display: flex;
flex-wrap: wrap;
gap: var(--a2) var(--a4);
justify-content: space-between;
align-items: center;
font-size: var(--t-kucuk);
color: var(--gri-50-koyu); /* koyu zemin: 8.6:1 */
}
/* --------------------------------------------------------------------------
07.10 — Kahraman bölümü (anasayfa açılışı)
-------------------------------------------------------------------------- */
.kahraman { position: relative; display: flex; align-items: flex-end; min-height: 78vh; padding-block: var(--a9) var(--a7); overflow: hidden; }
.kahraman-gorsel { position: absolute; inset: 0; z-index: 0; }
.kahraman-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kahraman-gorsel::after {
content: "";
position: absolute;
inset: 0;
/* Okunabilirlik perdesi — izin verilen tek gradient kullanımı */
background: linear-gradient(180deg, rgba(3, 4, 4, .55) 0%, rgba(3, 4, 4, .25) 45%, rgba(3, 4, 4, .78) 100%);
}
.kahraman-ic {
position: relative;
z-index: 1;
width: 100%;
color: var(--beyaz);
--metin: var(--beyaz);
--metin-yumusak: var(--gri-30);
--baslik-renk: var(--beyaz);
--vurgu-metin: var(--ten);
--cizgi-yerel: var(--cizgi-koyu);
--odak: var(--ten);
--cta-zemin: var(--ten);
--cta-metin: var(--murekkep);
--cta-zemin-uzeri: var(--beyaz);
--cta-metin-uzeri: var(--murekkep);
--ikincil-zemin: var(--beyaz);
--ikincil-metin: var(--murekkep);
--cizgi-dugme: var(--beyaz);
}
@media (min-width: 900px) {
.kahraman { min-height: 88vh; }
}
/* --------------------------------------------------------------------------
07.11 — Adım listesi (uygulama süreci)
-------------------------------------------------------------------------- */
.adimlar {
counter-reset: adim;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.adim {
counter-increment: adim;
border-top: 1px solid var(--cizgi-yerel);
padding: var(--a4) 0;
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--a3);
align-items: start;
}
.adim:last-child { border-bottom: 1px solid var(--cizgi-yerel); }
.adim::before { content: counter(adim, decimal-leading-zero); font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; color: var(--vurgu-metin); line-height: 1.8; }
.adim-baslik { font-size: var(--t-3); font-weight: var(--ag-yari); letter-spacing: -.01em; color: var(--baslik-renk); margin: 0 0 var(--a1); }
.adim-metin { color: var(--metin-yumusak); margin: 0; max-width: 62ch; }
@media (min-width: 900px) {
.adim { grid-template-columns: 96px 1fr 1fr; gap: var(--bosluk); align-items: baseline; }
.adim-metin { grid-column: 3; }
.adim-baslik { margin-bottom: 0; }
}
/* --------------------------------------------------------------------------
07.12 — Bilgi listesi (künye, iletişim, teknik ayrıntı)
-------------------------------------------------------------------------- */
.bilgi-listesi { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.bilgi-satir { display: grid; grid-template-columns: 1fr; gap: var(--a1); padding: var(--a3) 0; border-top: 1px solid var(--cizgi-yerel); }
.bilgi-satir:last-child { border-bottom: 1px solid var(--cizgi-yerel); }
.bilgi-etiket { font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-sonuk); }
.bilgi-deger { font-size: var(--t-govde); color: var(--metin); margin: 0; }
@media (min-width: 600px) {
.bilgi-satir { grid-template-columns: 200px 1fr; gap: var(--bosluk); align-items: baseline; }
}
/* --------------------------------------------------------------------------
07.13 — Galeri
-------------------------------------------------------------------------- */
.galeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a1); }
@media (min-width: 600px) {
.galeri { grid-template-columns: repeat(3, 1fr); gap: var(--a2); }
}
@media (min-width: 1200px) {
.galeri { grid-template-columns: repeat(4, 1fr); }
}
.galeri-oge { position: relative; display: block; background: var(--gri-10); overflow: hidden; }
.galeri-oge img { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
/* Vurgulanan büyük kare — Swiss'te ritmi bozan kasıtlı öğe */
.galeri-oge--genis { grid-column: span 2; }
.galeri-oge--uzun img { aspect-ratio: 3 / 4; }
/* --------------------------------------------------------------------------
07.14 — Yan sütun / yapışkan blok
-------------------------------------------------------------------------- */
.yan-yapiskan { position: static; }
@media (min-width: 900px) {
.yan-yapiskan { position: sticky; top: calc(var(--ustbar-y) + var(--a3)); }
}
/* --------------------------------------------------------------------------
07.15 — Tablo (hukuki sayfalar, fiyatsız bilgi tabloları)
-------------------------------------------------------------------------- */
.tablo { width: 100%; border-collapse: collapse; font-size: var(--t-kucuk); }
.tablo th,
.tablo td { text-align: left; padding: var(--a2) var(--a2) var(--a2) 0; border-bottom: 1px solid var(--cizgi-yerel); vertical-align: top; }
.tablo th { font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-sonuk); border-bottom-color: var(--metin); }
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ==========================================================================
08 — TAKVİM
Projenin en kritik bileşeni.
Renk tek başına bilgi taşımaz: her slotta durum metni de vardır (.slot-durum).
Dokunma hedefi ≥44px. Dolu slot solmaz, okunurluğu korunur.
========================================================================== */
.takvim { display: flex; flex-direction: column; gap: var(--a4); border-top: 1px solid var(--cizgi-yerel); padding-top: var(--a4); }
/* --- Ay başlığı ve gezinme --- */
.takvim-ay { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); margin-bottom: var(--a3); }
.takvim-ay-ad { font-size: var(--t-3); font-weight: var(--ag-yari); letter-spacing: -.01em; color: var(--baslik-renk); margin: 0; }
.takvim-ay-dugme {
width: var(--dokunma);
height: var(--dokunma);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--cizgi-dugme);
background: transparent;
color: var(--metin);
font-size: 1rem;
line-height: 1;
transition: background-color var(--gecis), color var(--gecis);
}
.takvim-ay-dugme:hover:not(:disabled) { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
.takvim-ay-dugme:disabled { color: var(--gri-50); border-color: var(--gri-30); cursor: not-allowed; }
/* --- Gün ızgarası --- */
.takvim-hafta { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--a1); }
.takvim-hafta-gun {
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .1em;
text-transform: uppercase;
text-align: center;
color: var(--metin-sonuk);
padding-bottom: var(--a1);
}
.takvim-gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Gün hücresi — 44x44 dokunma hedefi */
.takvim-gun {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: var(--dokunma);
min-height: var(--dokunma);
padding: 4px;
font-family: var(--font);
font-size: var(--t-kucuk);
font-weight: var(--ag-orta);
font-variant-numeric: tabular-nums;
line-height: 1;
background: var(--girdi-zemin);
color: var(--metin);
border: 1px solid var(--cizgi-yerel);
border-radius: 0;
cursor: pointer;
transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.takvim-gun:hover:not(:disabled) { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }
/* Müsaitlik göstergesi — nokta değil, sayı: renk tek başına bilgi taşımasın */
.takvim-gun-sayi { font-size: 10px; font-weight: var(--ag-yari); letter-spacing: .04em; color: var(--kahve); }
.takvim-gun:hover:not(:disabled) .takvim-gun-sayi { color: var(--ten); }
/* Dolu gün: müsait slot kalmamış */
.takvim-gun--dolu { background: var(--gri-20); color: var(--gri-90); border-color: var(--gri-30); cursor: not-allowed; }
.takvim-gun--dolu:hover { background: var(--gri-20); color: var(--gri-90); border-color: var(--gri-30); }
.takvim-gun--dolu .takvim-gun-sayi { color: var(--gri-90); }
/* Kapalı gün: çalışma planında yok */
.takvim-gun--kapali {
background: transparent;
color: var(--gri-50);
border-color: transparent;
border-bottom: 1px solid var(--gri-30);
cursor: not-allowed;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.takvim-gun--kapali:hover { background: transparent; color: var(--gri-50); }
/* Seçili gün: şeftali zemin + siyah metin + siyah kenarlık */
.takvim-gun--secili,
.takvim-gun[aria-pressed="true"] { background: var(--ten); color: var(--murekkep); border: 2px solid var(--murekkep); font-weight: var(--ag-kalin); }
.takvim-gun--secili .takvim-gun-sayi,
.takvim-gun[aria-pressed="true"] .takvim-gun-sayi { color: var(--kahve); }
.takvim-gun--secili:hover,
.takvim-gun[aria-pressed="true"]:hover { background: var(--ten); color: var(--murekkep); border-color: var(--murekkep); }
/* Bugün: alt kenarda kalın işaret */
.takvim-gun--bugun::after {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
width: 12px;
height: 2px;
margin-left: -6px;
background: currentColor;
}
/* --- Saat slotları --- */
.slotlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--a1); margin: 0; padding: 0; list-style: none; }
.slotlar li { margin: 0; }
.slot {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
width: 100%;
min-width: 88px;
min-height: 56px; /* ≥44px dokunma hedefi, ferah */
padding: var(--a1) 10px;
font-family: var(--font);
text-align: left;
line-height: 1.1;
background: var(--girdi-zemin);
color: var(--metin);
border: 1px solid var(--cizgi-yerel);
border-radius: 0;
cursor: pointer;
transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.slot-saat { font-size: var(--t-govde); font-weight: var(--ag-kalin); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
/* Durum metni — renk tek başına bilgi taşımasın diye zorunlu */
.slot-durum { font-size: 11px; font-weight: var(--ag-yari); letter-spacing: .1em; text-transform: uppercase; line-height: 1; opacity: 1; }
/* Baş harf etiketi (yalnız durum='dolu' + açık rıza varsa) */
.slot-etiket { font-size: 11px; font-weight: var(--ag-orta); letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: inherit; }
/* --- Müsait: koyu zemin, beyaz metin. 19.4:1 — tıklanabilirliği açık. --- */
.slot--musait { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }
.slot--musait:hover,
.slot--musait:focus-visible { background: var(--ten); color: var(--murekkep); border-color: var(--murekkep); }
/* --- Seçili: şeftali zemin, siyah metin, 2px siyah kenarlık --- */
.slot--secili,
.slot[aria-pressed="true"] {
background: var(--ten);
color: var(--murekkep);
border: 2px solid var(--murekkep);
padding: calc(var(--a1) - 1px) 9px; /* 2px kenarlığın yer değiştirmesini dengeler */
}
.slot--secili .slot-durum,
.slot[aria-pressed="true"] .slot-durum { color: var(--kahve); }
.slot--secili:hover,
.slot[aria-pressed="true"]:hover { background: var(--ten); color: var(--murekkep); }
/* --- Dolu: çapraz ince tarama. Opaklık DÜŞÜRÜLMEZ, okunurluk korunur. --- */
.slot--dolu {
background:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 5px,
var(--tarama) 5px,
var(--tarama) 6px
),
var(--gri-20);
color: var(--gri-90);
border-color: var(--gri-30);
cursor: not-allowed;
opacity: 1;
}
.slot--dolu:hover {
background:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 5px,
var(--tarama) 5px,
var(--tarama) 6px
),
var(--gri-20);
color: var(--gri-90);
border-color: var(--gri-30);
}
.slot--dolu .slot-saat { text-decoration: line-through; text-decoration-thickness: 1px; }
/* --- Kilitli: 15 dakikalık geçici ayırma. Kesikli kenarlık = geçicilik. --- */
.slot--kilitli { background: var(--ten-sis); color: var(--kahve); border: 1px dashed var(--kahve-orta); cursor: not-allowed; }
.slot--kilitli:hover { background: var(--ten-sis); color: var(--kahve); }
.slot--kilitli .slot-durum { font-weight: var(--ag-kalin); }
/* --- Geçmiş: sönük, tıklanamaz --- */
.slot--gecmis { background: transparent; color: var(--gri-50); border-color: var(--gri-30); border-style: solid; cursor: not-allowed; }
.slot--gecmis:hover { background: transparent; color: var(--gri-50); }
.slot--gecmis .slot-saat { font-weight: var(--ag-normal); }
/* Devre dışı slotlar tıklamayı da yemesin */
.slot:disabled,
.slot[aria-disabled="true"] { cursor: not-allowed; }
/* Slot listesi boşsa */
.slotlar-bos { padding: var(--a5) 0; border-top: 1px solid var(--cizgi-yerel); border-bottom: 1px solid var(--cizgi-yerel); color: var(--metin-sonuk); font-size: var(--t-govde); }
/* Takvim gösterge anahtarı (lejant) */
.takvim-anahtar {
display: flex;
flex-wrap: wrap;
gap: var(--a2) var(--a4);
padding-top: var(--a3);
border-top: 1px solid var(--cizgi-yerel);
font-size: var(--t-kucuk);
color: var(--metin-yumusak);
}
.takvim-anahtar-oge { display: inline-flex; align-items: center; gap: var(--a1); }
.takvim-anahtar-kutu { width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid var(--cizgi-yerel); }
.takvim-anahtar-kutu--musait { background: var(--murekkep); border-color: var(--murekkep); }
.takvim-anahtar-kutu--dolu {
background:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 5px,
var(--tarama) 5px,
var(--tarama) 6px
),
var(--gri-20);
border-color: var(--gri-30);
}
.takvim-anahtar-kutu--kilitli { background: var(--ten-sis); border: 1px dashed var(--kahve-orta); }
.takvim-anahtar-kutu--secili { background: var(--ten); border: 2px solid var(--murekkep); }
/* Konum / hizmet seçim şeridi */
.takvim-secim { display: flex; flex-wrap: wrap; gap: var(--a1); margin-bottom: var(--a4); }
.takvim-secim-dugme {
min-height: var(--dokunma);
padding: 0 var(--a3);
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
text-transform: uppercase;
background: transparent;
color: var(--metin);
border: 1px solid var(--cizgi-dugme);
transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.takvim-secim-dugme:hover { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
.takvim-secim-dugme[aria-pressed="true"] { background: var(--murekkep); color: var(--beyaz); border-color: var(--murekkep); }
/* Yükleniyor durumu — animasyonsuz, yalnız metin */
.takvim-yukleniyor { padding: var(--a5) 0; font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-sonuk); }
@media (min-width: 600px) {
.slotlar { gap: var(--a2); }
.slot { min-height: 64px; }
}
@media (min-width: 900px) {
.takvim { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: calc(var(--bosluk) * 2); align-items: start; }
.takvim-gun { min-height: 52px; }
}
/* ==========================================================================
09 — FORM
Etiketler üstte (--t-etiket). Girdi 52px, 1px kenarlık, 0 yarıçap.
Odakta 2px mürekkep kenarlık — outline: inset ile yer değiştirme olmadan.
========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--a4); max-width: 640px; }
.form-alan { display: flex; flex-direction: column; gap: var(--a1); }
.form-etiket { font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--metin-yumusak); }
/* Zorunlu alan işareti */
.form-etiket .zorunlu { color: var(--hata); font-weight: var(--ag-kalin); }
.form-ipucu { font-size: var(--t-kucuk); line-height: 1.5; color: var(--metin-sonuk); }
.form-girdi {
width: 100%;
min-height: var(--girdi-y);
padding: 0 var(--a2);
font-family: var(--font);
font-size: var(--t-govde);
font-weight: var(--ag-normal);
line-height: 1.4;
color: var(--murekkep);
background: var(--beyaz);
border: 1px solid var(--gri-50);
border-radius: 0;
appearance: none;
-webkit-appearance: none;
transition: border-color var(--gecis), background-color var(--gecis);
}
textarea.form-girdi { min-height: 140px; padding: var(--a2); line-height: 1.6; resize: vertical; }
select.form-girdi {
/* Ok işareti saf CSS, dış görsel yok */
background-image:
linear-gradient(45deg, transparent 50%, var(--murekkep) 50%),
linear-gradient(135deg, var(--murekkep) 50%, transparent 50%);
background-position:
calc(100% - 20px) calc(50% + 2px),
calc(100% - 14px) calc(50% + 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: var(--a6);
cursor: pointer;
}
.form-girdi::placeholder { color: var(--gri-50); opacity: 1; }
.form-girdi:hover { border-color: var(--gri-90); }
/* Odak: görsel olarak 2px mürekkep kenarlık, yerleşim kaymadan */
.form-girdi:focus { border-color: var(--murekkep); outline: 2px solid var(--murekkep); outline-offset: -2px; }
.form-girdi:focus-visible { outline: 2px solid var(--murekkep); outline-offset: -2px; }
.form-girdi:disabled,
.form-girdi[readonly] { background: var(--gri-10); color: var(--gri-90); border-color: var(--gri-30); cursor: not-allowed; }
/* Hatalı alan */
.form-girdi[aria-invalid="true"],
.form-alan--hatali .form-girdi { border-color: var(--hata); border-width: 2px; padding-inline: calc(var(--a2) - 1px); }
/* Hata metni — kırmızıya boğulmaz, kahve + kalın + metin öneki.
Erişilebilir kırmızı yalnız kenarlıkta ve önek işaretinde kullanılır. */
.form-hata {
display: flex;
align-items: flex-start;
gap: var(--a1);
font-size: var(--t-kucuk);
font-weight: var(--ag-kalin);
line-height: 1.5;
color: var(--kahve);
margin: 0;
}
.form-hata::before {
content: "!";
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-top: 2px;
font-size: 12px;
font-weight: var(--ag-siyah);
line-height: 1;
background: var(--hata);
color: var(--beyaz);
}
/* Onay kutusu — 24x24 kutu, 44px tıklama alanı */
.form-onay {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--a2);
align-items: start;
min-height: var(--dokunma);
padding: 10px 0;
cursor: pointer;
font-size: var(--t-kucuk);
line-height: 1.55;
color: var(--metin-yumusak);
}
.form-onay input[type="checkbox"],
.form-onay input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
margin: 0;
background: var(--beyaz);
border: 1px solid var(--murekkep);
border-radius: 0;
cursor: pointer;
display: grid;
place-content: center;
flex: 0 0 auto;
transition: background-color var(--gecis), border-color var(--gecis);
}
.form-onay input[type="radio"] { border-radius: 50%; }
/* İşaret — saf CSS onay çengeli */
.form-onay input[type="checkbox"]::before {
content: "";
width: 12px;
height: 7px;
border-left: 2px solid var(--beyaz);
border-bottom: 2px solid var(--beyaz);
transform: rotate(-45deg) translate(1px, -2px);
opacity: 0;
}
.form-onay input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--beyaz); opacity: 0; }
.form-onay input:checked { background: var(--murekkep); border-color: var(--murekkep); }
.form-onay input:checked::before { opacity: 1; }
.form-onay input:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; }
.form-onay a { color: var(--kahve); text-decoration: underline; text-underline-offset: .18em; }
/* KVKK / baş harf onayı gibi ayrı ağırlıklı kutular */
.form-onay--cerceveli { border: 1px solid var(--cizgi-yerel); padding: var(--a3); background: var(--kart-zemin); }
/* Yan yana alanlar */
.form-ikili { display: grid; grid-template-columns: 1fr; gap: var(--a3); }
@media (min-width: 600px) {
.form-ikili { grid-template-columns: 1fr 1fr; gap: var(--bosluk); }
}
/* Alan kümesi başlığı */
.form-kume { display: flex; flex-direction: column; gap: var(--a3); padding-top: var(--a4); border-top: 1px solid var(--cizgi-yerel); }
.form-kume-baslik { font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu-metin); margin: 0; }
/* Bal küpü alanı — bot tuzağı, ekranda ve okuyucuda yok */
.form-kupu { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
/* Gönder satırı */
.form-gonder { display: flex; flex-direction: column; gap: var(--a2); padding-top: var(--a2); }
@media (min-width: 600px) {
.form-gonder { flex-direction: row; align-items: center; gap: var(--a3); }
}
/* Otomatik doldurma rengi tarayıcı mavisine kaçmasın */
.form-girdi:-webkit-autofill,
.form-girdi:-webkit-autofill:hover,
.form-girdi:-webkit-autofill:focus { -webkit-text-fill-color: var(--murekkep); box-shadow: 0 0 0 1000px var(--beyaz) inset; }
/* Özet kutusu (ödeme adımı) */
.ozet { border-top: 2px solid var(--metin); padding-top: var(--a3); display: flex; flex-direction: column; gap: var(--a2); }
.ozet-satir { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a3); padding-bottom: var(--a2); border-bottom: 1px solid var(--cizgi-yerel); }
.ozet-etiket { font-size: var(--t-etiket); font-weight: var(--ag-yari); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-sonuk); }
.ozet-deger { font-size: var(--t-govde); font-weight: var(--ag-yari); font-variant-numeric: tabular-nums; text-align: right; color: var(--metin); }
.ozet-satir--toplam .ozet-deger { font-size: var(--t-2); font-weight: var(--ag-kalin); letter-spacing: -.02em; }
.ozet-satir--toplam { border-bottom: 0; }
/* ==========================================================================
10 — YARDIMCILAR
========================================================================== */
/* Yalnız ekran okuyucu için */
.gizli-gorsel,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Odaklanınca görünür olan atlama bağlantısı */
.atla {
position: absolute;
top: 0;
left: 0;
z-index: 200;
transform: translateY(-120%);
padding: var(--a2) var(--a3);
background: var(--murekkep);
color: var(--beyaz);
font-size: var(--t-etiket);
font-weight: var(--ag-yari);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
}
.atla:focus { transform: translateY(0); }
/* Hizalama */
.orta { text-align: center; }
.sola { text-align: left; }
.saga { text-align: right; }
.orta-blok { margin-inline: auto; }
/* Boşluk yardımcıları — 8px ızgarasına bağlı */
.ust-0 { margin-top: 0; }
.ust-1 { margin-top: var(--a1); }
.ust-2 { margin-top: var(--a2); }
.ust-3 { margin-top: var(--a3); }
.ust-4 { margin-top: var(--a4); }
.ust-5 { margin-top: var(--a5); }
.ust-6 { margin-top: var(--a6); }
.ust-7 { margin-top: var(--a7); }
.ust-8 { margin-top: var(--a8); }
.alt-0 { margin-bottom: 0; }
.alt-1 { margin-bottom: var(--a1); }
.alt-2 { margin-bottom: var(--a2); }
.alt-3 { margin-bottom: var(--a3); }
.alt-4 { margin-bottom: var(--a4); }
.alt-5 { margin-bottom: var(--a5); }
.alt-6 { margin-bottom: var(--a6); }
.alt-7 { margin-bottom: var(--a7); }
.alt-8 { margin-bottom: var(--a8); }
/* Metin genişliği sınırı — Swiss'te satır 45-75 karakter */
.dar-metin { max-width: 46ch; }
.orta-metin { max-width: 62ch; }
.genis-metin{ max-width: 76ch; }
/* Görünürlük */
.mobilde-gizli { display: none; }
@media (min-width: 900px) {
.mobilde-gizli { display: revert; }
.masaustunde-gizli { display: none; }
}
/* Tam kanayan blok (ızgara dışına taşan renk alanı) */
.tam-kan { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
/* Yalın liste */
.liste-yalin { list-style: none; margin: 0; padding: 0; }
.liste-yalin > li + li { margin-top: var(--a1); }
/* İşaretli liste — çizgi imli, Swiss */
.liste-cizgi { list-style: none; margin: 0; padding: 0; }
.liste-cizgi > li { position: relative; padding-left: 24px; margin-bottom: var(--a2); color: var(--metin-yumusak); }
.liste-cizgi > li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: 12px;
height: 1px;
background: var(--vurgu-metin);
}
/* Etiket bulutu (ilçe listeleri, mahalle adları) */
.etiket-bulutu { display: flex; flex-wrap: wrap; gap: var(--a1); list-style: none; margin: 0; padding: 0; }
.etiket-bulutu a,
.etiket-bulutu span {
display: inline-flex;
align-items: center;
/* Sözleşme 9: dokunma hedefi en az 44px */
min-height: var(--dokunma);
padding: 0 12px;
font-size: var(--t-kucuk);
text-decoration: none;
color: var(--metin-yumusak);
border: 1px solid var(--cizgi-yerel);
transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.etiket-bulutu a:hover { background: var(--cta-zemin); color: var(--cta-metin); border-color: var(--cta-zemin); }
/* Telefon/WhatsApp gibi hızlı temas satırı */
.temas-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4); }
.temas-oge {
display: inline-flex;
align-items: center;
gap: var(--a1);
min-height: var(--dokunma);
text-decoration: none;
color: var(--metin);
font-weight: var(--ag-yari);
}
.temas-oge:hover { color: var(--vurgu-metin); }
/* Yapışkan mobil eylem çubuğu (randevu sayfası) */
.mobil-eylem {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 50;
display: flex;
gap: 1px;
padding: 0;
background: var(--murekkep);
border-top: 1px solid var(--cizgi-koyu);
}
.mobil-eylem .dugme { flex: 1 1 0; min-height: 56px; border-radius: 0; }
@media (min-width: 900px) {
.mobil-eylem { display: none; }
}
/* Sayfa alt boşluğu, yapışkan çubuk içeriği kapatmasın */
@media (max-width: 899.98px) {
body.mobil-eylem-var .sayfa-icerik { padding-bottom: 72px; }
}
/* ==========================================================================
11 — HAREKET
Tüm animasyonlar body.js sınıfına bağlıdır.
JS yoksa (body.js-yok) her şey ilk halinde ve tam görünürdür.
========================================================================== */
/* Varsayılan: görünür. Gizleme yalnız .js altında yapılır. */
.ac-gir { opacity: 1; transform: none; }
.js .ac-gir { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease-out, transform 420ms ease-out; }
.js .ac-gir.gorunur { opacity: 1; transform: none; }
/* Gecikmeli sıralı giriş */
.js .ac-gir--g1 { transition-delay: 60ms; }
.js .ac-gir--g2 { transition-delay: 120ms; }
.js .ac-gir--g3 { transition-delay: 180ms; }
.js .ac-gir--g4 { transition-delay: 240ms; }
/* Çizginin soldan açılması (ayraç girişi) */
.ac-cizgi { transform: none; }
.js .ac-cizgi { transform: scaleX(0); transform-origin: left center; transition: transform 520ms ease-out; }
.js .ac-cizgi.gorunur { transform: scaleX(1); }
/* Sayfa geçişinde içerik yerinde kalsın diye body.js-yok görünür bırakılır */
body.js-yok .ac-gir,
body.js-yok .ac-cizgi { opacity: 1; transform: none; }
/* ==========================================================================
12 — BASKI
Mürekkep tasarrufu: koyu zemin yok, bağlantı URL'leri basılmaz,
menü ve eylem düğmeleri gizlenir.
========================================================================== */
@media print {
@page { margin: 16mm; }
:root {
--zemin: #FFFFFF;
--metin: #000000;
--metin-yumusak: #000000;
--metin-sonuk: #333132;
--baslik-renk: #000000;
--vurgu-metin: #000000;
--cizgi-yerel: #999999;
}
html,
body { background: #FFFFFF !important; color: #000000 !important; font-size: 11pt; line-height: 1.45; }
/* Hiçbir bölüm koyu basılmaz */
.bolum,
.bolum--acik,
.bolum--kum,
.bolum--koyu,
.bolum--kahve,
.bolum--ten,
.bolum--sis,
.bolum--gri,
.altbilgi,
.kart,
.kart--dolgulu,
.kahraman-ic,
.uyari { background: #FFFFFF !important; color: #000000 !important; padding-block: 0 !important; }
.bolum + .bolum { margin-top: 8mm; }
h1, h2, h3,
.dev, .b1, .b2, .b3,
.kart-baslik, .adim-baslik { color: #000000 !important; page-break-after: avoid; break-after: avoid; }
.dev,
.dev--bos { font-size: 28pt !important; color: #000000 !important; -webkit-text-stroke: 0 !important; }
.b1 { font-size: 20pt !important; }
.b2 { font-size: 16pt !important; }
.b3 { font-size: 13pt !important; }
/* Ekranla ilgili her şey basılmaz */
.ustbar,
.menu,
.menu-ac,
.menu-kapat,
.atla,
.dugme,
.dugme-grup,
.mobil-eylem,
.takvim,
.slotlar,
.takvim-anahtar,
.takvim-secim,
.surgu,
.form-gonder,
.galeri,
.kirinti,
video,
.medya--perde::after,
.kahraman-gorsel::after { display: none !important; }
/* Bağlantı URL'leri gösterilmez (sözleşme dışı gürültü olmasın) */
a,
a:visited { color: #000000 !important; text-decoration: none !important; }
a[href]::after { content: "" !important; }
/* Görseller sayfa ortasında bölünmesin */
img,
.medya,
.kart { page-break-inside: avoid; break-inside: avoid; }
.medya { max-height: 90mm; }
.ayrac,
.kart,
.adim,
.bilgi-satir,
.akordeon { border-color: #999999 !important; }
/* Akordeonlar açık basılır */
.akordeon-govde { display: block !important; }
.akordeon-baslik::after { display: none !important; }
/* Sayfa kimliği basılı çıktının üstünde kalsın */
.baski-basligi { display: block !important; font-size: 9pt; color: #333132 !important; margin-bottom: 6mm; }
}
/* Baskı başlığı ekranda görünmez */
.baski-basligi { display: none; }
/* ==========================================================================
13 — HAREKET AZALTMA
Kullanıcı azaltılmış hareket istiyorsa hiçbir geçiş ve animasyon çalışmaz.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
html { scroll-behavior: auto; }
.js .ac-gir,
.js .ac-cizgi { opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
14 — KIRILMA NOKTASI İNCE AYARLARI
600 / 900 / 1200 / 1440
========================================================================== */
/* --- 600px: iki sütuna geçiş noktası --- */
@media (min-width: 600px) {
.bolum { padding-block: var(--bolum-bosluk); }
.kirinti { margin-bottom: var(--a6); }
}
/* --- 900px: masaüstü yerleşimi --- */
@media (min-width: 900px) {
html { scroll-padding-top: 104px; }
.ustbaslik { margin-bottom: var(--a8); }
.ustbar__ic { min-height: 88px; }
.medya-yazi { padding: var(--a6); }
/* Asimetrik yerleşim burada anlam kazanır (örn. .s-7.b-1 + .s-4.b-9) */
.izgara--asimetrik > :first-child { grid-column: 1 / span 7; }
.izgara--asimetrik > :last-child { grid-column: 9 / span 4; }
}
/* --- 1200px: geniş masaüstü --- */
@media (min-width: 1200px) {
:root { --t-3: 1.5rem; }
.altbilgi { padding-block: var(--a9) var(--a6); }
}
/* --- 1440px: azami ölçü, kenar boşluğu sabitlenir --- */
@media (min-width: 1440px) {
:root { --kenar: 64px; --bosluk: 32px; }
.kap { padding-inline: var(--kenar); }
}
/* ==========================================================================
15 — YÜKSEK KONTRAST VE ZORLANMIŞ RENK KİPİ
Windows yüksek kontrast kipinde slot durumları kaybolmasın.
========================================================================== */
@media (forced-colors: active) {
.slot,
.takvim-gun,
.dugme,
.form-girdi,
.form-onay input { border: 1px solid; }
.slot--secili,
.takvim-gun--secili,
.slot[aria-pressed="true"],
.takvim-gun[aria-pressed="true"] { border-width: 3px; }
.slot--dolu,
.slot--gecmis,
.takvim-gun--dolu {
/* Renk kaybolduğunda durum metni ve üstü çizili saat bilgiyi taşır */
background: none;
}
.dugme--birincil,
.dugme--ikincil { forced-color-adjust: none; }
}
/* ==========================================================================
SON — Dosya denetimi notu
· Tüm var() çağrılarının karşılığı :root ya da bölüm bağlamında tanımlıdır.
· Şeftali (--ten) metin rengi olarak yalnız koyu bağlamlarda (--bolum--koyu,
--bolum--kahve, .altbilgi, .kahraman-ic) kullanılır; oralarda oran ≥9:1.
· Yarıçap yok, gölge yok; gradient yalnız fotoğraf perdesi ve slot taraması.
========================================================================== */
/* ==========================================================================
14 — YERLEŞİM YAPISI (üst bar, menü, alt bilgi, logo)
Bu blok inc/yerlesim.php ve inc/logo.php'nin bastığı yapısal sınıfları
tanımlar. Şablon ile stil ayrı ajanlarca yazıldığı için bir kısım sınıf
adı karşılıksız kalmıştı; şablon tarafındaki karşılığı olanlar yeniden
adlandırıldı, karşılığı olmayanlar burada tanımlandı.
========================================================================== */
/* --- Gövde ve ana alan: alt bilgiyi sayfa kısaysa aşağı iten iskelet --- */
html { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.ana { flex: 1 0 auto; }
.ana:focus { outline: none; }
/* --- Logo: satır içi SVG'nin taban davranışı --- */
.logo { display: block; width: auto; max-width: 100%; height: auto; }
.logo-yedek { font-weight: var(--ag-kalin); letter-spacing: -.01em; }
/* Üst bardaki iki parça tek logo gibi hizalanır.
Monogram 2.17:1, yazı 3.45:1 oranında; ortak yükseklik .ustbar-logo svg'den gelir. */
.ustbar-monogram { flex: 0 0 auto; }
.ustbar-yazi { flex: 0 0 auto; }
/* Randevu düğmesi her ekranda görünür kalır — dönüşümün ana kapısı.
Zemin bağlamı .ustbar'dan geldiği için rengi orada belirlenir. */
.ustbar-cta { flex: 0 0 auto; white-space: nowrap; }
/* --- Menü listesi. .menu kapsayıcı nav, .menu-liste onun içindeki ul --- */
.menu-liste {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--a1) var(--a4);
list-style: none;
margin: 0;
padding: 0;
}
.menu-liste li { margin: 0; }
/* Hamburger: iki çizgi, açıkken çarpıya döner */
.menu-ac-ikon {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 20px;
height: 14px;
}
.menu-ac-yazi { display: none; }
@media (max-width: 899.98px) {
.js .menu-liste {
flex-direction: column;
align-items: flex-start;
gap: var(--a3);
width: 100%;
}
.js .menu-liste .menu-baglanti { font-size: var(--t-3); min-height: 56px; }
/* Dar ekranda yazı markası düşer, monogram kalır */
.ustbar-yazi { display: none; }
.ustbar__ic { gap: var(--a2); }
}
@media (max-width: 419.98px) {
.ustbar-cta { padding-inline: var(--a2); font-size: .6875rem; }
}
/* --- Alt bilgi yapısı --- */
.altbilgi-ic {
display: grid;
grid-template-columns: 1fr;
gap: var(--a6) var(--bosluk);
padding-bottom: var(--a6);
}
@media (min-width: 700px) {
.altbilgi-ic { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--a5) var(--bosluk); }
}
.altbilgi-sutun { display: flex; flex-direction: column; gap: var(--a3); }
.altbilgi-marka { max-width: 34ch; }
.altbilgi-marka .kucuk { color: var(--metin-yumusak); margin: 0; }
.altbilgi-logo { margin-bottom: var(--a2); }
.altbilgi-menu ul,
.altbilgi-iletisim ul { list-style: none; margin: 0; padding: 0; }
.altbilgi-hukuk { padding-block: var(--a4) var(--a5); }
.altbilgi-hukuk ul {
display: flex;
flex-wrap: wrap;
gap: var(--a2) var(--a5);
list-style: none;
margin: 0;
padding: 0;
}
.altbilgi-hukuk a { font-size: var(--t-kucuk); color: var(--metin-sonuk); }
/* Dev, içi boş tipografik imza. Süs değil, Swiss'in kapanış vuruşu.
aria-hidden olduğu için ekran okuyucuya okunmaz. */
.altbilgi-imza {
margin: 0;
padding-inline: var(--kenar);
line-height: .82;
letter-spacing: -.04em;
color: transparent;
-webkit-text-stroke: 1px var(--cizgi-koyu);
text-align: center;
overflow: hidden;
user-select: none;
}
.altbilgi-son {
padding-block: var(--a4) 0;
font-size: var(--t-kucuk);
color: var(--metin-sonuk);
}
/* --- Bölüm başlığı: numara ve etiket aynı satırda kalmalı --- */
.ustbaslik-ust {
display: flex;
align-items: center;
gap: var(--a2);
margin: 0;
padding-top: var(--a2);
border-top: 1px solid var(--cizgi-yerel);
}
/* .numara genelde blok; başlık şeridinde satır içi kalır */
.ustbaslik-ust .numara {
display: inline;
padding-top: 0;
border-top: 0;
margin: 0;
}
.ustbaslik-baslik { margin: 0; }
/* ==========================================================================
15 — SAYFA BAŞI, MOBİL DOKUNMA HEDEFLERİ, TAŞMA KORUMASI
Üst başlık (hero) blokları sayfalardan kaldırıldı. İçerik doğrudan başlar;
ilk bölümün başlığı sayfanın 'idir. Üstte yalnız nefes payı kalır.
========================================================================== */
/* --- Yatay taşma koruması. clip, hidden'ın aksine kaydırma bağlamı kurmaz,
sticky üst bar ve kaydırma çapası bozulmaz. --- */
html, body { overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
table { max-width: 100%; }
.metin, .kap--metin, .altbilgi, .kirinti, .yigin { overflow-wrap: anywhere; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* --- Sayfa başı: ince kırıntı şeridi + ilk bölümün nefes payı --- */
.kirinti-serit { padding-top: var(--a4); }
.kirinti-serit .kirinti { margin-bottom: 0; }
.kirinti-serit + .bolum { padding-top: var(--a5); }
.ana > .bolum:first-child { padding-top: var(--a6); }
.ana > .uyari:first-child,
.ana > .kap:first-child + .bolum { padding-top: var(--a5); }
.ustbaslik h1.ustbaslik-baslik { margin: 0; }
@media (min-width: 900px) {
.kirinti-serit { padding-top: var(--a5); }
.kirinti-serit + .bolum { padding-top: var(--a6); }
.ana > .bolum:first-child { padding-top: var(--a7); }
}
/* --- Mobil: 768px altı --- */
@media (max-width: 767.98px) {
/* Her düğme en az 44px; küçük düğme de. Üst bardaki CTA dahil. */
.dugme,
.dugme--kucuk,
.ustbar-cta { min-height: var(--dokunma); }
/* Liste ve gezinme bağlantıları (paragraf içi bağlantı hariç) 44px hedef.
Alt bilgi, kırıntı, bölge kartları, iletişim ve içindekiler listeleri. */
.altbilgi-liste a,
.altbilgi-hukuk a,
.kart-baglanti,
.bilgi-deger a,
.ana ul > li > a:not(.dugme):not(.slot) {
display: inline-flex;
align-items: center;
min-height: var(--dokunma);
min-width: var(--dokunma);
}
/* Kırıntı satır içi gezinme metnidir; 44px'e şişirmek şeridi iki katına çıkarıyordu.
24px yükseklik WCAG 2.5.8 asgari hedefini karşılar. */
.kirinti a { min-height: 24px; display: inline-flex; align-items: center; }
.kirinti { row-gap: var(--a1); }
/* Dar ekranda yalnız üst sayfa ve bulunulan sayfa görünür; beş adımlı bölge
kırıntısı iki satıra kırılıp şeridi 79px'e çıkarıyordu. Tam yol masaüstünde durur. */
.kirinti li:not(:nth-last-child(-n+2)) { display: none; }
.kirinti li:nth-last-child(2)::before { content: none; }
/* Mobilde sayfa başı nefes payı daha kısa tutulur */
.kirinti-serit { padding-top: var(--a3); }
.kirinti-serit + .bolum { padding-top: var(--a4); }
.altbilgi-liste { gap: 0; }
.altbilgi-hukuk ul { row-gap: 0; }
/* Kart ve medya blokları kabı aşmaz */
.kart, .medya, .surgu, .tablo-kaydir { max-width: 100%; }
/* Slot ızgarası: hedefler arası boşluk korunur */
.slotlar { gap: var(--a1); }
}
/* --- Izgara: yoğun yerleşim. DOM'da ana sütun önce gelir (mobilde önce okunur),
masaüstünde yan sütun b-1 ile sola alınır; dense olmadan ikinci satıra düşerdi. --- */
.izgara--yogun { grid-auto-flow: row dense; }
/* --- Uzun belge içinde h2, h3 boyutunda kalır (hiyerarşi h1>h2, ölçek sakin) --- */
.metin h2.b3 { font-size: var(--t-3); font-weight: var(--ag-yari); margin-top: var(--a5); }
/* --- Dar kaplar ızgaranın sol çizgisine oturur. Ortalanmış 900/720px blok
12 sütunun hiçbir çizgisine değmiyordu; ölçü çocuklarda sınırlanır. --- */
.kap--dar, .kap--metin { max-width: var(--olcu); }
.kap--dar > *:not(.izgara) { max-width: 900px; }
.kap--metin > *:not(.izgara) { max-width: 720px; }