/* =====================================================
TON Coffee Roastery — HOME
Yalnızca index.html yükler.
İçerik: Koridor · Fiyat Panosu (podyum) · CTA Platform · homepage responsive
Not: AI Chat Hero (.hc-*) → hero.css'e taşındı (9 Haz 2026).
Bağımlılık: core.css
===================================================== */
/* ---- CTA Platform — Ambient Ember (kart-dışı: ışık=dolgu · 21st CTA-with-Glow) ----
Kart yok; merkez içerik, arkada STATİK amber kor. Hover'da glow yükselir+güçlenir.
Derinlik yüzeyden değil ışıktan → karanlık temada doğar, hero amber kimliğiyle bağ.
Sürekli drift YOK (perf/not-5: idle'da repaint yok); hover transient, idle maliyeti sıfır. */
.cta-platform{
position: relative;
overflow: hidden;
}
.cta-platform__glow{
position: absolute; z-index: 0; left: 50%; top: 44%;
width: min(760px, 100%); height: 400px;
transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(ellipse 56% 58% at 50% 50%, color-mix(in srgb, var(--act) 15%, transparent), transparent 72%);
filter: blur(26px); opacity: 0.5; /* kısık amber havuz (Çağkan ref) — büyük bulut değil */
transition: opacity 0.6s var(--ease-o);
}
.cta-platform:hover .cta-platform__glow{ opacity: 0.62; } /* hafif life; transform lift yok */
.cta-platform__inner{
position: relative; z-index: 1;
max-width: 680px; margin: 0 auto;
padding: clamp(4.5rem, 9vw, 7.5rem) var(--gut);
text-align: center;
}
.cta-platform__eyebrow{
font-family: var(--font-m); font-size: 0.76rem; letter-spacing: 0.04em;
text-transform: lowercase; color: var(--act); margin-bottom: 1.4rem;
}
.cta-platform__title{
font-family: 'JetBrains Mono', var(--font-m); font-weight: 800;
font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; letter-spacing: -0.03em;
color: var(--cream); margin: 0 0 1.1rem; padding-bottom: 0.06em; text-wrap: balance;
}
.cta-platform__title em{
font-style: normal; color: var(--cream);
text-shadow: 0 0 26px color-mix(in srgb, var(--act) 60%, transparent), 0 0 7px color-mix(in srgb, var(--act) 42%, transparent);
}
.cta-platform__sub{
font-family: var(--font-m);
font-size: 0.9rem; line-height: 1.7; color: var(--cream-dim);
max-width: 52ch; margin: 0 auto 2.2rem;
}
.cta-platform__sub::before{ content: none; }
/* buton dili: mono-UPPERCASE üniforması yerine lowercase (yalnız bu bölüm; .btn davranışı/magnetic aynı) */
.cta-platform .btn{ text-transform: lowercase; letter-spacing: 0.04em; }
/* Buton: global .btn (krem) + data-magnetic — amber ghost buton kaldırıldı (Çağkan ref).
.btn inline-flex + inner text-align:center → ortalanır; magnetic transform .btn'de hazır. */
/* ---- Kahve Borsası — lider (sol) + iki akan sıra (sağ) ----------
V1 Terminal lider kartı görünümü + V3 Derinlik hover hareketi.
Yön sinyali: medyan ₺/100g (yeşil ▼ değer · kırmızı ▲ premium).
Sadece ok + renk, yüzde yok; oklar yanıp söner. Kayan üst şerit yok. */
.pboard{
padding: 1.25rem 0 4.5rem;
scroll-margin-top: 5rem; /* hero scroll-cue anchor'ı fixed nav altına kaymasın */
}
/* manifesto'dan hemen sonraki koridor → üst boşluk küçük (geçiş); 02/03 koridorları 5rem kalır */
#pazar.corridor{ padding-top: 2.5rem; }
.bx2{ max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }
/* eyebrow YEŞİL */
.bx2-eyebrow{
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--font-m); font-size: 0.76rem; letter-spacing: 0.02em;
text-transform: lowercase; color: var(--save);
}
.bx2-live{ width: 7px; height: 7px; border-radius: 50%; background: var(--save); flex: none; }
.bx2-all{
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-m); font-size: 0.74rem; letter-spacing: 0.02em;
text-transform: lowercase; color: var(--cream-dim); text-decoration: none;
transition: color var(--dur-2), gap var(--dur-2);
}
.bx2-all:hover{ color: var(--cream); gap: 0.65rem; }
.bx2-all svg{ width: 13px; height: 13px; }
/* ---- yön oku: SADECE ok + renk, yüzde yok, yanıp söner ---- */
.bx2-arr{ display: inline-flex; line-height: 1; flex: none; font-size: 0.82em; transform: translateY(0.5px); }
.bx2-arr--down{ color: var(--save); } /* piyasa altı = değer = yeşil */
/* 5 Eyl 2026 — HÜKÜM RENGİ KALKTI. Kırmızı sitede 7 satırda yaşıyordu ve 7'si de
"medyan üstü" hükmüydü; başka hiçbir iş yapmıyordu. Yeşil KALIYOR (alıcının ödülü,
ölçüldü: Eylül'deki 6 çıkışın 6'sı medyan altındaki ürüne). Kaldırılan yalnız
markaya iliştirilen ceza. Gerekçe + emsaller: arastirma.json tur 68, taban ölçümü
data/yon-rengi-taban.json. ⚠️ --down TOKENI TANIMLI KALIR (tazelik nöbetçisi listeliyor),
yalnız kullanıcısı yok. Geri koymadan önce o dosyayı oku. */
.bx2-arr--up{ color: var(--muted); } /* piyasa üstü = NÖTR (5 Eyl: hüküm rengi kalktı) */
.bx2-arr--flat{ color: var(--muted); font-size: 0.6em; }
/* ---- reveal ---- */
.bx2-rise{ opacity: 0; transform: translateY(12px); }
.is-in .bx2-rise{
opacity: 1; transform: translateY(0);
transition: opacity var(--dur-6) var(--ease-o), transform var(--dur-6) var(--ease-o);
transition-delay: calc(var(--i, 0) * 70ms);
}
/* ---- HAREKET ----
reduced-motion override (Çağkan 17 Haz, kilitli kural #12 bilerek ezildi): her zaman çalışır */
.bx2-live{ animation: bx2-pulse 2s infinite; }
.bx2-arr--down, .bx2-arr--up{ animation: bx2-blink 1.7s ease-in-out infinite; animation-delay: calc(var(--bd, 0) * 1s); }
@keyframes bx2-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.4; } }
@keyframes bx2-pulse{
0%{ box-shadow: 0 0 0 0 rgba(84,201,122,0.5); }
70%{ box-shadow: 0 0 0 6px rgba(84,201,122,0); }
100%{ box-shadow: 0 0 0 0 rgba(84,201,122,0); }
}
/* reduced-motion kill bloğu kaldırıldı (Çağkan 17 Haz override) — borsa hep canlı.
.bx2-rise reveal görünürlüğü .is-in (home.js:380, reduce-guard'sız) + ungated transition ile garanti. */
/* ---- Koridor başlığı — "açılmış kapı" (Pazar / Dünya / Toptan) ----
3 zon sınırı: ziyaretçi her an "hangi dünyadayım" bilir. Kapı no/adıyla
birebir eşleşir. --cor-accent: amber=alışveriş (01/03), yeşil=editorial (02). */
.corridor{
max-width: var(--shell);
margin: 0 auto;
padding: 5rem var(--gut) 0;
scroll-margin-top: 84px; /* sticky nav offset — çapa zıplaması nav altında kalmasın */
}
.corridor__rule{
display: block;
height: 1px;
margin-bottom: 1.5rem;
background: linear-gradient(90deg,
color-mix(in srgb, var(--cor-accent, var(--pop)) 55%, transparent) 0%,
var(--border-2) 38%, transparent 72%);
}
.corridor__kicker{
display: inline-flex; align-items: baseline; gap: 0.7rem;
margin-bottom: 0.7rem;
}
.corridor__num{
font-family: var(--font-m);
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
letter-spacing: 0.02em;
color: var(--cor-accent, var(--pop));
font-variant-numeric: tabular-nums;
}
.corridor__tag{
font-family: var(--font-m);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cor-accent, var(--pop));
}
/* kafdeks dili: bölüm başlığı hero H1 ile aynı gramerde (mono 800, dik yeşil vurgu) */
.corridor__name{
font-family: 'JetBrains Mono', var(--font-m);
font-weight: 800;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--cream);
text-wrap: balance;
margin-bottom: 0.7rem;
}
.corridor__name em{ font-style: normal; color: var(--pop); }
.corridor__intent{
font-family: var(--font-m);
font-size: 0.88rem;
line-height: 1.7;
color: var(--muted);
max-width: 58ch;
}
.corridor__intent::before{ content: none; }
/* ---- Homepage Responsive -------------------------- */
@media (max-width: 680px) {
.pboard{ padding: 1rem 0 3.5rem; }
.corridor{ padding: 3.5rem var(--gut) 0; }
}
@media (max-width: 640px) {
.cta-platform__glow{ height: 420px; }
}
@media (max-width: 480px) {
.footer{ padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* ============================================================
MONO-GLOW TESTİ — yalnızca index.html
home.css'i SADECE index yüklediği için bu override'lar başka
sayfaya sızmaz. Diğer sayfalar core.css'teki sage + Space Mono'da kalır.
Konsept: amber = IŞIK (fill değil). Primary buton zaten cream (--accent);
--pop sadece çizgi/glow/eyebrow/nokta olarak görünür → hareket edince doğar.
Mono: Space Mono (daktilo) → DM Mono.
============================================================ */
/* NOT: tema token'ları (--pop forest, --act amber, DM Mono),
buton dili, nav CTA, logo em, overflow-x:clip artık core.css'te (tüm site).
Aşağıdakiler index'e özgü: eyebrow/emblem yeşil yayılımı, prow, doors scrim,
stats glow, hero görünürlük, globe mobil. */
/* --- CTA eyebrow: amber (Ambient Ember varyantı — ışık ekseni, sage değil) --- */
.cta-platform__eyebrow{
color: var(--act);
}
/* ============================================================
KAFDEKS DİLİ — footer (yalnız index; home.css başka sayfada yok)
Kolon başlıkları mono-UPPERCASE üniformasından lowercase log'a.
============================================================ */
.footer__col h5{
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: lowercase;
}
/* (21 Tem) Eski 4-duraklı snap bloğu (hero→borsa→CTA→footer, html scroller) silindi:
CTA ve footer durakları tek-ekran kilidiyle birlikte index'ten kalkmıştı, scroller da
artık html değil body → blok fiilen etkisizdi. Yerine aşağıdaki 2-duraklı mobil sistem. */
/* =====================================================
TEK-EKRAN KİLİDİ + MİNİ-FOOTER (16 Tem 2026 · DİL A "OCAK")
Ana sayfa kaydırılmaz: nav (fixed) + hero-stage (flex) + minifoot.
Mobilde (<900px) kilit açılır, tek akış minimum kaydırmayla kalır.
===================================================== */
body.home-lock{
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.home-lock .hero-stage{
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
body.home-lock .hc{
flex: 1;
min-height: 0;
padding: calc(var(--nav-h) + 1.25rem) var(--gut, 2rem) 1.25rem;
display: flex;
align-items: center;
}
body.home-lock .hc-grid{
width: 100%;
max-height: 100%;
}
/* ⚠️ `clip`, `hidden` DEĞİL (5 Ağu — Çağkan bildirdi: sağdaki çipe basınca ekran kayıyor).
`overflow:hidden` bir kaydırma kabıdır: kırpar ama tarayıcı onu PROGRAMLI kaydırabilir.
Odak sağdaki bir çipe düşünce tarayıcı her kaydırılabilir ataya "görünür kıl" uyguluyor,
pane de 36px sola kayıp künye/cetvel/düğme dahil tüm durağı ekrandan çıkarıyordu — geri
kaydırmanın da yolu yok, çünkü kaydırma çubuğu gizli. `clip` kaydırma kabı KURMAZ, aynı
piksellerle kırpar. Ölçüldü (414×896): tıklama öncesi pane scrollLeft 0 / kaydırma payı 55,
tıklama sonrası scrollLeft 36. Payın kaynağı `.hnMount::before` ışığı (inset -20% → 75px).
Işığı kısmak semptomu kapatırdı; kapı bu satır.
⚠️ İKİ SATIR ŞART: `clip` Safari 16'da geldi. Tek satır yazılsaydı Safari 15 bildirimi
GEÇERSİZ sayıp atar ve `overflow` başlangıç değerine (`visible`) düşerdi — yani kırpma
tamamen biter, kayma hatasından daha kötüsü olurdu. Önce `hidden` yazılır (eski tarayıcı
orada kalır), sonra `clip` ezer. */
body.home-lock .hc-pane{
max-height: calc(100dvh - var(--nav-h) - 6rem);
overflow: hidden;
overflow: clip;
display: flex;
min-height: 0;
}
/* Kısa ekran fit (17 Tem · uygulama-notlari): sağ pano içeriği (lider kart + bar +
sabit 200px tape = ~609px) ~810px'ten kısa viewport'ta panele sığmıyordu → tape'in
altı satır ortasından kırpılıyordu. Çözüm: terminal penceresini flex-kolon yap,
tape'i esnet → tüm .hcw__win panele tam sığar, kısa ekranda tape küçülür (sonsuz
akış zaten var → daha az satır), alt fade hep görünür, satır-ortası kesme biter. */
body.home-lock .bx2Mount,
body.home-lock .hc-pane .bx2,
body.home-lock .hcw__win{
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
width: 100%;
}
body.home-lock .tp{
flex: 1 1 auto;
min-height: 0;
height: auto;
max-height: none; /* lider fişi tek satıra indi → tape kalan alanı doldurur (çok satır) */
}
/* scroll-snap tek ekranda anlamsız — kapat */
body.home-lock{ scroll-snap-type: none; }
/* 3 kolon (21 Tem) — .footer__bottom ile aynı gerekçe: "İstanbul, Türkiye" kaldırılınca
space-between iki elemanla kaldı, durum sağ kenara yapışıyordu. 1fr·auto·1fr = durum ortada. */
.minifoot{
flex: none;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: .8rem var(--gut, 2rem);
border-top: 1px solid var(--border-2); /* --border zemine 1.18:1: footer ayracı ekranda hiç yoktu */
font-size: .82rem;
color: var(--muted-2);
background: var(--bg);
position: relative;
z-index: 3;
}
/* Geliştirme durumu — tek-ekran kilidinde tek satır (yükseklik büyütmez); dar ekranda gizlenir
(mesaj nav rozetinde + iç sayfa footer'larında da var). ❯ = terminal prompt (kilitli kimlik). */
/* © sol · konum sağ — iç sayfa .footer__copy register'ı (mono, uppercase). */
.minifoot__copy{
font-family: var(--font-m);
font-size: .65rem;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.4; /* mono register — body'nin 1.75'i miras kalmasın (tek ritim) */
color: var(--muted);
}
/* Durum — ortada tek satır, dar mono inline (❯ = terminal kimliği). */
.minifoot__dev{
font-family: var(--font-m);
font-size: .6rem;
letter-spacing: .03em;
line-height: 1.4; /* copy ile aynı ritim */
color: var(--muted-2);
white-space: nowrap;
text-align: center;
}
.minifoot__dev .live{ color: var(--pop); }
/* Destekçi ayracı CSS'te: mobilde satır kırılınca `·` de gider (öksüz nokta yok).
Aradaki boşluk HTML'de duruyor (flex satırda zaten yutulur) — ham metni okuyan
cevap motoru "aşamasındabacked" görmesin; `.hc-deck` ile aynı ders. */
.minifoot__by::before{ content: "· "; }
/* (2 Ağu) Alet plakası künyesi "· kafdeks/terminal v0.9" KALDIRILDI (Çağkan) —
sürüm zaten nav rozetinde (v0.9-beta) yazıyor, footer'da dördüncü satırı açıp
"v0.9"u tek başına alta düşürüyordu. Nav rozeti kalır, burası susar. */
/* =====================================================
MOBİL İKİ-SAYFA (21 Tem 2026)
Tek akış yerine iki tam ekran durak:
1) arama 2) borsa + minifoot (aynı durağın dibinde — üçüncü durak YOK).
Scroller = body (html değil): dvh kilidi korunur, iOS'ta adres çubuğu
yüksekliği oynamaz → mandatory snap zıplamaz. Toplam yükseklik tam 200dvh,
durak sınırları içerik uzunluğundan bağımsız → sayfalar birbirine taşmaz.
Klavye açılınca dvh değişir → home.js body.snap-off ile snap'i geçici kapatır.
min-height:600px kapısı yalnız yatay telefonu (≈390px) dışarıda bırakır. Kısa ekranda
MODU KAPATMAK yanlıştı (21 Tem: kapı 700'e çıkarılınca 629px'lik pencere tek-akışa
düşüp iki-sayfa konseptinden çıktı — Çağkan) → doğrusu içeriği SIĞDIRMAK: aşağıda
3 kademeli sıkıştırma (820 / 760 / 690) boşlukları kısar, en dar kademede eyebrow
gizlenir (aynı sayıları alttaki readout zaten basıyor).
===================================================== */
/* Kısa ekran / landscape fallback — eski tek-akış davranışı (snap yok). */
@media (max-width: 900px){
body.home-lock{ height: auto; overflow: auto; display: block; }
body.home-lock .hc{ display: block; padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2rem; }
body.home-lock .hc-pane{ max-height: none; }
body.home-lock .tp{ max-height: 320px; }
.hc-scrollcue{ display: none; }
}
@media (max-width: 900px) and (min-height: 600px){
body.home-lock{
height: 100dvh;
overflow-y: auto;
overflow-x: clip;
display: block;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overscroll-behavior-y: contain; /* yaylanma sayfa içinde kalsın */
-webkit-overflow-scrolling: touch;
}
body.home-lock.snap-off{ scroll-snap-type: none; }
body.home-lock .hero-stage{ display: block; }
body.home-lock .hc{ display: block; padding: 0; min-height: 0; }
body.home-lock .hc-grid{ display: block; max-height: none; }
/* --- 1. sayfa: arama —— OPTİK MERKEZ (K2, Çağkan onayı 2 Ağu) ---
Kimlik + konsol TEK KÜTLE sayılır ve dikeyde ortalanır; kütle içi tek ayraç sabit
(1.9rem), artan yükseklik üstte ve altta eşit havaya gider. Kaydır ipucu kütleden
koparılıp ekranın dibine çivilenir (absolute) — kütleyle birlikte kaymasın, sayfanın
dibi hep aynı yerde olsun. Ölçüm 414×760: üst 124 · ayraç 30 · ipucu dibe 22.
⚠️ `center` 21 Tem'de bir kez REDDEDİLMİŞTİ ("ortaya basık, kenarlarda boşluk") ve o
gerekçe o gün DOĞRUYDU: blok BEŞ ayrı kardeşti, center artan yeri kenarlara
havuzluyor, kardeşler arası ise dar kalıyordu (kenar 146-258px vs ara 88-163px) —
yani hem dağınık hem basık. 2 Ağu'da girdi değişti: kardeşler iki KÜMEYE indi
(`.hc-g--id` + `.hc-g--console`) ve kümeler arası ayraç artık dağıtımdan DEĞİL sabit
marjdan geliyor. Center'ın kenara havuzladığı yer bu düzende kusur değil, kararın
kendisi: kütle ortada, hava simetrik. Eski karar yanlış değildi — dayanağı kalktı.
Beş kardeşli düzene dönülürse bu satır da geri alınır (o zaman space-between doğru).
space-between + 720px tavanı bu yüzden emekli: tavan, dağıtımın sınırsız büyümesini
frenlemek içindi; dağıtım artık yok. */
body.home-lock .hc-wrap{
position: relative;
min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
/* `safe`: içerik ekrandan uzunsa (kısa telefon) center taşmayı YUKARI da iter ve ilk
satırlar nav'ın altına saklanır; safe, taşma durumunda hizayı start'a düşürür. */
justify-content: center;
justify-content: safe center; /* iki satır: `safe`i tanımayan eski Safari ilkinde kalır
(tek satır bırakılsaydı bildirim geçersiz olur ve hiza
flex-start'a düşerdi — kütle ortada değil tepede) */
padding: var(--nav-h) 1.25rem 4.5rem;
}
/* Kimlik kümesi (H1 + kimlik satırı + ne-yapacağın) tek kardeş olur → aralarındaki
boşluk space-between dağıtımının DIŞINA çıkar ve sıkı kalır. Ölçüm (390x844):
önce yedi kardeş vardı ve her ara ~40px'ti, H1 ile kimlik satırı akraba
görünmüyordu; şimdi H1↔deck 8px, deck↔sub 14px, dağıtım dört sınıra iniyor. */
/* 2 Ağu: aynı gerekçe konsol kümesine de uygulandı (arama + kapılar + readout).
Beş kardeşte dağıtım 32·44·48·46 idi — kutu↔çip arası, kimlik↔konsol arasıyla
eşitti, yani hiçbir şey gruplanmıyordu. Şimdi iki küme + ipucu = üç kardeş:
küme içi ritim sabit (13/14px), dağıtım yalnız kümelerin ARASINA gider. */
body.home-lock .hc-g--id,
body.home-lock .hc-g--console{ display: flex; flex-direction: column; }
/* ---- KOLON SÖZLEŞMESİ (23 Ağu 2026, Çağkan: "sayfa 1 ve 3 gibi hissetsin") ----
`.hc-wrap` bir flex kolonu ve hizası `align-items:flex-start` (hero.css:146) →
`width:100%` YAZILMAYAN her çocuk içeriğine büzülür ve SOLA yaslanır. Tuzak
biliniyordu (`.hc-gates` bu yüzden width:100% taşır, hero.css:543 uyarısı) ama
mobil küme sarmalayıcıları onu almamıştı. Ölçüldü — kümeler her genişlikte 351px'te
donuyordu: 550px pencerede sağda ~180px, 768'de ~380px ölü alan kalıyor ve durak
sola çakılı duruyordu. Kapı ve huni simetrikken arama durağı değildi; Çağkan'ın
"ortalı değil" dediği şey buydu (dikey hiza zaten doğruydu — K2 optik merkez).
Satır bilerek huninin sözleşmesinin (aşağıda, `.hnMount > *`) BİREBİR ikizi. */
body.home-lock .hc-g--id,
body.home-lock .hc-g--console{ width: 100%; max-width: var(--deste-col); margin-inline: auto; }
/* Tek durakta ÜÇ ayrı sağ kenar vardı: paragraf 317 · kutu 351 · çipler 351.
`.hc-sub`ın 44ch tavanı (hero.css:259) satır uzunluğu içindi; kolon artık o işi
kendisi yapıyor, tavan yalnız kenarı tırtıklı bırakıyordu.
`.hc-gates`in 25rem tavanı ≤768'de zaten kalkıyordu (hero.css:786); 769-900
bandında 400px kalıp kolonu 32px kısa kesiyordu. */
body.home-lock .hc-sub { max-width: none; }
body.home-lock .hc-gates{ max-width: none; }
/* Kütle içi TEK ayraç — optik merkezde boşluk dağıtımı yok, mesafe burada yazılı. */
body.home-lock .hc-g--console{ margin-top: 1.9rem; }
body.home-lock .hc-deck { margin-top: .5rem; }
body.home-lock .hc-sub { margin: .9rem 0 0; }
body.home-lock .hc-gates { margin-top: .8rem; }
/* 6 Ağu (Y2): `//` satırı merdivene inmişti (.88 → .75). Gerekçe o gün doğruydu:
H1 40px'ti ve cümle onun yanındaki en büyük görsel kütleydi. 23 Ağu'da H1 panel
kademesine (25px) indi, cümle .75'te kaldı ve ilişki TERSİNE döndü — sayfanın ne
yapacağını söyleyen tek cümle, anlattığı arama kutusunun kendi metninden (15,4px)
küçük kalıyordu. Çağkan: "oraya gelen insan ne yapması gerektiğini oradan anlayacak".
⚠️ Önce .95rem denendi (masaüstü kilidinin değeri, hero.css:245 — orada gerekçe
"kutu ile cümle aynı kademeye oturunca tek enstrüman okunur") ve REDDEDİLDİ:
"kaba durmuş, 975 kahve ağırlığını kaybetmiş". Ölçünce sebep göründü — mobilde
.95rem 15,2px ve kutunun metni 15,4px, yani cümle kutuyla BERABERE kalıyor.
Masaüstünde beraberlik doğru (kutu geniş, sağda borsa paneli var); mobilde kutu
ekranın birincil aksiyonu ve rütbesini cümleye kaptıramaz. Kilidin DEĞERİ değil
GEREKÇESİ taşınır.
.85rem (13,6px) bu ekranın merdivenindeki tek açık aralığın ortası:
25,4 H1 · 16,0 çip · 15,4 kutu · [13,6 cümle] · 10,9 künye.
H1/cümle oranı 2,11 → 1,86. Ölçüldü: .75-.95 arası her değerde 3 satır, taşma yok
(.95'in üstü, 1.05rem, 4 satıra kırılıp +48px yazıyor — tavan orası). */
body.home-lock .hc-sub { font-size: .85rem; line-height: 1.55; }
/* Başlık rütbesi (23 Ağu 2026, Çağkan: "2. sayfa da 1 ve 3 gibi hissetsin"):
poster değil PANEL register'ı. Eski clamp(2.2, 10vw, 2.6) masaüstü hero'nun
afiş ölçeğiydi ve 2. durağı komşularının yanında "sıkıştırılmış web sitesi"
gibi gösteren ana kütleydi (1. durağın en büyük tipi 1.5rem'lik iddia satırı).
H1 yine ekranın en büyük tipi ve sayıyı taşıyor (register kuralı bozulmadı),
yalnız kademe komşu durakların merdivenine indi.
(Eski "31px'te alt metin başlığı eziyordu" gerekçesi hâlâ geçerli — 1.55 tabanı
o yüzden .hc-sub'ın .75rem'inin iki katından yukarıda.) */
body.home-lock .hc-heading{ font-size: clamp(1.55rem, 6.5vw, 1.8rem); line-height: 1.25; }
/* --- 2. sayfa: borsa (kalan yükseklik minifoot'a ayrılır) --- */
/* height (min-height DEĞİL): panelin iç flex zinciri (.bx2Mount/.bx2/.hcw__win → max-height:100%)
ancak kesin yükseklikli ebeveynde çözülür; min-height ile tape taşıp durağı 3 ekrana çıkarıyordu. */
body.home-lock .hc-pane{
height: calc(100dvh - var(--mf-h, 6.2rem));
max-height: none;
overflow: hidden;
overflow: clip; /* hidden değil — gerekçe + iki-satır şartı yukarıda (odak kaydırması) */
scroll-snap-align: start;
scroll-snap-stop: always;
flex-direction: column;
padding: calc(var(--nav-h) + .75rem) 1.25rem .75rem;
}
/* tape ekranı doldursun — eski 320px sınırı kalktı (Çağkan kararı 21 Tem) */
body.home-lock .tp{ max-height: none; }
/* (Sağ ray payı kuralı buradan KISA EKRAN kademesine indi — ölçüm aşağıda.) */
/* Kısa telefon (iPhone mini · Safari iki çubuk açık ≈650; dar bant 600-679):
kütle 500px + nav 60 + ipucu payı 72 = 632 > 620 → 1. durak sayfayı 12px aşıyor,
snap sınırına taşıyordu (ÖLÇÜLDÜ 414×620). İki yerden kısılır: ipucu payı ve kütle
içi tek ayraç. İpucu GİZLENMEZ — ray'deki ok aynı işi yapıyor olsa da kaydırma
davranışını yazıyla söyleyen tek yer burası.
⚠️ Bu blok, yukarıdaki 1.9rem kuralından SONRA gelmek zorunda (aynı özgüllük →
hükmü sıra verir); ilk yazdığımda .hc-wrap'in hemen altındaydı ve ayraç 30px kaldı. */
@media (max-height: 679px){
body.home-lock .hc-wrap{ padding-bottom: 4rem; }
body.home-lock .hc-g--console{ margin-top: 1.1rem; }
/* 6 Ağu — ÜÇÜNCÜ KOL. Ölçüldü (414x620): kapı bloğu iki satırlı hücreye
geçince kütle büyüdü ve ipucuyla arasındaki boşluk 0'a indi. Not: bu
kesitte ipucu ZATEN çakışıyordu (-10px, readout'un ikinci satırının
üstüne biniyordu) — yani hata yeni değil, ölçünce görünür oldu.
Kol yine SIĞDIRMA yönünde: hiçbir şey gizlenmiyor, ritim kısılıyor. */
body.home-lock .hc-sub { line-height: 1.45; }
body.home-lock .hc-gates{ margin-top: .55rem; }
body.home-lock .hc-chips{ gap: .34rem; margin-top: .45rem; }
body.home-lock .hc-chip { min-height: 40px; padding: .34rem .55rem .3rem; }
/* C3 turunda yeniden ölçüldü: ipucu boşluğu 414x620'de -1px'e inmişti (çip
52px). Kısılan yer yine ritim — iki satırın ARASI ve iç dolgu; hücrenin
iki-register grameri (etiket / sayı) olduğu gibi duruyor. */
body.home-lock .hc-chip__v{ margin-top: .04rem; }
/* Sağ ray payı — ÖLÇÜLDÜ, dört kesitte `.kv-rail`in dikdörtgeni ile son çipin
dikdörtgeni karşılaştırılarak: ray ancak KISA ekranda (620 · 667) çiplerle
aynı dikey banda giriyor; 800/844'te rayın üstü çiplerin epey altında kalıyor.
Kural önce `.hc-gates`e ve her boyuta yazılmıştı — gereksiz genişti ve asıl
zararı şuydu: bloğu 292px'e indirip `--yöntem` çubuğunu iki satıra kırıyordu.
Şimdi yalnız IZGARA daralıyor (çubuk metin, rayın bandına hiç girmiyor) ve
yalnız bu kademede. Ders: kuralı gözlemin kapsamı kadar yaz. */
body.home-lock .hc-chips{ max-width: calc(100% - 4rem); }
}
/* Dar telefonda çubuk metni tek satırda kalsın (360-380 bandı ölçüldü). */
@media (max-width: 380px){
body.home-lock .hc-gates__m{ font-size: .58rem; letter-spacing: .04em; }
}
/* --- kaydır ipucu: yalnız mobilde ---
Akışta (absolute DEĞİL, 21 Tem revizyon): dibe çivilenince okuma bloğuyla arası
92px'e çıkıyordu, kopuk duruyordu (Çağkan). Şimdi readout'un devamı gibi okunur,
mesafe sabit; aşağı-kaydır işini ray'deki yuvarlak ok da üstleniyor. */
/* Optik merkezde (K2) ipucu kütlenin parçası DEĞİL: kütle ortalandığı için akışta
kalsaydı ekran yüksekliğine göre yukarı-aşağı gezerdi. Dibe çivilenir → "sayfanın
sonu" işareti hep aynı yerde. 21 Tem'de absolute reddedilmişti çünkü o gün readout'un
hemen ardından okunması isteniyordu ve arada 92px kopukluk kalıyordu; artık ipucunun
işi kütleye eşlik etmek değil, durak sınırını göstermek (aynı işi ray'deki ok da
yapıyor). ⚠️ Ray sağda `bottom:1.25rem` — ipucu ortada, çakışma yok (ölçüldü). */
/* left:0/right:0 DEĞİL: tam genişlik bir , sağ alttaki ray düğmesinin üstüne
görünmez bir dokunma alanı serer (kutular çakışıyordu, ölçüldü). translateX ile
bağlantı yalnız kendi eni kadar. */
.hc-scrollcue{
display: inline-flex;
position: absolute;
left: 50%; transform: translateX(-50%); bottom: 1.4rem;
margin: 0;
}
/* ⚠️ Açılış animasyonu `transform:none` ile bitiyordu; absolute+translateX(-50%) ile
birlikte bu ortalamayı SİLİYOR (forwards, taban kuralı ezer) — ipucu animasyon
bitince sağa kayıyordu. Kare de ortalamayı taşımak zorunda. */
@keyframes hcCueUp { to { opacity: 1; transform: translateX(-50%); } }
.hc-scrollcue{ opacity: 0; transform: translate(-50%, 12px); animation: hcCueUp .8s .84s var(--ease-o) forwards; }
}
/* (21 Tem) K1/K2/K3 sıkıştırma kademeleri SİLİNDİ. Sığdırma amacıyla iç boşluğu kısıyorlardı
ama `justify-content:center` yüzünden kısılan her piksel kenar havuzuna gidiyordu → şikâyeti
("ortaya basık") büyütüyorlardı. Yerine: space-between + iki-sayfa bloğundaki tek zemin ritmi
(yukarı bak). Kademeye geri dönme — ölçüm defteri uygulama-notlari.md'de. */
/* =====================================================
MOBİL 2. DURAK — İKİ SORULUK HUNİ (5 Ağu 2026, İş 1)
Masaüstünde YOK (tahta orada kalır); ≤900px'te tahtanın yerini alır. Gerekçe:
mobil ziyaretçiye üç saniyemiz var, kayan bir fiyat şeridi eylem önermiyordu.
Kompozisyon başparmağa göre: sorular üstte, komut satırı + düğme dibe çivili
(`margin-top:auto`) — artan yükseklik ikisinin ARASINA gider, düğme hep aynı yerde.
===================================================== */
.hnMount{ display: none; }
@media (max-width: 900px){
/* ⚠️ Çift anahtar: driveTape (home.js) aynı 900px eşiğinde offstage durur. Bu kural
tek başına kaldırılırsa şerit görünür ama DONUK render olur — ikisi birlikte açılır. */
body.home-lock .bx2Mount{ display: none; }
/* Panelin kalan yüksekliğini huni devralır → kütle dikeyde ortalanabilsin.
`flex:1 + min-height:0` olmadan `.hn`in yüzde yüksekliği otomatik ebeveyne
çözülmüyordu ve blok tepeye yapışıp altta 308px ölü alan bırakıyordu (ölçüldü). */
body.home-lock .hnMount{
display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
/* Ortalama BURADA yapılır, `.hn`de değil: künye çubuğu da kütlenin parçası.
Önce `.hn` ortalanıyordu ve çubuk tepede asılı kalıyordu — arada 230px'lik
sahipsiz boşluk vardı (ölçüldü 390x844), iki ayrı şey gibi okunuyordu. */
justify-content: center;
justify-content: safe center;
}
body.home-lock .hc-pane{ overflow: hidden; overflow: clip; }
/* Sütun genişliği KAPAKLI: 834px tablette çipler 750px'e geriliyor, etiket solda
sayı sağda kalıp aradaki 600px boşalıyordu, düğme de 1400px'lik bir bant oluyordu
(jüri madde 5, ölçüldü 834×1112). Huni bir telefon sütunudur; geniş ekranda
büyümez, ortalanır. Masaüstünde zaten görünmüyor. */
body.home-lock .hnMount > *{ width: 100%; max-width: var(--deste-col); margin-inline: auto; }
/* ---- Yazı ölçeği: 1. DURAKTAN alındı (Çağkan, 5 Ağu) ----
Huni kendi ölçeğini kurmuştu ve 13 ayrı boyuta dağılmıştı; üçü (.62 · .64 · .66)
birbirinden 0,3px uzaktı — sistem değil, sürüklenme. Aynı güvertenin iki sayfası
tek merdiveni paylaşır, o merdiven 1. durakta zaten var:
.54rem micro damga ← .lc__ltag · .tp-brand
.60rem küçük mono ← .lc--board .lc__verdict
.68rem meta / sayaç ← .hcw__bar · .hc-chip__n · .lc__price .u
.75rem etkileşim satırı ← .hc-chip
1.2rem büyük sayı ← .lc--board .lc__price b
Beşi de 1. durakta ÖLÇÜLDÜ (390px, home-lock): 8.64 · 9.6 · 10.88 · 12 · 19.2px.
1.05rem (birincil isim) bu yüzeyde kullanılmıyor — huninin öyle bir rolü yok.
Yeni bir öğe eklerken bu beşten birini seç; ara değer yazma. */
}
/* ---- HUNİ BİLEŞENİ — İKİ BREAKPOINT'TE DE (21 Ağu 2026) ----
Bu kurallar 21 Ağu'ya kadar `@media (max-width:900px)` içindeydi çünkü huni yalnız
mobilde çiziliyordu. Masaüstündeki kapı akışının 1. hâli (kd-s1) aynı modülü
kullanınca sınır anlamını yitirdi. İkinci bir kopya yazmak yerine KAPANIŞ PARANTEZİ
yukarı alındı: mobil kuralları byte-byte aynı, masaüstü yalnız farkı yazar
(aşağıdaki `min-width: 901px` bloğu). Kopyalamak = birini düzeltip diğerini unutmak.
⚠️ Mobil parmak izi refactor ÖNCESİ ve SONRASI ölçüldü, birebir aynı. */
.hn__bar{
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding-bottom: .7rem; margin-bottom: 1.1rem;
border-bottom: 1px solid var(--border);
font-family: var(--font-m); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.hn__meta{ color: var(--muted-2); letter-spacing: .1em; text-transform: none; font-size: .68rem; }
/* Kütle dikeyde ortalanır — 1. durağın kilitli optik-merkez kararıyla (K2, 2 Ağu)
aynı davranış: iki durak arasında hiza kayması olmasın. `safe`: kısa telefonda
içerik panelden uzunsa hiza start'a düşer, ilk satır çubuğun altına saklanmaz. */
.hn{ display: flex; flex-direction: column; flex: 0 0 auto; }
.hn__q{
font-family: var(--font-m); font-size: .75rem; color: var(--cream);
margin-bottom: .55rem;
}
/* Bant satırının altına cetvel giriyor → nefes payı cetvelin kendi alt boşluğunda. */
.hn__q + .hn__row{ margin-bottom: .3rem; }
.hn__row{ display: flex; gap: .4rem; }
.hn__row--w{ flex-wrap: wrap; }
.hn__c{
flex: 1 1 0; min-width: 0; position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
padding: .58rem .6rem .5rem;
background: transparent; border: 1px solid var(--border-2); border-radius: 2px;
color: var(--muted); font-family: var(--font-b); text-align: left;
/* `all` DEĞİL: hangi özelliğin geçiş yaptığı yazılı olsun (emil). */
transition: border-color 140ms var(--ease-o), color 140ms var(--ease-o),
background-color 140ms var(--ease-o);
}
/* Tat satırı 4 çip: ikili ızgara, aksi hâlde 390px'te dördü de tek harfe iner. */
.hn__row--w .hn__c{ flex: 1 1 calc(50% - .2rem); }
.hn__cl{ font-size: .75rem; line-height: 1.2; }
.hn__cc{ font-family: var(--font-m); font-size: .6rem; font-style: normal; color: var(--muted-2); }
.hn__n{
font-family: var(--font-m); font-size: .68rem; color: var(--muted);
margin-top: .18rem;
}
.hn__n b{ font-weight: 400; font-variant-numeric: tabular-nums; }
/* Birim sayının yanında durur, yerine geçmez — 1. duraktaki `.lc__price` grameri:
sayı PARLAK, birim sönük. Ayrım OPAKLIKLA değil ayrı token'la yapılır; `.62`
denendi ve kontrastı 2.76'ya düşürdü (AA eşiği 4.5). Birim burada süs değil,
değişikliğin bütün sebebi — okunamayan birim hiç yazmamakla aynı şey.
Ölçüldü: sayı 7.86 · birim 5.58 (zemin #080808). */
.hn__u{ font-style: normal; color: var(--muted-2); }
.hn__c.is-on .hn__u{ color: var(--muted); }
.hn__c.is-on{
border-color: var(--pop); color: var(--cream);
background-color: rgba(90, 144, 104, .12); /* color-mix tanımayan tarayıcı için taban */
background-color: color-mix(in srgb, var(--pop) 12%, transparent);
}
.hn__c.is-on .hn__n{ color: var(--save); }
.hn__c.is-on .hn__cc{ color: var(--muted); }
/* Dokunma geri bildirimi — çip günde onlarca kez basılır, o yüzden GİRİŞ animasyonu
yok (sıklık kapısı): yalnız basma anında fiziksel itilme, 120ms. */
.hn__c:active{ transform: scale(.97); }
/* İkinci dokunuş listeye girer (Çağkan, 5 Ağu — iki eksende de). Gizli hareket
keşfedilmez → seçili çip ok gösterir. Ok bilerek düğmenin okuyla AYNI glif ve AYNI
renk: yeşil bu sayfada "gidiş" demek. Tat çipinin kendi rengi (`--fc`) sol kenarda
kalır — o renk "hangi tat" der, ok "nereye götürür" der; ikisi ayrı soru, ok tat
rengine boyanırsa aksiyon aile etiketine benzer. */
.hn__ok{
position: absolute; right: .5rem; bottom: .42rem;
font-family: var(--font-m); font-size: .68rem; color: var(--pop);
opacity: 0; transition: opacity 140ms var(--ease-o);
}
.hn__c.is-on .hn__ok{ opacity: 1; }
/* ---- Fiyat cetveli (5 Ağu) ----
Çipler yalnız KONUMU söyler (altında / bandında / üstünde); ölçüyü altlarındaki
cetvel verir. Neden: "medyan altı / medyan bandı / medyan üstü" aynı kelimeyi üç
kez tekrarlıyordu ve her çipin altyazısı ("₺230 altı") etiketin söylediğini ikinci
kez söylüyordu. Ölçüt bir kez, aletin üstünde geçer.
⚠️ Çentikler %33/%66 DEĞİL `calc` ile konumlanır: yüzde, çipler arasındaki boşluğu
saymaz ve 375px'te 4px kayar (ölçüldü, föy). Sınırlar üstte / ölçüt altta iki ayrı
satırda: tek satırdayken "₺230" ile "medyan ₺270" üst üste biniyordu. */
.hn__rl{ position: relative; height: 1.95rem; margin-bottom: .8rem; }
.hn__rl-ln{ position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border-2); }
.hn__rl-t, .hn__rl-m{
position: absolute; transform: translateX(-50%);
font-family: var(--font-m); font-size: .6rem; letter-spacing: .02em; white-space: nowrap;
}
.hn__rl-t{ top: .34rem; color: var(--muted-2); }
.hn__rl-m{ top: 1.12rem; color: var(--pop); }
.hn__rl-t::before{
content: ''; position: absolute; left: 50%; top: -.34rem; width: 1px; height: .3rem; background: var(--border);
}
/* Ölçüt çentiği hattan ikinci satıra iner: medyanın hangi bandın İÇİNDE durduğunu
çizgi söyler, cümle değil. */
.hn__rl-m::before{
content: ''; position: absolute; left: 50%; top: -1.12rem; width: 1px; height: 1.1rem;
background: var(--pop); opacity: .55;
}
/* Sorgu kendini kabuk komutu olarak yazar — imza. Boşken yalnız istem + caret. */
.hn__cmd{
margin: 0 0 .7rem; padding-top: 1.1rem;
font-family: var(--font-m); font-size: .68rem; color: var(--cream);
display: flex; align-items: center; gap: .45rem; min-height: 1.2rem;
}
.hn__pr{ color: var(--pop); flex: none; }
.hn__args{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn__car{
width: 7px; height: 1em; background: var(--pop); flex: none;
animation: hnCar 1.1s steps(1) infinite;
}
@keyframes hnCar{ 50%{ opacity: 0; } }
.hn__go{
display: flex; align-items: center; gap: .55rem;
padding: .85rem 1rem;
background-color: rgba(90, 144, 104, .16);
background-color: color-mix(in srgb, var(--pop) 16%, transparent);
border: 1px solid var(--pop); border-radius: 2px;
color: var(--cream); text-decoration: none;
transition: background-color 140ms var(--ease-o), border-color 140ms var(--ease-o);
}
.hn__go:active{ transform: scale(.985); }
/* Sayı taşır, etiket eşlik eder — lider fişinin grameri (₺ büyük, birim sönük). */
.hn__big{ font-family: var(--font-m); font-size: 1.2rem; color: var(--save); }
.hn__lbl{ font-size: .75rem; }
.hn__arw{ margin-left: auto; color: var(--pop); }
/* Boş kesişim: yeşil bir düğme "git" der ama gidecek yer yok → rengi geri çekilir. */
.hn__go.is-empty{
background-color: transparent; border-color: var(--border-2); color: var(--muted);
}
.hn__why{
display: block; margin-top: .65rem;
font-family: var(--font-m); font-size: .6rem; color: var(--muted-2); text-decoration: none;
}
.hn__src{
font-family: var(--font-m); font-size: .54rem; font-style: normal;
letter-spacing: .06em; color: var(--muted-2); opacity: .7; margin-left: .4rem;
}
/* ---- SCA çarkının iki halkası (5 Ağu) ----
16 alt tat dar bir mobil sütuna dikey sığmaz. Uzun listenin doğru bileşeni yatay
scroll-snap şerididir; iç halka onları gruplayan sekme olur. */
.hn__ana{
display: flex; flex-wrap: nowrap; gap: .35rem;
overflow-x: auto; scroll-snap-type: x proximity;
scrollbar-width: none; margin-bottom: .45rem;
/* Kenarda kesilen çip zaten "devamı var" der; maske onu kazara değil kasıtlı gösterir. */
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
}
.hn__ana::-webkit-scrollbar{ display: none; }
.hn__a{
flex: 0 0 auto; scroll-snap-align: start; position: relative; overflow: hidden;
display: flex; align-items: baseline; gap: .38rem;
padding: .42rem .66rem; cursor: pointer;
background: transparent; border: 1px solid var(--border-2); border-radius: 2px;
color: var(--muted); font-family: var(--font-b); font-size: .75rem; text-align: left;
transition: color 150ms var(--ease-o), border-color 150ms var(--ease-o),
background-color 150ms var(--ease-o);
}
/* Işık, ailenin KENDİ rengiyle çipin altından yükselir. Zemini boyamaz (Terminal Black
kilidi): renk kalıcı yüzey değil, seçimin işareti. */
.hn__a::before{
content: ''; position: absolute; inset: auto 0 -60% 0; height: 120%;
background: radial-gradient(60% 100% at 50% 100%, var(--fc) 0%, transparent 72%);
opacity: 0; transition: opacity 220ms var(--ease-o); pointer-events: none;
}
.hn__a > *{ position: relative; }
.hn__a.is-on{ color: var(--cream); border-color: var(--fc); background: var(--bg-3); }
.hn__a.is-on::before{ opacity: .42; }
.hn__a:active{ transform: scale(.97); }
.hn__ae{ font-family: var(--font-m); font-size: .54rem; letter-spacing: .04em; opacity: .6; }
/* Sayı seçiliyken de YEŞİLE dönmez: yeşil bu sayfada "aktif filtre" demek ve ana şerit
filtre değil, sekme. İkisi aynı dili konuşursa kullanıcı iki seviyede de seçim
yaptığını sanır — oysa katalogda süzen tek şey alttaki çip. */
.hn__an{ font-family: var(--font-m); font-size: .68rem; color: var(--muted-2); }
.hn__a.is-on .hn__an{ color: var(--cream-dim); }
/* Nerede olduğunu söyleyen çizgi: genişlik = şeridin görünen oranı, konum = kaydırma. */
.hn__hint{ height: 1px; background: var(--border); position: relative; margin-bottom: .55rem; }
.hn__hint i{
position: absolute; top: 0; height: 1px; background: var(--hn-amb, var(--pop));
transition: left 200ms var(--ease-o), width 200ms var(--ease-o), background 320ms var(--ease-o);
}
.hn__row--w{
flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
}
.hn__row--w::-webkit-scrollbar{ display: none; }
.hn__row--w .hn__c{
flex: 0 0 auto; scroll-snap-align: start; min-width: 8.4rem;
border-left: 3px solid var(--fc); padding-left: .6rem;
}
.hn__c[hidden]{ display: none !important; }
/* Ailenin gerçek katalog notları — etiketin arkasındaki veri. */
.hn__ex{
font-family: var(--font-m); font-size: .6rem; line-height: 1.5;
color: var(--muted-2); letter-spacing: .02em; margin: .5rem 0 0;
/* İki satırlık yer BAŞTAN ayrılır: notlar 1-2 satır arasında değişiyor ve alan
rezerve edilmezse seçim değiştikçe düğme 11px zıplıyordu (ölçüldü). */
min-height: 2.9em;
}
.hn__ex b{ color: var(--cream-dim); font-weight: 400; }
.hn__ex i{ font-style: normal; opacity: .55; }
/* Seçili ailenin rengi panelin arkasına yayılır; aile değişince ışık da kayar.
⚠️ `filter: blur()` YOK ve `background` GEÇİŞLENMEZ — ikisi birlikte yazılmıştı ve
yanlıştı: gradient geçişinin her ara karesinde geniş bir alanın blur'u yeniden
hesaplanıyor, üstelik hero'nun WebGL mesh'i aynı anda GPU'da koşuyor. Bu projede
GPU sürücüsünü düşürüp Mac'i restart ettiren bir vaka yaşandı (memory
gpu-shader-crash-hardening); o shader'a dört fren kondu, üstüne blur eklemek aynı
bütçeyi ikinci kez zorlamaktı. Radial gradient zaten yumuşak, blur'un görsel
katkısı ölçülünce yok denecek kadar azdı. */
/* ⚠️ `min-width: 0` KALDIRILAMAZ. `body.home-lock .hc-pane` `display:flex` ve
`flex-direction: column` yalnız `min-height: 600px` kademesinde yazılı; kısa
ekranda (iPhone SE 320×568) pane SATIR kalıyor ve huni bir satır-öğesi oluyor.
Satır-öğesinin varsayılan `min-width: auto`'su onu min-content'in altına
indirmiyor → huni 280px panelde 432px (=27rem tavanı) kalıp taşıyor, pane
`overflow:hidden` olduğu için ÜÇÜNCÜ bant çipi ("üstünde") ekran dışında kalıp
hem görünmez hem dokunulamaz oluyordu. Ölçüldü: mount [20,452] · pane [20,300].
Yükseklik kademesinden gelen bir hata olduğu için 390×844'te hiç görünmüyor. */
.hnMount{ position: relative; isolation: isolate; min-width: 0; }
.hnMount::before{
content: ''; position: absolute; inset: -10% -20% -14% -20%; z-index: -1;
background: radial-gradient(58% 46% at 50% 42%, var(--hn-amb, var(--pop)) 0%, transparent 68%);
opacity: .17; pointer-events: none;
}
/* Kimlik hareketi değil, dekor: caret dışında bu yüzeyde süregiden hareket yok.
Caret de reduce'ta durur (ana sayfa override'ı KİMLİK hareketi içindi, bu bir form). */
@media (prefers-reduced-motion: reduce){
.hn__car{ animation: none; }
.hn__c, .hn__go, .hn__a, .hn__a::before, .hn__hint i, .hnMount::before, .hn__ok{ transition: none; }
.hn__c:active, .hn__go:active, .hn__a:active{ transform: none; }
.hn__ana, .hn__row--w{ scroll-behavior: auto; }
}
/* ---- MOBİL 2. DURAK KÜNYESİ (23 Ağu 2026) ----
Markup index.html'de (.hc-mbar): çubuğun kendisi .hn__bar'dan, nokta .bx2-live'dan
gelir — burada yalnız GÖRÜNÜRLÜK yazılı. Çift sınıf (.hc-mbar.hn__bar) şart:
.hn__bar display:flex ile aynı özgüllükte, kaynak sırası bize karşı. */
.hc-mbar.hn__bar{ display: none; }
@media (max-width: 900px){
/* Ölçü burada, deste bloğunda DEĞİL: kolon sözleşmesinin geri kalanı
`min-height:600px` kapısının içinde (üç duraklı deste yalnız orada kurulur),
ama çubuk kısa/yatay ekranın tek-akış fallback'inde de çiziliyor. Orada
yazılsaydı yatay telefonda alt çizgisi genişliğin üçte birinde kesik kalırdı
— düzeltmek için eklenen öğenin kendisi kusur üretirdi. */
body.home-lock .hc-mbar.hn__bar{
display: flex;
width: 100%; max-width: var(--deste-col); margin-inline: auto;
}
}
/* ---- PİYASANIN ŞEKLİ — 2. durağın künyesi (23 Ağu 2026, Çağkan) ----
NEDEN: bu durak nav'ın altında 147px ölü alanla açılıyordu (ÖLÇÜLDÜ, 390x844) ve
komşu iki durak künyeyle açılırken burası boş açılıyordu. Bant o alanı doldurur ve
künyeden fazlasını yapar: katalogdaki kıyaslanabilir kahvelerin ₺/100g dağılımı,
medyan tek yeşil çentik. Yani "canlı katalog" DEMEK yerine katalogu GÖSTERİYOR.
Eksen log2 — kilitli değer rayının grameriyle aynı (memory `deger-rayi-konum`):
dağılım sağa çarpık (₺105-₺5.000, 48 kat) ve doğrusal eksen her şeyi sola ezerdi.
⚠️ Bant künyenin YERİNE geçer, yanına DEĞİL. İlk eskizde ikisi alt alta çizildi ve
ekranda iki başlık çubuğu, iki kural çizgisi oldu (jüri madde 4, ilk tur KAL).
Aşağıdaki `display:none` bu yüzden var ve yukarıdaki kuralın SONRASINDA durmak
zorunda (aynı özgüllük → hükmü kaynak sırası verir).
⚠️ Kısa ekranda (<680px) bant kurulmaz, künye geri gelir: ölçüldü, 414x620'de kütle
339px ve nav ile ipucu arası 480px — 120px'lik banda yer yok, sokmak "sığıyor"
değil "değiyor" olurdu (kapı dersi, KAPILAR §3).
⚠️ Yükseklikler CSS'te SABİT (.hc-shape__plot 58px, __ax min-height) — içerik
fetch'ten sonra geliyor ve kutu önceden yer tutmazsa kütle ortalı olduğu için
sayfa 138px zıplardı. Sayı TOHUMLANMAZ (memory `tohum-ve-yedek-sessiz-iddiadir`):
veri gelene kadar sağdaki sayaç boş durur, uydurma bir rakam basmaz. */
.hc-shape{ display: none; }
.hc-shape__hd{
display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
padding-bottom: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border);
font-family: var(--font-m); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.hc-shape__t{ color: var(--muted); }
.hc-shape__m{ color: var(--muted-2); letter-spacing: .1em; text-transform: none; }
/* 58px: ilk eskizde 46px'ti ve şekil "leke" gibi okundu, enstrüman gibi değil. */
.hc-shape__plot{ position: relative; display: flex; align-items: flex-end; gap: 1px; height: 58px; }
.hc-shape__b{ flex: 1 1 0; background: var(--muted-2); min-height: 1px; opacity: .5; }
.hc-shape__b.is-med{ background: var(--pop); opacity: 1; }
.hc-shape__notch{ position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--pop); opacity: .55; }
.hc-shape__ax{
position: relative; display: flex; justify-content: space-between;
margin-top: .45rem; min-height: 1em;
font-family: var(--font-m); font-size: .6rem; color: var(--muted-2);
}
.hc-shape__ax b{
position: absolute; left: 0; transform: translateX(-50%);
color: var(--pop); font-weight: 400; white-space: nowrap;
}
@media (max-width: 900px) and (min-height: 680px){
body.home-lock .hc-shape{
display: block;
width: 100%; max-width: var(--deste-col); margin: 0 auto 1.1rem;
}
body.home-lock .hc-mbar.hn__bar{ display: none; }
}
/* ---- Huninin MASAÜSTÜ farkı (21 Ağu) — yalnız delta, baz yukarıda ---- */
@media (min-width: 901px){
/* Modül DOM'da tek örnek (.hnMount, home.js funnel render'ı) — kopyalanmaz,
yalnız kapı akışının arama hâlinde gösterilir; dinleyiciler + canlı sayaçlar
bedava gelir. Aile-rengi ambient ışığı (--hn-amb) mobildeki gibi çalışır. */
body.kd-s1 .hnMount{
display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
/* Tat şeridi SARMALI. Ölçüldü (20 Ağu, jüri KAL maddesi): mobilin swipe şeridi
440px'lik masaüstü kolonunda 7 sekmenin 4'ünü sessizce yutuyordu (scrollWidth
1168). Kaydırma/snap/maske MOBİL davranışıdır, ≤900'de aynen duruyor. */
.hn__ana{
flex-wrap: wrap; overflow-x: visible;
-webkit-mask-image: none; mask-image: none;
}
.hn__row--w{
flex-wrap: wrap; overflow-x: visible;
-webkit-mask-image: none; mask-image: none;
}
.hn__row--w .hn__c{ flex: 1 1 calc(50% - .2rem); min-width: 0; }
/* Kaydırma-konumu çizgisi sarmalıda işlevsiz: gösterecek konumu yok. */
.hn__hint{ display: none; }
/* İngilizce alt etiket masaüstünde gizli: iki sıra sarmalıda Türkçe ad + sayı yeter. */
.hn__ae{ display: none; }
}
/* Kısa telefon (yükseklik <600 → snap yok, tek akış): huni yine görünür ama nefes payı
kısılır. Ölçüldü 414×620: pane içeriği 445px, huni 330px → sığıyor, sıkışmıyor. */
@media (max-width: 900px) and (max-height: 679px){
/* Cetvel bant satırına ~19px ekledi ve 414×620'de huni panelden taşıyordu
(ölçüldü). Kısılan yer bant satırının margin'i DEĞİL (o zaten .3rem): cetvelin
kendi payı, etiket boşlukları ve çip iç dolgusu. Cetvelin iki satırı 1.75rem'in
altına inemez — ₺ sınırları ile ölçüt satırı üst üste biner. */
.hn__rl{ height: 1.75rem; margin-bottom: .3rem; }
.hn__rl-m{ top: .96rem; }
.hn__rl-m::before{ top: -.96rem; height: .94rem; }
.hn__q{ margin-bottom: .38rem; }
.hn__c{ padding: .48rem .6rem .42rem; }
.hn__bar{ margin-bottom: .8rem; }
.hn__cmd{ padding-top: .7rem; margin-bottom: .55rem; }
.hn__go{ padding: .6rem 1rem; }
.hn__why{ margin-top: .45rem; }
}
/* Mini-footer mobil ritmi — ekran yüksekliğinden bağımsız (iki-sayfa kapısının dışında). */
@media (max-width: 900px){
/* ---- Ray mobilde HEP KÖŞEDE (5 Ağu, Çağkan: "kavruk ikonu kahve göster düğmesinin
üstüne denk geliyor") ----
Eski hüküm rayı footer yüksekliği kadar YUKARI kaldırıyordu (`--mf-h + 1rem`), çünkü
köşede mini-footer metnine biniyordu. O karar tahta dönemine aitti: 2. durağın dibi
boştu, kaldırılan ray boşluğa iniyordu. Huni (5 Ağu) oraya dibe çivili bir CTA koydu
ve kaldırma rayı tam düğmenin üstüne oturttu — ölçüldü 360×780: ray 582-673 ·
`.hn__go` 535-598.
Kaldırma zaten İKİ yama doğurmuştu: 1. durakta okuma satırına biniyordu (`--down`
istisnası), kısa ekranda `--down` hiç gelmediği için arama satırına biniyordu
(`max-height:599` istisnası). Tek karara üç yama = araç yanlış. Doğru takas de
ölçülebilir: köşede kalan ray, ortalanmış footer satırlarının UCUNA birkaç piksel
değer (ikincil, sönük metin); kaldırılan ray birincil eylemi KAPATIR. Yüzen cam bir
nesnenin sayfa dibine binmesi zaten beklenen davranış, düğmeyi kapatması değil.
⚠️ Geri kaldırılırsa üç yama da geri gelir; önce huninin dibini ölç. */
body.home-lock .kv-rail{ bottom: 1.25rem; }
/* Dikey ritim (21 Tem): tek birim .5rem — copy ↔ durum ↔ contribute eşit aralıklı.
Öncesinde copy 1.75 (miras) · durum 1.55 · buton inline margin-left ile sola kaçık,
üç farklı ritim yan yanaydı. */
/* Yan pay 4.5rem = ray köşesi (right 2rem + 40px daire = 72px): ortalanmış satırlar
rayın altına UZANMAZ. Simetrik, çünkü tek yana pay ortalamayı bozar ve "ortalı ama
ortada değil" bir footer hataya benzer. Bedeli ölçüldü: ≤390'da SIFIR (satırlar zaten
sarıyor, footer 122px), yalnız 414'te 91→122 — yani 414'ün üç-satırlı hâli istisnaydı,
pay onu diğer genişliklerle aynı hizaya getiriyor. Ray köşeye indiği için gerekli
(yukarı bak); ray kaldırılırsa bu pay da düşer. */
.minifoot{ grid-template-columns: 1fr; justify-items: center; gap: .45rem; text-align: center; padding: .9rem 4.5rem; }
/* Yığılma onarımı (2 Ağu, Çağkan): önceki hâl tek uzun cümleydi ve `overflow-wrap:anywhere`
ile ALTI ragged satıra sarıyordu (ölçüm 414x760: 113px footer) — contribute butonu
cümlenin ORTASINDA kalıyor, "v0.9" tek başına dördüncü satıra düşüyordu.
Şimdi üç bilinçli satır: durum · destekçiler · contribute. Sarma serbest bırakılmaz,
satırları biz belirleriz; `anywhere` kalkar (kelime ortasından kırma da onunla gitti). */
.minifoot__dev{
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: .3rem .6rem;
white-space: normal; line-height: 1.35; max-width: 100%;
}
/* Destekçi kredisi `order` ile ÜÇÜNCÜ satıra alınır (DOM'da ikinci): böylece
durum ile eylemi (contribute) aynı satırda buluşur — 157+115px, 374px'e sığar.
flex-basis:100% satırı zorla kırar, yoksa kredi de aynı satıra tırmanıyor. */
.minifoot__by{ order: 3; flex-basis: 100%; color: #55554e; }
.minifoot__by::before{ content: none; } /* kendi satırında → ayraca gerek yok */
/* contribute butonu kendi satırına düşer → contrib.js'in inline margin-left'i sola kaydırıyordu.
Spesifiklik (0,3,0) gerekli: contrib.js style'ı head'e sonradan enjekte oluyor. */
.minifoot .minifoot__dev .kf-contrib-link{
display: inline-flex; align-items: center;
margin: 0; /* aralığı flex `gap` verir (contrib.js'in inline margin-left'i ezilir) */
order: 2;
}
}
/* =====================================================
KAPILAR — ana sayfa girişi, üç hâl (21 Ağu 2026)
kd-s0 KAPILAR (varsayılan) · kd-s1 ARAMA (mevcut hero + huni) · kd-s2 KAVURMACI
Geçişler manuel FLIP (js/kapilar.js). Hâl makinesi yalnız >=901px; mobilde (≤900px)
kapılar üç-duraklı deck'in 1. durağıdır — hâl kurulmaz, kapı 2 gerçek bağlantı (22 Ağu).
NEDEN: ana sayfa iki kitleye birden konuşuyordu ve ikisine de yarım. Kapılar
ziyaretçiyi ilk ekranda ayırır. Ölçüldü (20-21 Ağu): kapı sözü canlı H1'in
kademesinin %29 üstündeyken register TERS dönmüştü — en büyük tip hiçbir şey
söylemeyen etikete, sayı taşıyan cümle 18,2px'e gitmişti. Şimdi etiket kademeye
indi (44px) ve H1 kapının içine, iddia satırı olarak girdi.
⚠️ İki kapı EŞİT DEĞİL (1.5 : 1): katalogda 94 marka var, marka kapısının izleyici
tavanı iki haneli; kahve alıcısı sınırsız. Eşitlik sahte denge olurdu.
===================================================== */
/* ⚠️ `.kd-more` DE BURADA. Mobil devam işareti masaüstünde de `#kdDoors`un flex
çocuğu olur ve iki kapıdan yer çalar — ölçüldü: kapı 1 üç kesitte de tam 25px
kısaldı (418→393 · 526→501 · 339→314), çünkü fazladan çocuk + `gap:.85rem`
`flex:1.5`/`flex:1` paylarını yeniden bölüştürüyor. Parmak izi yakaladı;
gözle bakan biri 25px'i fark etmezdi. */
#kdDoors, #kdBrand, .kd-back, .kd-more, .kd-door__claim--m, .kd-go--m{ display: none; }
/* ⚠️ MEDIA SARGISI KALDIRILDI (22 Ağu 2026) — kapı artık mobilde de çiziliyor.
Blok 21 Ağu'da `@media (min-width: 901px)` içindeydi çünkü kapı yalnız masaüstünde
vardı. Mobil kol gelince sınır anlamını yitirdi. KOPYALAMAK YASAK (huni refactor'ünün
dersi, KAPILAR §3 md.6): ikinci bir kopya = birini düzeltip diğerini unutmak.
⚠️ Sargı kalkınca desktop-özel kurallar mobile de düşer; üçü de zararsız çünkü:
· `body.kd-s0|s1|s2 ...` → mobilde o sınıf HİÇ kurulmuyor (index.html satır içi
fren `min-width:901px` kapısında), yani ATIL.
· `#kdBrand` + `.kd-back` → mobilde hâl 2 yok, ikisi de `display:none` kalıyor.
· `--kd-w` / `--kd-kh` / `.kd-door` ızgarası → aşağıdaki mobil blok EZİYOR (kaynak
sırası: mobil blok bu bloktan SONRA gelir, eşit özgüllükte sonraki kazanır).
Kanıt: refactor öncesi/sonrası masaüstü computed-style parmak izi — 3 kesit × 3 hâl
× 41 seçici × 31 özellik (378 seçici-hâl). ⚠️ "0 fark" DEĞİL, çünkü bu yüzey kendisi
deterministik değil: fişler rastgele kayıtla dönüyor, ızgara kademeli doluyor, caret
yanıp sönüyor. Ölçülen: tek SİSTEMATİK fark `.kd-more`ın masaüstünde de flex çocuğu
olmasıydı (kapı 1 üç kesitte de tam 25px kısalmıştı) ve kapatıldı. Kalan kalıntı
KONTROL TESTİYLE elendi: aynı kodun iki koşusu birbirinden 7 fark verirken
önce/sonra 5 veriyor — yani kalıntı koşu-arası gürültü, refactor'ün eseri değil. */
/* 🔒 KAPI SÖZÜ ÖLÇEĞİ = 2,75rem (44px) — Çağkan kilidi, 21 Ağu 2026.
İkinci turdu: 64px "büyük geldi" (tur 2), 38/44/50 canlı anahtarla denendi,
44 seçildi. Yeniden açma — kayıt .claude/data/kilitler.json → kapi-sozu-olcegi.
Kapı 2 bunun 0,78 katı; iki kapı tek değişkenden sürülür. */
body{ --kd-w: 2.75rem; }
/* Kart yüksekliği değişken: altı fiş (3 üstte 3 altta) 139px ile 1366x800'e kadar
sığıyor. Ölçüldü, kart kolonunun altında kalan pay: 1080 +106 · 900 +52 · 800 +21.
⚠️ Bildirim BURADA, kapı sözünün yanında: aşağıda `.kd-card__flap`'in yanına
yazılmıştı ve yükseklik kapısından SONRA geldiği için kapıyı eziyordu (ölçüm
yakaladı: 768'de kart 155'e dönmesi gerekirken 139 kalıyordu). */
body{ --kd-kh: 8.7rem; }
/* ---- HÂL GÖRÜNÜRLÜĞÜ ----
bx2 gizleme kd-s* scope'unda: LAB script'i kurulamazsa sayfa birebir üretim. */
body.kd-s0 .bx2Mount, body.kd-s1 .bx2Mount, body.kd-s2 .bx2Mount{ display: none; }
body.kd-s0 .hc, body.kd-s2 .hc{ display: none; }
body.kd-s0 #kdDoors{ display: flex; }
body.kd-s2 #kdBrand{ display: flex; }
body.kd-s1 .kd-back, body.kd-s2 .kd-back{ display: inline-flex; }
/* ⚠️ YÜKSEKLİK KAPISI (21 Ağu 2026) — tahminle değil ölçümle. Kart 139px'te altı fiş
1366x800'e kadar rahat sığıyor (pay 21px), 768'de pay 2px'e iniyor, 720'de 27px
TAŞIYOR. 1366x768 Türkiye'de yaygın bir dizüstü; altı kartı oraya sıfır payla
sokmak "sığıyor" değil "değiyor" demek. Kısa ekranda ikinci sıra düşer ve kart
eski boyuna döner: kapı her yükseklikte nefes alır, kimse yarım kart görmez.
⚠️ Altı flap DOM'da kurulmaya devam eder (kapilar.js), burada yalnız gizlenir —
çevrilme döngüsü kart sayısını değiştirmeden çalışsın diye. */
@media (max-height: 799px){
body{ --kd-kh: 9.7rem; }
.kd-cards .kd-card:nth-child(n+4){ display: none; }
}
/* ---- HÂL 0 · KAPILAR ---- */
#kdDoors{
position: relative; z-index: 3; /* hd-plot-over (z2) kapı içeriğini yıkamasın */
flex: 1 1 auto; min-height: 0;
width: 100%; max-width: var(--shell); margin: 0 auto;
padding: calc(var(--nav-h, 62px) + .9rem) 2rem .4rem;
flex-direction: column; gap: .85rem;
}
/* Kimlik satırı: yalnız canlılık künyesi. H1 buradan ÇIKTI (tur 3) — yeri
kapı 1'in içi, etiketin altındaki iddia satırı. */
.kd-ident{
display: flex; align-items: baseline; justify-content: flex-end;
gap: 1rem; padding: 0 .15rem; min-height: 1rem;
}
.kd-ident__r{
font-family: var(--font-m); font-size: .62rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted-2);
display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.kd-live{
width: 6px; height: 6px; border-radius: 50%; flex: none;
background: var(--save); box-shadow: 0 0 8px var(--save);
animation: kdPulse 1.8s ease-in-out infinite;
}
@keyframes kdPulse{ 50%{ opacity: .35; } }
/* Kapı: içi yarı yarıya (yazı bloğu | içerik). Malzeme hcw__win ailesinden.
ASİMETRİ: kahve kapısı 1.5, marka kapısı 1 (60/40). */
.kd-door{
flex: 1 1 0; min-height: 0; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: stretch;
padding: 1.3rem 2rem;
border: 1px solid var(--border-2); border-radius: var(--r);
background: rgba(15,15,15,.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 2px rgba(0,0,0,.14),
0 10px 24px rgba(0,0,0,.22);
cursor: pointer; text-align: left;
transition: border-color 180ms var(--ease-o), background-color 180ms var(--ease-o);
}
.kd-door--k{
flex: 1.5 1 0;
background: linear-gradient(150deg, rgba(90,144,104,.06), transparent 55%), rgba(15,15,15,.55);
}
.kd-door:hover{ border-color: var(--pop-line-2); background-color: rgba(18,18,18,.62); }
.kd-door:focus-visible{ outline: 1px solid var(--pop); outline-offset: 3px; }
.kd-door:active{ transform: scale(.996); }
.kd-door__label{
display: flex; flex-direction: column; align-items: flex-start;
justify-content: center; gap: 1.15rem;
align-self: stretch; min-width: 0; padding: .2rem 0;
}
.kd-door__flag{ position: absolute; top: 1.3rem; left: 2rem; }
/* Bayrak bir CLI bayrağıdır, bölüm numarası DEĞİL: "--01/--02" numaralandırma
eyebrow'u (taste §9.F'de adıyla yasak); terminal dilimizin kendi idiyomu
--ad biçimi. Aynı iki karakter, doğru anlam. */
.kd-door__flag{
font-family: var(--font-m); font-style: normal; font-size: .62rem;
letter-spacing: .16em; color: var(--muted-2);
}
/* HÂL 2 kutusunda bayrak akışta kalır (orada mutlak konumlanacak kap yok). */
.kd-brand__in .kd-door__flag{ position: static; display: block; margin-bottom: .2rem; }
.kd-door__head{ display: flex; flex-direction: column; gap: .34rem; min-width: 0; }
/* Ekranın en büyük tipografisi. Tek satır: iki satıra kırılınca blok, altındaki
iddia satırını eziyordu. */
.kd-door__word{
display: block; font-family: var(--font-d); font-weight: 800;
font-size: var(--kd-w); line-height: 1; letter-spacing: -.035em;
color: var(--cream); text-transform: lowercase; white-space: nowrap;
}
.kd-door--m .kd-door__word{ font-size: calc(var(--kd-w) * .78); }
/* İddia satırı: büyük bloğun ALTINDA, sistemin kendi ikinci adımı (1,2rem).
Kapı 1'de bu satır GERÇEK H1'dir (DOM'da tek H1, scramble canlı). */
.kd-door__claim{
font-family: var(--font-b); font-size: 1.2rem; line-height: 1.3;
letter-spacing: -.015em; color: var(--muted); max-width: 26ch;
}
.kd-door__claim .hc-heading{
font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em;
color: var(--muted); margin: 0;
}
.kd-door__claim .hc-heading b{ color: var(--cream-dim); font-weight: 500; }
.kd-door__claim .hc-heading-block{ overflow: visible; padding-bottom: 0; }
.kd-car{
display: inline-block; width: .4em; height: .78em; margin-left: .14em;
background: var(--pop); transform: translateY(.06em);
animation: kdBlink 1.1s steps(1) infinite;
}
@keyframes kdBlink{ 50%{ opacity: 0; } }
.kd-door__go{
font-family: var(--font-m); font-size: .7rem; letter-spacing: .04em;
color: var(--muted); transition: color 160ms var(--ease-o);
}
.kd-door__go .kd-pr{ color: var(--pop); }
.kd-door:hover .kd-door__go{ color: var(--cream); }
/* Kapı gövdesi: dekoratif akış tıklamayı yutmasın (kapının işi kapı olmak).
Tek istisna medyan bağlantısı (31 Tem kilidinin bu sayfadaki evi). */
.kd-door__body{
min-width: 0; pointer-events: none;
display: flex; flex-direction: column; justify-content: center;
}
/* Kahve kapısı içerik kolonu biraz geniş: kart üçlüsü nefes alsın, yazı
kolonu 44px'lik tek satırı zaten taşımadan alıyor (ölçüldü). */
.kd-door--k{ grid-template-columns: .92fr 1.08fr; }
.kd-bar{
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
margin-bottom: .6rem; font-family: var(--font-m); font-size: .66rem;
}
.kd-med{ color: var(--muted); text-decoration: none; pointer-events: auto; }
.kd-med b{ color: var(--cream); font-weight: 500; font-variant-numeric: tabular-nums; }
.kd-med .kd-med__n{ color: var(--save); }
.kd-med:hover{ color: var(--cream); }
.kd-med:hover .kd-med__n{ text-decoration: underline; }
.kd-bar__r{
color: var(--muted-2); letter-spacing: .12em;
display: inline-flex; align-items: center; gap: .45rem;
}
/* Gerçek kahve kartları: split-flap çevrilme (fade değil) — imzanın yaşadığı yer. */
.kd-cards{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .55rem; }
.kd-card{ perspective: 700px; min-width: 0; }
.kd-card__flap{
display: flex; flex-direction: column; gap: .28rem; height: var(--kd-kh);
padding: .7rem .75rem .62rem;
border: 1px solid var(--border-2); border-radius: 2px; background: var(--bg-2);
transform-origin: 50% 8%; will-change: transform;
transition: transform 240ms cubic-bezier(.2,.85,.3,1.12); /* açılış: hafif yaylı */
}
.kd-card__flap.kd-flip{
transform: rotateX(-88deg);
transition-duration: 160ms; transition-timing-function: cubic-bezier(.5,0,.75,.4);
}
/* ⚠️ SESSİZ EZİLME FRENİ (22 Ağu). Flap sabit yükseklikli bir flex kolonu; çocukların
ikisinde `overflow:hidden` var (ad `line-clamp`, marka `ellipsis`). Flex'te
overflow'u gizli olan öğenin otomatik asgari boyu SIFIRDIR → kutu içeriğinden
kısaysa açık, taşma olarak DEĞİL, satırların yarıdan ezilmesi olarak çıkar.
Ölçüldü (414×820): kart 102px istiyordu, kutu 94'tü; ad ve marka 15,6 yerine
8,3px'e indi, harfler ortadan kesildi ve üst üste bindi. `scrollHeight` bunu
GÖRMÜYOR (kırpan, çocukların kendisi) — yani nöbetçim yeşil yanarken yüzey bozuktu.
`flex-shrink: 0` hatayı görünür kılar: bir daha açık doğarsa ezilme değil taşma olur. */
.kd-card__flap > *{ flex-shrink: 0; }
.kd-card__name{
font-family: var(--font-b); font-weight: 500; font-size: .78rem; line-height: 1.25;
color: var(--cream);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd-card__brand{
font-family: var(--font-m); font-style: normal; font-size: .56rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kd-card__row{
margin-top: auto; display: flex; align-items: baseline;
justify-content: space-between; gap: .4rem;
}
.kd-card__row > b{
font-family: var(--font-m); font-weight: 500; font-size: .95rem;
color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kd-u{ font-family: var(--font-m); font-style: normal; font-size: .58rem; white-space: nowrap; }
.kd-u--down{ color: var(--save); }
.kd-u--up{ color: var(--muted); }
.kd-u--flat{ color: var(--muted); }
/* DEĞER RAYI — kilitli enstrüman (core.js kfValuePos: log2, medyan tam ortada).
Gramer İCAT EDİLMEDİ: catalog.js ve terminal.js'teki rayın aynısı. Kart artık
fiyatı değil fiyatın NEREDE durduğunu söylüyor — "angarya bitti" iddiasının kanıtı. */
.kd-rail{ position: relative; height: 9px; margin-top: .62rem; margin-bottom: .1rem; }
.kd-rail__ln{ position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--border); }
/* Medyan tırnağı rayın referansı: kalanından belirgin olmak ZORUNDA. */
.kd-rail__mid{ position: absolute; left: 50%; top: -1px; width: 1px; height: 11px; background: var(--muted-2); }
/* Uç tırnakları rayın sınırını söyler (medyan ×0,5 … ×2 — kfValuePos geometrisi). */
.kd-rail__ln::before, .kd-rail__ln::after{
content: ''; position: absolute; top: -2px; width: 1px; height: 5px; background: var(--border);
}
.kd-rail__ln::before{ left: 0; }
.kd-rail__ln::after{ right: 0; }
.kd-rail__dot{
position: absolute; top: 1px; width: 7px; height: 7px; margin-left: -3.5px;
border-radius: 50%; background: var(--save); transition: left 240ms var(--ease-o);
}
.kd-rail__dot.is-up{ background: var(--muted); }
.kd-rail__dot.is-flat{ background: var(--muted); }
/* Ray dışına taşan kayıt uca YAPIŞTIRILIR ve içi boşaltılır: sıkıştırma
konumdadır, sayıda değil (kfValuePos sözleşmesi) — nokta bunu söylemeli. */
.kd-rail__dot.is-out{ background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* ---- KUPA MASASI (kapı 2) ----
94 hücre = katalogdaki her kavurmacı için bir tane. Yanık hücreler defterde
kımıldayanlar; GRUPLU dizilir (ölçülmüş şart, yukarıdaki nota bak). Boş
çerçeveli tek hücre "sen"i işaretler. */
.kd-tab{ display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: .1rem 0 .55rem; }
.kd-cell{ aspect-ratio: 1; border-radius: 1px; background: var(--bg-3); }
.kd-cell--on{ background: var(--pop); }
/* `.kd-cell--me` 21 Ağu 2026'da KALDIRILDI: işaretli hücre yanan bloğun ardındaki
ilk sönük hücreydi, ziyaretçiyle ilgisi yoktu. Gerekçe kapilar.js → masa(). */
.kd-leg{
display: flex; gap: 1rem; align-items: center;
font-family: var(--font-m); font-size: .56rem; letter-spacing: .06em; color: var(--muted-2);
}
.kd-leg i{ display: inline-block; width: 7px; height: 7px; margin-right: .34rem; vertical-align: -1px; }
.kd-leg .kd-leg__on{ background: var(--pop); }
/* Gece nabzı: uydurma yok — 94 katalogdan, 19/43 gece defterinden (/api/history). */
.kd-pulse{ display: flex; gap: 2.1rem; align-items: flex-end; flex-wrap: wrap; }
.kd-p b{
display: block; font-family: var(--font-m); font-weight: 500; font-size: 1.6rem;
color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
line-height: 1.1;
}
.kd-p i{
font-family: var(--font-m); font-style: normal; font-size: .58rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.kd-p--move b{ color: var(--pop); }
/* ---- HÂL 2 · KAVURMACI ---- */
#kdBrand{
position: relative; z-index: 3; flex: 1 1 auto; min-height: 0;
width: 100%; max-width: var(--shell); margin: 0 auto;
padding: calc(var(--nav-h, 62px) + 1rem) 2rem 1rem;
align-items: center; justify-content: center;
}
.kd-brand__in{
width: min(46rem, 100%);
border: 1px solid var(--border-2); border-radius: var(--r);
background: linear-gradient(150deg, rgba(90,144,104,.05), transparent 55%), var(--bg-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 2px rgba(0,0,0,.16),
0 6px 12px rgba(0,0,0,.2), 0 16px 32px rgba(0,0,0,.26);
padding: 2.1rem 2.4rem 2rem;
}
.kd-pulse--big{ margin: 1.35rem 0 1.4rem; gap: 3rem; }
.kd-pulse--big .kd-p b{ font-size: 2.4rem; }
.kd-brand__in .kd-tab{ margin: 0 0 .6rem; }
.kd-brand__txt{
font-family: var(--font-b); font-size: .98rem; line-height: 1.65;
color: var(--muted); max-width: 46ch; margin: 1.3rem 0 0;
}
.kd-brand__txt b{ color: var(--cream); font-weight: 500; }
.kd-brand__links{ display: flex; gap: .8rem; margin-top: 1.6rem; }
.kd-cta{
font-family: var(--font-m); font-size: .8rem; padding: .68rem 1.1rem;
border: 1px solid var(--pop); border-radius: 2px;
color: var(--cream); text-decoration: none;
background-color: rgba(90,144,104,.16);
background-color: color-mix(in srgb, var(--pop) 16%, transparent);
transition: background-color 140ms var(--ease-o), border-color 140ms var(--ease-o);
}
.kd-cta:hover{
background-color: rgba(90,144,104,.26);
background-color: color-mix(in srgb, var(--pop) 26%, transparent);
}
.kd-cta--ghost{ border-color: var(--border-2); background: transparent; color: var(--muted); }
.kd-cta--ghost:hover{ background: transparent; color: var(--cream); border-color: var(--pop-line-2); }
/* ---- Dönüş: küçük, sessiz ---- */
.kd-back{
position: absolute; z-index: 4;
top: calc(var(--nav-h, 62px) + .55rem);
left: max(2rem, calc(50% - var(--shell) / 2 + 2rem));
align-items: center; gap: .4rem;
background: none; border: 0; padding: .3rem .45rem; cursor: pointer;
font-family: var(--font-m); font-size: .68rem; letter-spacing: .05em; color: var(--muted);
transition: color 140ms var(--ease-o);
}
.kd-back:hover{ color: var(--cream); }
.kd-back:focus-visible{ outline: 1px solid var(--pop); outline-offset: 2px; }
/* (kd bloğunun sonu — sargı yok) */
/* =====================================================
MOBİL KAPI EKRANI (22 Ağu 2026) — deck 2 duraktan 3'e çıkar
Sıra: 1) kapılar 2) arama hero'su 3) huni + minifoot.
NEDEN: mobil ana sayfanın iki durağı da KAHVE ALICISINA konuşuyordu. Kavurmacı
tarafı `≤900px`'te `display:none`'dı ve `/terminal/`e giden tek bağlantı o gizli
bloğun içindeydi → telefondan bakan bir kavurmacı panoya ana sayfadan hiçbir
yoldan ulaşamıyordu (ölçüldü 21 Ağu: her iki bağlantı da `offsetParent === null`).
Temas kurduğumuz insanlar linki WhatsApp/Instagram'dan açıyor, yani ilk bakış burası.
⚠️ MASAÜSTÜNDEN FARKI: mobilde HÂL MAKİNESİ YOK. Marka kapısı bir hâl değil bir
BAĞLANTI (`/terminal/kavurmaci.html`), kahve kapısı da 2. durağa kaydırıyor →
FLIP yok, pushState yok, popstate yok. Bu bir eksiklik değil karar: kapıların
bütün geçiş ölçümleri Chrome'da yapıldı, `perspective`+`rotateX` iOS Safari'de
hiç sınanmadı (KAPILAR §4) ve mobilin ana tarayıcısı o.
⚠️ KAPI KAYDIRILIP GEÇİLEBİLİR. Bilinçli: mobilde kaydırma refleks bir hareket,
kapıyı duvara çevirmek girişe sürtünme ekler (NN/g audience-based navigation'ın
3. sebebi: içeriğe varmadan kendini tanımlatmak bilişsel yük). Bedeli de yazılı:
kaydırıp geçen kavurmacı alıcı akışına düşer. `data-nav` kancaları ölçecek.
Emsal turu: `.claude/data/arastirma.json → mobil-kapi-2026-08`.
===================================================== */
@media (max-width: 900px){
/* Kapı DOM'a dokunmadan öne geçer: sahne kolon olur, kapı `order:-1` alır.
⚠️ DOM TAŞIMA REDDEDİLDİ. İki satır içi betiğin çapası kapı markup'ının yerine
bağlı (parlama freni = gövdenin ilk çocuğu · H1 taşıma = kapının HEMEN ardı).
Onları oynatmak KAPILAR §3 md.12'nin bedelini (açılışta hero bir an görünüp
kayboluyordu) yeniden ödemek olurdu. Sahnenin mutlak konumlu süs katmanları
(.hc-bg · .hd-plot · .hd-plot-over) akış dışı, flex'e girmiyorlar. */
body.home-lock .hero-stage{ display: flex; flex-direction: column; }
body.home-lock #kdDoors{ order: -1; }
/* Mobil ölçek. Masaüstü kilidi (--kd-w: 2.75rem) BURADA AÇILMIYOR: kilit değerin
kendisi değil REGISTER kuralı — "en büyük tip sayı taşır, çıplak etiket en büyük
kademeyi hak etmez" (KAPILAR §3 md.2). 412px'te 44px'lik iki etiket ekranın
üçte birini yer ve aynı ters dönüş tekrarlanırdı; etiket kademeye iner, sayı
taşıyan iddia satırı öne çıkar (aşağıda). */
/* --deste-col: DESTE GENELİ kolon, kapıya ait DEĞİL (23 Ağu 2026). Üç durak da
(kapı · arama · huni) bu tek kolona oturur; mobil bölümdeki tek `body` bildirimi
burası olduğu için burada duruyor. Özel değeri kaskad çözer, kaynak sırası değil —
aynı `@media` içindeki her kural okuyabilir.
⚠️ 390px telefonda 27rem (432px) kullanılabilir genişlikten (350px) BÜYÜK → hiç
bağlamaz, gerçek telefonda sıfır değişim (ölçüldü, parmak izi öncesi/sonrası). */
body{ --kd-w: 1.45rem; --kd-kh: 8.2rem; --deste-col: 27rem; }
body.home-lock #kdDoors{
display: flex; flex-direction: column; gap: .7rem;
/* `+2.5rem` = kutunun kendi 1.25rem yatay dolgusu (box-sizing:border-box), böylece
İÇERİK tam --deste-col olur. Eski `none` 550px pencerede kapıyı 510px'e yayıyordu,
huni ise 432'de duruyordu — iki durak farklı kolondu. */
max-width: calc(var(--deste-col) + 2.5rem);
justify-content: center; justify-content: safe center;
padding: calc(var(--nav-h) + .5rem) 1.25rem 3rem;
}
/* Kimlik künyesi sola: mobilde sağa dayalı tek satır, başlıksız bir sayfada
asılı duruyor (masaüstünde kapı ızgarasının sağ kolonuyla hizalıydı). */
.kd-ident{ justify-content: flex-start; }
/* Kapı: ızgara değil kolon. Germe YOK (`flex: 0 0 auto`) — 21 Ağu'da masaüstünde
denendi, kartın içi boşaldı (KAPILAR §3 md.5); artan yükseklik kütlenin
ETRAFINA simetrik dağılır, içine değil. */
.kd-door{
display: flex; flex-direction: column; gap: .75rem;
flex: 0 0 auto; padding: 1rem 1rem .9rem;
/* Kapı 2 artık ama link sıfırlaması BURAYA yazılmaz: core.css:193 zaten
`a{color:inherit;text-decoration:none}` yapıyor (ölçüldü — masaüstü parmak
izinde `.kd-door--m` renginde fark çıkmadı). İkinci bildirim ölü koddur. */
}
.kd-door--k{ flex: 0 0 auto; }
/* Kütle dikeyde ortalanır — 1. durağın kilitli optik-merkez kararıyla (K2, 2 Ağu)
aynı davranış, iki durak arasında hiza kayması olmasın. `safe`: kısa telefonda
içerik uzunsa hiza start'a düşer, ilk satır nav'ın altına saklanmaz.
⚠️ Ortalama BURADA yapılır, bir sarmalayıcıda değil: iki kapı `#kdDoors`un
DOĞRUDAN flex çocuğu ve masaüstünde 1.5 : 1 oranını kardeş olarak kuruyorlar
(`.kd-door--k{flex:1.5}`). Araya kutu koymak o oranı sessizce öldürürdü. */
/* Bayrak akışa döner: mutlak konum masaüstü ızgarasının payına yazılmıştı. */
.kd-door__flag{ position: static; display: block; }
.kd-door__label{ gap: .55rem; }
/* REGISTER onarımı — ⚠️ YALNIZ KAPI 1. Kural "en büyük tip SAYI taşır"; kapı 1'in
iddia satırı sayıyı taşıyor (`975 kahve, tek sorguda`), kapı 2'ninki düz bir cümle
("fiyatların her gece okunuyor"). İlk yazımda kural iki kapıya birden uygulandı ve
ölçüldü: kapı 2'nin CÜMLESİ ekranın en büyük tipi oldu, yani kuralı uygularken
kuralın kendisi çiğnendi. Kapı 2'nin iddiası destek satırıdır, kademede kalır. */
.kd-door--m .kd-door__claim{ font-size: .95rem; line-height: 1.4; }
.kd-door--k .kd-door__claim{ font-size: 1.5rem; line-height: 1.2; color: var(--cream); }
.kd-door__claim--m{ display: block; }
/* Kapı 2'nin sözü hedefiyle eşleşir: mobilde bağlantı kavurmacı sayfasına gidiyor. */
.kd-go--d{ display: none; }
.kd-go--m{ display: inline; }
.kd-door__claim b{ font-weight: 500; }
.kd-door__body{ display: block; }
.kd-bar{ margin-bottom: .5rem; }
/* `--canlı fiyat` bayrağı mobilde DÜŞER: dar barda medyan satırını iki ragged
satıra sarıyordu (ölçüldü 375×667) ve zaten tekrar — üstteki künye satırı
"CANLI KATALOG · HER GECE 04:37" diyor. Masaüstünde kapı ızgarasının sağ
kolonunda duruyor, orada ne sarma var ne tekrar hissi. */
.kd-door--k .kd-bar__r{ display: none; }
/* Tek fiş. Masaüstünde altı (3+3); 412px'te dikey bütçe bir taneye yetiyor ve
çevrilme döngüsü kart sayısından bağımsız çalışıyor (kapilar.js altı flap'i her
zaman kurar, CSS gizler — masaüstündeki yükseklik kapısıyla aynı sözleşme). */
.kd-cards{ grid-template-columns: 1fr; }
.kd-cards .kd-card:nth-child(n+2){ display: none; }
.kd-pulse{ gap: 1.3rem; }
.kd-p b{ font-size: 1.15rem; }
.kd-tab{ gap: 2px; margin: .1rem 0 .35rem; }
/* Devam işareti — İLLUSION OF COMPLETENESS karşılığı (NN/g). Tam-ekran bölüm +
boydan boya çizgi + geniş boşluk üçlüsü kullanıcıya "sayfa bitti" dedirtiyor;
kapı ekranı üçünü birden taşıyor. ⚠️ İçerik SIZDIRMAK denendi ve bırakıldı:
alttaki durak hero ve onun ilk 50px'i dolgu, yani sızan şey boşluk olurdu.
Yerine kendi gramerimizde etiketli bir işaret (`.hc-scrollcue` kardeşi). */
.kd-more{
display: flex; /* yukarıdaki taban gizlemesini burada açıyoruz */
position: absolute; left: 0; right: 0; bottom: .55rem; /* #kdDoors zaten relative */
align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-m); font-size: .66rem; letter-spacing: .1em;
color: var(--muted-2); text-decoration: none;
}
.kd-more .kd-pr{ color: var(--pop); }
}
/* Snap sözleşmesi: kapı da diğer iki durakla AYNI kuralda. Eşit yükseklikli, tam
görünür duraklar → `mandatory` doğru seçim (Roselli: öğe görünür alandan uzunsa
erişilemez orta bölge doğar, o hâlde proximity gerekir). Kısa ekranda (<600)
snap zaten kapalı ve kapı normal blok olarak akışa girer. */
@media (max-width: 900px) and (min-height: 600px){
body.home-lock #kdDoors{
min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* ---- ORTA BOY TELEFON (680-829px yükseklik) ----
Ölçüldü 360×780: kapı 794px istiyor, ekran 780 → 14px taşıyor. Snap durağı görünür
alandan uzun olamaz (Roselli: mandatory snap + görünürden uzun öğe = erişilemez orta
bölge). İlk kademe 679'daydı ve 680-829 bandı kademesizdi.
Kısılan yer içerik DEĞİL ritim: fiş kısalır, dolgu ve boşluk daralır. */
@media (max-width: 900px) and (max-height: 829px){
/* ⚠️ 6rem DEĞİL: ölçüldü, kartın içerik tabanı 102px + 2px kenarlık = 104px (6,5rem).
6rem yazılmıştı ve 8px açık iki metin satırını eziyordu (yukarıdaki fren notu).
Ad burada TEK satıra iner — iki satırlık ada 6,5rem yetmez, tabanı 120'ye çıkarırdı. */
body{ --kd-kh: 6.5rem; }
.kd-card__name{ -webkit-line-clamp: 1; }
body.home-lock #kdDoors{ padding-bottom: 2.4rem; gap: .55rem; }
.kd-door{ padding: .85rem 1rem .75rem; gap: .6rem; }
.kd-door__claim{ font-size: 1.35rem; }
.kd-pulse{ gap: 1.1rem; }
}
/* Kısa telefon (414×620 ölçüldü): kapı 683px istiyordu, çerçeve 560 → ızgara
kırpılıyor, "gece defteri" bağlantısı ve devam işareti ekrandan çıkıyordu.
Kısılan yer içerik DEĞİL ritim: fiş TAMAMEN düşer (medyan satırı zaten aynı şeyi
söylüyor), nabız ve ızgara sıkışır. Jüri madde 5'in bulgusu.
⚠️ Eşik 679 → 749: 680-749 bandında fiş kısaltmak yetmiyordu (ölçüldü). */
@media (max-width: 900px) and (max-height: 749px){
body.home-lock #kdDoors{ padding-top: calc(var(--nav-h) + .2rem); gap: .5rem; }
.kd-door{ padding: .8rem 1rem .7rem; gap: .5rem; }
.kd-cards{ display: none; }
.kd-door__claim{ font-size: 1.25rem; }
.kd-pulse{ gap: 1rem; }
.kd-p b{ font-size: 1rem; }
}