/* ===================================================================== SAYFA CSS — SPOR SÖZLÜĞÜ · LİSTE (REVİZYON 6 · madde 8 · 9 · 10) R8 · madde 7 · 8 · 9 ile GÜNCELLENDİ. YAPI REFERANSI: dadagastro.com/mutfak-sozlugu — 10. oturumda (R8) Playwright ile CANLIDAN @1440 ve @390'da yeniden ölçüldü. Referansın iskeleti: section.sz-controls (zemin #fff, dolgu 24/0/10 · @390 18/0/10) .sz-searchbar 560 x 55 ← ARAMA .az-bar 1176 x 66 ← HARF RAYI (30 düğme, 38x38, gap 6) .ke-filter 1176 x 68 ← KATEGORİ ÇİP RAYI (38 px, gap 9, kaydırmalı) section.sz-sec (dolgu 38/0/74 · @390 26/0/50) p.sz-count "765 terim" ← SAYAÇ, KENDİ SATIRINDA .term-card ← 16 yarıçap, hairline, iki katmanlı gölge .term-item > .term-row ← 79.4 px · dolgu 16/20 · gap 16 .tr-ltr 46 x 46 ← HARF AVATARI (12 yarıçap, 19px/700) .tr-name b 15.5/1.55/700 · span 12.5/1.55/500 .tr-cat 11px/1.55/700 · ls .06em · dolgu 6/11 .term-detail ← dolgu 16/24/24/82 (@390 sol 20) R8'DE KAPATILAN DÖRT FARK (madde 7): a) her satıra sol harf avatarı eklendi (`.sr-ltr`) b) açık kaydın sol dikey şeridi (`inset 3px`) KALDIRILDI — referansta yok c) sayaç süzgeç kutusundan çıkıp kendi satırına indi d) kategori çipleri açılır menüden çıkıp açık raya döndü BEŞ BİLİNÇLİ SAPMA (ölçülüp seçildi, geri alınabilir): 1. YAPIŞKAN YOK. Referansın `.az-bar`'ı `position:sticky`; R6 madde 10 "sticky istenmiyor" diyor ve R8 bunu geri almadı. 2. HARF RAYI KAYDIRILMIYOR, CETVEL. Referans 30 düğmeyi yatay kaydırıyor (M'den sonrası ekran dışında). Bizde 29 harf 1176 px'e sığdığı için ray ızgaraya yayılıyor; hiçbir harf gizlenmiyor. @640 altında referansın kaydırma davranışına dönüyor ve düğme 44 px'e çıkıyor (dokunma hedefi). 3. ARAMA KUTUSU KENDİ SATIRINDA DEĞİL, ÇİP SATIRINDA (R8 madde 8) ve genişliği 560 değil 360 — iç ölçüleri referansın. 4. (KALKTI — R8 tam parite, Beyar kararı.) Burada "harf grubu başlığı var, tek kart yok" diye bir sapma yazılıydı. Beyar tam parite dedi: başlıklar kaldırıldı, 254 terim referanstaki gibi TEK `.term-card` içinde. ÖLÇÜLDÜ — gezinme etkilenmedi: harf rayı iki markada da çapa değil süzgeç (referansta harf çapası 0 tane, tıklayınca scrollY 0'da kalıyor). Yerine kalan tek sapma: liste zemini. Referansın `section.sz-sec`'i beyaz, bizde sayfa grisi (`--bg`) — tek kartın sınırı zeminden ayrılsın diye. 5. SATIRIN SAĞINDA OK YOK. Referansta satır hem açılıyor hem sağdaki okla detay sayfasına gidiyor; R6 madde 9 bunu tek hedefe indirdi, detay yolu açılan kaydın içinde (`.sd-more`). R8 bunu geri almadı. SAYFALAMA YOK: referans 765 terimi sayfalıyor (ölçüldü — 765 kaydın 54'ü görünür), bizde 254 var ve harf rayı + kategori çipleri + arama gezinmeyi karşılıyor. Süzülen her satır DOM'da, böylece "sayaç = DOM'daki satır sayısı" ölçütü birebir sınanabiliyor. KABUĞA TEK SATIR YAZILMADI (K35). Sınıf öneki `sz-` / `sr-` / `sd-`. Kabuğun ortak parçaları (.lib-top · .lib-crumb · .lib-stats · .lib-empty · .hr-note · .btn · .df-fchip) olduğu gibi kullanılıyor. `.lib-filters.ff` açılır süzgeci R8 madde 7d ile bu sayfadan kalktı. BANNER: `.lib-top` + dosya adında "-detay-" GEÇMİYOR → kabuk body'ye data-fit-hero-kind="liste" yazıyor → yükseklik --banner-h-liste (544 / 607 / 587). Burada banner ÖLÇÜSÜNE dair tek satır yok. ===================================================================== */ .lib-top{--lib-img:url('https://images.unsplash.com/photo-1517649763962-0c623066013b?w=1680&q=80&auto=format&fit=crop&exp=7&gam=6&sat=-16');--lib-pos:center 34%} /* ---------- İKİ ZEMİN ---------- R8 ölçümü: referansın `section.sz-sec`'i BEYAZ (#fff), sayfa zemini #f9f9f9 yalnız bölümlerin dışında görünüyor. Bizde `.sz-body` #f9f9f9 KALIYOR — kalan tek sapma. Referansta kartın beyaz zeminden ayrılmasını sayfalama ve sticky harf rayı üstleniyor; bizde ikisi de yok, 254 kayıt tek kartta akıyor. Gri zemin kartın kenarını görünür kılıyor. Kartın kendi gölgesi referanstan birebir (aşağıda `.sz-card`). Bant dolgusu referanstan: 24px 0 10px (@390: 18px 0 10px). R12/S3 (Beyar): "gölge var renk farklı olmasın beyaz olsun kategorilerin altındaki section gri beyaz oalcak". Yukarıdaki gerekçe artık geçersiz — `.sz-body` `.sz-controls` ile aynı zemine (`--paper`) çekildi. Kartın beyaz zeminden ayrımını artık gri zemin değil, `.sz-card`'ın zaten taşıdığı 1px `--line` kenarlığı + kendi gölgesi üstleniyor (gölge EKLENMEDİ — bu turda kabuktaki dikiş gölgesi kaldırılıyor, buna ters düşmemek için yeni gölge eklenmedi, var olan kart gölgesi korundu). */ /* §B11 · bölüm zeminleri beyaz ile gri arasında DÖNÜŞÜMLÜDÜR (zebra). Ölçülen kusur (2026-08-29): bu bölüm bir öncekiyle aynı zemini taşıyordu. */ .sz-controls{background:var(--bg-cream);padding:24px 0 10px} /* referans `section.sz-sec` üst dolgusu 38 @1440 · 26 @390 — birebir. Alt dolgu sitenin ortak ritmi (`--sec-pad`, K-A'nın sahasında). */ .sz-body{padding:38px 0 var(--sec-pad);background:var(--paper)} /* ===================================================================== 1 · KONTROL SATIRLARI — R8 madde 7d + 8 Referans üç satır kuruyor: arama → harf rayı → kategori çip rayı. R8 madde 8 aramayı KATEGORİ SATIRINA taşıyor (referansın 3. satırı): böylece o satırın solu çiplerle doluyor, sağı arama kutusuyla. Kalan iki satır: 1) harf rayı 2) çipler + arama. ===================================================================== */ .sz-tools{display:flex;align-items:flex-start;gap:14px;padding:10px 0 10px} /* Çip rayı — referansın `.ke-filter`'ı: tek satır, yatay kaydırmalı, gap 9. `min-height` arama kutusunun boyu; çipler o bandın dikey ortasında duruyor ama KUTUNUN ÜST KENARI aramayla aynı y'de kalıyor (R8 madde 8 kabul ölçütü: fark 0 px). */ .sz-chips{ flex:1;min-width:0;min-height:55px; display:flex;align-items:center;gap:9px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } /* Kaydırma ipucu — referansın `.ke-filter`'ı da `has-overflow` / `at-start` sınıflarıyla kenar durumunu işaretliyor. KUSUR DÜZELTMESİ (R8, kendi eleştirim): maske sabitti ve ray SONUNA kadar kaydırıldığında bile son çipi soluklaştırıyordu — "devamı var" diye yalan söylüyordu. Artık maske yalnız gerçekten taşan yönde uygulanıyor. */ .sz-chips.tasan.on-sag{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .sz-chips.tasan.on-sol{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px); mask-image:linear-gradient(90deg,transparent,#000 28px)} .sz-chips.tasan.on-sol.on-sag{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)} .sz-chips::-webkit-scrollbar{display:none} /* Çip ölçüsü referanstan birebir (8/15 dolgu · 8 yarıçap · 13px/1.55). Referansın çipinde ikon YOK — bizimkinden de kalktı, hem birebirlik hem de tek satırda daha çok çip görünsün diye. */ .sz-chips .df-fchip{ flex:none;padding:8px 15px;border-radius:var(--radius-sm); font-size:13px;font-weight:500;line-height:1.55; background:var(--paper);border:1px solid var(--line);color:var(--slate); } .sz-chips .df-fchip .n{font-weight:700;color:var(--muted);margin-left:2px} .sz-chips .df-fchip:hover{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-tint)} /* seçili çip referansta DOLU DEĞİL: yıkama zemin + marka kenarlık + marka metin (kalın). Kabuğun `.df-fchip.on`'u dolu yeşil; bu sayfada iptal. */ .sz-chips .df-fchip.on{background:var(--fit-tint);border-color:var(--fit);color:var(--fit-deep);font-weight:700} .sz-chips .df-fchip.on .n{color:var(--fit-deep)} .sz-chips .df-fchip:focus-visible{outline:3px solid var(--fit);outline-offset:2px} /* "Filtreleri temizle" — referansta karşılığı yok (orada "Tüm Kategoriler" çipi bu işi görüyor). Bizde kalıyor ama YALNIZ süzgeç varken görünüyor; yoksa çip rayının yerini yiyordu. */ .sz-clear{ flex:none;align-self:center;display:inline-flex;align-items:center;gap:7px; height:38px;padding:0 13px;border-radius:var(--radius-sm); background:none;border:1px solid transparent;cursor:pointer;font-family:inherit; font-size:13px;font-weight:700;color:var(--muted);transition:.18s var(--ease); } .sz-clear:hover{color:var(--fit-deep);border-color:var(--fit-line);background:var(--fit-tint)} .sz-clear:focus-visible{outline:3px solid var(--fit);outline-offset:2px} .sz-clear[hidden]{display:none} /* ===================================================================== 2 · ARAMA — referans kutusu 560 x 55; burada çip rayıyla aynı satırda olduğu için genişlik 360'a iniyor, İÇ ÖLÇÜLERİ referanstan (55 boy, 12 yarıçap, 15px/500 metin, iki katmanlı gölge). ===================================================================== */ .sz-search{flex:0 0 360px;max-width:100%} .sz-find{ display:flex;align-items:center;gap:12px;height:55px;padding:0 16px; background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md); /* referansın arama kutusundaki iki katmanlı gölge — bant da beyaz olduğu için kutuyu ayıran tek şey bu */ box-shadow:0 1px 2px rgba(33,30,22,.04),0 2px 6px rgba(33,30,22,.05); transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); } .sz-find:focus-within{border-color:var(--fit);background:var(--paper);box-shadow:0 0 0 3px var(--fit-tint)} .sz-find>i{flex:none;color:var(--muted);font-size:14px} .sz-find input{ flex:1;min-width:0;background:none;border:none;outline:none; font-family:inherit;font-size:15px;font-weight:500;color:var(--slate); } .sz-find input::placeholder{color:var(--muted);font-weight:500} .sz-find input::-webkit-search-cancel-button{display:none} .sz-find .x{ flex:none;width:30px;height:30px;border-radius:var(--radius-circle); background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px; display:none;place-items:center;transition:.18s var(--ease); } .sz-find.has .x{display:grid} .sz-find .x:hover{background:var(--line);color:var(--slate)} /* R9 · ipucu arama kutusunun ALTINDAN İÇİNE alındı (Beyar). Önce `.sz-search` 360×83 idi (55 kutu + 9 boşluk + 19 ipucu) ve chip satırından yüksek kalıyordu; şimdi 360×55, tek satır. Üç hâli de kısa: "En az 3 harf" · "N harf daha yaz" · "Süzülüyor". */ .sz-hint{margin:0;flex:none;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap} .sz-hint.warn{color:var(--fit-deep)} .sz-find input{min-width:0} /* ipucu yer kaplayınca input daralabilsin */ /* R9 · placeholder KISALTILDI: ipucu kutuya girince kullanılabilir input genişliği 268px gerektiren metin için 224px'e düştü ve metin kırpılıyordu ("…tanım içind|"). Yeni metin 196px, pay 30px. Üç arama alanı da duruyor; düşen yalnız "içinde ara" fiili — büyüteç ikonu onu zaten söylüyor. */ /* ===================================================================== 3 · HARF RAYI — 29 harf (Q/W/X yok) + "Tümü" Cetvel: harfler ızgaraya eşit paylaştırılıyor, hiçbiri gizlenmiyor. R8: bant artık HARF RAYIYLA açılıyor (arama çip satırına indi), alt boşluk referansın `.az-bar` margin'inden: 24 px. ===================================================================== */ .sz-letters{display:flex;align-items:stretch;gap:6px;margin:0 0 24px} .sz-ruler{flex:1;min-width:0;display:grid;grid-template-columns:repeat(29,minmax(0,1fr));gap:6px} .sz-ltr{ font-family:inherit;font-size:13.5px;font-weight:700;color:var(--slate-2); background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm); height:38px;padding:0 2px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease); } .sz-ltr.all{flex:none;padding:0 16px;letter-spacing:.01em} .sz-ltr:hover{border-color:var(--fit);color:var(--fit-deep);background:var(--fit-tint)} .sz-ltr.on{border-color:var(--fit-deep);background:var(--fit-deep);color:#fff} /* karşılığı olmayan harf: kesikli kenarlık "odaklanmış giriş alanı" gibi okunuyordu; düz kenarlık + soluk zemin, tıklanamaz olduğu belli. */ .sz-ltr.is-empty{opacity:.42;cursor:not-allowed;background:var(--bg);color:var(--muted);border-color:var(--line)} .sz-ltr.is-empty:hover{border-color:var(--line);color:var(--muted);background:var(--bg)} .sz-ltr:focus-visible{outline:3px solid var(--fit);outline-offset:2px;z-index:1} /* ===================================================================== 4 · SAYAÇ — R8 madde 7c: KENDİ SATIRINDA. R6'da kabuğun `.ff-bar`'ının sağ ucuna taşınıyordu (data-ff-count); referansta sayacın yeri liste bölümünün başı, tek başına bir satır. Ölçü referanstan birebir: 13px / 1.55 / 500, alt boşluk 14 px; sayı kalın (700) ve koyu. ===================================================================== */ .sz-count{margin:0 0 14px;font-size:13px;font-weight:500;line-height:1.55;color:var(--muted)} .sz-count b{color:var(--slate);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums} /* ===================================================================== 5 · TERİM KARTI — referansın `.term-card` deseni, TEK KART. R8 · TAM PARİTE (Beyar kararı): harf grubu başlığı (`.sz-group`/`.sz-gh`) kaldırıldı. Referansta 765 terim tek kartın içinde ve grup başlığı yok; satırları ayıran tek şey hairline. Gezinme harf rayında (ÇAPA DEĞİL SÜZGEÇ — iki markada da ölçüldü), o yüzden başlık kalkınca ray bozulmuyor. ===================================================================== */ /* Kart kabuğu referanstan birebir: 1 px hairline · 16 yarıçap · overflow:hidden · iki katmanlı yumuşak gölge. */ .sz-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden; box-shadow:0 1px 2px rgba(33,30,22,.04),0 2px 6px rgba(33,30,22,.05)} /* Referansta ayraç her `.term-item`'ın ALTINDA — İLK satırda da var, bu yüzden orada her kayıt 80.4 px. R6'da 28 ayrı kart olduğu için ayracı satırlar ARASINA koymuştuk (son satırın çizgisi kart kenarlığıyla çakışmasın diye). Tek karta dönünce o gerekçe kalktı: ayraç referanstaki yerine döndü, artık 254 kaydın 254'ü de 80.4 px. */ .sz-item{border-bottom:1px solid var(--line)} /* ---- kapalı satır ---- */ /* ÖLÇÜLDÜ (R8, canlı) — referans satırı 79.4 px ve bu ölçü DAYATILMIYOR, içerikten çıkıyor: 16 dolgu + 47.4 ad bloğu + 16 dolgu. Ad bloğu da 24.03 (15.5/1.55) + 4 boşluk + 19.38 (12.5/1.55). Bizdeki `min-height:80` kalktı; ölçü artık referansla aynı yerden geliyor. */ .sz-row{ width:100%;display:flex;align-items:center;gap:16px; padding:16px 20px;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer; transition:background .16s var(--ease); } .sz-row:hover{background:var(--bg)} /* R8 madde 7b — AÇIK KARTIN SOL ŞERİDİ KALKTI. Referansta açık kaydın işareti şerit değil: SATIR zemini yıkamaya dönüyor, harf avatarı doluyor, ad marka rengine geçiyor. Detay kutusu zeminsiz kalıyor (referansta `.term-item.open` zemini saydam). */ .sz-item.open>.sz-row{background:var(--fit-tint)} .sz-item.open>.sz-row:hover{background:var(--fit-tint)} .sz-row:focus-visible{outline:3px solid var(--fit);outline-offset:-3px} /* R8 madde 7a — HER SATIRDA SOL HARF AVATARI. Referans ölçüsü birebir: 46x46 · 12 yarıçap · 19px/700 · yıkama zemin + marka metin; açık kayıtta dolu marka + beyaz metin. */ .sr-ltr{ flex:none;width:46px;height:46px;border-radius:var(--radius-md); display:grid;place-items:center; background:var(--fit-tint);color:var(--fit-deep); font-size:19px;font-weight:700;line-height:1.55; transition:background .16s var(--ease),color .16s var(--ease); } .sz-item.open .sr-ltr{background:var(--fit-deep);color:#fff} /* referans: ad ve İngilizce karşılık YAN YANA değil, ALT ALTA — bold adlar tek bir sütun oluşturuyor ve liste dikeyde taranabiliyor. Ölçü referanstan: b 15.5/1.55/700 (alt boşluk 4), span 12.5/1.55/500. Harf aralığı referansta `normal` — bizdeki -.01em kalktı. */ .sr-name{flex:1;min-width:0;display:block} .sr-name b{display:block;margin-bottom:4px;font-size:15.5px;font-weight:700;color:var(--slate); letter-spacing:normal;line-height:1.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sz-item.open .sr-name b{color:var(--fit-deep)} .sr-name span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.55; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-cat{ flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--fit-deep);background:var(--fit-tint);border-radius:var(--radius-sm); padding:6px 11px;line-height:1.55;white-space:nowrap; } .sz-item.open .sr-cat{background:var(--paper)} .sr-caret{flex:none;width:18px;text-align:center;color:var(--muted);font-size:12px; transition:transform .22s var(--ease)} .sz-item.open .sr-caret{transform:rotate(180deg);color:var(--fit-deep)} /* ---- açılan kayıt ---- */ /* ÖLÇÜLDÜ (R8, canlı) — referansın `.term-detail` dolgusu @1440: 16px 24px 24px 82px (82 = 20 dolgu + 46 avatar + 16 boşluk, metin satırdaki adın hizasından başlıyor) @390 : 16px 24px 24px 20px (dar ekranda hizadan vazgeçiliyor) Birebir alındı. */ .sz-detail{padding:16px 24px 24px 82px;animation:szOpen .22s var(--ease)} @keyframes szOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* KUSUR DÜZELTMESİ (R8, kendi eleştirim): açılma animasyonu ve avatar/zemin geçişleri için hareket azaltma karşılığı yoktu — kabukta genel bir kural var ama bu sayfanın kendi animasyonunu kapsamıyor. */ @media (prefers-reduced-motion:reduce){ .sz-detail{animation:none} .sr-caret,.sr-ltr,.sz-row,.sz-ltr,.sz-chips .df-fchip,.sd-foot a,.sd-more,.sd-more i{transition:none} } /* ÖLÇÜLDÜ — referansın `.term-detail p`'si YASLI DEĞİL: @1440 ve @390'da `text-align:start`, 14.5px / 1.75. Bizimki 14px / 1.68 ve kabuğun yaslama katmanı yüzünden iki yana yaslıydı; @390'da 322 px'lik kutuda her satırda görünür "nehir" açıyordu (K12'nin gerekçesiyle aynı durum). Geri alma: bu bloktaki text-align iki satırını sil. */ /* R11/M9 · Beyar: "yazılar genişlikte yay". Ölçü sınırı kalktı, uzayan ölçünün karşılığı olarak satır arası zaten 1.75 (kabuktaki bilgi kutularında 1.72'ye açtığımız değerle aynı aile). */ .sz-detail>p{font-size:14.5px;font-weight:500;color:var(--slate-2);line-height:1.75; max-width:none;margin:0 0 12px;text-align:left;text-align-last:auto} /* referans `.td-ex`: 13.5px / 1.55 / 500, ikincil metin rengi, 12/16 boşluk. R12/S2 (Beyar): alt boşluk (16) buradan kaldırıldı, `.sd-foot`/`.sd-more`'un kendi `margin-top`'una taşındı — bkz. altındaki not. */ .sd-ex{display:block;margin:12px 0 0;padding-left:13px;border-left:2px solid var(--fit); font-size:13.5px;font-weight:500;color:var(--muted);line-height:1.55;font-style:italic; max-width:none;text-align:left;text-align-last:auto} /* R12/S2 — `.sz-detail` flex column olduğu için alt/üst margin'ler ÇÖKMÜYOR: eskiden `.sd-ex{margin-bottom:16px}` + `.sd-more{margin-top:16px}` (sd-foot yokken) TOPLANIYOR, 32px'e çıkıyordu (ölçüldü). Tek yol seçildi: her boşluk yalnız SONRAKİ elemanın margin-top'unda tutuluyor, `.sd-ex`'in margin-bottom'u kaldırıldı (yukarıda). `.sd-foot` zaten `.sd-ex`'ten sonra geliyorsa bu 16px'i o taşır; `.sd-foot` yoksa `.sd-more` taşır — iki durumda da toplam 16px, hiçbir zaman iki kez sayılmıyor. */ .sd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px} .sd-foot .lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted)} .sd-foot .lbl i{color:var(--fit-deep);font-size:12px} /* referans `.td-recipe` R8'de yeniden ölçüldü: dolgu 8/14 · gap 8 · 8 yarıçap · 13px/1.55/700 · yıkama zemin · marka kenarlık %22 alfada. Yükseklik dayatılmıyor, dolgudan çıkıyor (8+20.15+8+2 = 38.15). */ .sd-foot a{ display:inline-flex;align-items:center;gap:8px;padding:8px 14px; font-size:13px;font-weight:700;line-height:1.55;color:var(--fit-deep); background:var(--fit-tint);border:1px solid color-mix(in srgb, var(--marka) 22%, transparent);border-radius:var(--radius-sm); transition:.18s var(--ease); } .sd-foot a:hover{background:var(--fit-deep);color:#fff;border-color:var(--fit-deep)} .sd-foot a:focus-visible{outline:3px solid var(--fit);outline-offset:2px} .sd-foot .sep{width:1px;height:20px;background:var(--fit-line)} /* R6 madde 9 — DETAY SAYFASINA TEK GİRİŞ. Sağdaki ok kalktı; terimin kendi sayfasına giden yol artık açılan kaydın içinde ve DOLU yeşil eylem. Zemin --fit-deep (beyazla 5.45:1, S4 ölçümü) — --fit 3.52:1'de kalıyordu. */ /* R11/M9 · Beyar: "açılmış tile'da ilgili terim sayfası kısmı SAĞ ALTTA olacak, EN SAĞDA. Gastro'da sağ altta biraz minimal bir yazı butonu var — `dadagastro.com/mutfak-ansiklopedisi`'nden alacağız aslında." REFERANS ÖLÇÜLDÜ (canlı, `.ans-dgo` · `.ans-dgo-row`): 13px · font-weight 700 · marka rengi · background none · border none · padding 0 · border-radius 0 · kapsayıcının SAĞ kenarına dayalı (ölçülen sapma 0px) Yani dolu düğme değil, düz metin bağlantısı. Öncesi: `--fit-deep` zeminli, 40px yüksekliğinde DOLU YEŞİL düğme, sola dayalı. Kontrast gerekçesi (5.45:1) artık geçerli değil — metin beyaz zemin üstünde `--fit-deep` ile zaten AA'yı geçiyor. */ .sd-more{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; margin-left:auto; /* satırın SAĞ ucuna dayar */ background:none;border:none;padding:0;border-radius:0; color:var(--fit-deep);font-size:13px;font-weight:700;line-height:1.55; transition:color .18s var(--ease); } /* akordiyon gövdesi blok akışı; `margin-left:auto` tek başına iş görmez — bağlantı kendi satırında sağa yaslanır */ .sz-detail{display:flex;flex-direction:column;align-items:stretch} .sz-detail>.sd-more{align-self:flex-end} .sd-more:hover{color:var(--fit-deeper)} .sd-more:focus-visible{outline:3px solid var(--fit);outline-offset:2px} .sd-more i{font-size:11px;transition:transform .2s var(--ease)} .sd-more:hover i{transform:translateX(3px)} /* ---------- SAYFA SONU: EKSİK TERİM ÖNERİSİ (referansta da var) ---------- */ .sz-cta{display:flex;gap:18px;align-items:flex-start;background:var(--slate); border-radius:var(--radius-lg);padding:26px 28px;margin-top:var(--sec-pad-sm);color:#fff} .sz-cta>i{flex:none;color:var(--fit-bright);font-size:20px;margin-top:4px} .sz-cta .t{flex:1;min-width:0} .sz-cta b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:7px} /* K12 mantığı: yaslama akan makale metni için. Bu paragraf 476 px'de üç, @390'da 289 px'de altı satır — yaslama her satırda görünür "nehir" açıyordu (ekran görüntüsüyle ölçüldü). Sola yaslı. */ .sz-cta p{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.74);line-height:1.65;margin:0;max-width:56ch; text-align:left;text-align-last:auto} .sz-body .hr-note{margin-top:var(--sec-pad-sm)} .sz-cta-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px} /* .btn-fit kenarlıksız (50 px), .btn-ghost 1 px kenarlıklı (52 px) — iki eylem yan yana 2 px kaçıktı, taban yükseklik eşitlendi. */ .sz-cta-acts .btn{box-sizing:border-box;min-height:52px} /* kenarlık --slate üzerinde .30 alfada 2.70:1 ölçüldü (UI bileşeni ≥3:1 ister); .40 → 3.78:1 */ .sz-cta-alt{border-color:rgba(255,255,255,.40);color:#fff;background:transparent} .sz-cta-alt:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff} /* ---------- RESPONSIVE ---------- */ @media (max-width:1100px){ .sz-ruler{grid-template-columns:repeat(15,minmax(0,1fr))} } @media (max-width:860px){ .sz-ruler{grid-template-columns:repeat(10,minmax(0,1fr))} } @media (max-width:760px){ .sr-cat{display:none} /* dar ekranda kategori etiketi satırı şişiriyor */ } @media (max-width:900px){ /* çip rayı + arama tek satıra sığmıyor: alt alta. Referans @390'da aramayı yine kendi satırında tutuyor. */ .sz-tools{flex-direction:column;align-items:stretch;gap:0} .sz-chips{min-height:0;order:2;padding:2px 0 4px} .sz-search{flex:none;order:1;margin-bottom:10px} .sz-clear{order:3;align-self:flex-start;margin-top:2px} } @media (max-width:640px){ /* referans @390: bant dolgusu 18/10, liste bölümü üstü 26 */ .sz-controls{padding:18px 0 10px} .sz-body{padding-top:26px} .sz-search{max-width:none} .sz-find{height:50px;padding:0 14px} /* referansın kaydırmalı rayına dönülüyor; dokunma hedefi 44 px */ .sz-letters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; padding-bottom:4px;-webkit-overflow-scrolling:touch} .sz-letters::-webkit-scrollbar{display:none} .sz-ruler{display:flex;flex:none;gap:6px} .sz-ltr{flex:none;min-width:44px;height:44px;font-size:14px} .sz-ltr.all{min-width:auto;height:44px} /* R8: satır ölçüsü @390'da DA referansla aynı — referans dar ekranda satırı küçültmüyor (dolgu 16/20, avatar 46, boy 79.4 ölçüldü). Eski `padding:11px 14px / min-height:62` kalktı. */ .sz-detail{padding:16px 24px 24px 20px} .sd-more{width:100%;justify-content:center} .sz-cta{padding:20px 18px;gap:13px} .sz-cta-acts{flex-direction:column;align-items:stretch} .sz-cta-acts .btn{width:100%;justify-content:center} }