/* ============================================================
ÇEKİRDEK — BİLEŞEN KATMANI
Yükleme sırası: cekirdek.css → dokular.css → eklentiler.css
→ bilesen.css → tema.css
============================================================
Neden var: fabrika denetimden 0 hatayla geçen ama "ucuz 10 TL'lik
site" denilen bir tema üretti. Ölçtük:
birincil düğme 123 × 44 px · 14.7 px yazı · gölge yok · radius 0
görsel sayısı 0
zemin kademesi 2
44 px erişilebilirliğin TABANIDIR, tasarımın hedefi değil. Tabanla
teslim edilen her ölçü siteyi ucuz gösterir.
Bu dosya tabanları hedefe çeviren bileşenleri taşır. Kural aynı:
İSKELET burada, PALET tema.css'te. Burada tek bir sabit renk yok.
Kural referansı: .claude/skills/gorsel-dil/SKILL.md
============================================================ */
/* --- 0. Bu katmanın kendi sözleşmesi -------------------------
tema.css bunları EZEBİLİR ama tanımsız bırakamaz.
------------------------------------------------------------ */
:root {
/* Düğme fiziği — GD1..GD4 */
--dugme-yukseklik: 52px;
--dugme-dolgu-yatay: 36px; /* referans 66px; 36 taban, --genis 1.85x */
--dugme-yazi: 0.875rem; /* 14px — UPPERCASE etiket rejiminde */
--dugme-agirlik: 600;
--dugme-donusum: uppercase; /* etiket rejimi: düz cümle DEĞİL */
--dugme-aralik: 0.09em; /* büyük harf aralıksız okunmaz */
--dugme-min-genislik: 140px;
--dugme-kalkis: 2px; /* :hover translateY */
/* Gölge merdiveni — iki katman: temas + yayılım.
Tek katmanlı gölge ucuz görünür. */
--golge-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10);
--golge-2: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.06);
--golge-3: 0 12px 32px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.08);
/* Zemin kademeleri — koyu temada gölge işlemez, derinlik
AÇIKLIK FARKIYLA kurulur. tema.css bunları gerçek değerlerle ezer. */
--bg-elev-2: var(--bg-elev);
--bg-cukur: var(--bg);
/* Çerçeve iki roldedir ve ikisi aynı renk OLAMAZ */
--line-guclu: var(--ink-muted);
/* Görsel oranları — sitede en fazla 3 farklı oran */
--oran-genis: 16 / 9;
--oran-urun: 4 / 5;
--oran-kare: 1 / 1;
}
/* --- 1. DÜĞME -----------------------------------------------
Referans ölçümü (SetSail, 2026-08-30):
yükseklik 60–82px · yazı 13px · UPPERCASE · harf aralıklı
yatay dolgu 66px · radius 0 · gölge yok
Bizim ilk sürümümüz: 150×54px, 17px, düz yazı, 30px dolgu.
Ölçüler "doğru" idi ama düğme tasarlanmış DURMUYORDU. Fark üç yerde:
1. Büyük harf + harf aralığı yok → etiket değil, cümle gibi duruyordu.
2. Yatay dolgu yarısı kadardı → nefes yok, kutu yazıya yapışık.
3. Koyu temada gölge görünmez → "yükselme" hissi hiç oluşmuyordu.
Bu bölüm üçünü de çözer. Birincil ve ikincil AYNI ölçüdedir; fark
doluluktadır. İkincili küçültmek hiyerarşi kurmaz, onu çöp yapar.
------------------------------------------------------------ */
.bl-dugme {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.7em;
min-block-size: var(--dugme-yukseklik);
min-inline-size: var(--dugme-min-genislik);
padding-inline: var(--dugme-dolgu-yatay);
padding-block: 0;
border: 1px solid transparent;
border-radius: var(--radius);
font: inherit;
font-family: var(--font-display, inherit);
font-size: var(--dugme-yazi);
font-weight: var(--dugme-agirlik);
/* Etiket rejimi: küçük punto + büyük harf + geniş aralık.
13-14px yazıyı "küçük" değil "etiket" yapan şey budur. */
text-transform: var(--dugme-donusum);
letter-spacing: var(--dugme-aralik);
line-height: 1;
text-align: center; text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
transform var(--dur-hizli) var(--ease-out),
box-shadow var(--dur-hizli) var(--ease-out),
background-color var(--dur-hizli) var(--ease-out),
border-color var(--dur-hizli) var(--ease-out),
color var(--dur-hizli) var(--ease-out);
}
/* Dört durum da zorunlu. :hover yalnız renk değiştiriyorsa fizik yok. */
.bl-dugme:hover { transform: translateY(calc(var(--dugme-kalkis) * -1)); }
.bl-dugme:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-anlik); }
.bl-dugme:focus-visible {
outline: 2px solid var(--accent); outline-offset: 3px;
border-radius: var(--radius); /* halka düğmenin şeklini izler */
}
.bl-dugme[disabled], .bl-dugme[aria-disabled="true"] {
opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none;
}
/* Birincil — dolu. Saydam zeminli birincil düğme YASAK. */
.bl-dugme--bas {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
box-shadow: var(--golge-1);
}
.bl-dugme--bas:hover {
background: color-mix(in srgb, var(--accent) 88%, var(--ink));
box-shadow: var(--golge-2);
}
.bl-dugme--bas:active { box-shadow: var(--golge-1); }
/* Koyu temada gölge görünmez (siyah üstüne siyah). Orada yükselme hissi
AKSAN HALESİYLE kurulur — gölgenin koyu temadaki karşılığı budur. */
@media (prefers-color-scheme: dark) {
.bl-dugme--bas:hover {
box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
}
.bl-dugme--hale:hover {
box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
/* İkincil — aynı ölçü, çerçeveli. */
.bl-dugme--yan {
background: var(--bg-elev);
border-color: var(--line-guclu);
color: var(--ink);
}
.bl-dugme--yan:hover {
background: var(--bg-elev-2);
border-color: var(--accent);
color: var(--accent);
}
/* Fotoğraf ÜSTÜNDE duran düğme. Zemin ne olursa olsun okunur kalmalı;
yarı saydam koyu taban + açık çerçeve. */
.bl-dugme--cam {
background: color-mix(in srgb, var(--bg) 55%, transparent);
border-color: color-mix(in srgb, var(--ink) 55%, transparent);
color: var(--ink);
}
.bl-dugme--cam:hover {
background: color-mix(in srgb, var(--bg) 78%, transparent);
border-color: var(--ink);
}
/* Üçüncül — yalnız yazı. Bu KÜÇÜLEBİLİR çünkü düğme değil, bağlantıdır.
Altı çizgi hover'da soldan sağa büyür; kesik değil akıcı bir sinyal. */
.bl-dugme--duz {
min-inline-size: 0; min-block-size: auto;
padding-inline: 0; padding-block: 0.35em;
background: none; border-color: transparent; color: var(--ink-muted);
box-shadow: none;
}
.bl-dugme--duz::after {
content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
block-size: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-orta) var(--ease-out);
}
.bl-dugme--duz:hover { color: var(--accent); transform: none; }
.bl-dugme--duz:hover::after { transform: scaleX(1); }
/* Hap biçimi — sıcak/davetkâr tonu olan sektörlerde (seyahat, kozmetik,
gıda). Köşeli düğme kurumsal, hap düğme davetkâr durur. */
.bl-dugme--hap { border-radius: 999px; }
.bl-dugme--hap:focus-visible { border-radius: 999px; }
/* Geniş — hero'nun ana eylemi. Referansta 66px yatay dolgu vardı. */
.bl-dugme--genis { padding-inline: calc(var(--dugme-dolgu-yatay) * 1.85); }
/* Tam genişlik — mobil eylem çubuğu ve form gönderimi */
.bl-dugme--tam { inline-size: 100%; }
/* Yalnız ikon — taşıyıcı/galeri okları. İkisi de referanslarda var. */
.bl-dugme--yuvarlak {
min-inline-size: var(--dugme-yukseklik);
inline-size: var(--dugme-yukseklik);
padding-inline: 0; border-radius: 999px; gap: 0;
}
.bl-dugme--yuvarlak:focus-visible { border-radius: 999px; }
/* İkon yuvası: ok hover'da ilerler. Hareket 3px — fark edilir ama
zıplamaz. transform kullanır, yerleşim tetiklemez (kural 4). */
.bl-dugme__ikon {
inline-size: 1.05em; block-size: 1.05em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
transition: transform var(--dur-orta) var(--ease-out);
}
.bl-dugme:hover .bl-dugme__ikon { transform: translateX(3px); }
.bl-dugme--yuvarlak:hover .bl-dugme__ikon { transform: none; }
/* Geri yönlü ok sola gitsin */
.bl-dugme--geri:hover .bl-dugme__ikon { transform: translateX(-3px); }
/* Yükleniyor — form gönderiminde. Metin yerinde kalır, genişlik zıplamaz. */
.bl-dugme[data-yukleniyor] { pointer-events: none; color: transparent; }
.bl-dugme[data-yukleniyor]::before {
content: ""; position: absolute;
inline-size: 1.1em; block-size: 1.1em; border-radius: 999px;
border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
border-block-start-color: var(--accent-ink);
animation: bl-donen 0.7s linear infinite;
}
@keyframes bl-donen { to { transform: rotate(1turn); } }
/* Düğme grubu: ikiden fazla eşit ağırlıklı düğme yan yana gelmez. */
.bl-eylem { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
/* --- 2. GÖRSEL ÇERÇEVESİ ------------------------------------
Her ![]()
width/height taşır (CLS). Oran buradan gelir,
böylece sitede oran disiplini tek yerden yönetilir.
------------------------------------------------------------ */
.bl-gorsel {
display: block; position: relative; overflow: hidden;
background: var(--bg-cukur); /* yüklenene kadar boşluk değil, yüzey */
border-radius: var(--radius);
}
.bl-gorsel > img,
.bl-gorsel > picture > img,
.bl-gorsel > video {
display: block; inline-size: 100%; block-size: 100%;
object-fit: cover;
}
.bl-gorsel--genis { aspect-ratio: var(--oran-genis); }
.bl-gorsel--urun { aspect-ratio: var(--oran-urun); }
.bl-gorsel--kare { aspect-ratio: var(--oran-kare); }
/* Karışık kaynaklı fotoğrafı tek işleme indirger (M3 duoton mantığı).
Biri sıcak biri soğuk stok fotoğraf yan yana durunca site amatör olur. */
.bl-gorsel--islenmis > img { filter: grayscale(1) contrast(1.06); mix-blend-mode: luminosity; }
.bl-gorsel--islenmis { background: var(--accent); }
/* Görsel üstünde metin varsa okunabilirlik katmanı ŞART. */
.bl-gorsel--yazili::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top,
color-mix(in srgb, var(--bg) 85%, transparent) 0%,
color-mix(in srgb, var(--bg) 30%, transparent) 45%,
transparent 75%);
}
@media (hover: hover) and (pointer: fine) {
.bl-gorsel--yaklasan > img { transition: transform var(--dur-yavas) var(--ease-out); }
.bl-gorsel--yaklasan:hover > img { transform: scale(1.03); }
}
/* --- 3. KART ------------------------------------------------
Kart ne gölgesiz ne çerçevesiz olur. Biri şart, ikisi birlikte
de olabilir — ama "hiçbiri" düz dikdörtgen demektir.
------------------------------------------------------------ */
.bl-kart {
display: grid; align-content: start; gap: var(--space-2xs);
padding: var(--space-m);
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color var(--dur-hizli) var(--ease-out),
box-shadow var(--dur-hizli) var(--ease-out),
transform var(--dur-hizli) var(--ease-out);
}
.bl-kart--yukselen:hover {
border-color: var(--line-guclu);
box-shadow: var(--golge-2);
transform: translateY(-2px);
}
/* Kartın tamamı tıklanabilirse: bağlantıyı kaplat, metin seçimi kalsın. */
.bl-kart--baglantili { position: relative; }
.bl-kart--baglantili .bl-kart__ort::after { content: ""; position: absolute; inset: 0; }
/* --- 4. YÜZEY KADEMESİ --------------------------------------
Koyu temada derinlik açıklık farkıyla kurulur.
------------------------------------------------------------ */
.bl-yuzey { background: var(--bg-elev); }
.bl-yuzey--2 { background: var(--bg-elev-2); }
.bl-yuzey--cukur {
background: var(--bg-cukur);
border: 1px solid var(--line);
border-radius: var(--radius);
}
/* --- 5. ETİKET / ROZET --------------------------------------
Durum bilgisi (stokta, yeni, son adet) için. Rakam taşıyorsa
tabular-nums şart. */
.bl-rozet {
display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.25em 0.7em;
border: 1px solid currentColor;
border-radius: var(--radius);
font-size: var(--step--1); font-weight: 500; line-height: 1.4;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.bl-rozet--dolu { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
/* --- 6. BOŞ DURUM -------------------------------------------
"Sonuç yok" ekranı tasarlanmamışsa site bitmemiştir. */
.bl-bos {
display: grid; place-items: center; gap: var(--space-2xs);
padding: var(--space-xl) var(--space-m);
text-align: center;
border: 1px dashed var(--line);
border-radius: var(--radius);
color: var(--ink-muted);
}
/* --- 7. İSKELET (yükleniyor) --------------------------------
Gerçek içerik gelene kadar layout kaymasın. */
.bl-iskelet {
background: linear-gradient(90deg,
var(--bg-elev) 25%, var(--bg-elev-2) 37%, var(--bg-elev) 63%);
background-size: 400% 100%;
animation: bl-parla 1.4s ease-in-out infinite;
border-radius: var(--radius);
}
@keyframes bl-parla { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* --- 8. DETAY BİTİŞİ ----------------------------------------
Tek tek fark edilmez, toplamda hissedilir. */
.bl-rakam { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* İkon tek kaynaktan ve currentColor okur — karışık ikon karışık site. */
.bl-ikon {
inline-size: 1.15em; block-size: 1.15em;
flex: none; fill: none;
stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
/* Bağlantının dokunma alanı görsel sınırından büyük olsun. */
.bl-genis-hedef { position: relative; }
.bl-genis-hedef::before {
content: ""; position: absolute; inset: -0.6em -0.4em;
}
/* --- 9. HAREKET TERCİHİ -------------------------------------
Bu katmandaki her hareket kapanır; ölçüler ve renkler kalır. */
@media (prefers-reduced-motion: reduce) {
.bl-dugme, .bl-kart, .bl-gorsel--yaklasan > img { transition: none; }
.bl-dugme:hover, .bl-kart--yukselen:hover { transform: none; }
.bl-iskelet { animation: none; }
}
/* --- 10. BASKI ----------------------------------------------- */
@media print {
.bl-dugme { box-shadow: none; border: 1px solid currentColor; }
.bl-iskelet { animation: none; background: none; }
}
/* --- 11. ÜST ŞERİT — VARSAYILAN ------------------------------
NEDEN VAR: sayfa-uret.mjs her sayfaya `.ust` başlığını yazıyor
ama BURASI BOŞTU; stil yazmak temanın insafına kalmıştı ve üç yeni
tema üst üste kırık şeritle çıktı.
İKİNCİ TUR — TİPOGRAFİ. İlk düzeltme hizalamayı kurdu ama yazı
kötü kaldı ve sebebi şuydu: kabuk `.marka__alt` ile `.ust__tel`
öğelerine `class="mono"` yazıyor, temaların `.mono` tanımı ise
büyük harf + geniş harf aralığı. Bölüm etiketi için doğru, ama:
· marka alt yazısı → "KARAKÖY" harfleri açılmış, şablon görüntüsü
· TELEFON NUMARASI → uppercase (anlamsız), 1.2px aralık (okunmaz),
tabular rakam yok (hizasız)
Burada ikisi de geri alınıyor. Şerit kendi tipografisini kurar;
`.mono`nun etiket davranışı şeride sızmaz.
------------------------------------------------------------- */
.ust {
position: relative;
z-index: 20;
background: var(--bg);
}
.ust__ic {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs) var(--space-l);
flex-wrap: wrap;
padding-block: var(--space-s);
}
/* ---- marka ----------------------------------------------------
Marka adı --step-2'ye indirildi: --step-1'in üstündeki her adım
şeridi menüye göre orantısızlaştırıyordu (35px marka / 15px menü
ölçüldü ve marka her şeyi eziyordu). */
.marka {
display: grid;
gap: 0.15em;
line-height: 1.08;
text-decoration: none;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
}
.marka__ad { font-size: inherit; }
/* Alt yazı: küçük, sakin, DAR aralık. Büyük harf kalıyor ama
0.06em'e iniyor — 0.16em "şablon" görüntüsünün ta kendisiydi. */
/* `.ust` öneki ÖZGÜLLÜK İÇİN: temaların `.mono` tanımı da tek sınıf
(0,1,0) ve tema.css bilesen.css'ten SONRA yükleniyor — eşit
özgüllükte sonraki kazanıyordu ve telefon uppercase kalmıştı.
İki sınıflı seçici (0,2,0) bunu kesin çözüyor. */
.ust .marka__alt {
font-family: var(--font-util);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.marka:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* ---- menü -----------------------------------------------------
Altı çizili mavi varsayılan link OLMAYACAK; boyut da 15px'e
çıkarıldı — birincil gezinme 14px'te ikincil gibi duruyordu. */
.ust .ek-menu a,
.ust__tel {
text-decoration: none;
color: var(--ink);
}
.ust .ek-menu {
font-family: var(--font-body);
font-size: 0.9375rem;
letter-spacing: 0;
text-transform: none;
gap: var(--space-2xs) var(--space-m);
}
.ust .ek-menu a {
position: relative;
padding-inline: 1px;
min-block-size: 44px;
}
/* Altı çizgi hover'da transform ile açılır (kural 4). */
.ust .ek-menu a::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0.6em;
block-size: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-hizli, 180ms) var(--ease-out, ease);
}
.ust .ek-menu a:hover::after,
.ust .ek-menu a:focus-visible::after { transform: scaleX(1); }
.ust .ek-menu a[aria-current="page"]::after { transform: scaleX(1); opacity: 0.4; }
.ust .ek-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---- eylem: telefon + düğme -----------------------------------
TELEFON BİR NUMARADIR. Büyük harf anlamsız, harf aralığı okumayı
bozar, tabular rakam ise hizayı verir. `.mono`nun etiket
davranışı burada AÇIKÇA geri alınıyor. */
.ust__eylem {
display: flex;
align-items: center;
gap: var(--space-s);
flex-wrap: wrap;
}
.ust .ust__tel {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
font-variant-numeric: tabular-nums;
min-block-size: 44px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.ust__tel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Dar ekran: marka solda kalır, menü alta iner ve yatay kayar.
Telefon GİZLENMİYOR — restoran/klinik gibi sektörlerde birincil
dönüşüm o. */
@media (max-width: 61.99rem) {
.ust__ic { gap: var(--space-2xs) var(--space-s); }
.ust .ek-menu {
order: 3;
inline-size: 100%;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
padding-block-end: var(--space-3xs);
}
/* `flex: none` ŞART, yalnız `white-space: nowrap` yetmiyor.
Ölçüldü (mühür, 390 px): şerit 351 px, içerik 354 px — yalnız 3 px
taşma. Esnek öğeler varsayılan `flex-shrink: 1` ile bu 3 px'i
paylaşıp İÇERİKLERİNİN ALTINA büzülüyor; yazı kutudan taşıyor ve
şeridin sol kırpma kenarına denk gelen ilk öğenin ilk harfi
kesiliyor ("Ana sayfa" → "na sayfa"). Üstelik `scrollLeft` 0
olduğu için kaydırarak da geri getirilemiyor: taşma şeridin
BAŞINDA, kaydırılabilir alanın dışında kalıyor.
`flex: none` ile öğeler gerçek genişliklerinde kalıyor, şerit
gerçekten kaydırılabilir oluyor. */
.ust .ek-menu a { white-space: nowrap; flex: none; }
}
@media (max-width: 30rem) {
.ust__tel { display: none; } /* çok dar ekranda düğme yeter */
}
@media (prefers-reduced-motion: reduce) {
.ust .ek-menu a::after { transition: none; }
}
/* --- 12. ALT BİLGİ — VARSAYILAN ------------------------------
NEDEN VAR: `.ust` ile aynı boşluk. sayfa-uret.mjs her sayfaya
`.alt` alt bilgisini yazıyor ama stil yazmak temanın insafına
kalmıştı; eski temalar elle yazmış, üç yeni tema hiç yazmamıştı.
ASIL KIRILMA NOKTASI: alt bilgi başlıkları `