/* New Medical Aesthetic — taslak
------------------------------------------------------------------
TASARIM TEZİ
Mevcut site ameliyatı tatil gibi konumluyor ("Where transformation
feels like a getaway"). Yurt dışından ameliyat için gelen insanı
hareket ettiren şey konfor dili değil KESİNLİK: kim ameliyat edecek,
hangi gün ne olacak, ters giderse ne oluyor.
Bu yüzden sayfa bir broşür gibi değil, SİZE VERİLMİŞ BİR PLAN gibi
okunuyor. Gün gün itinerary sayfanın omurgası.
PALET markanın kendi CSS'inden alındı (uydurulmadı) ama AĞIRLIK
tersine çevrildi: onlarda krem her yerde, koyu vurgu; burada koyu
orman ana zemin, krem nefes alanı. Sebebi: krem+ince serif+altın
üçlüsü "wellness varsayılanı" ve her klinik sitesi öyle görünüyor.
⛔ FOTOĞRAF YOK ve bugün gelmeyecek. Tasarım fotoğrafa dayanmıyor;
gradyanla sahte sıcaklık üretmiyor (mevcut sitenin yaptığı bu).
Görsel yükü tipografi, çizgi ve boşluk taşıyor.
------------------------------------------------------------------ */
:root{
/* Markanın kendi değerleri — styles.css'lerinden alındı[cite: 9] */
--forest:#383B32; /* ana koyu zemin[cite: 9] */
--forest-2:#2A2C21; /* daha derin, hero[cite: 9] */
--sage:#A1A783; /* çizgi işi, manolya motifi[cite: 9] */
--sage-light:#C7CBAE;
--cream:#FBF9F3; /* nefes alanı[cite: 9] */
--paper:#F1ECDE; /* ikincil krem[cite: 9] */
--gold:#C6A467; /* YALNIZ gün işaretleri ve sayılar — KOYU zeminde[cite: 9] */
/* 🔴 AÇIK zemin için ayrı iki değişken. Ölçüldü: altın krem üzerinde
2.23:1, koyu adaçayı 3.81:1 — ikisi de WCAG AA eşiği 4.5'in altında,
axe 106 düğümde "serious" verdi. Renkler GÖZLE koyultulmadı: ton ve
doygunluk sabit tutulup açıklık, eşiği geçene kadar düşürüldü
(altın 39°, adaçayı 71° korundu). Sonuç krem 5.10 / kağıt 4.55.
🪤 Bunları koyu zeminde KULLANMA — orada ters yönde kontrast kaybı olur;
koyu bölümler `--gold` ve `--sage`i kullanmaya devam ediyor.[cite: 9] */
--gold-acik-zemin:#836631;
--sage-acik-zemin:#686D52;
/* 🔴 `--ink-soft` ÜÇ yerde kullanılıyordu ama HİÇ TANIMLI DEĞİldİ.
Tanımsız özel değişken bildirimi geçersiz kılıyor → renk miras
alınıyor; `.kat-sayi i` bu yüzden altını devralıp opaklıkla
açılmış ve kontrastı 3.12'ye düşmüştü. Sessiz bir hataydı:
ekranda "gri bir alt etiket" gibi göründüğü için gözle
yakalanamazdı, ancak axe + hesaplanan renk ölçümü buldu.
Değer krem 6.13 · kağıt 5.47 — ikisinde de AA üstü.[cite: 9] */
--ink-soft:#5C6053;
--line:rgba(251,249,243,.16);
--line-dark:rgba(42,44,33,.14);
/* 🔴 4 Eyl 2026: display yüzü Instrument Serif'ten Prata'ya alındı.
İki gerekçe:
① Instrument Serif, tasarım skilinin adını vererek yasakladığı iki
"yapay zekâ varsayılanı" serif'ten biri. Marka adlandırılmış bir
yazı tipi vermediği için korunacak bir tercih de yoktu.
② ASIL SEBEP İŞLEVSEL: Instrument Serif'in KİRİL DESTEĞİ YOK. İki
yüz taşımak yerine yedi dilin hepsini tek yüz karşılıyor.
Prata Cyreal'ın, kiril düşünülerek çizilmiş; Latin ve kiril
başlıklar aynı karaktere sahip.[cite: 9] */
--display:"Prata",Georgia,serif;
--body:"Inter",system-ui,-apple-system,sans-serif;
--mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
--kenar:clamp(20px,5vw,72px);
--olcek:clamp(1rem,.86rem + .6vw,1.125rem);
}
*,*::before,*::after{box-sizing:border-box}
/* 🪤 `[hidden]` tarayıcı varsayılanı `display:none` ama özgüllüğü DÜŞÜK:
`.islemler{display:grid}` gibi bir SINIF kuralı onu eziyor ve gizli
sekmeler ekranda kalıyordu (beş panel birden görünüyordu). Bu satır
olmadan `hidden` bir öznitelik olarak güvenilmez.[cite: 9] */
[hidden]{display:none!important}
html{scroll-padding-top:96px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
margin:0;background:var(--cream);color:var(--forest-2);
font-family:var(--body);font-size:var(--olcek);line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* Odak halkası — her yerde görünür, marka renginde[cite: 9] */
:where(a,button,summary,[tabindex]):focus-visible{
outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}
.atla{position:absolute;left:-9999px}
.atla:focus{left:var(--kenar);top:12px;z-index:99;background:var(--cream);
color:var(--forest-2);padding:10px 16px;border-radius:999px;font-weight:600}
.kap{width:min(1180px,100% - var(--kenar)*2);margin-inline:auto}
/* ---------- tipografi ölçeği ---------------------------------------
Display YALNIZ üç yerde: hero, bölüm başlıkları, kapanış.
Gövde Inter. Mono VERİ taşıyor (gün, sayı, etiket) — süs değil.[cite: 9] */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.015em;line-height:1.06}
h1{font-family:var(--display);font-size:clamp(2.9rem,1.6rem + 5.4vw,6rem)}
h2{font-family:var(--display);font-size:clamp(2.1rem,1.3rem + 3.2vw,3.6rem)}
h3{font-family:var(--body);font-size:1.06rem;font-weight:600;letter-spacing:0;line-height:1.35}
p{margin:0}
/* 🔴 12px TABANI. Ölçüldü: etiketler 11.5px, alan rozetleri 11.8px, logo
alt satırı 9.6px'ti. Bu sitenin hastası çoğunlukla 35-65 yaş ve kararını
telefonda okuyarak veriyor; büyük harf + geniş harf aralığı zaten okumayı
yavaşlatıyor, üstüne 10px koymak tasarım değil kusur. Hiçbir metin
12px'in altında değil — ölçüm: tam.py, "12px-altı" sütunu.[cite: 9] */
.etiket{
font-family:var(--mono);font-size:.78rem;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
}
/* ---------- üst çubuk ---------------------------------------------- */
.ust{position:sticky;top:0;z-index:40;background:var(--forest-2);
border-bottom:1px solid var(--line)}
.ust-ic{display:flex;align-items:center;gap:22px;
padding-block:14px;color:var(--cream)}
/* 🔴 İŞARET, KELİME MARKASINDAN BÜYÜK OKUNMALI. 36px'lik daire 156px'lik
kelime markasının yanında eziliyordu; markanın asıl işareti o daire.
Üst çubukta 48, altbilgide 64 — altbilgide yer var ve orası markanın
kendini tanıttığı blok.[cite: 9] */
.marka{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.marka img{width:48px;height:48px;border-radius:50%;flex:none}
.alt-marka .marka img{width:64px;height:64px}
.marka b{font-family:var(--display);font-size:1.05rem;font-weight:400;line-height:1.15}
.marka span{display:block;font-family:var(--mono);font-size:.75rem;
letter-spacing:.24em;color:var(--sage-light)}
/* 🪤 1024px'te marka adı İKİ SATIRA sarıyordu ve üst çubuk 92px'e
çıkıyordu (tavan 80). Sarma engellendi; yer açmak için menü aralığı
dar ekranda kısalıyor. Menüyü erken hamburgere düşürmek yerine bu
tercih edildi: 1024px hâlâ masaüstü ve altı bağlantı oraya sığıyor.[cite: 9] */
.marka span b{white-space:nowrap}
.ust nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.ust nav .mn-alt{display:inline-flex;align-items:center}
@media (max-width:1200px){.ust nav{gap:18px}.ust-ic{gap:16px}}
.ust nav a{color:var(--sage-light);text-decoration:none;font-size:.9rem}
.ust nav a:hover{color:var(--cream)}
@media (max-width:900px){.ust nav{display:none}}
.dugme{
display:inline-flex;align-items:center;gap:9px;
min-height:46px;padding:0 22px;border-radius:999px;
font-size:.92rem;font-weight:600;text-decoration:none;border:1px solid transparent;
transition:background .2s,color .2s,border-color .2s;
}
.dugme--dolu{background:var(--gold);color:var(--forest-2)}
.dugme--dolu:hover{background:#d8bb84}
.dugme--cizgi{border-color:var(--line);color:var(--cream)}
.dugme--cizgi:hover{border-color:var(--sage-light)}
.dugme--koyu{background:var(--forest-2);color:var(--cream)}
.dugme--koyu:hover{background:#3f4237}
/* ---------- hero ----------------------------------------------------
Fotoğraf yok, istatistik kutusu yok, gradyan yok. Koyu bir alan,
tek bir cümle ve logodaki manolyanın çizgi motifi.
RİSK: sessiz bir hero. Gerekçe: elimizde fotoğraf yok ve gradyanla
sahte sıcaklık üretmek mevcut sitenin hatası.[cite: 9] */
.hero{position:relative;background:var(--forest-2);color:var(--cream);overflow:hidden}
/* 🪤 `max-width` BURAYA konmaz. Bu öğe aynı zamanda `.kap` taşıyor
(`width:min(1180px,…)`); üzerine max-width verilince kap 220px'e
düşüyor ve hero tek kelimelik satırlara bölünüyordu. Genişlik sınırı
metin öğelerinin kendisinde.[cite: 9] */
/* 🪤 Üst boşluk 150px'e kadar çıkıyordu; hero içeriği ekranın ortasına
doğru kayıyor ve bu, bilinçli boşluk gibi değil düzen hatası gibi
okunuyor. Tavan 96px. Nefes gerekiyorsa yazı büyür, boşluk değil.[cite: 9] */
.hero-ic{padding-block:clamp(56px,7vw,96px) clamp(64px,9vw,120px);
position:relative;z-index:2}
.hero h1{max-width:15ch}
.hero .alt{margin-top:26px;max-width:52ch;color:var(--sage-light);
font-size:clamp(1rem,.94rem + .3vw,1.2rem)}
.hero .eylem{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px}
.hero .etiket{color:var(--sage);margin-bottom:22px;display:block}
.manolya{position:absolute;right:2%;top:50%;transform:translateY(-50%);
width:min(40%,470px);height:auto;opacity:.11;z-index:1;pointer-events:none}
@media (max-width:900px){.manolya{width:74%;right:-16%;opacity:.07}}
/* ---------- bölüm ritmi -------------------------------------------- */
/* 🔴 Kontrast, KAPSAM üzerinden çözülüyor — 14 ayrı kural elle
çevrilmedi. Açık zeminli bölüm `--gold`u kendi içinde yeniden
tanımlıyor; içindeki her öge (bugünküler ve sonra eklenecekler)
otomatik olarak erişilebilir değeri alıyor. Koyu bölüm markanın
asıl altınını geri koyuyor. Elle çevirseydim bir sonraki bölümde
yine unutulurdu — bu sınıfın hatası tekrar edilebilir olması.[cite: 9] */
.blm{padding-block:clamp(64px,9vw,118px);
--gold:var(--gold-acik-zemin);--sage-dark:var(--sage-acik-zemin)}
.blm--kagit{background:var(--paper)}
.blm--koyu{background:var(--forest);color:var(--cream);--gold:#C6A467;--sage-dark:#7C8262}
.blm-bas{max-width:34ch}
.blm-bas .etiket{color:var(--gold);display:block;margin-bottom:16px}
.blm--kagit .blm-bas .etiket,.blm:not(.blm--koyu) .blm-bas .etiket{color:var(--sage-acik-zemin)}
.blm-bas p{margin-top:18px;max-width:56ch;opacity:.82}
/* ---------- PLAN — sayfanın imzası ---------------------------------
Gün işaretleri mono ve altın; aralarındaki çizgi gerçek bir sırayı
anlatıyor (numaralandırma burada süs değil, bilgi).
Izgara: sol sütun sabit genişlikte gün, sağ sütun içerik.[cite: 9] */
.plan{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.plan-satir{display:grid;grid-template-columns:minmax(88px,120px) 1fr;
gap:clamp(18px,4vw,56px);padding-block:clamp(26px,3.4vw,40px);
border-bottom:1px solid var(--line);align-items:start}
.plan-gun{font-family:var(--mono);font-size:.86rem;letter-spacing:.1em;
color:var(--gold);padding-top:.22em;white-space:nowrap}
.plan-satir h3{color:var(--cream)}
.plan-satir p{margin-top:10px;color:var(--sage-light);max-width:62ch}
@media (max-width:620px){
.plan-satir{grid-template-columns:1fr;gap:8px}
.plan-gun{padding-top:0}
}
/* ---------- işlemler ------------------------------------------------ */
.sekme{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.sekme button{
font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
min-height:42px;padding:0 18px;border-radius:999px;cursor:pointer;
background:transparent;border:1px solid var(--line-dark);color:var(--forest);
transition:background .18s,color .18s,border-color .18s;
}
.sekme button:hover{border-color:var(--forest)}
.sekme button[aria-selected="true"]{background:var(--forest-2);border-color:var(--forest-2);color:var(--cream)}
.islemler{margin-top:30px;display:grid;gap:0;
grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.islemler li{list-style:none;padding:15px 4px;border-top:1px solid var(--line-dark);
display:flex;align-items:baseline;gap:12px;font-size:.98rem}
.islemler li::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--sage);flex:none;transform:translateY(-3px)}
.islem-not{margin-top:26px;font-size:.9rem;opacity:.7;max-width:60ch}
/* ---------- garanti ------------------------------------------------- */
.garanti{margin-top:clamp(36px,5vw,60px);display:grid;gap:1px;
background:var(--line);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.garanti article{background:var(--forest);padding:clamp(24px,3vw,34px)}
.garanti .no{font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.14em}
.garanti h3{margin-top:14px;color:var(--cream)}
.garanti p{margin-top:9px;color:var(--sage-light);font-size:.95rem}
/* ---------- SSS ----------------------------------------------------- */
.sss{margin-top:34px;max-width:820px}
.sss details{border-bottom:1px solid var(--line-dark)}
.sss summary{cursor:pointer;list-style:none;display:flex;gap:20px;
align-items:baseline;justify-content:space-between;
padding-block:22px;font-weight:600;font-size:1.04rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";font-family:var(--mono);color:var(--gold);
font-size:1.2rem;line-height:1;flex:none}
.sss details[open] summary::after{content:"–"}
.sss p{padding-bottom:24px;max-width:64ch;opacity:.84}
/* ---------- kapanış -------------------------------------------------- */
.kapanis{background:var(--forest-2);color:var(--cream)}
.kapanis .kap{padding-block:clamp(64px,9vw,116px)}
.kapanis h2{max-width:16ch}
.kapanis p{margin-top:20px;max-width:52ch;color:var(--sage-light)}
.kapanis .eylem{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
/* 🪤 `gap` tek başına yetmiyor: uzun e-posta adresi kendi sütununu taşırıp
yanındaki metne yapışıyordu. `min-width:0` + `overflow-wrap` şart.[cite: 9] */
/* 🔴 `.kapanis .bilgi` KALDIRILDI. İletişim bilgisi artık altbilgide;
aynı veriyi iki blokta tutmak, biri güncellenip diğeri unutulduğunda
sessizce çelişki üretir. Kapanış bölümü saf çağrı olarak kaldı.[cite: 9] */
/* ==========================================================================
ALTBİLGİ
🪤 Dört sütun ama EŞİT DEĞİL: marka sütunu geniş, bağlantı sütunları dar.
Dört eşit sütun, her sitede gördüğün şablon altbilgidir; ölçüyü
içeriğin kendisi belirliyor.
🪤 Sütun başlıkları gerçek `
` — ekran okuyucu altbilgiyi bölümlere
ayırabilsin diye. Görsel olarak küçük, yapısal olarak başlık.
========================================================================== */
footer{background:var(--forest-2);color:var(--sage);border-top:1px solid var(--line)}
.alt-izgara{padding-block:clamp(48px,6vw,76px) clamp(38px,4.6vw,58px);
display:grid;gap:clamp(34px,4vw,52px);grid-template-columns:1fr}
/* 🪤 Mobilde dört blok alt alta gelince altbilgi 1300px oluyordu ve her
sayfanın sonunda uzun bir kaydırma bırakıyordu. Bağlantı sütunları
yan yana alındı (etiketler kısa, sığıyor); marka ve iletişim tam genişlik.[cite: 9] */
/* 🪤 Eşikler ÖLÇÜLEREK kondu, tahminle değil. İlk denemede eşiği 400px
yapmıştım: 390px hiç etkilenmedi, 760px ise ÜÇ SATIRA çıkıp uzadı.
Şimdi 360'tan itibaren bağlantılar yan yana; 640'tan sonra marka ve
iletişim de sıraya giriyor ve satır sayısı ikiye düşüyor.[cite: 9] */
@media (min-width:360px){
.alt-izgara{grid-template-columns:repeat(2,1fr)}
.alt-marka,.alt-iletisim{grid-column:1 / -1}
}
@media (min-width:640px){
.alt-marka,.alt-iletisim{grid-column:auto}
}
@media (min-width:1000px){
.alt-izgara{grid-template-columns:1.5fr .9fr .9fr 1.2fr}
}
.alt-marka .marka{margin-bottom:20px}
.alt-marka p{font-size:.9rem;line-height:1.6;max-width:34ch}
.alt-marka .alt-diller{margin-top:18px;color:var(--sage-light);font-size:.86rem}
.alt-marka .alt-diller .etiket{display:block;color:var(--sage);margin-bottom:6px}
.alt-sutun h2{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.alt-sutun a{display:block;color:var(--sage-light);text-decoration:none;
padding-block:5px;font-size:.94rem;border-bottom:1px solid transparent;width:fit-content}
.alt-sutun a:hover{color:var(--cream);border-bottom-color:var(--sage)}
.alt-iletisim p{margin-bottom:14px;font-size:.94rem;color:var(--sage-light)}
.alt-iletisim .etiket{display:block;color:var(--sage);margin-bottom:5px}
.alt-iletisim a{display:inline;padding:0}
/* 🪤 E-posta 31 karakter; sütunda kırılmasın diye punto küçülüyor.[cite: 9] */
.alt-iletisim a.eposta{white-space:nowrap;font-size:.86rem}
.alt-serit{border-top:1px solid var(--line);font-size:.82rem}
.alt-serit .kap{padding-block:22px;display:flex;flex-wrap:wrap;gap:14px 26px;
justify-content:space-between;align-items:center}
.alt-serit .taslak{color:var(--sage);opacity:.85}
/* 🪤 Yüzen WhatsApp düğmesi (54px + 20px kenar) mobilde alt şeritteki
metnin ÜSTÜNE biniyordu. Ölçüldü: sağ alt köşede 318,772. Şeridin altına
düğme yüksekliği kadar yer açılıyor — düğmeyi kaldırmak yerine, çünkü
asıl çağrı o.[cite: 9] */
@media (max-width:760px){.alt-serit .kap{padding-bottom:calc(22px + 62px)}}
@media (max-width:760px){
.alt-iletisim a.eposta{white-space:normal;overflow-wrap:anywhere;font-size:.94rem}
}
/* WhatsApp yüzen düğme — mobilde alt çubuğa çarpmasın diye sağ üstte değil
sağ altta ve güvenli alan payı var.[cite: 9] */
.yuzen{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));
z-index:50;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:var(--gold);color:var(--forest-2);box-shadow:0 12px 28px -12px rgba(0,0,0,.5)}
/* ==================================================================
ÇOKLU SAYFA — 2 Eyl 2026
Tek sayfadan 11 sayfaya geçildi. Aşağısı yeni sayfa türlerinin
stilleri; yukarıdaki belirteçler ve ritim aynen kullanılıyor.
================================================================== */
/* Üst menü: aktif sayfa işaretli. Mobilde hamburger.[cite: 9] */
.ust nav a[aria-current="page"]{color:var(--cream)}
.ust nav a[aria-current="page"]::after{content:"";display:block;height:1px;
background:var(--gold);margin-top:5px}
.menu-ac{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;
cursor:pointer;padding:0;place-items:center}
.menu-ac span{display:block;width:22px;height:1.5px;background:var(--cream);margin:4px auto;
transition:transform .2s,opacity .2s}
.menu-ac[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.menu-ac[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.mobil-menu{display:none;flex-direction:column;border-top:1px solid var(--line);
background:var(--forest-2)}
.mobil-menu a{color:var(--sage-light);text-decoration:none;padding:15px var(--kenar);
border-bottom:1px solid var(--line)}
.mobil-menu a[aria-current="page"]{color:var(--cream)}
@media (max-width:1000px){
.ust nav:not(.mobil-menu){display:none}
.ust-cta{display:none}
.menu-ac{display:grid}
.mobil-menu:not([hidden]){display:flex}
}
/* Sayfa başlığı bandı — anasayfa dışındaki her sayfanın girişi[cite: 9] */
/* 🪤 Sayfa başlığı bandının sağ yarısı 10 sayfanın onunda da boştu.
Fotoğraf yok, uydurma gradyan da istemiyoruz — markanın KENDİ manolyası
(logodan çıkarıldı) filigran olarak konuldu. Metnin altında kalmıyor:
`right` konumu geniş ekranda metnin bittiği yerden sonra başlıyor,
dar ekranda tamamen gizleniyor.[cite: 9] */
.sayfa-bas{background:var(--forest-2);color:var(--cream);position:relative;overflow:hidden;
padding-block:clamp(52px,8vw,104px) clamp(44px,6vw,78px)}
.sayfa-bas::after{content:"";position:absolute;pointer-events:none;display:none;
right:max(-40px,calc(50% - 640px));top:50%;translate:0 -50%;
width:min(30vw,360px);aspect-ratio:1;opacity:.12;
background:url("manolya.png") center/contain no-repeat}
@media (min-width:1080px){.sayfa-bas::after{display:block}}
@media (prefers-reduced-motion:no-preference){
.sayfa-bas::after{animation:manolya-gir 1.1s cubic-bezier(.16,1,.3,1) both}}
@keyframes manolya-gir{from{opacity:0;translate:22px -50%}to{opacity:.12;translate:0 -50%}}
.sayfa-bas .etiket{color:var(--gold);display:block;margin-bottom:18px}
.sayfa-bas h1{max-width:17ch;font-size:clamp(2.4rem,1.5rem + 3.4vw,4.4rem)}
.sayfa-bas p{margin-top:22px;max-width:56ch;color:var(--sage-light)}
/* Kategori kartları — fotoğraf yok, sayı + ad + özet.
🪤 Sayı DEKOR DEĞİL: o kategorideki işlem adedi.[cite: 9] */
.kat-izgara{display:grid;gap:1px;background:var(--cream);
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:clamp(34px,5vw,54px);
border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.kat-kart{background:var(--cream);padding:clamp(26px,3.4vw,40px);text-decoration:none;
border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
color:inherit;display:flex;flex-direction:column;min-height:230px;
transition:background .2s}
.kat-kart:hover{background:var(--paper)}
.kat-sayi{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.12em;
display:flex;align-items:baseline;gap:.5em}
.kat-sayi i{font-style:normal;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft)}
.kat-kart h2,.kat-kart h3{font-family:var(--display);font-weight:400;
font-size:clamp(1.5rem,1.2rem + .9vw,2rem);margin-top:14px;line-height:1.1}
.kat-kart p{margin-top:12px;font-size:.95rem;opacity:.78;max-width:44ch}
.kat-kart .ok{margin-top:auto;padding-top:22px;font-size:.88rem;font-weight:600;color:var(--sage-acik-zemin)}
.blm--kagit .kat-izgara,.blm--kagit .kat-kart{background:var(--paper)}
/* Yolculuk sayfası — gün şeridi, ana sayfadakinin genişletilmiş hâli[cite: 9] */
.asamalar{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.asama{display:grid;grid-template-columns:minmax(96px,140px) 1fr;gap:clamp(20px,4vw,56px);
padding-block:clamp(30px,4vw,48px);border-bottom:1px solid var(--line-dark);align-items:start}
.asama-gun span{font-family:var(--mono);font-size:.86rem;letter-spacing:.1em;color:var(--gold)}
.asama-ic h2{font-family:var(--display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem)}
.asama-ic p{margin-top:12px;max-width:60ch;color:var(--ink-soft)}
.asama-ic ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.asama-ic li{padding-left:20px;position:relative;font-size:.95rem;color:var(--ink-soft)}
.asama-ic li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;
background:var(--sage)}
@media (max-width:620px){.asama{grid-template-columns:1fr;gap:10px}}
/* İşlem listesi — ad + tek satır tanım[cite: 9] */
/* --- işlem ızgarası -------------------------------------------------------
🔴 Eski hâli: 12 satırlık liste, HER satırın altında saç teli çizgi.
Fiyatsız bir fiyat listesi gibi okunuyordu. Şimdi iki sütunlu bir ızgara
ve gruplar arası boşluk yapıyı taşıyor; satır çizgisi yok, kutu yok.
Boşluk, çizgiden daha sessiz bir ayırıcı.[cite: 9] */
.grup + .grup{margin-top:clamp(44px,6vw,72px)}
.grup-bas{font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.01em;
color:var(--ink-soft);padding-bottom:14px;margin-bottom:clamp(18px,2.4vw,26px);
border-bottom:1px solid var(--line-dark)}
.islem-izgara{margin:0;padding:0;list-style:none;display:grid;
gap:clamp(26px,3.4vw,42px) clamp(28px,4vw,64px);grid-template-columns:1fr}
@media (min-width:720px){.islem-izgara{grid-template-columns:repeat(2,1fr)}}
.islem-izgara b{display:block;font-weight:600;font-size:1.06rem;line-height:1.3}
.islem-izgara p{margin-top:7px;color:var(--ink-soft);font-size:.96rem;max-width:46ch}
/* Vurgu kutusu[cite: 9] */
.kutu{margin-top:clamp(34px,5vw,52px);background:var(--paper);
padding:clamp(24px,3.4vw,38px);border-left:2px solid var(--gold)}
.blm--kagit .kutu{background:var(--cream)}
.kutu-bas{font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:0;
margin-bottom:12px;color:var(--forest)}
.kutu .etiket{color:var(--sage-acik-zemin);display:block;margin-bottom:12px}
.kutu p{max-width:62ch}
.kutu .iri{font-family:var(--display);font-size:1.7rem;margin-block:6px 10px}
.kutu .iri a,.kutu a{color:inherit}
.kutu .ince{font-size:.92rem;opacity:.7;margin-top:8px}
/* Garanti maddeleri[cite: 9] */
.maddeler{display:flex;flex-direction:column;gap:1px;background:var(--line-dark);
border-block:1px solid var(--line-dark)}
.madde{background:var(--cream);display:grid;grid-template-columns:minmax(70px,96px) 1fr;
gap:clamp(18px,3vw,44px);padding:clamp(28px,3.6vw,44px)}
.madde-no{font-family:var(--mono);font-size:1.1rem;color:var(--gold)}
.madde h2{font-family:var(--display);font-size:clamp(1.6rem,1.3rem + 1.1vw,2.2rem)}
.madde .one{margin-top:12px;font-size:1.06rem;max-width:58ch}
.madde p+p{margin-top:12px;opacity:.76;max-width:62ch;font-size:.97rem}
@media (max-width:620px){.madde{grid-template-columns:1fr;gap:10px}}
/* İki sütunlu genel yerleşim[cite: 9] */
.iki-sutun{display:grid;gap:clamp(30px,5vw,72px);
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.iki-sutun h2{font-family:var(--display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem)}
.iki-sutun>div>p{margin-top:16px;max-width:54ch;opacity:.82}
/* Anasayfadaki garanti özeti[cite: 9] */
.ozet-liste{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line-dark);
border:1px solid var(--line-dark);grid-template-columns:1fr}
@media (min-width:620px){.ozet-liste{grid-template-columns:repeat(2,1fr)}}
.ozet-liste li{background:var(--paper);padding:clamp(20px,2.6vw,28px)}
.ozet-liste .no{font-family:var(--mono);font-size:.76rem;color:var(--gold);letter-spacing:.12em}
.ozet-liste b{display:block;margin-top:9px;font-weight:600;font-size:1.02rem}
.ozet-liste p{margin-top:7px;font-size:.93rem;opacity:.76;max-width:52ch}
/* Yardımcılar[cite: 9] */
.metin-bag{display:inline-block;margin-top:30px;font-weight:600;font-size:.95rem;
color:var(--gold);text-decoration:none;border-bottom:1px solid transparent}
.metin-bag:hover{border-bottom-color:currentColor}
.blm:not(.blm--koyu) .metin-bag{color:var(--sage-acik-zemin)}
.not{margin-top:clamp(30px,4vw,46px);font-size:.92rem;opacity:.66;max-width:62ch}
.isaret{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.isaret li{padding-left:22px;position:relative;opacity:.84}
.isaret li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;
background:var(--gold)}
.diger{margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid var(--line-dark);
display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.diger .etiket{color:var(--sage-acik-zemin);margin-right:8px}
.diger a{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
padding:9px 16px;border:1px solid var(--line-dark);border-radius:999px;
text-decoration:none;color:var(--forest)}
.diger a:hover{border-color:var(--forest)}
/* Konsültasyon soruları — kategori sayfasının ikinci yarısı[cite: 9] */
.sor{margin-top:clamp(52px,7vw,88px);padding-top:clamp(40px,5vw,60px);
border-top:1px solid var(--line-dark)}
/* 🪤 Izgara arka planını çizgi rengi yapıp boşluğu "çizgi" gibi göstermek
ancak ızgara TAM DOLARSA çalışıyor. 4 öğe 3 sütuna düşünce boş hücre
koca bir gri blok olarak görünüyordu. İki çözüm birlikte:
① 4 öğelik listelerde sütun sayısı 2'ye sabitlendi (4 = 2×2, hep dolu)
② kategori ızgarasında (5 kart, bölünmüyor) kap rengi KART rengiyle
aynı yapıldı — boş hücre artık sayfanın kendisi gibi görünüyor.[cite: 9] */
.sor-liste{margin:clamp(26px,4vw,40px) 0 0;padding:0;list-style:none;counter-reset:s;
display:grid;gap:1px;background:var(--line-dark);grid-template-columns:1fr}
@media (min-width:760px){.sor-liste{grid-template-columns:repeat(2,1fr)}}
.sor-liste li{background:var(--cream);padding:clamp(22px,3vw,30px);counter-increment:s;
font-size:1.02rem;line-height:1.5;display:flex;gap:16px}
.sor-liste li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
font-size:.76rem;color:var(--gold);letter-spacing:.1em;flex:none;padding-top:.35em}
/* İşlem indeksindeki yardım blokları[cite: 9] */
.yardim{margin-top:clamp(52px,7vw,84px);padding-top:clamp(38px,5vw,56px);
border-top:1px solid var(--line-dark);display:grid;gap:clamp(28px,4vw,48px);
grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.yardim h2{font-family:var(--display);font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem)}
.yardim p{margin-top:12px;opacity:.78;font-size:.97rem;max-width:46ch}
/* İletişim — dört adım[cite: 9] */
.adimlar{margin-top:clamp(56px,7vw,90px);padding-top:clamp(40px,5vw,58px);
border-top:1px solid var(--line-dark)}
.adim-liste{margin:clamp(26px,4vw,38px) 0 0;padding:0;list-style:none;display:grid;gap:1px;
background:var(--line-dark);grid-template-columns:1fr}
@media (min-width:700px){.adim-liste{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.adim-liste{grid-template-columns:repeat(4,1fr)}}
.adim-liste li{background:var(--cream);padding:clamp(22px,3vw,30px)}
.adim-liste .no{font-family:var(--mono);font-size:.76rem;color:var(--gold);letter-spacing:.12em}
.adim-liste b{display:block;margin-top:10px;font-weight:600;font-size:1.04rem}
.adim-liste p{margin-top:8px;font-size:.94rem;opacity:.76}
/* 🪤 Sayfa başlığı bandından sonraki ilk bölümün üst boşluğu YARIYA
iniyor: band zaten alt boşluk taşıyor, ikisi üst üste gelince
başlık ile içerik arasında ~200px ölü alan kalıyordu.[cite: 9] */
.sayfa-bas + .blm{padding-top:clamp(38px,5vw,64px)}
/* --- planın kapsamı: beş kalem ------------------------------------------
🪤 5 öğe hiçbir sütun sayısına tam bölünmüyor. Bu yüzden burada
"boşluğu çizgi göster" numarası KULLANILMIYOR — öğelerin kendi alt
çizgisi var, son öğede kaldırılıyor. Boş hücre diye bir şey oluşmuyor.[cite: 9] */
.blm-giris{margin-top:20px;max-width:60ch;color:var(--ink-soft)}
.blm--kagit .etiket,.blm .etiket{color:var(--gold);display:block;margin-bottom:16px}
.dahil-liste{margin:clamp(30px,4vw,46px) 0 0;padding:0;list-style:none;counter-reset:d}
.dahil-liste li{counter-increment:d;display:grid;gap:6px 28px;padding:20px 0;
border-bottom:1px solid var(--line);grid-template-columns:1fr}
.dahil-liste li:last-child{border-bottom:0;padding-bottom:0}
.dahil-liste li::before{content:counter(d,decimal-leading-zero);font-family:var(--mono);
font-size:.7rem;letter-spacing:.1em;color:var(--gold);grid-row:1}
.dahil-liste b{font-size:1.05rem;font-weight:600}
.dahil-liste span{color:var(--ink-soft);max-width:56ch}
@media (min-width:820px){
.dahil-liste li{grid-template-columns:3rem 15rem 1fr;align-items:baseline}
.dahil-liste li::before{grid-row:auto}
}
/* --- kırıntı yolu --------------------------------------------------------
Koyu sayfa başlığı bandının HEMEN ÜSTÜNDE, aynı koyu zeminde duruyor;
bant ile üst çubuk arasında ayrı bir şerit açmıyor.[cite: 9] */
.kirinti{background:var(--forest-2);padding-top:26px;font-family:var(--mono);
font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.kirinti .kap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kirinti a{color:var(--sage);text-decoration:none}
.kirinti a:hover{color:var(--cream);text-decoration:underline}
.kirinti span[aria-hidden]{color:var(--sage);opacity:.45}
.kirinti [aria-current]{color:var(--cream)}
/* 🪤 Kırıntı bandı sayfa başlığından hemen önce geldiği için başlığın
üst boşluğu iki kez sayılıyordu.[cite: 9] */
.kirinti + .sayfa-bas{padding-top:clamp(26px,3.4vw,42px)}
/* --- 404 ----------------------------------------------------------------[cite: 9] */
.yok{min-height:56vh;display:grid;align-content:center}
.yok .baglar{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
/* --- teyit bekleyen blok uyarısı ---------------------------------------
Kasten göze batıyor: bu blok sayfada dururken yayına çıkarsa hata
fark edilmeli. Sessiz bir yer tutucu, sessizce yayımlanır.[cite: 9] */
.uyari{border:1px solid var(--gold-acik-zemin);border-left-width:4px;
background:rgba(198,164,103,.09);padding:clamp(22px,3vw,32px);max-width:70ch}
.uyari p{margin-top:10px;color:var(--ink-soft)}
/* 🪤 Bağlantılar bitişik yazılıyordu ("IstanbulPrivacy"): aralarında boşluk
yoktu ve nav bir flex kabı değildi.[cite: 9] */
.alt-baglar{display:flex;flex-wrap:wrap;gap:8px 18px}
.alt-baglar a{color:var(--sage);text-decoration:none;border-bottom:1px solid transparent}
.alt-baglar a:hover{color:var(--cream);border-bottom-color:var(--sage)}
/* --- dil seçici -----------------------------------------------------------
🪤 BAYRAK YOK. Bayrak ülke gösterir, dil değil: Avusturyalı okuyucu
Almanca ister ama Alman bayrağına tıklamak istemez; İsviçreli için
hangi bayrak? Dilin kendi adı tek doğru etikettir.
Altbilgide duruyor, üst çubukta değil: 7 dil üst çubuğa sığmıyor ve
ziyaretçilerin çoğu zaten doğru dilde geliyor (hreflang sayesinde).[cite: 9] */
.dil{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.dil .etiket{color:var(--sage)}
/* 🔴 OPAKLIK KONTRAST DÜŞÜRÜR — bu dosyada üçüncü kez oldu.
`opacity` metni zeminle karıştırır: --sage koyu altbilgide tek başına
5.65:1, ama `opacity:.8` ile ~4.07'ye düşüp AA eşiğinin altına iniyor.
axe bileşik rengi ölçtüğü için yakalıyor; GÖZLE yakalanamaz.
⇒ Metin rengini soluklaştırmak istiyorsan opaklık değil, DAHA AÇIK BİR
RENK kullan. Dosyadaki diğer opaklıklar (.not, .kat-kart p …) ölçüldü,
taban renkleri yeterince koyu olduğu için eşiği geçiyorlar — ama yeni
bir opaklık eklersen `uret/../eris.py` ile ÖLÇ.[cite: 9] */
.dil nav{display:flex;flex-wrap:wrap;gap:6px 14px}
.dil a{color:var(--sage-light);text-decoration:none;font-size:.9rem;
border-bottom:1px solid transparent;padding-bottom:1px}
.dil a:hover{color:var(--cream);border-bottom-color:var(--sage)}
.dil a[aria-current]{color:var(--cream);border-bottom-color:var(--gold)}
footer .kap{flex-wrap:wrap;gap:14px 26px}
/* ==========================================================================
HAREKET KATMANI
🪤 Hepsi İLERİCİ ZENGİNLEŞTİRME: desteklenmeyen tarayıcıda sayfa aynen
çalışır, sadece geçiş olmaz. Hiçbiri JavaScript'e bağlı değil.
🔴 Hepsi `prefers-reduced-motion` altında tamamen kapanıyor. Bu bir
cerrahi sitesi; baş dönmesi ya da migreni olan bir ziyaretçi için
hareket bir konfor meselesi değil.
========================================================================== */
/* --- sayfalar arası geçiş -------------------------------------------------
Çok sayfalı statik bir sitede en büyük kazanç: bağlantıya tıklayınca
sert kesme yerine yumuşak bir geçiş. Beş satır, kütüphane yok.[cite: 9] */
@media (prefers-reduced-motion: no-preference){
@view-transition{ navigation: auto; }
::view-transition-old(root){animation:.22s cubic-bezier(.4,0,1,1) both nma-cik}
::view-transition-new(root){animation:.32s cubic-bezier(0,0,.2,1) both nma-gir}
@keyframes nma-cik{to{opacity:0}}
@keyframes nma-gir{from{opacity:0;transform:translateY(8px)}}
/* 🪤 Üst çubuk ve yüzen düğme geçişte AYRI katman olmalı, yoksa
sayfayla birlikte solup göze çarpıyor.[cite: 9] */
.ust{view-transition-name:nma-ust}
.yuzen{view-transition-name:nma-yuzen}
}
/* --- kaydırmada beliriş ---------------------------------------------------
🪤 `@supports` içindeki `(animation-range: entry)` denetimi ŞART:
yalnız kısmi destek veren tarayıcıları eler. Tek başına
`animation-timeline: view()` sorgusu yanlış pozitif veriyor.
Neyi anlatıyor: bölümler okuma sırasına göre beliriyor, yani sayfa
bir sıra olduğunu söylüyor. Süslemek için değil.[cite: 9] */
@media (prefers-reduced-motion: no-preference){
@supports ((animation-timeline: view()) and (animation-range: entry)){
/* 🪤 `.sor-liste li` DEĞİL, `.sor-liste`. O ızgara boşluklarını
kendi ZEMİN rengiyle çiziyor; öge 16px aşağı kaydırıldığında zemin
üstten çizgi gibi sızıyor ve tepede gri bir şerit oluşuyordu.
Zemin-boşluk numarası kullanan ızgaralarda öğeyi değil KABI canlandır.[cite: 9] */
.asama, .islem-izgara li, .madde, .dahil-liste li, .kat-kart, .sor-liste{
animation: nma-beliris auto linear both;
animation-timeline: view();
animation-range: entry 0% entry 60%;
}
/* 🔴 OPAKLIK YOK, yalnız konum. Sebep ölçüm: opaklıkla belirince
öge geçiş boyunca düşük kontrastlı oluyordu ve axe bunu 5 sayfada
"serious" olarak yakaladı. Solma yerine kayma, okunaklılığı
hiçbir anda düşürmüyor ve hareket yine anlaşılıyor.[cite: 9] */
@keyframes nma-beliris{from{transform:translateY(16px)}}
}
}
/* --- "hayır dediğimiz zamanlar" ------------------------------------------
🪤 Ana sayfadaki diğer bölümler zaten iki-sütun ve kart ızgarası
kullanıyor; bu bölüm ÜÇÜNCÜ bir düzen ailesi olsun diye tam genişlikte
ve dikey akıyor. Aynı düzeni üçüncü kez tekrarlamak sayfayı şablon
gibi gösteriyor.[cite: 9] */
.hayir-izgara{margin-top:clamp(34px,4.6vw,58px);display:grid;gap:1px;
background:var(--line);grid-template-columns:1fr}
@media (min-width:860px){.hayir-izgara{grid-template-columns:repeat(3,1fr)}}
.hayir-izgara article{background:var(--forest);padding:clamp(24px,3vw,36px)}
.hayir-izgara h3{font-size:1.02rem;font-weight:600;line-height:1.35}
.hayir-izgara p{margin-top:12px;color:var(--sage-light);font-size:.95rem}
.blm--koyu .blm-giris{color:var(--sage-light)}
/* Teyit uyarısı bölümü: sayfa başlığının hemen altında, atlanamayacak yerde.[cite: 9] */
.blm--uyari{padding-block:clamp(28px,3.4vw,44px) 0}
/* --- plan aracı ----------------------------------------------------------
🪤 Seçim ögesi gerçek ``: klavye okları çalışıyor,
ekran okuyucu grubu `