; etiket ile değer bitişik
yazılıyordu ("GrupUsta & Zanaat"). Kurallar
için de geçerli
kılındı — mevcut
davranışı aynen duruyor.
===================================================================== */
.side-list > div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
border-bottom:1.5px solid var(--line);font-size:15px;font-weight:600}
.side-list > div:last-child{border-bottom:none}
.side-list > div > span{font-size:12.5px;color:var(--muted-2);text-align:right;font-weight:700}
/* Künye yan panelinde soru/cevap ikilisi alt alta gelir, yan yana değil */
.side-list > div + div[style]{padding-top:0;border:none}
/* Kart alt satırında ad ile "okundu" üst üste biniyordu: .who esnek
değildi. Ad kısalır, sayaç bütün kalır. */
.card .cf{gap:8px;min-width:0}
.card .who{flex:1 1 auto;min-width:0;overflow:hidden}
.card .who .n1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.card .helped{flex:none}
/* Künye yan paneli: soru üstte, cevap altta. Künye soruları bir satıra
sığmayacak kadar uzun; side-list'in yan yana hizası onları sağa itiyordu. */
.side-kv{display:flex;flex-direction:column}
.side-kv > div{padding:11px 0;border-bottom:1.5px solid var(--line)}
.side-kv > div:last-child{border-bottom:none}
.side-kv > div > span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.side-kv > div > b{display:block;font-size:15.5px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
/* Kart alt satırı dar kartta sarılsın: ad ile okunma sayısı sıkışıp
üst üste binmesin. */
.card .cf{flex-wrap:wrap;row-gap:6px}
/* Yasal metin gezinmesi telefonda: kutu 385px genişken içindeki bağlantılar
satır kaydırmayınca 19px taşıyordu. Uzun başlıklar sarılsın. */
.legal-nav{min-width:0}
.legal-nav a{white-space:normal;overflow-wrap:anywhere}
@media (max-width:900px){
.legal-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
.legal-nav a{flex:1 1 auto;text-align:center;font-size:13.5px;padding:8px 10px}
}
/* Izgara hücresi içeriğe göre büyüyordu: hukuk metnindeki uzun bir
kesintisiz dizi (e-posta, adres, kod) hücreyi ekrandan taşırıyordu. */
.legal-wrap > *{min-width:0}
.legal, .legal *{overflow-wrap:anywhere;word-break:normal}
.legal table{width:100%;display:block;overflow-x:auto}
/* Dar ekranda başlıkta yer kalmıyor: "Giriş yap" gizlenir, bağlantı
mobil menüde ve alt bilgide zaten var. */
@media (max-width:680px){ .head-act .giris-dg{display:none} }
/* .uyari içindeki uzun bağlantı dar ekranda kutuyu yarıyordu. */
.uyari{max-width:100%;overflow-wrap:anywhere}
.form-wrap{min-width:0;max-width:100%}
/* =====================================================================
HESAP BAĞLANTILARI — MOBİL MENÜ
Başlıktaki "Giriş yap" / "Hesabım" düğmesi dar ekranda gizleniyor
(.head-act .btn-line{display:none} — tasarımın kendi kuralı, yer yok).
Menüye koymazsak telefondan giren kişi hesabına HİÇ ulaşamıyor.
Bu bağlantılar yalnız açık mobil menüde görünür.
===================================================================== */
.nav .sadece-mobil,.nav .nav-ayrac{display:none}
@media (max-width:880px){
.nav.open .sadece-mobil{display:block}
.nav.open .nav-ayrac{display:block;height:1px;background:var(--line-2);margin:9px 0}
.nav.open .nav-hesap{font-weight:800;color:var(--deep)}
}
/* Hesabım · anlatım listesi
Önce .side-list kullanılıyordu ama o sınıf "etiket solda, değer sağda"
için yazılmış: sağa hizalama kuralı buradaki çok satırlı metni telefonda
ortalanmış gibi gösteriyordu. Kendi sınıfı oldu. */
.hesap-liste{border:1px solid var(--line-2);border-radius:12px;background:var(--card);overflow:hidden}
.hesap-liste > div{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
padding:14px 16px;border-bottom:1px solid var(--line)}
.hesap-liste > div:last-child{border-bottom:none}
.hesap-liste .hl-ana{flex:1 1 auto;min-width:0;text-align:left;font-size:15px;line-height:1.5}
.hesap-liste .hl-ana > a{font-weight:700}
.hesap-liste .hl-durum{flex:none;font-weight:800;font-size:12.5px;text-transform:uppercase;
letter-spacing:.06em;white-space:nowrap;padding-top:2px}
@media (max-width:560px){
.hesap-liste > div{flex-direction:column;gap:6px}
.hesap-liste .hl-durum{order:-1}
}
/* =====================================================================
TIKLANABİLİRLİK DÜZELTMESİ (03.09.2026)
Ana sayfadaki sayı kutuları ve kayan şerit düz metindi; insan üstüne
basıyor, hiçbir şey olmuyordu. İkisi de artık bağlantı — görünüm
aynı kalsın diye renk ve alt çizgi devralınıyor, dokunma hedefi
büyütülüyor, imleç el oluyor.
===================================================================== */
.real > a{flex:1 1 190px;padding:20px 22px;border-right:1px solid var(--line);
color:inherit;text-decoration:none;display:block;
transition:background .16s,transform .16s cubic-bezier(.2,.8,.2,1)}
.real > a:last-child{border-right:none}
.real > a:hover{background:var(--paper-2,rgba(0,0,0,.03))}
.real > a:hover b{color:var(--rust-d,var(--rust))}
.real > a:focus-visible{outline:2px solid var(--rust);outline-offset:-2px}
/* Şerit: kayan yazıya basmak zor olmasın diye .mq:hover zaten durduruyor.
Dokunmatikte hover yok; öğe yine de bağlantı olduğu için parmakla
basılabiliyor. */
.band a.it{color:inherit;text-decoration:none;transition:color .14s}
.band a.it:hover{color:var(--rust)}
.band a.it:hover em{color:var(--paper)}
.band a.it:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:4px}
@media (max-width:760px){
.real > a{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line)}
.real > a:last-child{border-bottom:none}
}
/* =====================================================================
MOBİL DOKUNMA DÜZELTMESİ (03.09.2026)
Form alanı yazısı 16px'in altında olunca iOS Safari dokunulduğu anda
sayfayı yakınlaştırıyor ve kullanıcı her alanda uzaklaştırmak zorunda
kalıyor. Düğmeler de 36px'ten kısaydı; parmakla isabet zordu.
Masaüstü görünümü değişmiyor — kural yalnız dar ekranda geçerli.
===================================================================== */
@media (max-width:760px){
input, select, textarea, .gir, .gir-alan{font-size:16px}
.btn, button{min-height:44px}
.qc{min-height:38px;display:inline-flex;align-items:center}
}
/* Yukarıdaki kural bazı yerlerde tutmuyordu: ".suzgec .gir" gibi iki
sınıflı seçiciler tek sınıflı kuralı yeniyor (medya sorgusu özgüllük
eklemez). Yakınlaştırmayı önlemek görünüm tercihi değil kullanılabilirlik
şartı olduğu için burada !important yerinde. Yalnız dar ekranda. */
@media (max-width:760px){
input:not([type=hidden]), select, textarea{font-size:16px !important}
}
/* ===== BLOG =====================================================
Yeni sınıflar; var olan hiçbir kural değiştirilmedi. Kartlar
auto-fill ile diziliyor: telefonda tek sütun, tablette iki,
masaüstünde üç — ayrı medya sorgusu gerekmiyor. */
/* Kart ızgarası biraz daha sık: yüzlerce yazı olacağı için ekranda
daha çok yazı görünsün, kartlar da devasa durmasın. */
/* ===== BLOG ÜST ŞERİDİ =========================================
Eskiden burada koca bir kapak vardı: başlık, "6 yazı", iki satır
açıklama ve arama kutusu. Ekranın tamamını kaplıyordu, ziyaretçi
yazıları görmek için kaydırmak zorunda kalıyordu. Ziyaretçiyi
yazılar karşılamalı; arama ve sıralama tek satıra indirildi. */
.blog-ust{padding:16px 0 12px;border-bottom:1px solid var(--line);background:var(--card)}
.blog-ust-sira{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.blog-ust-baslik{margin:0;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;
line-height:1.15;white-space:nowrap}
.blog-ust-baslik span{font-weight:600;color:var(--muted-2)}
.blog-ara{display:flex;gap:8px;flex:1 1 260px;min-width:0;max-width:520px;margin-left:auto}
.blog-ara label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 12px}
.blog-ara label svg{flex:none;color:var(--muted-2)}
.blog-ara input{flex:1;min-width:0;border:0;background:transparent;outline:none;
font-family:var(--ui);font-size:14.5px;padding:10px 0;color:inherit}
.blog-ara .btn{padding:9px 16px;font-size:14.5px;flex:none}
.blog-sirala{flex:none}
/* Şeritlerin kendi 24px üst boşluğu var; üstüne bir de kenar payı
koyunca arama çubuğuyla şeritler arası boşluk gereksiz açılıyordu. */
.blog-seritler{margin-top:0;padding-top:16px}
.blog-sayac{margin:9px 0 13px;font-family:var(--ui);font-size:13px;color:var(--muted-2)}
.blog-sayac b{color:var(--ink)}
.blog-alt-not{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:14px;color:var(--muted-2);max-width:620px}
@media (max-width:760px){
/* Telefonda başlık ve sıralama bir satır, arama tam genişlik alt satır. */
.blog-ust-baslik{flex:1 1 auto}
.blog-ara{flex:1 1 100%;max-width:none;margin-left:0;order:3}
}
.blog-izgara{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.blog-kart{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;
transition:transform .18s ease,box-shadow .18s ease}
.blog-kart:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(23,21,18,.55)}
.blog-kart-bag{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
/* GÖRSEL KIRPILMAZ.
Eskiden object-fit:cover idi; kutuyu doldurmak için görselin sağını
solunu kesiyordu ve kapaktaki logo ile yazı kadraj dışında kalıyordu.
contain hiçbir şeyi kesmez: görsel kutuya sığar, artan yer yumuşak
bir zeminle dolar. Kapakta marka varsa bu tek doğru davranış. */
.blog-kart-gorsel{display:block;aspect-ratio:16/10;background:var(--card-2,#EDE6D8);
border-bottom:1px solid var(--line);padding:8px}
.blog-kart-gorsel img{width:100%;height:100%;object-fit:contain;display:block}
/* KAPAKSIZ KARTIN ŞERİDİ İNCE.
Önce kapaksız karta da görsel kutusu kadar (16/10) bir alan verilmişti;
ızgara düzgün duruyordu ama kapaksız yazı çoksa ekran boş bej kutularla
doluyordu — ziyaretçiyi görsel değil dolgu karşılıyordu. Şerit ince bir
grup etiketine indirildi: kapaklı kartta görsel görünür, kapaksızda
doğrudan başlık ve özet okunur. */
.blog-kart-bos{display:flex;align-items:center;justify-content:center;
background:linear-gradient(160deg,var(--card-2,#EDE6D8),rgba(196,96,44,.07));
border-bottom:1px solid var(--line);padding:9px 14px;text-align:center;
font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted-2);line-height:1.35}
.blog-kart-ic{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.blog-kart-ust{font-family:var(--ui);font-size:12px;color:var(--muted-2);letter-spacing:.02em}
.blog-kart-tarih{font-family:var(--ui);font-size:12.5px;color:var(--muted-2);letter-spacing:.02em}
/* Başlık en çok üç satır: kartlar aynı boyda kalsın, ızgara bozulmasın. */
.blog-kart-baslik{font-weight:800;font-size:16.5px;line-height:1.3;letter-spacing:-.02em;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-kart-ozet{font-size:13.8px;color:var(--muted);line-height:1.5;flex:1;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-kart-etiket{align-self:flex-start;font-family:var(--ui);font-size:11.5px;font-weight:700;
background:rgba(196,96,44,.12);color:var(--rust-d);padding:3px 9px;border-radius:999px}
.blog-dar{max-width:760px}
.blog-tek{padding:30px 0 60px}
.blog-yol{font-family:var(--ui);font-size:13px;color:var(--muted-2);margin-bottom:14px}
.blog-yol a{color:inherit}
.blog-tek h1{font-size:clamp(27px,4.4vw,40px);line-height:1.16;letter-spacing:-.03em;margin:0 0 10px}
.blog-ust{font-family:var(--ui);font-size:13.5px;color:var(--muted-2);margin:0 0 22px}
/* Yazı sayfasındaki kapak da kırpılmaz: height:auto ile kendi
oranını korur, yalnız çok uzun görseller için üst sınır var. */
.blog-kapak{width:100%;height:auto;max-height:520px;object-fit:contain;
background:var(--card-2,#EDE6D8);border-radius:14px;margin:0 0 26px;display:block}
.blog-govde{font-size:17.5px;line-height:1.72}
.blog-govde p{margin:0 0 18px}
.blog-govde h2{font-size:25px;line-height:1.25;letter-spacing:-.02em;margin:34px 0 12px}
.blog-govde h3{font-size:20px;line-height:1.3;margin:26px 0 10px}
.blog-govde ul{margin:0 0 18px;padding-left:22px}
.blog-govde li{margin:0 0 7px}
.blog-govde blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--rust);
color:var(--muted);font-style:italic}
.blog-govde a{text-decoration:underline;text-underline-offset:2px}
.blog-cagri{margin:38px 0 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.blog-cagri h2{margin:0 0 6px;font-size:21px;letter-spacing:-.02em}
.blog-cagri p{margin:0 0 14px;color:var(--muted);font-size:15.5px}
.blog-cagri-dg{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.blog-devam{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.blog-devam h2{font-size:18px;margin:0 0 10px}
.blog-devam ul{margin:0;padding-left:20px}
.blog-devam li{margin:0 0 6px}
.blog-devam a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:520px){
.blog-govde{font-size:16.5px}
.blog-cagri{padding:18px}
.blog-cagri-dg .btn{width:100%;justify-content:center}
}
.blog-kapali-serit{margin:14px 0 0;padding:11px 15px;border-radius:9px;font-family:var(--ui);
font-size:14px;background:#F6D9D0;color:#8B2E12;border:1px solid #E4B8A8}
.blog-govde figure.blog-gorsel{margin:0 0 22px}
.blog-govde figure.blog-gorsel img{width:100%;height:auto;border-radius:11px;display:block}
.blog-govde figcaption{font-size:13.5px;color:var(--muted-2);margin-top:7px;text-align:center}