/* ============================================================================ HİZMET SAYFALARI — ÖLÜ ALAN DÜZENİ · /css/hizmet-duzen.css · 2026-09-23 ---------------------------------------------------------------------------- NE YAPAR Hizmet sayfalarının içerik gövdesini geniş ekranda İKİ SÜTUNLU bir ızgaraya oturtur: bölüm başlıkları solda, okunan metin sağda (tek dikey eksen). Kart ve liste ızgaralarında son sırada tek başına kalan öğeleri (öksüz) kaldırır. NEDEN Kullanıcı 23 Eyl: "sayfalardaki ölü alanları istemiyorum". 1440 px'te ölçüldü: - metin 64ch ölçüsünde; 1120 px kabın sağ ~%40'ı her metin bölümünde boştu; - 4 kartlı ızgaralar (39 sayfa) 3+1, 8 kartlılar 3+3+2 diziliyordu; - 5 maddeli listeler (17 sayfa) 2+2+1, model kartları 5+3 diziliyordu. 64ch ölçüsü BİLEREK korunuyor (08-28: 120 karakterlik satır okunmuyordu). Boşluk metni genişleterek değil, başlığı yana alarak dolduruluyor. KAPSAM Yalnız yerleşim. Renk ve yazı jetonlarına, HTML'e ve metne dokunmaz; bütün renkler hizmet-hizalama.css'in --kt- jetonlarından geliyor (koyu tema dahil). ≥981 px iki sütun; 621–980 px ve ≤620 px yalnız öksüz düzeltmesi. :has() olmayan eski tarayıcıda başlıklar tam genişlikte kalır, metin sağ sütunda akar — bozulmaz. GERİ ALMA (tek satır) Sayfalardaki satırını sil: grep -l "hizmet-duzen.css" hizmetler/*.html Sayfalar hizmet-hizalama.css'in tek sütunlu düzenine birebir döner. ========================================================================== */ /* == 1 · GENİŞ EKRAN: iki sütunlu gövde ================================== */ @media (min-width: 981px) { .content > .container, .faq > .container { --hd-ara: clamp(40px, 5.2vw, 84px); --hd-bolum: clamp(58px, 6vw, 92px); /* hizalama §06 "* + h2" nefesiyle aynı */ display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: var(--hd-ara); align-items: start; } /* Varsayılan: her öğe tam genişlik (kart şeridi, liste, model, rozetler). */ .content > .container > * { grid-column: 1 / -1; min-width: 0; } /* Izgarada kenar boşlukları ÇÖKMEZ (blok akışta çöküyordu). Alt boşluklar sıfırlanıyor, aralık yalnız üstten veriliyor; görünen aralıklar aynı. */ .content > .container > :is(h2, h3, p, ul, .models, .svc-grid) { margin-bottom: 0; } /* -- 1a · Metin bölümü: başlık solda, paragraflar sağda ---------------- */ .content > .container > p { grid-column: 2; } .content > .container > h2:has(+ p) { grid-column: 1; max-width: none; text-wrap: balance; } /* Başlık, ardındaki paragraf sayısı kadar satıra yayılır; yayılmazsa uzun başlık ilk paragrafın satırını şişirir ve ikinci paragraf aşağı düşer. */ .content > .container > h2:has(+ p + p) { grid-row: span 2; } .content > .container > h2:has(+ p + p + p) { grid-row: span 3; } .content > .container > h2:has(+ p + p + p + p) { grid-row: span 4; } .content > .container > h2:has(+ p + p + p + p + p) { grid-row: span 5; } /* Yandaki ilk paragraf başlıkla aynı yükseklikten başlar: başlığın üst nefesi ona da verilir, ilk satırlar optik olarak hizalanır. */ .content > .container > * + h2 + p { margin-top: var(--hd-bolum); } .content > .container > h2 + p { padding-top: .32em; } /* -- 1b · Alt başlıklı bölüm: her h3 + p bir satır --------------------- Solda alt başlık, sağda açıklaması; satırlar ince çizgiyle ayrılır. */ .content > .container > h3 { grid-column: 1; } .content > .container > h3 + p { grid-column: 2; } .content > .container > h3, .content > .container > h3 + p { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--kt-cizgi); } /* h3 19px/1.2, p 17.5px/1.68: ilk satırların yazı gövdesi aynı hizaya gelsin */ .content > .container > h3 { padding-top: 26px; } .content > .container > h3:has(+ p + p) { grid-row: span 2; } .content > .container > h3:has(+ p + p + p) { grid-row: span 3; } /* Ardından liste/kart gelen h3 satır değil ara başlıktır: tam genişlik. */ .content > .container > h3:has(+ :is(ul, div)) { grid-column: 1 / -1; margin-top: 26px; padding-top: 0; border-top: 0; } /* -- 1c · Bloktan sonra gelen yalnız paragraf ---------------------------- Metin ekseninde (sağ sütun) kalır; eskiden listeye/banda 0 px dayanıyordu. */ .content > .container > :is(ul, .features, .models, .svc-grid) + p { margin-top: 30px; } /* Başlıksız kart bandı paragraftan sonra geliyorsa yüzey değişimi nefes ister. */ .content > .container > p + .features { margin-top: clamp(40px, 4.4vw, 64px); } /* -- 1d · İlgili hizmet şeritleri: etiket solda, rozetler metin ekseninde */ .content > .container > .ilgili-hizmetler { display: grid; grid-template-columns: subgrid; align-items: baseline; } .content > .container > .ilgili-hizmetler > b { grid-column: 1; margin: 0; } .content > .container > .ilgili-hizmetler > .ih-liste { grid-column: 2; } /* -- 1e · SSS: başlık solda (kaydırırken yerinde kalır), sorular sağda -- Hem ayrı SSS bölümü (section.faq) hem de içerikteki SSS (hizmetler dizini). */ .content > .container > h2:has(+ .faq-item) { grid-column: 1; max-width: none; text-wrap: balance; position: sticky; top: 104px; } .content > .container > h2:has(+ .faq-item + .faq-item) { grid-row: span 2; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item) { grid-row: span 3; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item + .faq-item) { grid-row: span 4; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item + .faq-item + .faq-item) { grid-row: span 5; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item) { grid-row: span 6; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item) { grid-row: span 7; } .content > .container > h2:has(+ .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item + .faq-item) { grid-row: span 8; } .content > .container > .faq-item { grid-column: 2; max-width: none; margin-inline: 0; } .content > .container > * + h2 + .faq-item { margin-top: var(--hd-bolum); } .faq > .container > * { grid-column: 2; } .faq > .container > h2 { grid-column: 1; grid-row: 1 / span 40; /* boş örtük satırların yüksekliği 0 */ position: sticky; top: 104px; /* yapışkan üst menünün altı */ margin: 0; max-width: none; text-align: left; text-wrap: balance; } .faq > .container > .faq-item { max-width: none; margin-inline: 0; } } /* == 2 · KART IZGARALARI (.features, .models, .svc-grid): öksüz yok ====== */ /* Model kartı içi: hizalama'nın genel ".content h3 { margin-top: 26px }" kuralı kartın içine de giriyordu; başlık üstte 43 px, metin altta 17 px boşlukla dengesiz duruyordu (ölçüldü). Kart iç dolgusu zaten 16 px. */ .content > .container > .models > .model > h3:first-child { margin-top: 0; } /* Geniş: 12 izli ızgara. Varsayılan 3'lü; son sırada 2 kalırsa yarım yarım, 1 kalırsa son dört kart 2×2. 4'ün katı olanlar (4, 8) yer varsa 4'lü. */ @media (min-width: 981px) { .content > .container > :is(.features, .models, .svc-grid) { grid-template-columns: repeat(12, minmax(0, 1fr)); } .content > .container > :is(.features, .models, .svc-grid) > * { grid-column: span 4; } .content > .container > :is(.features, .models, .svc-grid):has(> :last-child:nth-child(3n+2)) > :nth-last-child(-n+2), .content > .container > :is(.features, .models, .svc-grid):has(> :last-child:nth-child(3n+1)) > :nth-last-child(-n+4) { grid-column: span 6; } /* Model kartları küçük (başlık + tek satır): 981 px'ten itibaren 4'lü sığar. */ .content > .container > .models:has(> :last-child:nth-child(4n)):not(:has(> :last-child:nth-child(3n))) > * { grid-column: span 3; } } @media (min-width: 1181px) { /* Hizmet kartları 4'lü için ≥1181 px ister (altında metin sütunu ~160 px'e düşüyor). */ .content > .container > .features:has(> :last-child:nth-child(4n)):not(:has(> :last-child:nth-child(3n))) > * { grid-column: span 3; } } /* Orta: 2'li; tek sayıda kartta sonuncusu tam genişlik. */ @media (min-width: 621px) and (max-width: 980px) { .content > .container > :is(.features, .models, .svc-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content > .container > :is(.features, .models, .svc-grid) > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Dar: hizmet kartları tek sütun (auto-fit 578–620 px arasında 2'liye dönüp öksüz bırakıyordu); model kartları 2'li, tek kalan tam genişlik. */ @media (max-width: 620px) { .content > .container > .features { grid-template-columns: minmax(0, 1fr); } .content > .container > .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content > .container > .models > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* == 3 · MADDE LİSTELERİ (ul): öksüz yok ================================= */ /* Geniş: 6 izli ızgara. Çift sayıda madde 2'li. Tek sayıda: ilk sıra 3'lü, kalanlar 2'li (3 → 3; 5 → 3+2; 7 → 3+2+2). */ @media (min-width: 981px) { .content > .container > ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } .content > .container > ul > li { grid-column: span 3; } .content > .container > ul:has(> li:last-child:nth-child(odd)) > li:nth-child(-n+3) { grid-column: span 2; } .content > .container > ul > li:only-child { grid-column: 1 / -1; } } /* Orta-geniş: 2'li; tek kalan son madde tam genişlik. */ @media (min-width: 769px) and (max-width: 980px) { .content > .container > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content > .container > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ≤768 px: tek sütun (hizalama'nın 420 px eşiği zaten tek sütun veriyor). */