/* ============================================================
   DÜZELTME — PARTİ 2
   Yalnız şu sayfalar yükler: hizmetler, e-ihtiyac, hakkimizda,
   demo-olustur. style.css'e dokunmadan, oradaki kuralların
   üstüne yazar. Tasarım dili aynı: siyah + krem + asit lime.
   Her bölüm hangi hatayı kapattığını söylüyor.
   ============================================================ */

/* ---------- 1. "Birlikte alınca" şeridi ----------
   HATA: iki satıra düşen h2'de satırlar birbirine giriyordu
   (style.css'teki başlık line-height'ı bu boyda çok sıkı).
   HATA: 820px'te metin 410px'e sıkışıp düğmenin yanında
   kocaman boşluk kalıyordu — yığılma sınırı 900px'e çekildi.
   HATA: 1440px'te paragraf 62ch'te kesilip sağında ~330px
   ölü alan bırakıyordu; ölçü h2 ile aynı hizaya getirildi. */
.demo-serit h2{line-height:1.18}
.demo-serit p{max-width:78ch}
@media (max-width:900px){
  .demo-serit{grid-template-columns:1fr;padding:1.4rem}
  .demo-serit .btn{justify-content:center;width:100%}
}

/* ---------- 2. Asit zeminde içi boş başlık ----------
   HATA: .cta-band h2 .serif kelimeyi 1.5px konturlu ve içi
   saydam yazıyor. Büyük ekranda tasarım öğesi, telefonda
   ~28px metinde okunmuyor. Küçük ekranda dolu siyaha döner. */
@media (max-width:620px){
  .cta-band h2 .serif{
    color:#000;-webkit-text-stroke:0;
  }
}

/* ---------- 3. Hizmet kartları ----------
   HATA: kartların içeriği farklı uzunlukta olduğu için
   "Hazır çözümü var" kutuları aynı satırda farklı yükseklikte
   duruyordu. Madde listesi esneyince alt blok hizalanıyor. */
.svc-xl ul{margin-bottom:auto}

/* ---------- 4. Demo oluşturucu: "Şimdi ne oluyor?" ----------
   HATA: sayfa .grid-3/.card/.card-no sınıflarını kullanıyordu
   ama bu sınıflar hiçbir CSS dosyasında yok — bölüm tamamen
   biçimsiz akıyordu. Bölüm sitenin .steps düzenine alındı;
   üç kutu olduğu için dört sütunluk ızgara üçe indirildi. */
.steps.steps-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.steps.steps-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps.steps-3{grid-template-columns:1fr}}

/* ---------- 5. Demo oluşturucu formu ----------
   HATA: gönder düğmesi telefon alanıyla aynı hatta oturmuyordu.
   HATA: 390px'te "Linki kopyala" yazısını sağ alttaki WhatsApp
   düğmesi kapatıyordu; düğmeler tam genişliğe alındı. */
/* Düğme, yanındaki telefon kutusunun ALT kenarıyla aynı hizada dursun.
   (Sol sütunda kutunun altında yardım metni var; flex-end düğmeyi onun
   hizasına indiriyor, 26 px aşağıda kalıyordu.) */
.uret-satir .field.uret-gonder{justify-content:flex-start}
.uret-satir .field.uret-gonder .btn{margin-top:1.62rem}
@media (max-width:720px){
  .onizleme-alt .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 6. Hakkımızda: sayı bandı ----------
   HATA: "3 ay" sayısında ekin başındaki boşluk dev punto
   yüzünden ~40px'lik yarığa dönüşüyordu. Ek artık etiketin
   içinde, sayı yalın duruyor. */

/* ---------- 7. e-ihtiyaç: 19 sistem ızgarası ----------
   HATA: auto-fill ızgara 19 kutuyu bölüştüremeyip satır
   sonunda çizgi rengiyle boyanmış boş hücreler bırakıyordu.
   Sütun sayısı 20'yi tam bölecek şekilde sabitlendi ve
   listeye 20. kutu olarak "tüm sistemler" bağlantısı eklendi. */
.sis-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.sis-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.sis-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.sis-grid{grid-template-columns:1fr}}
.sis-grid li.sis-tumu a{background:rgba(216,255,62,.06)}
.sis-grid li.sis-tumu .sis-ad{color:var(--acid)}

/* ---------- 8. e-ihtiyaç: SSS bölümü ----------
   HATA: .faq 860px'te bitip 1440px'te sağında ~320px ölü alan
   bırakıyordu. Yanına destek kutusu kondu, boşluk kapandı. */
.faq-sarmal{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.4rem;align-items:start}
@media (max-width:1000px){.faq-sarmal{grid-template-columns:1fr;gap:1.8rem}}
.faq-sarmal .faq{max-width:none}
.faq-yan{
  border:1px solid var(--line-2);border-radius:var(--radius,2px);
  padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;
  background:var(--bg-2)
}
.faq-yan p{font-size:.93rem;line-height:1.6;color:var(--muted);font-weight:500;margin:0}
.faq-yan .btn{justify-content:center}

/* ---------- 9. Hakkımızda: çalışma biçimi bölümü ----------
   HATA: sol sütun paragraftan sonra boş kalıyor, sağdaki
   dört maddelik liste yanında ~330px ölü alan oluşuyordu. */
.side-ek{
  margin-top:1.6rem;border-left:2px solid var(--acid);
  padding-left:1rem;font-size:.93rem;line-height:1.65;color:var(--text)
}
.side-ek strong{color:var(--ink)}
.side-ek .btn{margin-top:1rem}

/* ---------- 10. e-ihtiyaç kahraman bölümü ----------
   Üçüncü düğme ikinciyle aynı yere gidiyordu ve üç eşit
   düğme birincil çağrıyı bastırıyordu; metin bağlantısına
   indirildi. Dokunma hedefi 44px korunuyor. */
.eh-hero-link{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--muted);font-weight:600;font-size:.93rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s
}
.eh-hero-link:hover,.eh-hero-link:focus-visible{color:var(--acid);border-bottom-color:var(--acid)}

/* ---------- 11. İki satıra düşen küçük başlıklar ----------
   HATA: style.css'te h1..h4 için line-height:1.05 var. Dev
   punto başlıkta doğru, ama 1–1.3rem'lik kart başlıkları iki
   satıra düştüğünde satırlar birbirine giriyor (390px'te
   "Temayı size göre yazıyoruz", "Kurumsal web sitesi",
   "Müşteri uygulama indirmez" hepsi böyle). Yalnız küçük
   başlıklar için nefes verildi. */
.step h3,.value h3,.svc-xl h3,.eh-neden h3,.eh-kime h3,
.check-list h3,.faq-yan h3,.dn-panel .ad{line-height:1.22}

/* ---------- 12. Önizleme ile sonraki bölüm arası ----------
   Demo üretildikten sonra uyarı metniyle "Şimdi ne oluyor?"
   arasında iki bölüm dolgusu üst üste gelip 390px'te ~250px
   boşluk açıyordu. */
#onizlemePanel{padding-bottom:1.2rem}

/* Eklediğim düğme btn-sm ile 40px kalıyordu; dokunma hedefi 44px. */
.side-ek .btn{min-height:44px}