/* ---------------------------------------------------------------------- BLOG LISTESI — tipografi katmani. Bu dosyayi YALNIZCA blog.html (TR) ve en/resources.html (EN) yukler; blog bilesenlerini baska hicbir sayfa kullanmiyor (arandi). Paylasilan css/style.css'e DOKUNULMADI — oradaki kurallar butun siteyi tasiyor. ---------------------------------------------------------------------- */ /* Bolum aciklamasi: yeni sayfalarda govde metni body-lg (olculdu: ecoDrone TR .ed-desc 18px/28.8px/-0.4464px); blogda body (16px) kalmisti. */ .section__desc { font-size: var(--eco-fontsize-body-lg); line-height: var(--eco-lineheight-body-lg); letter-spacing: var(--eco-letterspacing-body-lg); } /* Bolum basligi TEK boyutta. Olculdu: duzeltmeden once sayfa basligi 40px (satir ici clamp) ama "ecoTalks Podcast" 36px idi (.section__title tabani, --eco-fontsize-h1) — ayni rolde iki ayri punto. Yeni sayfalarda bolum basliklari display-md (.ed-h2 / .np-h2: 40px/46px/-1.848px). Satir ici kural KALDIRILDI ki ikisi de bu tek kurali izlesin ve mobilde birlikte kuculsun. */ .section__title { font-size: var(--eco-fontsize-display-md); line-height: var(--eco-lineheight-display-md); letter-spacing: var(--eco-letterspacing-display-md); } @media (max-width: 900px) { .section__title { font-size: var(--eco-fontsizemobile-display-md); } } /* ---------------------------------------------------------------------- RENK ---------------------------------------------------------------------- */ /* Bu iki deger sayfanin KARAKTERI (kurucu: "bu versiyonu seviyorum") ve token setinde karsiligi yok: bej #F3F0E8 en yakin yuzeyden 15/255, zeytin #E8EDE0 14/255 uzakta — goz ayirt ediyor, yani token'a cevirmek sayfayi baskalastirirdi. Token UYDURULMADI; bunlar yalnizca markup'ta tekrar eden sihirli sayilari tek yerde adlandiran SAYFA ICI degiskenler. Tek piksel degismiyor. (#FAFAF8 ise --eco-surface-page'den 3/255 uzakti; orada fark gorunmedigi icin token'a gecildi.) Okunurluk olculdu — bej/zeytin uzerinde birincil 15.3/14.6, ikincil 8.3/7.9, link 4.6/4.4. NOT: zeytin bu sayfada artik kullanilmiyor (rehber bandi kaldirildi) ama degisken DURUYOR — TR blog.html:857 bir bolum zeminini buradan aliyor. */ :root { --blog-yuzey-yesil: #E8EDE0; } /* SAYFA BASLIGI bolum basliklarindan BIR BASAMAK yukarida (kurucu: "hero basligi kucuk sanki"). Olculdu: 40px'te sayfa basligi ile "ecoTalks Podcast" ayni puntodaydi, yani hiyerarsi yoktu. display-xl, ecoDrone hero'sunun basamagi (60px/66px). Yalnizca h1: ayni sinifi bolum basliklari da tasiyor, genel yazilsaydi onlar da buyurdu. Tek satira sigiyor (olculdu: kapsayici 640px, 72px'te bile tek satir). */ h1.section__title { font-size: var(--eco-fontsize-display-xl); line-height: var(--eco-lineheight-display-xl); letter-spacing: var(--eco-letterspacing-display-xl); } @media (max-width: 900px) { h1.section__title { font-size: var(--eco-fontsizemobile-display-xl); } } /* Kart ozetleri body-sm (14px) idi. Olculdu: yeni sayfalarda govde metninin EN KUCUK basamagi body (16px) — .np-sss__cevap, .np-natureos__metin ve .ed-why__note hepsi 16px/25.6px; 14px hicbir yerde yok. (Kurucu: "desc font sizei cok kucuk geldi".) 18px'e cikilmadi: blog kartlarinin metin kolonu 314px ve ozet 2-3 satira kirpiliyor. */ .blog-card__excerpt { font-size: var(--eco-fontsize-body); line-height: var(--eco-lineheight-body); letter-spacing: var(--eco-letterspacing-body); } /* NOT: burada bir donem `.blog-card--hero .blog-card__excerpt` klempi aciliyordu (rehber metni tam gorunsun diye). Kart orijinal blog icerigine DONDU ve satir ici `-webkit-line-clamp:2` geri geldi; o kural kalsaydi `overflow: visible` kirpilan metni disari tasirir, mobilde tarih satirinin UZERINE binerdi (karede goruldu). Kural kaldirildi. */ /* CTA'da IKI aksiyon (kurucu). Paylasilan footer-eds.css'e DOKUNULMADI: .ef-cta uc sayfada kullaniliyor ve bu markup 143 sayfaya daha kopyalanacak; ikinci aksiyon yalnizca bu sayfaya ait. .ef-cta .btn zaten margin-top veriyor; iki oge yan yana gelince o marj butona degil SATIRA binmeli. */ .ef-cta__aksiyonlar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--eco-space-5); margin-top: var(--eco-space-8); } /* (0,3,0) ZORUNLU: footer-eds.css'teki `.ef-cta .btn { margin-top: 32px }` ile (0,2,0) esit ozgullukte kalirsa SIRA karar verir ve bu sayfada footer-eds.css blog.css'ten SONRA yukleniyor — yani esitlikte o kazanir. Olculdu: sarmalayici 32 + buton 32 = 64px, referansin (nature-intelligence) 32px'inin tam iki kati. Fazladan bir sinif ile sira bagimsiz kazaniyor. */ .ef-cta .ef-cta__aksiyonlar .btn { margin-top: 0; } /* Ikincil aksiyon LINK degil BUTON (kurucu). Koyu zeminde ikincil = CAM varyant: hem "cam yalniz koyu zeminde" kurali hem sitenin kendi kullanimi oraya isaret ediyor — ayni etiket en/index.html ve en/for-businesses.html hero'larinda zaten .btn--secondary btn--lg. Ok KALDIRILDI: bu sistemde butonlar ok tasimiyor. Link kurallari karsiliksiz kaldigi icin silindi. */ /* HERO ALTI CIZGISI (kurucu: "yesil underline, bastan sona cizilsin, kaybolsun, tekrar cizilsin; kosleri yuvarlak; ince olmasin, text kalinligina uygun"). RENK: marka yesili burada METIN degil CIZGI — acik zeminde metin rengi olarak yasak, grafik oge olarak serbest. KALINLIK: em cinsinden. Baslik 1440'ta 60px, 390'da 36px; cizgi ikisinde de harf govdesiyle ayni agirlikta kalsin diye punto ile olceklenir. UCLAR: --eco-radius-full, yani tam yuvarlak. Psodo-eleman kullanildi; azaltilmis hareket kurali onu ACIKCA hedefliyor (joker `*` psodo-elemanlara ulasmaz). */ .blog-hero__alti { position: relative; display: inline-block; } .blog-hero__alti::after { content: ''; position: absolute; left: 0; right: auto; width: 0; bottom: -0.04em; /* OLCULDU (piksel taramasi, 'l' harfinin dik govdesi): baslik 60px iken govde 5.5px = 0.092em, 36px iken 3.5px = 0.097em. 0.08em her iki boyutta da govdeden INCE kaliyordu (kurucu: "ince cizgi olmamali"). 0.1em govdeyle esit-biraz ustu: 6px / 3.6px. */ height: 0.1em; border-radius: var(--eco-radius-full); background: var(--eco-surface-brand); /* SAF SAYISAL OZELLIKLER. Iki teknik denendi ve ikisi de elendi: - `transform: scaleX()` yuvarlak ucu yatayda eziyordu (kurucu gordu). - `clip-path: inset(... round ...)` Chromium'da dogrusal interpole oluyor ama sekil fonksiyonlarinin interpolasyonu motora gore degisebiliyor; uyumsuz sayilirsa tarayici KESIKLI gecise duser ve cizgi 'belirip kaybolur' (kurucu canlida tam bunu bildirdi, bu makinede WebKit kurulu olmadigi icin dogrulanamadi). width ve left saf uzunluk; her motorda sayisal interpole olur, uyumluluk sorusu kalmaz. Oge hic olceklenmedigi icin border-radius her karede gercek kutuda cozulur, yani UCLAR YUVARLAK kalir. */ /* LINEAR: easing animasyonun tamamina degil HER KEYFRAME CIFTI arasina uygulanir; ease-out verince cizim kendi araliginin yarisinda bitiyordu (olculdu: t=540ms'de scaleX 0.972, yani cizgi 'cizilmiyor' aniden beliriyordu). Sabit hiz, 'bastan sona cizilsin' istegini karsilar. */ animation: blog-alti-ciz 3.6s linear infinite; } /* Soldan acilir (sag kenar geri cekilir), bekler, sonra AYNI yonde silinir (sol kenar one dogru kapanir). Kirpma dikdortgeni `round` tasidigi icin her karede iki uc da yuvarlak. */ @keyframes blog-alti-ciz { /* Cizim: sol kenar sabit, genislik buyur. Silme: sag kenar sabit kalsin diye left ve width BIRLIKTE ilerler (left+width hep %100), boylece cizgi cizildigi yonde kapanir. */ 0% { left: 0; width: 0; animation-timing-function: linear; } 30% { left: 0; width: 100%; animation-timing-function: linear; } 55% { left: 0; width: 100%; animation-timing-function: cubic-bezier(.45,0,.75,.35); } 80% { left: 100%; width: 0; } 100% { left: 100%; width: 0; } } /* Dinlenme hali TAMAMLANMIS: cizgi cizilmis olarak durur. */ @media (prefers-reduced-motion: reduce) { .blog-hero__alti::after { animation: none; left: 0; width: 100%; } } /* ------------------------- FEATURED POSTS LISTESI ------------------------- */ /* Baslik ETIKET gibi (kurucu): Montserrat, buyuk harf, kucuk punto. Satir iclerindeki kategori cipleri label-sm (11px); bu onlarin USTUNDEKI baslik oldugu icin bir basamak yukarisi label-lg. Renk notr: cipler yesil, bu yapisal bir etiket. */ .blog-liste__baslik { margin: 0 0 var(--eco-space-4); font-family: var(--font-caps); /* Bir basamak kucuk (kurucu). Satir ici kategori cipleri label-sm (11px); baslik label-md'de (12px) hala onlarin bir tik ustunde kaliyor. */ font-size: var(--eco-fontsize-label-md); line-height: var(--eco-lineheight-label-md); letter-spacing: var(--eco-letterspacing-label-md); font-weight: var(--eco-fontweight-semibold); text-transform: uppercase; color: var(--text-03); } /* Eskiden satir ici onmouseenter ile yalniz opacity degisiyordu (kurucu: "hover yetersiz"). Artik CSS hover + sagda beliren ok. Sag dolgu SABIT: ok hicbir durumda metnin uzerine binmez. */ .blog-liste__oge { position: relative; display: block; padding: var(--eco-space-4) var(--eco-space-8) var(--eco-space-4) 0; border-top: var(--eco-borderwidth-thick) solid var(--eco-border-line); text-decoration: none; color: inherit; transition: background var(--duration) var(--ease); } /* Son ogede ALT CIZGI YOK (kurucu): liste asagi dogru acik biter. */ /* Hoverda zemin DEGISMEZ (kurucu: "arkaplanli bir hover olmaz"); gosterge yalnizca sagda beliren dolu daire. */ /* DOLU DAIRE + ok — featured karttaki .blog-card__arrow--overlay ile ayni fikir, ama o beyaz dolgulu: FOTOGRAF uzerinde durdugu icin oyle. Burada zemin #F7F7F7; beyaz daire neredeyse gorunmezdi. Marka yesili YUZEY olarak kullaniliyor (acik zeminde metin rengi olarak yasak, yuzey olarak serbest), ok ise on-brand koyu. */ .blog-liste__ok { position: absolute; right: var(--eco-space-2); top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--eco-radius-full); /* Once notr rampanin EN KOYU ucu idi; kurucu: "cok koyu durdu, ok siyah olsun arkaplani EEEEEE". #EEEEEE UYDURULMADI, token karsiligi var: --eco-surface-subtle. Ok rengi icin --text-01 DEGIL --eco-text-primary: --text-01 style.css'te koyu bolumlerde on-dark'a donuyor, zemini sabit acik olan bir diskte bu ters tepebilir. */ background: var(--eco-surface-subtle); color: var(--eco-text-primary); translate: -6px -50%; opacity: 0; transition: opacity var(--duration) var(--ease), translate var(--duration) var(--ease); } .blog-liste__ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--eco-borderwidth-icon); stroke-linecap: round; stroke-linejoin: round; } .blog-liste__oge:hover .blog-liste__ok { opacity: 1; translate: 0 -50%; } /* ---------------------------------------------------------------------- FILTRE CIPLERI — renkler SECONDARY BUTONDAN (kurucu). Degerler buton bileseninin kendi tokenlari; elle renk yazilmadi: dolgu #FFFFFF / hover #F0F0F0, kenar rgba(0,0,0,.11) / hover #1A1A1A, yazi #1A1A1A. SECILI cip, HOVER ile ayni renkleri alir (kurucu). NOT: eski kural cipleri sayfalama butonlariyla ORTAK ezmisti; burada ayrildi, sayfalamanin kendi kontrast duzeltmesi yerinde kaldi. */ .blog-filter { padding: 6px 14px; background: var(--eco-button-white-fill); /* 2px (kurucu). Taban style.css'te `border: 1px solid` — PAYLASILAN dosya, dokunulmadi; blog.css ondan SONRA yuklendigi icin esit ozgullukte kazanir. */ border-width: var(--eco-borderwidth-thick); border-color: var(--eco-button-white-border); } .blog-filter:hover:not(.active), .blog-filter.active { background: var(--eco-button-white-fill-hover); border-color: var(--eco-button-white-border-hover); color: var(--eco-button-white-text); } /* ---------------------------------------------------------------------- SAYFALAMA — CIPLERLE AYNI RENKLER (kurucu). Ayni ekranda, ayni rolde (pasif / hover / secili) iki ayri renk dili vardi. Tabandaki YESIL aktif durum kalkti; onunla birlikte ona ozel kontrast duzeltmesi de gereksizlesti (marka yesili uzerine beyaz yazi 2.11:1 idi, artik o zemin yok). Secili sayfa, secili cip gibi HOVER renklerini alir. OZGULLUK: tabandaki karsiliklar (0,1,1), (0,2,1) ve ok icin (0,3,1). Asagidaki seciciler her biri kendi karsiligiyla ESIT ozgullukte; blog.css style.css'ten SONRA yuklendigi icin esitlikte kazaniyor. */ .blog-pagination button, .blog-pagination button.blog-pagination__arrow { background: var(--eco-button-white-fill); border-width: var(--eco-borderwidth-thick); border-color: var(--eco-button-white-border); /* DINLENME yazisi GRI, butonun koyu yazisi degil: cip dinlenirken taban --text-03'u koruyor (olculdu: 97,97,97) ve yalniz hover/secilide koyuya geciyor. Esleme uc durumun UCUNDE de tutmali. */ color: var(--text-03); } .blog-pagination button:hover, .blog-pagination button.active, .blog-pagination button.blog-pagination__arrow:hover { background: var(--eco-button-white-fill-hover); border-color: var(--eco-button-white-border-hover); color: var(--eco-button-white-text); } /* ---------------------------------------------------------------------- POST KARTI OKU — varsayilanda YOK, hoverda belirir (kurucu). SVG'ye DOKUNULMADI: markup'taki ok zaten YATAY (M5 12H19...). Capraz gorunum CSS'ten geliyordu — taban style.css hoverda `rotate(-45deg)` uyguluyor. "Capraz olandan degil yatay olandan" istegi bu yuzden bir ikon degisimi degil, o rotasyonun iptali. Taban PAYLASILAN style.css'te (3097 ve 3110); oraya dokunulmadi. Ozgulluk: (0,2,0) ve (0,3,0) — her biri karsiligiyla esit, blog.css sonra yuklendigi icin kazaniyor. Renk gecisi tabandan kaliyor, yalnizca gorunurluk ve donus degisiyor. */ .blog-card--horizontal .blog-card__arrow { opacity: 0; transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease); } .blog-card--horizontal:hover .blog-card__arrow { opacity: 1; transform: none; }