/* ==========================================================================
Diyetisyen Antalya — Ghost temalari ortak katman
--------------------------------------------------------------------------
Blog (Solo) ve Tarifler (Taste) temalarinin ustune binen ince bir katman.
Amac uc mulku ayni aileye sokmak; kaliplarini birbirine benzetmek degil.
NEDEN BURADA DURUYOR
Bu dosya Ghost temasinin icinde degil, ana sitenin deposunda. Uc sebeple:
1. Git'te versiyonlanir ve ana siteyle birlikte deploy olur.
2. Tema guncellemesi (Solo/Taste yeni surum) uzerine yazmaz.
3. Sunucuda gulp/npm calistirmayi gerektirmez; temalar dokunulmadan kalir.
Ghost tarafinda yalnizca bir enjekte ediliyor.
YUKLEME SIRASI
Iki temada da {{ghost_head}} 'in en sonunda; yani bu dosya temanin
kendi stilinden SONRA yuklenir ve esit ozgullukte kazanir. Ozgulluk
yarisina girmemek icin secicileri temanin kendi seviyesinde tutuyorum.
Once /tokens.css yuklenmeli; renk ve olcu degerleri oradan geliyor.
========================================================================== */
/* --------------------------------------------------------------------------
0. Olcek sabitleme — BU BLOK KRITIK
--------------------------------------------------------------------------
tokens.css olculeri rem ile tanimliyor. Ana sitede kok yazi boyutu 12px
(mobil) / 14px (masaustu). Ghost temalarinin ikisi de klasik "62.5%"
yontemini kullaniyor ve kok 10px. Ayni token iki mulkte farkli fiziksel
olcuye cozuluyordu:
kart dolgusu ana site 24px -> Ghost 20px
kose yaricapi ana site 16px -> Ghost 10px
govde metni ana site 16px -> Ghost 10.5px
"Tek aile" fikri tam burada kiriliyor: token ayni, sonuc degil.
Cozum olcegi Ghost baglaminda mutlak birime sabitlemek. tokens.css'e
dokunulmuyor; ana sitenin kendi duyarli olceklemesi (12px -> 14px)
bozulmasin diye degisiklik yalnizca burada.
Degerler ana sitenin masaustu karsiliklarina yuvarlanmis 4px'lik olcek.
-------------------------------------------------------------------------- */
:root {
--da-bosluk-1: 4px;
--da-bosluk-2: 8px;
--da-bosluk-3: 12px;
--da-bosluk-4: 16px;
--da-bosluk-6: 20px;
--da-bosluk-8: 28px;
--da-bosluk-12: 40px;
--da-bosluk-16: 56px;
--da-bosluk-24: 84px;
--da-yaricap: 8px;
--da-yaricap-kart: 16px;
--da-kart-dolgu: 28px;
--da-baslik-arasi: 32px;
--da-bolum-arasi: 84px;
--da-vurgu-genislik: 56px;
--da-olcek-1: 34px;
--da-olcek-2: 26px;
--da-olcek-3: 20px;
--da-olcek-4: 17px;
--da-olcek-govde: 17px;
--da-olcek-kucuk: 14px;
}
/* --------------------------------------------------------------------------
0b. Mobil kademe — EKSIK OLAN PARCA
--------------------------------------------------------------------------
Yukaridaki blok olcegi mutlak px'e sabitliyor. Ana sitede ise kok yazi
boyutu mobilde 12px, masaustunde 14px: butun rem tabanli olculer dar
ekranda kendiliginden ~%86'ya iniyor. Ghost tarafinda bu kademe hic
yoktu, yani sabitleme masaustu degerini mobile de tasiyordu.
Sonuc olculdu (375px):
yazi basligi Ghost 40px ana site h1 18px
tarifler herosu Ghost 41.5px
kart dolgusu Ghost 28px ana site 24px
"Ghost'ta mobilde her sey buyuk" duygusunun kaynagi tam olarak buydu.
Degerler ana sitenin mobil karsiliklarina (kok 12px) yuvarlandi. Tek
istisna govde metni: 17 -> 16, ana sitedeki 16.8px'e yakin kaliyor.
Okuma metnini olcekle birlikte kucultmek okunurlugu bozar.
Bosluk (--da-bosluk-*) tokenlerine dokunulmuyor: mobil menu yerlesimi
ve navbar hizalari o olculere gore tek tek dogrulandi.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:root {
--da-olcek-1: 29px;
--da-olcek-2: 22px;
--da-olcek-3: 17px;
--da-olcek-4: 15px;
--da-olcek-govde: 16px;
--da-olcek-kucuk: 13px;
--da-kart-dolgu: 20px;
--da-baslik-arasi: 24px;
--da-bolum-arasi: 56px;
}
}
/* Yazi basligi iki temada da viewport'a gore olceklenen bir clamp ile
geliyor ve 375px'te ikisinde de 40px'e oturuyordu; dort satira sarip
kapak gorselini ekranin disina itiyordu. Iki temada da secici (0,1,0),
bu dosya sonra yuklendigi icin esitlikte kazaniyor. */
@media (max-width: 767px) {
/* Oge h1 KALIYOR, yalnizca punto iniyor: 30 -> 20.
Dar ekranda baslik okuma sutununun neredeyse yarisini kapliyordu. */
.gh-article-title {
font-size: 20px;
}
}
/* Masaustunde iki tema da 62px'e cikiyordu (Solo ve Taste'in clamp'leri
1280px'te bu degere oturuyor). Tasarim sisteminin en ust kademesi 34px;
62 onun neredeyse iki kati ve baslik tek basina ilk ekranin yarisini
kapliyordu. 44px hala sayfanin en baskin ogesi, ama ayni ailenin
olcegi icinde. */
/* Masaustunde de h4/h5 olceginde: 44 -> 24.
Sayfa hiyerarsisi bastan asagi -- yazi basligi 24, icerik h2 21,
h3 18, govde 16. Baslik en buyugu ama artik "afis" degil. */
@media (min-width: 768px) {
.gh-article-title {
font-size: 24px;
}
}
/* Kapak gorseli icerik genisligini (1110px) aliyor ve 16/9 bir gorselde
624px yuksekliginde ciziliyordu: baslikla birlikte ilk ekranda metinden
tek satir bile gorunmuyordu. Ustelik kaynak 900px genisliginde, yani
%23 buyutulerek yumusuyordu.
Yukseklik ekranin %55'iyle sinirlaniyor; object-fit: cover sayesinde
dikey kadrajli kapaklar da (Ghost'a her orandan gorsel yuklenebiliyor)
sayfayi ele gecirmiyor, ortadan kirpiliyor. */
/* Kapak gorseli CERCEVELI ve en fazla 35vh.
Once sinirsizdi ve ekrani kapliyordu; 55vh'ye cekilmisti, hala 900px
ekranda 411px yani %46 yer tutuyordu. Kapak yaziya giris olmali, yazinin
yerine gecmemeli.
Cerceve + yaricap sayfanin kart diliyle ayni; gorsel "sayfaya yapistirilmis"
degil "yerlestirilmis" duruyor. */
.gh-article-image {
/* Cerceve gorseli SARIYOR, gorsel cerceveyi doldurmuyor: `fit-content`
+ otomatik marj ile kap gorselin gercek olcusune iniyor ve ortalaniyor.
Boylece ne kirpma ne esnetme var.
Onceki surumde `object-fit: cover` vardi; 35vh'ye sigdirmak icin
gorseli kirpiyordu -- en-boy orani korunmali. */
/* border-box: kenarlik olcunun ICINDE kalsin. Aksi halde cerceve
metin sutunundan 7px genis ve 4px solda duruyordu (olculdu). */
box-sizing: border-box;
width: fit-content;
max-width: 100%;
margin-inline: auto;
/* Cerceve kaldirildi: gorsel artik icerik sutununun icinde ve metinle
ayni ize oturuyor, yani "yerlestirilmis" oldugu zaten belli. Kenarlik
bu duzende fazladan bir cizgiydi. Yaricap kaliyor. */
border-radius: var(--da-yaricap-kart);
overflow: hidden;
}
.gh-article-image img {
display: block;
/* Yukseklik sinirli, genislik ondan turuyor: oran kendiliginden korunur. */
max-height: 35vh;
max-width: 100%;
width: auto;
height: auto;
}
/* Icerigin basina tasinan kapak (bkz. kod enjeksiyonu).
NOT: izgara IZI burada verilmiyor -- iki temanin tuvali ayri.
Solo 12 esit sutun kullaniyor, Taste ise isimli cizgiler
([main-start] 720px [main-end] ...). `grid-column: 4 / span 6` ortak
katmana yazildiginda tariflerde baslik ve kapak 273px'lik bir seride
saga firliyordu (olculdu: x=993, w=273). Iz artik ghost-blog.css'te. */
.gh-content > .da-acilis-gorseli {
width: 100%;
margin-top: 0;
margin-bottom: var(--da-bosluk-8);
}
/* --------------------------------------------------------------------------
Sol kunye sutunu
--------------------------------------------------------------------------
Blok bosluga birakilmis gibi duruyordu. Once sag kenarlik denendi;
kaldirildi -- dikey cizgi metin sutununa fazla yaklasiyor ve okuma
alanini sikistiriyordu.
Yerine sitenin KENDI vurgu dili: adin altinda kisa turuncu cizgi. Ayni
isaret bolum basliklarinin altinda, ekip kartlarinda ve tarif yazar
blogunda da var; kunye boylece kutuya girmeden kimlik kazaniyor ve
metinden hicbir sey caimiyor.
-------------------------------------------------------------------------- */
.gh-article-meta-inner .gh-author-name-list::after {
content: '';
display: block;
width: var(--da-vurgu-genislik);
height: var(--da-vurgu-kalinlik);
margin-top: var(--da-bosluk-3);
border-radius: var(--da-yaricap-tam);
background-color: var(--da-turuncu);
}
/* Cizgi ile tarih arasinda kendi nefes payi. */
.gh-article-meta-inner .gh-article-date {
display: inline-block;
margin-top: var(--da-bosluk-3);
}
/* --------------------------------------------------------------------------
Giris paragrafi
--------------------------------------------------------------------------
Yazar duz metin yazdiginda sayfa basliktan sonra dumduz bir gri blokla
basliyordu. Ilk paragraf bir kademe buyuk ve koyu: yaziya bir "giris"
veriyor ve okuma ritmi kendiliginden kuruluyor -- icerik tarafinda ekstra
is yapmadan.
-------------------------------------------------------------------------- */
.gh-content > p:first-of-type {
/* Olcek site katmanindaki --icerik-govde'den turuyor; --da-olcek-govde
yalnizca yedek. Once dogrudan tokene baglanmisti ve blog govdesi
kuculdugunde giris paragrafi 18.56px'te takili kalmisti (olculdu). */
font-size: calc(var(--icerik-govde, var(--da-olcek-govde)) * 1.1);
line-height: 1.6;
color: var(--da-metin-koyu);
}
/* --------------------------------------------------------------------------
Yazi sonu gezinmesi
--------------------------------------------------------------------------
Onceki/sonraki baglantilari ciplak metindi ve yazinin bittigi yer
belirsizdi. Ust cizgi bir kapanis veriyor, baglantilar dokunma hedefi
olcusune cikiyor.
-------------------------------------------------------------------------- */
.gh-article-footer {
margin-top: var(--da-bosluk-16);
padding-top: var(--da-bosluk-8);
border-top: 1px solid var(--da-cizgi);
}
.gh-navigation-link {
display: inline-flex;
align-items: center;
gap: var(--da-bosluk-2);
min-height: var(--da-dokunma);
color: var(--da-metin);
font-weight: var(--da-agirlik-kalin);
transition: color var(--da-gecis);
}
.gh-navigation-link:hover {
color: var(--da-yesil-metin);
opacity: 1;
}
/* --------------------------------------------------------------------------
1. Tipografi
Ana site Montserrat kullaniyor; Solo Manrope, Taste Poppins ile geliyordu.
Govde ve arayuz yazisi uc mulkte ayni. Taste'in serif display basligi
kasitli olarak korunuyor (bkz. ghost-tarifler.css) — kalip farki orada.
-------------------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
.gh-head,
.gh-foot,
.gh-card,
.gh-card-title,
.gh-article-title,
.gh-article-excerpt,
.gh-content,
button,
input,
select,
textarea {
font-family: var(--da-font);
}
/* Ana sitede html'e scrollbar-gutter: stable veriliyor (menu acilinca
cubuk kalkarken icerik yana kaymasin diye). Ayni olugu Ghost tarafinda
da ayirmak gerekiyor, yoksa ayni ekran genisliginde icerik ekseni 7px
kayiyor: 800px'te ana sitede logo 48'den, burada 55'ten basliyordu. */
html {
scrollbar-gutter: stable;
}
body {
color: var(--da-metin);
background-color: var(--da-zemin);
}
h1, h2, h3, h4, h5, h6 {
color: var(--da-metin-koyu);
letter-spacing: -.01em;
}
/* --------------------------------------------------------------------------
2. Baglanti ve vurgu
Ghost'un accent_color'i zaten marka yesili; burada metin baglantilarinin
davranisini ana siteyle esitliyoruz.
-------------------------------------------------------------------------- */
.gh-content a:not(.kbd-nav):not([class*="kg-"]) {
color: var(--da-yesil-metin);
text-decoration: underline;
text-underline-offset: .2em;
text-decoration-thickness: 1px;
transition: color var(--da-gecis);
}
.gh-content a:not(.kbd-nav):not([class*="kg-"]):hover {
color: var(--da-metin-koyu);
}
/* --------------------------------------------------------------------------
3. Kart dili
Ana sitede kart tek bir roldur: beyaz zemin, ince cerceve, yumusak yaricap,
hover'da yukselti. Ayni dil yazi listelerine tasiniyor; boylece ziyaretci
siteler arasinda gecerken ayni "kart" fikrini goruyor.
-------------------------------------------------------------------------- */
/* --- Kart golgesi ve gecis ozgullugu -------------------------------------
SORUN: kaydirma animasyonunun `.beliren` sinifi
transition: opacity .55s, transform .55s
yaziyor ve ikisi de (0,1,0) oldugu icin kartin kendi gecisini eziyordu.
Sonuc: hover'da kalkis .2s yerine .55s suruyor ve `box-shadow` listede
hic olmadigi icin golge animasyonsuz sicriyordu. Kullanicinin "ikinci
sirada hover bozuk" dedigi sey buydu; aslinda butun kartlarda vardi,
satir satir farkli gecikmeler yuzunden oyle gorunuyordu.
Cozum ozgulluk: `.gh-feed .gh-card` (0,2,0) `.beliren`i geciyor.
GOLGE iki kademeli ve karakterleri farkli:
durgun --da-golge-kart yakin ve dar (kart zeminden ayrilir)
hover --da-golge-yukselti yuksek ve yayvan (kart kalkar)
-------------------------------------------------------------------- */
.gh-card {
background-color: var(--da-zemin);
border: 1px solid var(--da-cizgi);
border-radius: var(--da-yaricap-kart);
overflow: hidden;
}
.gh-feed .gh-card,
.gh-list-item .gh-list-item-inner {
box-shadow: var(--da-golge-kart);
transition: box-shadow var(--da-gecis), transform var(--da-gecis);
}
/* Yukselti ana sitedeki icerik kartlariyla ayni: 4px.
Kalkis da bu kuralda olmali: kaydirma animasyonunun
`.beliren.gorundu { transform: none }` kurali (0,2,0), sade
`.gh-card:hover` (0,1,1) ozgullugunu yeniyordu -- golge degisiyor ama
kart yerinden kimildamiyordu (olculdu: hover'da transform none). */
.gh-feed .gh-card:hover,
.gh-list-item .gh-list-item-inner:hover {
transform: translateY(-4px);
box-shadow: var(--da-golge-yukselti);
}
/* Kartin kendisi cerceveli oldugu icin ic gorselin kosesi kirpiliyor;
ayrica gorselin altinda olusan bosluk kapatiliyor. */
.gh-card-image,
.gh-card-image img {
border-radius: 0;
display: block;
}
.gh-card-title {
color: var(--da-metin-koyu);
}
.gh-card-excerpt {
color: var(--da-metin);
}
.gh-card-meta,
.gh-article-meta,
.gh-article-date {
color: var(--da-metin-silik);
}
/* --------------------------------------------------------------------------
4. Butonlar
Ana sitede uc seviye var: dolu yesil (birincil eylem), yumusak yesil zemin
(ikincil), ince cerceve (en sakin). Ghost'un buton siniflari bu uce
esleniyor.
-------------------------------------------------------------------------- */
.gh-button,
.gh-head-button,
button[data-members-form],
.gh-cta-button {
font-family: var(--da-font);
font-weight: var(--da-agirlik-kalin);
border-radius: var(--da-yaricap);
background-color: var(--da-yesil);
border: 2px solid var(--da-yesil);
color: #fff;
transition: background-color var(--da-gecis), border-color var(--da-gecis),
transform var(--da-gecis);
}
/* Ana sitedeki `.button:hover` ile ayni: ton koyulasiyor ve 1px kalkiyor.
Once yalnizca kalkis vardi; ana sitede o sirada buton hover'i scale(1.1)
oldugu icin fark gozden kacmisti. */
.gh-button:hover,
.gh-head-button:hover,
.gh-cta-button:hover {
background-color: var(--da-yesil-koyu);
border-color: var(--da-yesil-koyu);
transform: translateY(-1px);
}
/* Cerceveli, en sakin seviye. */
.gh-button--outline,
/* Arama ikonu iki mulkte ayni cizim (ayni viewBox, ayni path) ama Taste
onu kendi siyahiyla (rgb 21,23,26) boyuyor, Solo bizim metin rengimizle.
Ayrica eylem araligi Solo'da 32, Taste'te 28px: ikon ile "Giris yap"
arasindaki bosluk 26'ya karsi 22 cikiyordu. Ikisi de sabitleniyor. */
#gh-head .gh-head-actions {
gap: 32px;
}
/* Iki arama dugmesi var: mobilde marka satirindaki, masaustunde
eylemlerdeki. Ikisi de govde metni renginde olmali - Taste onlari
kendi siyahiyla boyuyordu. */
#gh-head .gh-search,
#gh-head .gh-search svg {
color: var(--da-metin);
}
/* Mobil menu baglantilari ana sitedeki olcude: 15.6px / 600 / capitalize.
Taste onlari 26px ile yaziyordu, Solo zaten 15.6'daydi; iki Ghost
menusu birbirinden de ayriliyordu. Buyuk harf yalnizca masaustu
seridinde (ana sitede de oyle). */
@media (max-width: 1199px) {
#gh-head .gh-head-menu .nav li > a {
font-size: 15.6px;
font-weight: var(--da-agirlik-kalin);
text-transform: capitalize;
letter-spacing: normal;
/* Taste acik menude baglantilari siyaha cekiyor; ana sitede ve
blogda govde metni rengi. */
color: var(--da-metin);
}
#gh-head .gh-head-menu .nav li > a:hover {
color: var(--da-yesil-metin);
}
}
/* Serit sag tarafi iki Ghost mulkunde de ayni olmali: arama + giris yap.
Blogda ayrica "Abone ol" butonu vardi, tariflerde yoktu; hem iki mulk
birbirinden hem ikisi ana siteden ayriliyordu. Abonelik islevi
kaybolmuyor - iki sitenin de hero bolumunde e-posta formu duruyor. */
#gh-head .gh-head-actions .gh-head-btn {
display: none;
}
/* Seritteki birincil buton ana sitedeki .button dilinde olmali. Tema onu
kendi hap kabugunda veriyordu: 16px/600, siyah metin beyaz zemin,
yaricap 100px. Ana sitedeki randevu butonu ise 2px yesil cerceveli
yesil zemin, beyaz metin, .5em yaricap ve .8em/1.3em dolgu. Islev
Ghost'a ait (abonelik), gorunum aileye. */
#gh-head .gh-head-btn:not(.gh-btn-outline) {
border: 2px solid var(--da-yesil);
background-color: var(--da-yesil);
color: #fff;
padding: .8em 1.3em;
border-radius: .5em;
font-size: 14px;
font-weight: var(--da-agirlik-kalin);
letter-spacing: normal;
text-transform: none;
}
#gh-head .gh-head-btn:not(.gh-btn-outline):hover {
background-color: var(--da-yesil);
filter: brightness(1.06);
color: #fff;
}
.gh-head-btn.gh-btn-outline {
background-color: transparent;
border-color: var(--da-cizgi);
color: var(--da-metin);
}
.gh-button--outline:hover,
.gh-head-btn.gh-btn-outline:hover {
background-color: var(--da-yuzey);
border-color: var(--da-yuzey);
color: var(--da-metin-koyu);
}
/* --------------------------------------------------------------------------
5. Baslik ve altbilgi
Uc mulkte de kabuk ayni okunmali: ayni logo, ayni sakin cizgi, ayni ritim.
-------------------------------------------------------------------------- */
/* Basligin tamami "Navbar: ana siteyle birebir" bolumunde (5e). */
.gh-foot {
border-top: 1px solid var(--da-cizgi);
}
.gh-foot-menu a,
.gh-copyright,
.gh-copyright a {
color: var(--da-metin-silik);
}
.gh-foot-menu a:hover {
color: var(--da-yesil-metin);
}
/* --------------------------------------------------------------------------
5b. Yazar sayfasi kunyesi
Solo web adresini baglantinin METNI olarak basiyor ve kapsayicisi
(.gh-author-social) yuksekligi 0'a dusuyordu; konum satiriyla ust uste
biniyordu. Kunye tek satirlik bir seride aliniyor.
-------------------------------------------------------------------------- */
.gh-author-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--da-bosluk-2) var(--da-bosluk-4);
margin-top: var(--da-bosluk-4);
}
.gh-author-location,
.gh-author-social {
display: flex;
align-items: center;
color: var(--da-metin-silik);
font-size: var(--da-olcek-kucuk);
line-height: 1.4;
}
/* Konum ile adres arasina ince bir ayirac; iki bilgi birbirine yapismasin. */
.gh-author-social::before {
content: '';
width: 1px;
height: 1em;
margin-right: var(--da-bosluk-4);
background-color: var(--da-cizgi);
}
.gh-author-social-link {
color: var(--da-yesil-metin);
text-decoration: none;
transition: color var(--da-gecis);
}
.gh-author-social-link:hover {
color: var(--da-metin-koyu);
text-decoration: underline;
text-underline-offset: .2em;
}
.gh-author-bio {
color: var(--da-metin);
line-height: var(--da-satir-govde);
}
/* --------------------------------------------------------------------------
5c. Dokunma hedefleri
Ana sitede standart 44px'e cikarilmisti (WCAG 2.5.8 en az 24px istiyor ama
parmakla kullanimda 24 dar kaliyor). Uc mulk ayni olcude olmali.
Olculdu (375px): hamburger ve arama 30px, menu maddeleri 31px, ust
butonlar 26px.
Gorunum degismiyor; yalnizca tiklama alani buyuyor.
-------------------------------------------------------------------------- */
/* Baglanti ogeleri satir ici; yukseklik verebilmek icin display degisiyor.
Bunlar hicbir kirilimda gizlenmiyor, dolayisiyla guvenli. */
.gh-head-menu a,
.gh-head-actions a,
.gh-foot-menu a,
.gh-list-action,
.gh-social-links a {
min-height: var(--da-dokunma);
display: inline-flex;
align-items: center;
}
/* Ikon butonlarinda display'e DOKUNULMUYOR.
Tema hamburger'i masaustunde display: none ile gizliyor; buraya
inline-flex yazmak onu gorunur kiliyordu (olculdu: 44x44, masaustunde
logonun altinda ciziliyordu). Buton ogeleri zaten inline-block oldugu
icin min-height/min-width display degistirmeden calisiyor. */
.gh-burger,
.gh-search,
.gh-head-actions button {
min-height: var(--da-dokunma);
min-width: var(--da-dokunma);
}
/* Sosyal ikonlar kare hedef ister. */
.gh-social-links a {
justify-content: center;
min-width: var(--da-dokunma);
}
/* "Tumunu gor" baglantisi bolum basliginin sagindaki hizada duruyor;
dikey dolgu satiri asagi itmesin diye negatif marj ile gorsel konum
korunuyor, hedef buyuk kaliyor. Ana sitede de ayni yontem kullanildi. */
.gh-list-action {
margin-block: calc(var(--da-bosluk-3) * -1);
}
.gh-burger,
.gh-search {
justify-content: center;
min-width: var(--da-dokunma);
}
/* --------------------------------------------------------------------------
5d. Hamburger — ana sitedeki kilit
--------------------------------------------------------------------------
Solo iki adet 24x1px cizgi kullaniyor; 1px tuy gibi duruyor ve ana
sitedekiyle hicbir benzerligi yok. Ana sitede uc turuncu cubuk var
(36x4.8px) ve ust/alt cubuklar ortadakinin 18px sagina tasiyor — bu
asimetri bilincli bir marka detayi.
Ust ve alt cubuk temanin pseudo ogeleri; acilista X'e donusen animasyon
onlara bagli oldugu icin korunuyor. Ortadaki cubuk butonun zeminine
ciziliyor ve menu acikken gizleniyor, boylece X temiz kaliyor.
Renk kuralinda temanin baslik varyantlari da hedefleniyor: seffaf, koyu
ve marka basliklarinda Solo cubuklari beyaza ceviriyor ve o secici daha
ozgul.
-------------------------------------------------------------------------- */
.gh-burger {
width: 54px;
height: 44px;
margin-right: 0;
}
/* Orta cubuk ust cubugun box-shadow'u olarak ciziliyor.
Onceden butonun background-image'iydi; background-image gecislenemedigi
icin menu acilirken aniden kayboluyordu. box-shadow rengi gecislenebilir,
yani ana sitedeki gibi yumusakca soluyor.
Kaydirma: 18px sola (tasma kadar), 9.6px asagi (cubuk + aralik). */
/* Taste cubuklari currentColor ile boyuyor ve dugmenin rengi siyah;
background-color'i ezmek yetmiyor cunku acik/kapali durum kurallari
yeniden currentColor'a donuyor. Kaynak tek yerden veriliyor: dugmenin
kendi rengi marka turuncusu. */
#gh-head .gh-burger,
.gh-burger {
color: var(--da-turuncu);
/* Mobilde dokununca tarayicinin mavi vurgusu ciziliyordu; ana sitede
hamburger icin ayni kural var. */
-webkit-tap-highlight-color: transparent;
}
#gh-head .gh-search,
#gh-head .gh-head-link,
#gh-head .gh-head-menu a {
-webkit-tap-highlight-color: transparent;
}
#gh-head .gh-burger::before,
#gh-head .gh-burger::after {
background-color: var(--da-turuncu);
}
#gh-head .gh-burger::before {
box-shadow: -18px 9.6px 0 0 var(--da-turuncu);
}
.gh-burger::before {
box-shadow: -18px 9.6px 0 0 var(--da-turuncu);
transition: all .2s cubic-bezier(.04, .04, .12, .96),
box-shadow .2s cubic-bezier(.04, .04, .12, .96);
}
.gh-burger::before,
.gh-burger::after,
.is-head-transparent .gh-burger::before,
.is-head-transparent .gh-burger::after,
.is-head-dark:not(.is-head-transparent) .gh-burger::before,
.is-head-dark:not(.is-head-transparent) .gh-burger::after,
.is-head-brand:not(.is-head-transparent) .gh-burger::before,
.is-head-brand:not(.is-head-transparent) .gh-burger::after {
left: auto;
right: 0;
width: 36px;
height: 4.8px;
background-color: var(--da-turuncu);
}
.gh-burger::before {
top: 10px;
}
.gh-burger::after {
bottom: 10px;
}
/* Ana sitede dugme 66x44: cubuklar 36px, sagda 18px tasma, solda 12px
dolgu. Cubuklarin konumu ayni oldugu icin gorunum degismiyor; degisen
yalnizca dokunma kutusunun sola dogru 12px genislemesi. */
/* NOT — hamburger kutusu ana sitede 66x44, burada 54x44. Fark yalnizca
dokunma alaninda: cubuklar (36px, sag kenara yasli) iki mulkte de ayni
mutlak konumda ve kutu zaten 44px olcusunu asiyor. Kutu 66'ya cikarilinca
Ghost'taki fazladan arama butonuyla birlikte marka satiri doluyor ve logo
kilidi 236'dan 225'e sikisiyordu; kilit olcusu daha gorunur oldugu icin
kutu oldugu gibi birakildi.
*/
/* Acik haldeki cubuk rengi ayrica yazilmali: Taste'in acik-durum kurali
(#gh-head.is-head-open ...) kapali haldeki kuralimizdan ozgul. */
.is-head-open #gh-head .gh-burger::before,
.is-head-open #gh-head .gh-burger::after,
#gh-head.is-head-open .gh-burger::before,
#gh-head.is-head-open .gh-burger::after {
background-color: var(--da-turuncu);
}
/* Menu acikken: orta cubuk solar, kalan ikisi ortada capraz durur. */
.is-head-open #gh-head .gh-burger::before,
.is-head-open .gh-burger::before {
box-shadow: -18px 9.6px 0 0 transparent;
}
.is-head-open .gh-burger::before {
top: 50%;
margin-top: -2.4px;
transform: rotate(45deg);
}
.is-head-open .gh-burger::after {
bottom: 50%;
margin-bottom: -2.4px;
transform: rotate(-45deg);
}
/* --------------------------------------------------------------------------
6. Icerik tipografisi
Okuma konforu icin satir araligi ve satir uzunlugu ana siteyle ayni olcude.
-------------------------------------------------------------------------- */
.gh-content > p,
.gh-content > ul,
.gh-content > ol {
line-height: var(--da-satir-govde);
}
.gh-content blockquote {
border-left: 3px solid var(--da-yesil);
background-color: var(--da-zemin-krem);
border-radius: var(--da-yaricap);
padding: var(--da-kart-dolgu);
font-style: normal;
color: var(--da-metin-koyu);
}
.gh-content hr {
border: none;
border-top: 1px solid var(--da-cizgi);
}
/* --------------------------------------------------------------------------
7. Yuzen iletisim butonlari
Ana sitede sayfanin her yerinde duruyorlar. Blog ve tariflerde de olmalari
iki ise yariyor: kabuk ayni kaliyor ve icerikten donusume giden yol her
sayfada aciik duruyor.
HTML'i Ghost'un footer kod enjeksiyonundan geliyor.
-------------------------------------------------------------------------- */
/* Olculer ana siteyle birebir esitlendi. Onceden em ile yazilmisti; ana
sitede govde yazisi kok boyutunda (12/14px), Ghost'ta 16px oldugu icin
ayni 3.5em burada 48px'e cikiyordu (ana sitede 36px). Mutlak birim. */
.da-yuzen {
position: fixed;
right: 14px;
/* Ana sitede yuzen katman 9'da yeterli; Ghost temalarinda hero icerigi
z-index: 20 ile basiliyor ve ikonlarin uzerine biniyordu. 25: hero'nun
ustunde, acik menunun (3999999) altinda. */
z-index: 25;
width: 49px;
height: 49px;
display: block;
cursor: pointer;
/* NOT: burada acilis animasyonu vardi, kaldirildi. Bunlar sik yenilenen
siteler; her yuklemede tekrarlanan giris hareketi ilk seferde hos,
ucuncu seferde gecikme hissi veriyor. Salinim ve parilti kaliyor. */
}
/* Parilti — ana sitedeki .floatingactionbutton::before kuralinin aynisi.
Ghost tarafinda yalnizca salinim vardi. Isik huzmesi simgenin kendi
siluetiyle maskeleniyor (mask-image), yoksa kare bir parlama olurdu;
maske dosyalari ana siteyle ayni PNG'ler. Uc buton sirayla parliyor. */
.da-yuzen::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: linear-gradient(115deg, transparent 42%,
rgba(255, 255, 255, .85) 50%, transparent 58%);
background-size: 250% 100%;
background-position: 175% 0;
background-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
animation: da-yuzen-parilti 6s ease-in-out infinite;
}
.da-yuzen.whatsapp::before {
-webkit-mask-image: url("https://diyetisyenantalya.com/image/whatsapp.png");
mask-image: url("https://diyetisyenantalya.com/image/whatsapp.png");
}
.da-yuzen.maps::before {
-webkit-mask-image: url("https://diyetisyenantalya.com/image/google-maps.png");
mask-image: url("https://diyetisyenantalya.com/image/google-maps.png");
animation-delay: 2s;
}
.da-yuzen.instagram::before {
-webkit-mask-image: url("https://diyetisyenantalya.com/image/instagram.png");
mask-image: url("https://diyetisyenantalya.com/image/instagram.png");
animation-delay: 4s;
}
/* Huzme uzun bir bekleyisin ardindan bir kez geciyor: surekli parlayan
buton dikkat cekmek yerine yoruyor. */
@keyframes da-yuzen-parilti {
0%, 72% {
background-position: 175% 0;
}
100% {
background-position: -75% 0;
}
}
/* Simge mobilde 36px, masaustunde 49px; sayfanin dokunma hedefi olcusu
44px. Simge buyutulmuyor, dokunma alani genisletiliyor: gorunum ayni
kaliyor, parmak icin kutu en az 44x44 oluyor. Butonlar arasi bosluk
9px oldugundan alanlar cakismiyor. */
.da-yuzen::after {
content: '';
position: absolute;
inset: min(0px, calc((100% - var(--da-dokunma)) / 2));
}
.da-yuzen > img {
display: block;
width: 100%;
height: 100%;
animation: da-yuzen-salinim 4.5s ease-in-out infinite;
}
.da-yuzen:hover {
/* scale kalkti: dairesel ikon kalkis ve parlaklikla yeterince
tepki veriyor (bkz. style.scss hover dili notu). */
transform: translateY(-3px);
filter: brightness(1.08);
}
.da-yuzen.whatsapp {
bottom: 14px;
}
.da-yuzen.maps {
bottom: 77px;
}
.da-yuzen.maps > img {
animation-delay: -1.5s;
}
.da-yuzen.instagram {
bottom: 140px;
}
.da-yuzen.instagram > img {
animation-delay: -3s;
}
/* Ana sitedeki mobil degerler: 36px, alt 12 / 57 / 102. */
@media (max-width: 767px) {
.da-yuzen {
right: 12px;
width: 36px;
height: 36px;
}
.da-yuzen.whatsapp {
bottom: 12px;
}
.da-yuzen.maps {
bottom: 57px;
}
.da-yuzen.instagram {
bottom: 102px;
}
}
@keyframes da-yuzen-salinim {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@media (prefers-reduced-motion: reduce) {
.da-yuzen,
.da-yuzen > img,
.gh-card {
animation: none;
transition: none;
}
}
/* ==========================================================================
5e. NAVBAR — ana siteyle birebir
--------------------------------------------------------------------------
Ana sitedeki navbar olculerek spesifikasyon cikarildi ve buraya uygulandi.
Ghost'a ozgu tek fark arama ve giris butonlari; onlar disinda logo, olcu,
zemin, menu, kaydirma davranisi ayni.
Olculen referans (ana site):
mobil(375, kok 12px) masaustu(1028, kok 14px)
nav yukseklik 138 -> 76.8 146 -> 78.6
dolgu 24 -> 5.4 28 -> 6.3
zemin #fff #fff
z-index 10 10
konteyner dolgu 15px 15px, max-width 960
konteyner gap 18 21
logo kutusu 90 -> 66 90 -> 66
kilit font 12 -> 10.56 (.88em) 14
simge yuksekligi 62.4 -> 54.9 72.8
menu maddesi 15.6/600 #5b5b5b 18.2/600
kaydirma golgesi 0 1px 0 rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07)
Ghost'un ana sayfada uyguladigi seffaf baslik (is-head-transparent)
kapatiliyor: ana sitede navbar her sayfada beyaz.
========================================================================== */
/* NOT — OZGULLUK
Solo basligin kritik olculerini ID ile yaziyor:
#gh-head { height: 64px }
#gh-head .gh-head-logo { font-size: 2.2rem }
#gh-head .gh-head-brand { height: 64px; display: grid }
ID seciciyi sinif seciciyle yenmek mumkun degil (1,1,0 > 0,1,0); bu
yuzden asagida ayni ID kullaniliyor. Yukseklik acikca auto'ya alinmali,
yoksa tema 64px'e sabitliyor ve dolgu ile boyutlanma calismiyor. */
#gh-head,
.gh-head,
.is-head-transparent .gh-head,
.is-head-dark .gh-head,
.is-head-brand .gh-head {
height: auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Ana sitede serit 10'da; burada 30. Taste hero metnini z-index: 20 ile
basiyor ve kaydirinca "Pratik ve dengeli tarifler" basligi seridin
uzerinden geciyordu. Sayfadaki en yuksek katman 20; 30 onun ustunde
ve Solo'nun acik menu degerinin (3999999) cok altinda, yani menu hala
seridin ustunde aciliyor. */
z-index: 30;
padding-top: 24px;
padding-bottom: 24px;
background-color: var(--da-zemin);
border-bottom: 0;
box-shadow: none;
transition: box-shadow var(--da-gecis), padding var(--da-gecis);
}
/* Baslik sabit oldugu icin icerik altina kaymasin diye ust bosluk. */
.gh-site {
padding-top: 138px;
}
.gh-head-inner {
max-width: none;
padding-inline: 15px;
gap: 18px;
align-items: center;
}
/* Kaydirma sonrasi kucuk hal. Sinifi asagidaki betik ekliyor. */
#gh-head.da-kaydirildi,
.gh-head.da-kaydirildi {
padding-top: 5.4px;
padding-bottom: 5.4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .07);
}
/* --- Logo kilidi ---------------------------------------------------------
Ghost yalnizca ![]()
basiyor. Betik simgenin yanina isim ve alt satiri
ekliyor; olculer ana sitedekiyle ayni. Simge de ana sitenin dosyasi. */
#gh-head .gh-head-logo,
.gh-head-logo {
display: flex;
align-items: center;
/* Aralik em tabanli: kilit kuculdugunde (12 -> 10.56px) ana sitedeki
gibi 9.6 -> 8.45px'e iniyor. Sabit 9.6px kalinca kucuk halde kilit
ana siteden 1.1px genis oluyordu. */
gap: .8em;
/* Tema logoyu kendi baslik fontuyla yaziyor (Solo'da Manrope). Punto,
agirlik ve harf araligi ana siteyle ayni olmasina ragmen kilit
genisligi 176 yerine 159px cikiyordu. Marka adi govde fontuyla
yazilmali; asagidaki yigin ana sitedekinin aynisi. */
font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 12px;
font-weight: var(--da-agirlik-cok-kalin);
letter-spacing: normal;
text-decoration: none;
/* opacity de listede olmali: logo hover'i solma ile veriliyor ve
eksik oldugunda gecis ani oluyordu (ana sitede `all` sayesinde
yumusakti). */
transition: font-size var(--da-gecis), transform var(--da-gecis),
opacity var(--da-gecis);
}
/* Logo hover'i uc mulkte de hafif solma. Bir ara ana sitedeki global
`a[href]:hover { scale(1.1) }` kuraline uydurulmustu; o kural rol ayrimi
yapmadigi icin kaldirildi ve buyume yerine solma secildi -- logo bir
eylem degil, geri donus yolu. Temalarin kendi davranisi da buydu. */
#gh-head .gh-head-logo:hover,
.gh-head-logo:hover {
transform: none;
opacity: .8;
}
#gh-head .gh-head-logo img,
.gh-head-logo img {
height: 62.4px;
width: auto;
max-height: none;
transition: height var(--da-gecis);
}
#gh-head.da-kaydirildi .gh-head-logo,
.gh-head.da-kaydirildi .gh-head-logo {
font-size: 10.56px;
}
#gh-head.da-kaydirildi .gh-head-logo img,
.gh-head.da-kaydirildi .gh-head-logo img {
height: 54.9px;
}
/* Brand satiri
Solo mobilde 64px'e sabitliyor; logo kilidi sigmiyordu. Ana sitede logo
kutusu 90px (kaydirinca 66px) ve navbar yuksekligi bu kutu + dolgudan
olusuyor. Ayni sayilar veriliyor.
Ayrica: Solo mobil basligi uc satirlik izgaraya aliyor (marka / menu /
eylemler) ve aralarina 48px gap koyuyor. Menu ve eylemler kapaliyken
position: fixed oldugu icin satirlar 0 yukseklikte, ama GAP yine de
sayiliyordu: 62.4 + 48 + 48 = 158, navbar 206px'e cikiyordu. Satir
araligi sifirlaniyor; menu zaten akista degil. */
#gh-head .gh-head-inner,
.gh-head-inner {
row-gap: 0;
/* Izgara izlerinin varsayilan alt siniri min-content; hem bu kap hem
icindeki marka satiri icerige gore buyuyup 375px ekranda 465px'e
cikiyor ve sayfada yatay tasma yaratiyordu. Iki katmanda da izin
daralmasina izin veriliyor. */
grid-template-columns: minmax(0, 1fr);
}
/* Yatay menunun kendi dili: BUYUK HARF, .75em dolgu, seridin tam
yuksekligi. Bu kurallar once olcu blogundaydi (>=768) ve 768-1199
araligindaki TAM EKRAN menuye de uyguleniyordu: maddeler orada da
buyuk harfe donuyor, dolgu .75em'e dusuyordu. Ana sitede tam ekran
menu normal yazimda; kurallar yatay duzenin blogana tasindi. */
@media (min-width: 1200px) {
#gh-head .gh-head-menu,
#gh-head .gh-head-menu .nav {
align-items: stretch;
}
#gh-head .gh-head-menu .nav li > a,
#gh-head .gh-head-actions .gh-head-link {
display: flex;
align-items: center;
height: 100%;
text-transform: uppercase;
letter-spacing: normal;
padding-inline: .75em;
}
/* Giris yap serit hizasinda durmali; punto da menuyle ayni. */
#gh-head .gh-head-actions .gh-head-link {
height: auto;
font-size: 14px;
}
}
/* Menunun yatay konumu (yalnizca yatay duzende): tema kutuya
margin: 0 64px 0 16px veriyor. Ana sitede logo KABI kilitten 12px genis
oldugu icin menu 365'ten basliyor; buradaki izgarada sutun 354'te
aciliyor. Temanin marji sifirlanip aradaki 11px acikca veriliyor. */
@media (min-width: 1200px) {
#gh-head .gh-head-menu {
margin-inline: 0;
padding-left: 11px;
}
}
/* Bosluk MENUNUN sutununda toplanmali, markanin degil. Marka izi 1fr
oldugunda 1013px ekranda 527px'e siziyor, menuye 98px kaliyordu ve tema
dort maddeyi "..." dugmesi altina topluyordu (body'de is-dropdown-loaded).
Marka icerigi kadar, menu esneyen iz, eylemler icerigi kadar. */
@media (min-width: 1200px) {
#gh-head .gh-head-inner,
.gh-head-inner {
grid-template-columns: auto minmax(0, 1fr) auto;
}
/* Ana sitede hem logo kilidi hem menu baglantilari seridin tam
yuksekligini kapliyor (tepe 90px, kaydirilmis 66px); burada ikisi de
satirin ortasinda 73 ve 44px'lik kutularda duruyordu, yani imlecin
hedefe girdigi alan seridin ucte biriydi. Izgara ogeleri artik
yayiliyor; eylemler (arama/giris/abone) ortada kaliyor. */
#gh-head .gh-head-inner {
align-items: stretch;
}
#gh-head .gh-head-actions {
align-self: center;
}
/* Menu kutusu sutununa yayilmali. Icerigi kadar kaldiginda temanin
tasma betigi dar alani olcup maddeleri "..." altina topluyor, kutu
daha da daraliyor: kendini besleyen bir dongu. */
#gh-head .gh-head-menu {
/* justify-self: stretch tek basina yetmiyor: yayilma yalnizca
genislik auto iken calisir, temanin kurali ise acik bir deger
veriyor. */
justify-self: stretch;
width: 100%;
}
#gh-head .gh-head-menu .nav {
justify-content: flex-start;
/* Maddeler arasi bosluk yok; ayrim baglantinin kendi dolgusundan
geliyor (ana sitedeki duzen). Onceden 34px aralik vardi ve dort
madde menu sutununa sigmayip aksiyonlarin uzerine biniyordu. */
gap: 0;
/* Guvenlik agi: menu ne olursa olsun komsu sutuna tasmasin.
Sigmayan madde alt satira iner, uzerine binmez. */
flex-wrap: wrap;
}
}
#gh-head .gh-head-brand,
.gh-head-brand {
height: auto;
min-height: 90px;
align-items: center;
/* Solo bu izgaraya genis bir sutun araligi veriyor (--head-nav-gap).
375px'te marka satiri 345.2px: logo 235.8 + arama 46 + hamburger 54 =
335.8, geriye iki aralik icin 9.4px kaliyor. Ana sitede arama butonu
olmadigi icin bu sikisiklik orada yok; buradaki 46px'lik fazladan
buton dokunma hedefi sinirinin (44px) altina indirilemez, bu yuzden
pay araliktan aliniyor. 8px kalsaydi logo 6.3px kirpilirdi. */
column-gap: 4px;
}
/* NOT — buraya daralma zorlayan kurallar (min-width: 0, overflow: hidden,
minmax(0, 1fr)) yazilmisti; 375px'te goruken 90px yatay tasmanin marka
satirindan geldigi sanilmisti. Sebep footer'daki sarmayan adres satiriymis
(bkz. .da-foot-icerik white-space notu). Kurallar kaldirildi: logo kilidini
6px kirpip ana siteyle olcu farki yaratiyorlardi. */
#gh-head .gh-head-logo img,
.gh-head-logo img {
flex: 0 0 auto;
}
/* Ana sitede logo capasi marka satirinin tamamini kapliyor (tepe 90px,
kaydirilmis 66px); burada yalnizca simge yuksekligi kadardi (62.4/54.9),
yani tiklanabilir alan ucte bir eksikti. Zincirdeki her kap yuksekligi
aktarmali; iki kirilimda da gecerli. */
#gh-head .gh-head-brand,
#gh-head .gh-head-brand-wrapper {
height: 100%;
}
#gh-head .gh-head-logo,
.gh-head-logo {
align-self: stretch;
}
#gh-head.da-kaydirildi .gh-head-brand,
.gh-head.da-kaydirildi .gh-head-brand {
min-height: 66px;
}
.da-logo-metin {
display: flex;
flex-direction: column;
gap: .3em;
line-height: 1;
min-width: 0;
}
.da-logo-ad {
font-size: 1.12em;
font-weight: var(--da-agirlik-cok-kalin);
color: var(--da-metin-koyu);
letter-spacing: .01em;
white-space: nowrap;
}
.da-logo-alt {
font-size: .58em;
font-weight: var(--da-agirlik-orta);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--da-metin-silik);
white-space: nowrap;
}
/* --- Menu maddeleri ------------------------------------------------------ */
/* Metin rengi — DIKKAT
Solo seffaf/koyu/marka basliklarda butun yaziyi beyaza boyuyor ve
secicileri uc sinif derinliginde:
.is-head-transparent .gh-head .nav > li a (0,3,2)
Zemini beyaza cevirdigimiz icin bu kural beyaz uzerine beyaz yaziyordu;
masaustunde menu maddeleri tamamen gorunmez olmustu. Ayni varyantlar
burada da hedefleniyor. */
.gh-head-menu a,
.gh-head-link,
.gh-head .nav > li a,
.is-head-transparent .gh-head .nav > li a,
.is-head-transparent .gh-head-link,
.is-head-transparent .gh-head-description,
.is-head-dark .gh-head .nav > li a,
.is-head-brand .gh-head .nav > li a {
color: var(--da-metin);
font-weight: var(--da-agirlik-kalin);
font-size: 15.6px;
transition: color var(--da-gecis);
}
/* Ikon butonlari (arama, giris) da beyaz kaliyordu. */
.is-head-transparent .gh-head .gh-icon-btn,
.is-head-transparent .gh-head .gh-search,
.is-head-dark .gh-head .gh-icon-btn,
.is-head-brand .gh-head .gh-icon-btn {
color: var(--da-metin);
}
/* Hover, durgun haldeki EN AGIR seciciyle ayni agirlikta yazilmali.
Yukaridaki kumede `.is-head-transparent .gh-head .nav > li a` (0,3,2)
var; sade `.gh-head-menu a:hover` (0,2,1) onu yenemiyordu. Sonuc:
Ghost'ta gezinme baglantisi hover'da renk degistirmiyor, yalnizca
Solo'nun genel `a:hover { opacity: .8 }` kurali yuzunden soluyordu --
ana sitede ise marka yesiline donuyor. Olculdu: renk hover'dan sonra
da rgb(91,91,91)'de kaliyordu.
`opacity: 1` o genel solmayi da iptal ediyor; ana sitede gezinme
baglantisinin tek tepkisi renk. */
.gh-head-menu a:hover,
.gh-head-link:hover,
.gh-head .nav > li a:hover,
.is-head-transparent .gh-head .nav > li a:hover,
.is-head-transparent .gh-head-link:hover,
.is-head-dark .gh-head .nav > li a:hover,
.is-head-brand .gh-head .nav > li a:hover,
.nav-current a {
color: var(--da-yesil-metin);
opacity: 1;
}
/* --- Mobil menu ----------------------------------------------------------
Solo acilinca basligi tam ekran yapip marka yesiline boyuyor ve maddeleri
26px beyaz, yatay diziyor. Ana sitede menu beyaz zeminli, dikey ortali ve
maddeler 15.6px. Ana siteye cevriliyor. */
/* Zemin ve madde olculeri yine ID ile yaziliyor; Solo acik menuyu marka
yesiline boyayip maddeleri 26px beyaz yapiyor. Ana sitede menu beyaz
zeminli ve maddeler govde olcusunde. */
/* Solo acik menuyu baslik varyantina gore boyuyor ve secicileri iki
sinifli: .is-head-open.is-head-transparent #gh-head -> accent (yesil).
Ayni ozgullukte (1,2,0) yazip beyaza cekiyoruz; bizim dosya sonra
yuklendigi icin esitlikte kazaniyor. Eylemler serisi de ayni renge
boyaniyordu. */
.is-head-open #gh-head,
.is-head-open .gh-head,
.is-head-open.is-head-transparent #gh-head,
.is-head-open.is-head-brand #gh-head,
.is-head-open.is-head-dark #gh-head {
height: 100%;
background-color: var(--da-zemin);
/* Hero metnini Taste z-index: 20 ile basiyor; acik menu 11'de kalinca
"Abone ol" formu menunun uzerine biniyordu. Temanin kendi acik-menu
degeriyle ayni katman. */
z-index: 3999999;
}
.is-head-open.is-head-transparent #gh-head .gh-head-actions,
.is-head-open.is-head-brand #gh-head .gh-head-actions,
.is-head-open.is-head-dark #gh-head .gh-head-actions {
background-color: var(--da-zemin);
}
.is-head-open #gh-head .gh-head-menu,
.is-head-open .gh-head-menu {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
.is-head-open #gh-head .gh-head-menu a,
.is-head-open #gh-head .gh-head-menu .nav li a,
.is-head-open .gh-head-menu a {
font-size: 15.6px;
font-weight: var(--da-agirlik-kalin);
color: var(--da-metin);
padding: 10.92px 15.6px;
}
.is-head-open #gh-head .gh-head-menu a:hover,
.is-head-open .gh-head-menu a:hover {
color: var(--da-yesil-metin);
}
/* Acik menude arama ve giris gibi Ghost'a ozgu ekstralar da ayni dilde. */
.is-head-open #gh-head .gh-head-actions a,
.is-head-open #gh-head .gh-head-actions button {
color: var(--da-metin);
font-size: 15.6px;
}
/* Kapali menu de yer kapliyor.
Solo mobilde menuyu ve eylemleri position: fixed yapip gizliyor ama
genisliklerini sinirlamiyor: maddeler yatay dizildigi icin .gh-head-menu
507px'e cikiyordu. Gizli olsa da yerlesime dahil oldugu icin tarayici
yerlesim viewport'unu 375'ten 465'e genisletiyor, sabit baslik de
width: 100% ile 465 oluyor ve sayfada 90px yatay tasma goruluyordu.
Gorunen kusur navbar'da ama sebep buydu. */
@media (max-width: 1199px) {
#gh-head .gh-head-menu,
#gh-head .gh-head-actions {
max-width: 100%;
overflow: hidden;
}
#gh-head .gh-head-menu .nav {
flex-wrap: wrap;
}
}
/* --------------------------------------------------------------------------
768–1199: mobil menu duzeni
--------------------------------------------------------------------------
Ana site 1200px altinda hamburgere geciyor (yedi madde tek satira
sigmiyor). Iki tema ise 768'de yatay menuye geciyor ve kendi mobil
kurallarini `@media (max-width: 767px)` icinde tutuyor; yani 768–1199
araliginda uc mulk ayri davraniyordu. Temanin o araliktaki kurallarini
uzatmak mumkun olmadigi icin ayni davranis burada yeniden kuruluyor.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
#gh-head .gh-burger,
.gh-burger {
display: block;
}
/* Baslik izgarasi tek sutun: mobil duzende serit yalnizca marka
satirindan olusur. Taste "is-head-middle-logo" modunda izgarayi iki
sutuna boluyor (menu | marka) ve marka ikinci sutuna dustugu icin
serit icerigi tamamen saga kayiyordu.
Secici temanin kendi ozgullugunu karsilamali: tema kurali
#gh-head.is-head-middle-logo .gh-head-inner seklinde yaziliyor,
yalnizca #gh-head oneki yetmiyor. */
#gh-head .gh-head-inner,
#gh-head.is-head-middle-logo .gh-head-inner,
#gh-head.is-head-left-logo .gh-head-inner,
#gh-head.is-head-stacked .gh-head-inner {
grid-template-columns: minmax(0, 1fr);
}
/* Asil sebep izgara sablonu degil YERLESIM: Taste marka blogunu
grid-column: 2 ile ikinci sutuna koyuyor ve bos birinci sutun
ortuk olarak olusuyor. Sablonu degistirmek (inline stil bile) ise
yaramiyordu; yerlesimin kendisi sifirlanmali. */
#gh-head .gh-head-brand,
#gh-head.is-head-middle-logo .gh-head-brand,
#gh-head.is-head-stacked .gh-head-brand {
grid-column: 1;
}
/* Marka satirini tema yalnizca 767 altinda izgaraya aliyor; burada
display: block kaliyordu ve hamburger logonun ALTINA dusuyordu.
Mobildeki duzenin aynisi: logo esneyen iz, arama ve hamburger
icerikleri kadar, hepsi tek satirda. */
#gh-head .gh-head-brand {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
}
#gh-head .gh-head-brand-wrapper {
display: flex;
align-items: center;
}
/* Marka satirindaki arama dugmesi mobildeki gibi gorunur; eylemler
icindeki ikinci ornek gizlenir, yoksa acik menude iki arama simgesi
birden duruyor. */
#gh-head .gh-head-brand .gh-search {
display: flex;
}
#gh-head .gh-head-actions .gh-search {
display: none;
}
/* Kapali menu ve eylemler akistan cikar; marka satiri tek sutun kalir.
-----------------------------------------------------------------
KUTU IKI HALDE DE AYNI OLMALI. Once yalnizca `position: fixed` +
gizleme vardi; kapali kutu 738x160 ve (48,-25) noktasindayken acik
kutu 785x900 ve (0,0) oluyordu (olculdu). `position` gecisli bir
ozellik degil, yani sinif kalkar kalkmaz kutu aninda kucuk hale
donuyor ve opaklik onun UZERINDE soluyordu: acilis idare eder
gorunse de KAPANIS menuyu baslik cubuguna dogru buzulterek
kapatiyordu. Ana sitede ise `ul.menu` iki halde de ayni sabit tam
ekran kutusu; yalnizca opaklik ve kayma degisiyor.
Kapali hale acik haldeki geometri birebir veriliyor. `fixed` ile
`inset: 0` viewport'u kapliyor; acik haldeki `absolute; inset: 0`
ise tam ekran katmana donusen #gh-head'i kapliyor -- ayni dikdortgen.
Gorunmez halde `visibility: hidden` zaten tiklamayi engelliyor. */
/* Geometri asagida, 1199 alti blogunda tek yerden veriliyor; burada
yalnizca gizleme kaliyor. */
#gh-head .gh-head-menu,
#gh-head .gh-head-actions {
visibility: hidden;
}
/* Acik halde baslik tam ekran katmana donusur. */
.is-head-open #gh-head,
#gh-head.is-head-open {
position: fixed;
inset: 0;
height: 100%;
overflow-y: auto;
z-index: 3999999;
background-color: var(--da-zemin);
}
.is-head-open #gh-head .gh-head-menu,
.is-head-open #gh-head .gh-head-actions,
#gh-head.is-head-open .gh-head-menu,
#gh-head.is-head-open .gh-head-actions {
position: static;
visibility: visible;
opacity: 1;
}
.is-head-open #gh-head .nav,
#gh-head.is-head-open .nav {
flex-direction: column;
}
/* Tema maddeleri opacity: 0 ile bekletip acilista goruntuluyor; o kural
767 altina ozel oldugu icin bu aralikta maddeler yerinde ama gorunmez
kaliyordu (olculebilir yukseklikleri var, ekranda yoklar). */
.is-head-open #gh-head .nav li,
#gh-head.is-head-open .nav li {
opacity: 1;
transform: none;
visibility: visible;
}
}
/* --- Acik menunun yerlesimi ve hareketi (not 1 ve 2) ---------------------
Ana sitede menu listesi ekrana sabitlenmis bir kutuda ortalaniyor:
inset: 0; justify-content: center;
padding: calc(90px + 3em) 1.5em 3em -> 126px / 18px / 36px
Ust dolgu alttakinden buyuk oldugu icin blok merkezden ~45px asagida
duruyor. Ghost'ta liste basligin akisinda oldugu icin maddeler 51px
yukaridaydi; ayni geometri burada yeniden kuruluyor.
Kutu ekranin tamamini kapladigi icin tiklamalar altindaki eylemleri
(giris yap) engellemesin diye pointer-events aktarimi yapiliyor.
Acilis/kapanis: ana sitede opaklik + hafif kayma ile geliyor; temalarda
yalnizca visibility degistigi icin menu "aniden" beliriyordu. */
@media (max-width: 1199px) {
/* Kapali kutu = acik kutu. Bu blok mobil menunun GECERLI OLDUGU tum
aralikta (1199 alti) yaziliyor; geometri once yalnizca 768-1199
blogunda verilmisti ve 375'te kapali menu hala 360x297 @ 15,-97
iken acik hali 375x812 @ 0,0 oluyordu (olculdu) -- yani kapanista
menu kucuk kutuya buzulerek kayboluyordu. */
#gh-head .gh-head-menu {
position: fixed;
inset: 0;
margin: 0;
padding: 126px 18px 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transform: translateY(-18px);
transition: opacity .25s var(--ease-effect, cubic-bezier(.25, .1, .25, 1)),
transform .25s var(--ease-effect, cubic-bezier(.25, .1, .25, 1)),
visibility .25s;
}
#gh-head .gh-head-actions {
position: fixed;
inset: auto 0 24px;
justify-content: center;
margin: 0;
padding: 24px 0 32px;
opacity: 0;
transform: translateY(-18px);
transition: opacity .25s var(--ease-effect, cubic-bezier(.25, .1, .25, 1)),
transform .25s var(--ease-effect, cubic-bezier(.25, .1, .25, 1)),
visibility .25s;
}
/* Eylemler (giris yap) menuyle ayni anda gelir; ayri ayri belirmeleri
katmani iki parcaya bolerek gosteriyordu. */
.is-head-open #gh-head .gh-head-actions,
#gh-head.is-head-open .gh-head-actions {
opacity: 1;
transform: none;
}
.is-head-open #gh-head .gh-head-menu {
/* fixed: kapali haldekiyle ayni kutu. Onceden `absolute` idi ve
kapali hal `fixed` oldugu icin kapanista kutu degisiyordu. */
position: fixed;
inset: 0;
margin: 0;
padding: 126px 18px 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
transform: none;
pointer-events: none;
}
.is-head-open #gh-head .gh-head-menu .nav {
pointer-events: auto;
}
/* Menu akistan cikinca eylemler (giris yap) yukari kayip menu
maddelerinin uzerine biniyordu. Onlar da alta sabitleniyor; 24px
ofset temanin 767 altindaki gorunumunu birebir veriyor (baglantinin
alt kenari ekranin 56px uzerinde). */
/* Marka satiri tepede kalmali. Masaustu icin verilen
.gh-head-brand { height: 100% } kurali acik menude satiri tam ekran
kaplatiyor, logo ve carpi dikeyde ortaliyordu. */
/* Marka satiri kendi olcusunde (min-height 90/66) kalir; kilit o
satiri doldurur. Ikisine birden height: 100% verilince satir tum
katmani kaplayip logoyu dikeyde ortaliyordu. */
.is-head-open #gh-head .gh-head-brand,
#gh-head.is-head-open .gh-head-brand {
height: auto;
}
.is-head-open #gh-head .gh-head-inner,
#gh-head.is-head-open .gh-head-inner {
align-content: start;
}
}
/* Menu acikken arkadaki sayfa kaymasin ve yuzen butonlar menunun uzerine
cikmasin — ana sitede de ayni. */
body.da-menu-acik {
overflow: hidden;
}
/* Kilit html'e de verilmeli. Yalnizca body kilitlenince sayfa kaymaya
devam ediyor ve menu acilirken bir kaydirma cubugu beliriyor: gorunur
alan 800'den 785'e dusuyor, butun icerik 15px sola atliyor ve seridin
sagindan cubuk gorunuyor. Ana sitede kilit html'de oldugu icin bu
yasanmiyordu. scrollbar-gutter: stable ile birlikte oluk her iki
durumda da ayrilmis kaliyor, yani atlama olmuyor. */
html:has(> body.da-menu-acik) {
overflow: hidden;
}
body.da-menu-acik .da-yuzen {
opacity: 0;
pointer-events: none;
}
/* OLCU / DUZEN AYRIMI
Ana sitede serit OLCULERI kok yazi boyutuyla 768px'te degisiyor
(dolgu 24 -> 28, kilit 12 -> 14px, serit 138 -> 146); menunun yatay
duzene gecisi ise 1200px'te. Bu blok olculeri tasiyor, dolayisiyla
768'den itibaren gecerli. Duzen kurallari asagida 1200'de kaliyor. */
@media (min-width: 768px) {
/* #gh-head sart: temel kural da ID'li, aksi halde 24px kaliyor. */
#gh-head,
.gh-head,
.is-head-transparent .gh-head {
padding-top: 28px;
padding-bottom: 28px;
}
.gh-site {
padding-top: 146px;
}
.gh-head-inner {
gap: 21px;
}
#gh-head .gh-head-logo,
.gh-head-logo {
font-size: 14px;
}
#gh-head .gh-head-logo img,
.gh-head-logo img {
height: 72.8px;
}
#gh-head.da-kaydirildi,
.gh-head.da-kaydirildi {
padding-top: 6.3px;
padding-bottom: 6.3px;
}
/* Masaustunun kucuk hali. Ana sitede kuculme 1200px altinda gecerli ve
orada kilit .88em'e, logo kutusu 66px'e iniyor: 14 x .88 = 12.32px,
simge 5.2em = 64px, serit 66 + 6.3x2 = 78.6px.
Bu degerler yazilmazsa temel kuraldaki mobil olculer (10.56/54.9)
masaustunde de kullaniliyordu. */
#gh-head.da-kaydirildi .gh-head-logo,
.gh-head.da-kaydirildi .gh-head-logo {
font-size: 12.32px;
}
#gh-head.da-kaydirildi .gh-head-logo img,
.gh-head.da-kaydirildi .gh-head-logo img {
height: 64px;
}
#gh-head.da-kaydirildi .gh-head-brand,
.gh-head.da-kaydirildi .gh-head-brand {
min-height: 66px;
}
/* Ana sitede masaustu menusu 14px; burada 18.2px ile temanin kendi
olcegindeydi ve serit belirgin sekilde daha iri gorunuyordu. */
.gh-head-menu a,
.gh-head-link,
.gh-head .nav > li a,
.is-head-transparent .gh-head .nav > li a {
font-size: 14px;
}
/* Ana sitede baglantilar seridin tam yuksekligini kapliyor ve maddeler
arasinda bosluk yok; ayrim baglantinin kendi yatay dolgusundan
geliyor (1.2em). Boylece imlec serit boyunca hedefin uzerinde.
1200px altinda dolgu daraltiliyor: ana site zaten orada hamburgere
geciyor, Ghost'ta ise dort madde 1.2em ile sutuna sigmiyor. */
}
/* Baslik kabi ana sitedeki .container ile ayni basamaklari izler; burada
960px'e sabitlenmisti. Ana sitede kap 1200px ustunde 1140'a, 1400 ustunde
1320'ye cikiyor. Sabit 960 hem olcu farki yaratiyor hem menuyu darda
birakiyordu: dort maddenin sonuncusu her ekran genisliginde "..."
dugmesinin altinda kaliyordu. Basamaklar .gh-inner kurallarindan geliyor;
burada yalnizca ortalama kaliyor. */
.gh-head-inner {
margin-inline: auto;
}
/* Yazi basligindaki etiket baglantisi 22px yuksekligindeydi; dokunma
hedefi olcusunun (44px) altinda. Ana sitedeki cozumun aynisi: kutu
inline-flex ile buyuyor, negatif dikey marj gorsel ritmi koruyor - yani
baslik bloguna fazladan bosluk eklenmiyor. */
.gh-article-meta-tag,
.gh-article-tag a,
.gh-list-item-primary-tag {
display: inline-flex;
align-items: center;
min-height: var(--da-dokunma);
margin-block: calc((var(--da-dokunma) - 1.5em) / -2);
}
/* --- Mobil menu: ana sitedeki ritim ve cagri butonu ---------------------- */
@media (max-width: 1199px) {
/* Ana sitede maddeler arasi 3px; burada 20px idi ve liste dagilmis
duruyordu. Madde yuksekligi (44px) dokunma hedefini zaten tasiyor,
araligin buyuk olmasi gerekmiyor. */
#gh-head .gh-head-menu .nav {
gap: 3px;
}
/* Temanin tasma betigi, kapali menuyu dar olcup butun maddeleri
"..." dugmesinin acilirina tasiyor; menu acildiginda listede tek bir
dugme kaliyordu. display: contents dugmeyi ve aciliri kutu agacindan
cikariyor, maddeler dogrudan listenin ogesi oluyor - betigin DOM'da
ne yaptigindan bagimsiz calisir. */
#gh-head .gh-head-menu .nav-more-toggle,
#gh-head .gh-head-menu .nav-more-toggle .gh-dropdown {
display: contents;
}
/* display: contents kutuyu kaldirir ama MIRASI kaldirmaz: acilir kutu
kendi baglaminda text-align: left ve koyu metin rengi (21,23,26)
tasiyor, maddeler de onlari devraliyordu. Ilk yuklemede yazilar sola
yasli ve yanlis renkteydi; pencere yeniden boyutlandiginda tema
maddeleri listeye geri tasidigi icin kendiliginden duzeliyordu -
kullanicinin "resize edince duzeliyor" dedigi davranis buydu. */
#gh-head .gh-head-menu .nav-more-toggle .gh-dropdown,
#gh-head .gh-head-menu .gh-dropdown li {
color: var(--da-metin);
text-align: center;
background-color: transparent;
}
/* Baglantinin rengi icin !important gerekiyor: temanin acilir kutu
kurali bu secicinin (1,3,2) ustunde ve maddeleri kendi koyu tonuna
(21,23,26) cekiyor. Ortak katman zaten temayi ezmek icin var; tek
bildirimde sinirli tutuluyor. */
#gh-head .gh-head-menu .gh-dropdown li a {
color: var(--da-metin) !important;
}
#gh-head .gh-head-menu .gh-dropdown li a:hover {
color: var(--da-yesil-metin) !important;
}
#gh-head .gh-head-menu .gh-dropdown li.da-menu-cta a {
color: #fff !important;
}
#gh-head .gh-head-menu .nav-more-toggle > svg {
display: none;
}
#gh-head .gh-head-menu .nav li {
margin: 0;
}
/* Ana sitenin mobil menusunde en belirgin oge yesil randevu butonu;
Ghost tarafinda karsiligi yoktu. Madde betikle ekleniyor (bkz.
araclar/ghost-yayinla.sh), gorunumu ana sitedeki .button dilinde. */
/* Ana sitede son madde ile buton arasi 21px; buradaki 3px'lik satir
araligiyla birlikte 18px marj o degeri veriyor. */
#gh-head .gh-head-menu .nav li.da-menu-cta {
margin-top: 18px;
/* Yuzde ise yaramaz: acik menude liste kendi icerigi kadar
(127px) genis, dolayisiyla width: 100% de 127px'e cozuluyordu.
Ana sitedeki buton 264px; olcu dogrudan veriliyor, dar ekranda
kaba sigmasi icin max-width ile sinirli. Baglanti da inline-flex
oldugu icin kendi icerigine daraliyordu, flex'e alindi. */
width: 264px;
max-width: 100%;
}
#gh-head .gh-head-menu .nav li.da-menu-cta > a {
display: flex;
border: 2px solid var(--da-yesil);
background-color: var(--da-yesil);
color: #fff;
padding: .8em 1.3em;
border-radius: .5em;
font-size: 12px;
font-weight: var(--da-agirlik-kalin);
letter-spacing: .02em;
text-transform: uppercase;
justify-content: center;
width: 100%;
}
}
/* Mobil menude tek bir dolu yesil buton olmali: randevu. Serit butonu
(abonelik) ana site diline gecirilince menude de yesil dolu hale geldi
ve alttaki daha genis buton randevu cagrisini bastiriyordu. Menude
sessiz baglantiya donuyor; islevi duruyor, hiyerarsi ana sitedeki gibi. */
@media (max-width: 1199px) {
.is-head-open #gh-head .gh-head-btn:not(.gh-btn-outline) {
border-color: transparent;
background-color: transparent;
color: var(--da-metin);
font-weight: var(--da-agirlik-kalin);
}
.is-head-open #gh-head .gh-head-btn:not(.gh-btn-outline):hover {
background-color: transparent;
color: var(--da-yesil-metin);
filter: none;
}
}
/* Mobil menu olculeri ana sitede kok yazi boyutuyla olcekleniyor
(768 altinda kok 12px, ustunde 14px): baglanti 15.6 -> 18.2px, satir
yuksekligi 44 -> 48, madde araligi 3 -> 3.5px, cagri butonu 12 -> 14px
ve son madde ile buton arasi 21 -> 25px. Ghost tarafi butun aralikta
mobil degerlerde kaliyordu; 768-1199'da ust basamak yaziliyor. */
/* Eylemler (giris yap) mobil menu duzeninin TAMAMINDA alta sabit.
Kural once yalnizca 768-1199 icin yazilmisti; 375'te tema onu akista
birakiyor, satir liste yuksekligine dahil oluyor ve ortalanmis menu
blogu 22px yukari kayiyordu. Dolgu da iki temada farkli (Solo
24.3/32.3, Taste 20/28) ve satir 56'ya karsi 48/52px'te duruyordu.
24px ofset + 32px alt dolgu = baglantinin alt kenari ekranin 56px
uzerinde, ana sitedeki Instagram satiriyla ayni. */
@media (max-width: 1199px) {
.is-head-open #gh-head .gh-head-actions,
#gh-head.is-head-open .gh-head-actions {
/* fixed: kapali haldekiyle ayni kutu (bkz. .gh-head-menu notu). */
position: fixed;
inset: auto 0 24px;
justify-content: center;
margin: 0;
padding: 24px 0 32px;
}
/* Ana sitede menu baglantilari satirin tamamini kapliyor (max-width
22em: 12px kokte 264px); burada icerik kadar genisti, yani dokunma
hedefi yalnizca yazinin uzerindeydi. */
#gh-head .gh-head-menu .nav li {
width: 264px;
max-width: 100%;
}
#gh-head .gh-head-menu .nav li > a {
width: 100%;
justify-content: center;
}
}
/* Mobil menunun UST BASAMAGI (768-1199). Ana sitede bu olculer kok yazi
boyutuyla geliyor: baglanti 15.6 -> 18.2px, satir yuksekligi 44 -> 48,
madde genisligi 22em = 264 -> 308px, madde araligi 3 -> 3.5px, cagri
butonu 12 -> 14px.
SIRA ONEMLI: bu blok, alt basamagi yazan `max-width: 1199px` bloklarindan
SONRA gelmeli. Ozgullukleri esit oldugu icin kaynak sirasi belirleyici;
once yazildiginda alt basamak degerleri (15.6px / 264px) 800px'te de
gecerli kaliyordu. */
@media (min-width: 768px) and (max-width: 1199px) {
/* Cagri butonunun kendi kurali daha ozgul oldugu icin (li.da-menu-cta)
ayrica yazilmali; yoksa alt basamaktaki 264px kaliyordu. */
#gh-head .gh-head-menu .nav li,
#gh-head .gh-head-menu .nav li.da-menu-cta {
width: 308px;
}
/* Ozgullugu alt basamaktaki `.is-head-open ... .nav li a` kuraliyla
(1,3,1) esitlemek gerekiyor; yalnizca #gh-head oneki (1,2,1) yeniliyor
ve punto 15.6'da kaliyordu. Dolgu ana sitedeki .7em/1em oranindan:
18.2px puntoda 12.74 / 18.2. */
.is-head-open #gh-head .gh-head-menu .nav li a,
#gh-head.is-head-open .gh-head-menu .nav li a {
font-size: 18.2px;
min-height: 48px;
padding: 12.74px 18.2px;
/* Ghost'un govde satir araligi (1.7) satiri 55px'e cikariyordu;
ana sitede baglanti 48px. */
line-height: 1.24;
}
#gh-head .gh-head-menu .nav {
gap: 3.5px;
}
#gh-head .gh-head-menu .nav li.da-menu-cta {
margin-top: 21px;
}
.is-head-open #gh-head .gh-head-menu .nav li.da-menu-cta a,
#gh-head.is-head-open .gh-head-menu .nav li.da-menu-cta a {
font-size: 14px;
min-height: 44px;
width: 100%;
padding: .8em 1.3em;
/* Ghost govde satir araligi (1.7) butonu 49px'e cikariyordu; ana
sitedeki buton 44px. */
line-height: 1.25;
}
.is-head-open #gh-head .gh-head-actions a,
#gh-head.is-head-open .gh-head-actions a {
font-size: 18.2px;
min-height: 48px;
}
}
/* Cagri butonu yalnizca mobil menu duzeninde; 1200 ustunde serit kendi
butonunu tasiyor ve fazladan madde menuyu darda birakirdi. */
@media (min-width: 1200px) {
#gh-head .gh-head-menu .nav li.da-menu-cta {
display: none;
}
}
/* ==========================================================================
5f. Konteyner, katman sirasi ve acilis hareketi
========================================================================== */
/* --- Konteyner ------------------------------------------------------------
Ghost'un .gh-inner'i ile ana sitenin .container'i ayni degildi (1028px
ekranda 939px'e karsi 960px) ve yan bosluklar tutmuyordu. Ana sitenin
olcegi uygulaniyor; ucunde de icerik ayni genislikte ve ayni kenardan
basliyor. */
/* Dis kabin dolgusu sifirlanmali.
Solo .gh-outer'a clamp(24px, ..., 48px) yatay dolgu veriyor ve .gh-inner
onun icinde duruyor. Ic kaba ana sitenin container'ini verince iki dolgu
ust uste bindi: icerik ekseni ana sitede 42px iken blogda 52px'e,
genislik 930 yerine 909'a dustu. Yatay olcuyu tek yer yonetmeli. */
.gh-outer {
padding-inline: 0;
}
/* Yalnizca .gh-inner. .gh-canvas (yazi sayfasinin kabi) tema tarafindan
zaten dogru eksende konumlandiriliyor; ona ayrica 15px dolgu verilince
ayni cift-sayim hatasi olusuyordu: baslik ve kapak gorseli 41.4 yerine
56.4'ten, mobilde 15 yerine 30'dan basliyordu. Olculdu: kural
kaldirilinca ikisi de akisin geri kalaniyla ayni eksene oturuyor. */
.gh-inner {
width: 100%;
max-width: none;
padding-inline: 15px;
margin-inline: auto;
}
@media (min-width: 576px) {
.gh-inner {
max-width: 540px;
}
}
@media (min-width: 768px) {
.gh-inner {
max-width: 720px;
}
}
@media (min-width: 992px) {
.gh-inner {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.gh-inner {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.gh-inner {
max-width: 1320px;
}
}
/* --- Katman sirasi --------------------------------------------------------
Solo yazi sayfasindaki yazar blogunu (.gh-article-meta) z-index: 10 ile
konumlandiriyor; sabit basligin z-index'i de 10. Esitlikte DOM'da sonra
gelen kazandigi icin yazarin adi ve fotografi navbar'in uzerine
biniyordu. Yazar blogunun kendi icerigi uzerinde durmasi yeterli. */
.gh-article-meta {
z-index: 1;
}
/* --- Acilis hareketi ------------------------------------------------------
Solo hero ortusunu 1.5 saniyelik bir gecisle aciyor; sayfa her
yuklendiginde gorsel iceri soluyor. Sik yenilenen bir sitede bu hareket
gecikme hissi veriyor. Ortu aninda yerinde. */
.gh-about::before,
.has-background-about .gh-about::before,
.has-background-about .gh-about.initialized::before {
transition: none;
}
.gh-about-image,
.gh-about .jarallax-img {
animation: none;
transition: none;
}
/* --------------------------------------------------------------------------
Scroll ile beliren hareket
Ana sitedeki ile ayni. .beliren sinifini betik ekliyor, CSS'te varsayilan
olarak durmuyor: betik calismazsa hicbir sey gizlenmez, yalnizca hareket
olmaz.
-------------------------------------------------------------------------- */
.beliren {
opacity: 0;
transform: translateY(1.5em);
transition: opacity .55s var(--da-gecis), transform .55s var(--da-gecis);
}
.beliren.gorundu {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.beliren,
.beliren.gorundu {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
5g. FOOTER — ana siteyle birebir
--------------------------------------------------------------------------
Yapiyi betik kuruyor (Ghost'un footer'inda bu bloklar yok). Olculer ana
siteden alindi:
ust cizgi %95 genislik, 3px, marka yesili, alt bosluk 42px
izgara mobil tek sutun ortali / masaustu uc sutun, gap 42/56
marka simgesi 154px (masaustu), blok icinde ortali
baslik 14px / 700 / #3a3a3a, alt bosluk 10.5px
kart baglanti 44px yukseklik, 1px #e4e4e4 cerceve, 7px yaricap, ortali
iletisim satiri 28px ikon sutunu + 14px bosluk, ayni kart dili
telif ortali, 11.2px, gri
========================================================================== */
/* Icerik ile footer arasindaki bosluk TEK bir kuralin isi. Uc kaynak ust
uste biniyordu: .gh-main alt dolgusu 80 + bu marj 119 + .gh-foot ust
dolgusu 108.6 = 308px. Ana sitede ayni ara 119px. Temanin iki dolgusu
sifirlaniyor, olcuyu marj tasiyor. */
.gh-foot {
margin-top: 119px;
border-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.gh-main {
padding-bottom: 0;
}
/* Solo bu kabi flex yapiyor; icerigini tamamen degistirdigimiz icin
bloklarimiz flex ogesi olarak iceriklerine daraliyordu (izgara 930 yerine
857px'e dusup 78px'ten basliyordu). Normal akisa aliniyor. */
.gh-foot-inner {
display: block;
}
/* OLCEK TABANI — ana sitenin footer'i bastan asagi rem ile yazilmis, yani
kok yazi boyutuyla (mobil 12px / masaustu 14px) birlikte olcekleniyor.
Buradaki olculer once mutlak px idi ve yalnizca masaustu karsiligina
sabitlenmisti; mobilde butun footer ana siteden 14/12 = %17 buyuk
ciziliyordu (adres dort satira, e-postalar iki satira dusuyordu).
Cozum ayni mekanizma: tek bir taban, geri kalan her olcu em. */
.da-foot-cizgi,
.da-foot-icerik,
.da-foot-telif {
font-size: 14px;
}
@media (max-width: 768px) {
.da-foot-cizgi,
.da-foot-icerik,
.da-foot-telif {
font-size: 12px;
}
}
.da-foot-cizgi {
width: 95%;
border: none;
border-top: 3px solid var(--da-yesil);
border-radius: 0;
margin: 0 auto 3em;
}
/* Solo footer'i (.gh-foot) white-space: nowrap tasiyor - kendi yatay menusu
icin. Bizim footer bloklarimiz bunu miras aliyordu: adres metni 340px
genisliginde tek satirda kalip 168px'lik kutusuna sigmiyordu.
overflow-wrap: anywhere burada ise yaramaz; once sarmaya izin verilmeli.
Belirti tamamen baska yerde goruluyordu: sarmayan satir tarayicinin
yerlesim viewport'unu 375'ten 465'e cikariyor, sabit baslik width: 100%
ile 465px olup sayfa boyunca 90px yatay kayma uretiyordu. Navbar'da
aranan hatanin kaynagi footer'daki tek bir satirmis. */
.da-foot-icerik,
.da-foot-icerik * {
white-space: normal;
}
.da-foot-icerik {
display: grid;
grid-template-columns: 1fr;
gap: 3em;
justify-items: center;
text-align: center;
}
/* Ortak olcu kabi: ana sitede 20rem. rem burada yaniltici olurdu (Ghost'ta
kok 10px), em ise yukaridaki tabandan cozuluyor. */
.da-foot-icerik > * {
width: 100%;
max-width: 20em;
}
/* --- Marka blogu --- */
.da-foot-marka {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
text-align: center;
}
.da-foot-marka img {
height: 11em;
width: auto;
max-height: none;
align-self: center;
}
.da-foot-marka > p {
display: flex;
flex-direction: column;
gap: .35em;
line-height: 1;
font-size: 1em;
}
/* --- Bolum basliklari --- */
.da-foot-baslik {
font-size: 1em;
font-weight: var(--da-agirlik-cok-kalin);
color: var(--da-metin-koyu);
margin-bottom: .75em;
}
/* --- Sessiz kart baglantilar ---
Sayfada uc buton seviyesi var; footer gezinmesi en sakin olan: zeminsiz,
yalnizca ince cerceve. Hover'da ikincil buton zeminine geciyor. */
.da-foot-menu > ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5em;
width: 100%;
max-width: 18em;
margin-inline: auto;
list-style: none;
padding: 0;
}
/* Tek sayida madde iki sutuna bolununce bir hucre bos kalir; sonuncusu iki
sutunu birden kapliyor ki saga acilmis bir delik olusmasin. Secicideki
:nth-child(odd) sart: madde sayisi cift oldugunda son madde tek basina
tam genislige yayilip yenisini bozuyordu. */
.da-foot-menu > ul > li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.da-foot-menu a {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--da-dokunma);
padding: .5em 1em;
border: 1px solid var(--da-cizgi);
border-radius: .5em;
color: var(--da-metin);
font-size: 1em;
text-align: center;
text-decoration: none;
transition: background-color var(--da-gecis), border-color var(--da-gecis),
color var(--da-gecis);
}
.da-foot-menu a:hover {
background-color: var(--da-yuzey);
border-color: var(--da-yuzey);
color: var(--da-metin-koyu);
}
/* --- Iletisim satirlari ---
Ayni kart dili. Ikon kendi sutununda; metinler tek dikey eksende. */
.da-foot-iletisim > ul {
display: flex;
flex-direction: column;
gap: .5em;
/* Ana sitedeki davranis: liste icerigi kadar genisler, kabina kadar
sinirlanir ve ortalanir. (Yatay tasma sanigi olarak bir ara
kaldirilmisti; sebep white-space cikinca geri konuldu.) */
width: max-content;
max-width: 100%;
margin-inline: auto;
text-align: left;
list-style: none;
padding: 0;
}
.da-foot-iletisim a {
display: grid;
grid-template-columns: 2em 1fr;
gap: 1em;
/* align-items: satir ICINDE ikon-metin iliskisi (ikon ilk satira
hizali kalsin diye `start`).
align-content: satirin KENDISI kapta nereye otursun. Dokunma hedefi
icin verilen 44px yukseklik tek satirlik satirlarda 8px bosluk
birakiyor ve `start` bunun tamamini alta itiyordu: ikon ve metin
kartin 3px yukarisinda duruyordu (olculdu). Cok satirli adreste
bosluk zaten yok, o yuzden orada sorun gorulmuyordu. */
align-items: start;
align-content: center;
min-height: var(--da-dokunma);
padding: .75em 1em;
border: 1px solid var(--da-cizgi);
border-radius: .5em;
color: var(--da-metin);
font-size: 1em;
text-decoration: none;
transition: background-color var(--da-gecis), border-color var(--da-gecis),
color var(--da-gecis);
}
.da-foot-iletisim a:hover {
background-color: var(--da-yuzey);
border-color: var(--da-yuzey);
color: var(--da-metin-koyu);
}
.da-foot-iletisim img {
width: 2em;
height: 2em;
object-fit: scale-down;
align-self: start;
/* Ikon satir kutusunun tamamina degil ILK SATIRA hizalanir; adres uc
satir oldugu icin aksi halde ortada asili kaliyor. */
margin-top: calc((1.5em - 2em) / 2);
}
/* Ana sitedeki kuralin aynisi. minmax(0, 1fr) + overflow-wrap: anywhere
ikilisi metin izini min-content'in altina indirip e-posta adreslerini
iki satira boluyordu; ana sitede iz min-content kadar genisleyebildigi
icin adres tek satirda kaliyor. */
.da-foot-iletisim p {
line-height: 1.5;
text-wrap: balance;
max-width: 34ch;
}
.da-foot-iletisim small {
display: block;
color: var(--da-metin);
font-size: .8em;
}
/* --- Telif --- */
.da-foot-telif {
margin-top: 3em;
}
.da-foot-telif hr {
width: 100%;
border: none;
border-top: 1px solid var(--da-cizgi);
border-radius: 0;
margin: 0;
}
.da-foot-telif small {
display: block;
text-align: center;
/* Marjlar ogenin KENDI puntosuna gore cozulur; punto .8em oldugu icin
ana sitedeki 1.5rem / 1.2rem karsiligi .8'e bolunerek yaziliyor. */
margin-top: 1.875em;
margin-bottom: 1.5em;
color: gray;
font-size: .8em;
}
/* Ana sitede telif satirindaki baglantilar dokunma hedefi olcusune
(44px) getiriliyor; burada 12px yukseklikte kaliyorlardi. Dikey dolgu
satirin gorunumunu bozmasin diye ana sitedeki cozumun aynisi:
inline-flex + min-height, marj yok. */
.da-foot-telif a {
display: inline-flex;
align-items: center;
min-height: var(--da-dokunma);
color: inherit;
text-decoration: underline;
text-underline-offset: .2em;
transition: color var(--da-gecis);
}
/* Ana sitede telif baglantilari hover'da marka yesiline geciyordu; burada
hic tepki vermiyorlardi. Uc sitede de ayni geri bildirim. */
.da-foot-telif a:hover {
color: var(--da-yesil-metin);
}
/* --------------------------------------------------------------------------
Temalarin genel solmasi iptal
--------------------------------------------------------------------------
Solo ve Taste'in ikisinde de `a:hover { opacity: .8 }` var: sayfadaki
HER baglantiyi hover'da soluklastiriyor. Kendi hover'ini tanimladigimiz
bilesenlerde bu ustuste biniyor ve ana siteyle ayrisiyordu. Olculdu:
tariflerde footer baglantisi hover'da opacity .8
blogda ayni baglanti opacity 1
ana sitede opacity 1
Yani ayni footer uc mulkte uc farkli sekilde davraniyordu. Yuzen
butonlar da soluyordu; ana sitede tepkileri yalnizca kalkis + parlaklik.
Kart baglantisini Taste zaten kendisi muaf tutuyor
(`.gh-list-item-inner:hover { opacity: 1 }`); gezinme baglantilari
yukarida kendi kuralinda hallediliyor.
Logo bunun DISINDA: onun hover'i bilerek solma.
-------------------------------------------------------------------------- */
.da-foot-menu a:hover,
.da-foot-iletisim a:hover,
.da-foot-telif a:hover,
.da-yuzen:hover {
opacity: 1;
}
/* --- Masaustu: uc sutun, bilincli asimetri ---
Ana sitede oldugu gibi: solda agir marka capasi, sagda sikisik bilgi
kumesi. Bosluk marka ile kume arasinda toplaniyor. */
@media (min-width: 768px) {
.da-foot-icerik {
grid-template-columns: 1fr auto auto;
column-gap: 4em;
row-gap: 3em;
align-items: start;
justify-items: start;
text-align: left;
}
.da-foot-icerik > * {
width: auto;
max-width: none;
}
.da-foot-menu > ul {
grid-template-columns: 1fr;
margin-inline: 0;
max-width: none;
}
.da-foot-menu > ul > li:last-child {
grid-column: auto;
}
.da-foot-iletisim > ul {
width: auto;
margin-inline: 0;
}
/* --- Kart kabugu masaustunde kalkiyor ---
Mobilde cerceve "bu satir bir dokunma hedefi" demenin yoluydu.
Masaustunde dar sutunlarda alt alta gelen ayni cerceveler bos
dugmeler dizisine donusuyor ve footer'i agirlastiriyor. Liste
sessiz metne dusuyor, ayrim yalnizca hover'da renkle veriliyor.
Dokunma hedefi olcusu korunuyor: kalkan sey kabuk, hedef degil. */
.da-foot-menu a,
.da-foot-iletisim a {
border-color: transparent;
background-color: transparent;
border-radius: 0;
padding-inline: 0;
}
.da-foot-menu a {
justify-content: flex-start;
text-align: left;
min-height: 2.4em;
padding-block: 0;
}
.da-foot-menu a:hover,
.da-foot-iletisim a:hover {
background-color: transparent;
border-color: transparent;
color: var(--da-yesil-metin);
}
/* Kutu kalkinca iletisim satirlari birbirine yapisiyor; ayrim ince bir
ust cizgiyle veriliyor (ilk satir haric). Kenarlik genisligi 1px
kaliyor, yalnizca rengi degisiyor -- boylece yerlesim kaymiyor. */
.da-foot-iletisim > ul {
gap: 0;
}
.da-foot-iletisim a {
padding-block: .75em;
}
.da-foot-iletisim li + li a {
border-top-color: var(--da-cizgi);
}
}
/* ==========================================================================
Abone ol alani (iki hero'da da)
--------------------------------------------------------------------------
Ayni fikir UC ayri yerde kuruluyor: gercek bir form degil, input GIBI
gorunen bir kap ve icinde buton gibi duran bir . Tiklaninca Ghost
Portal aciliyor. Ucunun de olcusu ayriydi -- olculdu:
blog hero .gh-subscribe-input 480x52 yaricap 72px metin 17px
tarifler hero .gh-header-input 560x68 yaricap 0 metin 22px
tarifler alt .gh-cta-input 480x52 yaricap 0 metin 19px
zemin rgba(0,0,0,.08)
Ayni marka, ayni is, iki farkli bilesen. Burada tek dile getiriliyor ve
dil ana sitenin buton dilinden aliniyor: 8px yaricap, dolu yesil, beyaz
metin, 600 agirlik, 44px dokunma hedefi.
!important sart: Taste puntoyu
`.is-font-serif:not([..]):not([..]):not([..]):not([..]) .gh-header-input`
ile (0,6,0) ozgullukte yaziyor.
========================================================================== */
.gh-subscribe-input,
.gh-header-input,
.gh-cta-input {
box-sizing: border-box;
width: 100%;
max-width: 480px;
height: 56px;
padding: 0 6px 0 20px !important;
background-color: var(--da-zemin);
border: 1px solid var(--da-cizgi) !important;
border-radius: var(--da-yaricap) !important;
font-family: var(--da-font);
font-size: 16px !important;
font-weight: var(--da-agirlik-normal);
color: var(--da-metin-silik);
text-align: left;
}
.gh-subscribe-input .gh-btn,
.gh-header-input span,
.gh-cta-input span {
box-sizing: border-box;
height: 44px;
padding: 0 22px !important;
background-color: var(--da-yesil);
border-radius: 6px !important;
color: #fff;
font-family: var(--da-font);
font-size: 15px !important;
font-weight: var(--da-agirlik-kalin);
white-space: nowrap;
transition: background-color var(--da-gecis);
}
.gh-subscribe-input:hover .gh-btn,
.gh-header-input:hover span,
.gh-cta-input:hover span {
background-color: var(--da-yesil-koyu);
}
/* Dar ekranda kap daralinca yer tutucu ve etiket ayni satirda kalmali. */
@media (max-width: 480px) {
.gh-subscribe-input,
.gh-header-input,
.gh-cta-input {
height: 52px;
padding-left: 14px !important;
font-size: 14px !important;
}
.gh-subscribe-input .gh-btn,
.gh-header-input span,
.gh-cta-input span {
height: 42px;
padding: 0 16px !important;
font-size: 14px !important;
}
}
/* ==========================================================================
Yazi sayfasi: yapiskan yazar sutunu sabit basligin altina kaciyordu
--------------------------------------------------------------------------
Solo yazar/tarih sutununu `position: sticky; top: 48px` ile tutuyor. Bizim
baslik ise `position: fixed` ve kaydirilinca 79px yuksekliginde (olculdu;
kaydirilmadan once 146px, `da-kaydirildi` sinifiyla kuculuyor). 48 < 79
oldugu icin sutun tam da yapiskanlastigi anda basligin 31px altina
giriyordu: avatar ve isim navbar tarafindan kesiliyordu.
Yapiskan esik kuculmus baslik yuksekligi + nefes payi olarak yaziliyor.
Temanin kurali (0,1,0); burasi sonra yuklendigi icin esitlikte kazaniyor.
========================================================================== */
.gh-article-meta-inner {
top: calc(79px + var(--da-bosluk-6));
}
/* ==========================================================================
Tarif sayfasi: yazar bolumu
--------------------------------------------------------------------------
Taste tarif sayfasinda yazariyi hic gostermiyordu; sayfa paylas dugmesiyle
bitiyordu. Blok paylas satirindan SONRA, ortali.
Veri uydurulmuyor: ad/fotograf/adres Ghost'un JSON-LD ciktisindan,
biyografi Icerik API'sinden geliyor (bkz. kod enjeksiyonu).
========================================================================== */
.da-yazar {
max-width: 720px;
margin: var(--da-bosluk-16) auto 0;
padding-top: var(--da-bosluk-12);
border-top: 1px solid var(--da-cizgi);
text-align: center;
}
.da-yazar-foto {
display: block;
width: 88px;
height: 88px;
margin: 0 auto var(--da-bosluk-4);
border-radius: var(--da-yaricap-tam);
object-fit: cover;
}
.da-yazar-etiket {
margin: 0;
color: var(--da-turuncu-metin);
font-family: var(--da-font);
font-size: 13px;
font-weight: var(--da-agirlik-cok-kalin);
/* Buyuk harf degil sozcuk basi buyuk yaziliyor; genis harf araligi
yalnizca tumu buyuk harfli etiketlerde ise yarar, burada sozcugu
dagitiyordu. */
letter-spacing: .02em;
}
.da-yazar-ad {
display: inline-block;
margin-top: var(--da-bosluk-2);
color: var(--da-yesil-metin) !important;
font-family: var(--da-font);
font-size: var(--da-olcek-3);
font-weight: var(--da-agirlik-cok-kalin);
text-decoration: none !important;
transition: color var(--da-gecis);
}
.da-yazar-ad:hover {
color: var(--da-yesil-koyu) !important;
opacity: 1;
}
.da-yazar-bio {
max-width: 52ch;
margin: var(--da-bosluk-3) auto 0;
color: var(--da-metin);
font-family: var(--da-font);
font-size: var(--da-olcek-kucuk);
line-height: 1.6;
}
.da-yazar-bio:empty {
display: none;
}