/* ============================================================
   DÜZELTME 5 — üst menü, altlık ve parti 5 sayfaları
   (tasarım denetimi, 18 Eylül 2026)

   style.css'ten SONRA yüklenir; paylaşımlı style.css / main.js
   dosyalarına dokunulmaz. Menüyle ilgili olduğu için bütün
   sayfalara _kaynak/menu-birlestir.py üzerinden ekleniyor.
   ============================================================ */

/* ── 1) MENÜDE DOKUNMA HEDEFİ ──────────────────────────────
   Masaüstü/tablet menüsünde bağlantı kutusu yalnız 14-15 px
   yükseğindeydi (dokunmatik 1024 px'lik tablette isabet zordu).
   Satır 44 px'e çıkarıldı; alt çizgi yazının altında kalsın diye
   ::before yeniden konumlandırıldı. Menü çubuğu 64 px, taşmaz. */
@media (min-width:941px){
  .nav-links a{display:inline-flex;align-items:center;min-height:44px}
  .nav-links a::before{bottom:9px}
  .nav-daha-dugme{min-height:44px}
  .nav-alt a{min-height:auto}          /* açılır menü satırları zaten ~44 px */
}

/* ── 1a) TELEFONDA MENÜ DÜĞMESİ ────────────────────────────
   Hamburger 34×35 px idi; telefonun en çok basılan düğmesi olduğu
   için 44×44'e çıkarıldı (çizgiler aynı boyutta kaldı). */
@media (max-width:940px){
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
}

/* ── 1b) 941–1024 px ARASI TAŞMA ───────────────────────────
   e-ihtiyaç sayfasının menü düğmesi "Ücretsiz Dene" (140 px,
   diğerlerinde "Teklif Alın" 112 px). Masaüstü menüsünün başladığı
   941 px'te satır 16 px taşıyordu; bu aralıkta aralıklar kısıldı. */
@media (min-width:941px) and (max-width:1024px){
  .nav-inner{gap:.8rem}
  .nav-links{gap:.85rem}
}

/* ── 2) "e-ihtiyaç" ÖĞESİ AKTİF SAYFA GİBİ GÖRÜNÜYORDU ─────
   eihtiyac.css'te .nav-eh sürekli asit lime; aktif sayfa rengi de
   asit lime. Telefon çekmecesinde alt çizgi olmadığı için hangi
   sayfada olduğunuz hiç anlaşılmıyordu (iki satır aynı renkti).
   Çözüm: marka vurgusu altlıktaki yazımla aynı — yalnız "e-"
   asit lime, gerisi kemik beyazı. Aktifken tamamı asit lime. */
.nav-links a.nav-eh{color:var(--ink)}
.nav-links a.nav-eh .eh-on{color:var(--acid)}
.nav-links a.nav-eh:hover{color:var(--ink)}
.nav-links a.nav-eh.active,
.nav-links a.nav-eh.active .eh-on{color:var(--acid)}

/* ── 3) İŞ ORTAKLIĞI: İKİ KARTLIK IZGARA ───────────────────
   Satır içi style="grid-template-columns:repeat(2,1fr)" ortam
   sorgularını ezdiği için 390 px'te iki kart yan yana kalıyor,
   metin 150 px'lik şeride sıkışıyordu. Artık sınıfla yönetiliyor. */
.sk-kartlar-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){
  .sk-kartlar-2{grid-template-columns:1fr}
}
/* (404'e özgü stiller sayfanın kendi <style> bloğunda durur.) */

/* ============================================================
   TELEFONDA OKUNUR MİKRO ETİKET

   Denetimde 390 px'te 11 px'in altına düşen 40'a yakın etiket çıktı:
   demo sayfasındaki 150 sektör etiketi 9.9 px, çalışma kartlarındaki
   "5 sayfa" 9.9 px, hizmetlerdeki "Hazır çözümü var" 9.9 px, duvar
   etiketindeki tür 9.6 px. Mono + büyük harf + geniş harf aralığı bu
   boyutta telefonda okunmuyor. Masaüstü ölçüleri korunur; yalnızca
   640 px altında tabana çekilir. (Bu dosya her sayfada EN SON yüklenir.)
   ============================================================ */
@media (max-width:640px){
  .ts-sektor,
  .tema-meta span,
  .hazir-cozum-ust,
  .dn-panel .cip,
  .td-etiket .tag,
  .map-tag,
  .vaka-marka small,
  .vaka-grid b,
  .crumb, .crumb a{font-size:.72rem;letter-spacing:.08em}
  .tema-tag, .work-tag, .tema-rozet,
  .sis-kime,
  .tema-bar > span,
  .cal-ozet dt,
  .field label, .form-row label,
  .footer-grid h3,
  .footer-bottom, .footer-bottom a,
  .iki-marka .aciklama{font-size:.75rem}
  .footer-grid h3{letter-spacing:.14em}
}

/* ============================================================
   DOKUNMA HEDEFLERİ — denetimde 30 px'in altında kalanlar
   (onay kutusu 21 px, kırıntı yolu 27 px, referans bağlantıları 29 px,
   alttaki e-ihtiyaç logosu 26 px). Telefonda parmakla ıskalanıyorlardı.
   ============================================================ */
@media (max-width:940px){
  .onay-satir{align-items:flex-start;gap:.7rem}
  .onay-satir input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin-top:.1rem}
  .onay-satir span a{display:inline-block;padding:.35rem 0}
  .crumb a{display:inline-block;padding:.45rem 0}
  .work-link{display:inline-flex;align-items:center;min-height:36px}
  .iki-marka .eh{display:inline-flex;align-items:center;min-height:40px}
  .iki-marka .eh-logo{height:34px}
}

/* Yukarıdaki taban, daha özgül eski kurallara yeniliyordu (.iki-marka span.aciklama,
   .map-wrap .map-tag, .s3-calismalar #sistemler .tema-rozet gibi). Aynı özgüllükle
   tekrar yazılır — !important'a gerek yok. */
@media (max-width:640px){
  .iki-marka span.aciklama{font-size:.75rem}
  .map-wrap .map-tag{font-size:.72rem}
  .s3-calismalar #sistemler .tema-rozet{font-size:.75rem}
  .dn-panel .alt,
  .dn-panel .kim,
  .dn-panel .dn-baslik,
  .dn-panel b{font-size:.72rem}
  .ls-etiket, .ts-etiket{font-size:.75rem}
  .ts-alan .ts-not, .ts-kart span{font-size:.72rem}
  .crumb a{padding:.55rem 0}
}

/* ============================================================
   İKİLİ DÜĞMELER TELEFONDA EŞİT GENİŞLİK

   Ana sayfada duvarın altındaki iki düğme 297 px ve 314 px genişlikteydi;
   yan yana sığmayıp alt alta düşünce farklı uzunlukta iki çubuk gibi
   görünüyordu ("butonların dizilimleri neden böyle"). Telefonda hepsi
   tam genişlik ve ortalı yazı; 640 px üstünde eski davranış sürer.
   ============================================================ */
.ikili-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
@media (max-width:640px){
  .ikili-cta,
  .eh-hero-actions,
  .urun-eylem,
  .uret-gonder-satir,
  .form-aksiyon,
  .form-sonuc-aksiyon{flex-direction:column;align-items:stretch;gap:.7rem}
  .ikili-cta > .btn,
  .eh-hero-actions > .btn,
  .urun-eylem > .btn,
  .uret-gonder-satir > .btn,
  .form-aksiyon > .btn,
  .form-sonuc-aksiyon > .btn,
  .sk-cta > .btn{width:100%;justify-content:center}
}

/* ============================================================
   KİNETİK BAŞLIK SATIRLARI DİP DİBEYDİ
   390 px'te "WEB SİTESİ…" ile "FİKİRDEN ÜRÜNE…" arasında 3 px kalıyor,
   iki şerit tek bir bulanık blok gibi okunuyordu.
   ============================================================ */
@media (max-width:760px){
  .kinetic{padding-block:clamp(2.4rem,7vw,3.4rem) clamp(2rem,5vw,3rem)}
  .k-line + .k-line{margin-top:.34em}
}

/* WhatsApp balonu: telefonda ilk ekranda gizli (main.js .wa-uyku ekler),
   kaydırınca yumuşakça gelir. JS yoksa hiçbir şey değişmez, balon durur. */
@media (max-width:640px){
  .wa-float{transition:transform .3s cubic-bezier(.2,.8,.3,1.4), opacity .25s, box-shadow .3s}
  .wa-float.wa-uyku{opacity:0;transform:scale(.6) translateY(12px);pointer-events:none}
  .wa-float.wa-uyku::after{display:none}
}

/* Alt bilgi: "· Gizlilik (KVKK)" telefonda alt satıra düşünce satır ayıraçla
   başlıyordu. Telefonda ayıraç gizlenir, bağlantı kendi satırında durur. */
@media (max-width:520px){
  .footer-bottom{gap:.35rem}
  .footer-bottom .alt-ayirac{display:block;font-size:0}
  .footer-bottom .alt-ayirac a{font-size:.75rem}
}

/* ============================================================
   MOBİL DENETİM — ÖLÇÜMLE DOĞRULANMIŞ BEŞ HATA
   ============================================================ */

/* 1) KIRINTI YOLU: kap <p class="crumb"> 16 px, içindeki bağlantılar 11.5 px.
   Boy farkı yüzünden satır ikiye bölünüyor ve "/" tek başına asılı kalıyordu.
   .page-hero p (0,2,0) daha özgüldü; aynı özgüllükle yazılır. */
@media (max-width:900px){
  .page-hero .crumb, .page-hero .crumb a, .page-hero .crumb b,
  .td-baslik .crumb, .td-baslik .crumb a{font-size:.74rem;letter-spacing:.09em;line-height:1.5}
  .page-hero .crumb{gap:.1rem .3rem}
}

/* 2) DÜĞME ÇERÇEVESİ GÖRÜNMÜYORDU: rgba(244,243,238,.22) koyu zeminde 1.88:1
   kontrast veriyordu (WCAG 1.4.11 metin dışı eşiği 3:1). Yalnız düğmede açılır;
   --line-2 kart/etiket kenarlıklarında olduğu gibi kalır. */
.btn-outline{border-color:rgba(244,243,238,.42)}
.btn-outline:hover{border-color:var(--acid)}

/* 3) GİFTHORIA TELEFONLARI: 3 görsel 295 px + boşluklar, kap 297 px → üçüncüsü
   alt satıra düşüp yanında koca boşluk bırakıyordu. Sabit yükseklik yerine ızgara. */
@media (max-width:560px){
  .work-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:start}
  .work-phones img{height:auto;width:100%;border-radius:12px}
}

/* 4) ALTLIK İLETİŞİM RİTMİ: bağlantılar 43 px yüksek, düz <li> (adres, çalışma
   saati) 25 px — son iki satır dip dibe yapışıyordu. */
@media (max-width:940px){
  .footer-grid ul{gap:.45rem}
  .footer-grid ul li{line-height:1.55}
  .footer-grid ul li:not(:has(a)){padding:.16rem 0}
}

/* 5) MİKRO ETİKETLER TABLETTE DE KÜÇÜKTÜ: yukarıdaki taban 640 px'le sınırlıydı,
   768/1024 px'te hâlâ 9.9 px etiketler kalıyordu. Tablete kadar genişletilir. */
@media (min-width:641px) and (max-width:1024px){
  .ts-sektor, .tema-meta span, .hazir-cozum-ust, .dn-panel .cip, .td-etiket .tag,
  .map-wrap .map-tag, .vaka-marka small, .vaka-grid b{font-size:.72rem;letter-spacing:.08em}
  .tema-tag, .work-tag, .sis-kime, .tema-bar > span, .cal-ozet dt,
  .field label, .form-row label, .footer-grid h3,
  .footer-bottom, .footer-bottom a,
  .iki-marka span.aciklama, .ls-etiket, .ts-etiket{font-size:.75rem}
  .s3-calismalar #sistemler .tema-rozet{font-size:.75rem}
  .dn-panel .alt, .dn-panel .kim, .dn-panel .dn-baslik, .dn-panel b{font-size:.72rem}
}

/* ============================================================
   İKİNCİ TUR — ÖLÇÜMLE DOĞRULANMIŞ MOBİL HATALAR
   ============================================================ */

/* 1) BAŞLIK SATIRLARI ÜST ÜSTE: 390 px'te .page-hero h1 yazı 30.4 px,
   satır kutusu 31.9 px. Ölçüm: satırlar 171-203, 203-235, 235-267 —
   aralarında 0 px var. Türkçede İ/Ü noktaları ve Ç/Ş kuyrukları bu
   kutunun dışına taşıyor, satırlar birbirine giriyor. */
@media (max-width:760px){
  .page-hero h1{line-height:1.16}
  .sec-head h2, .bolum-baslik{line-height:1.15}
  .hero h1{line-height:1.12}
}

/* 2) DÜĞME YÜKSEKLİKLERİ: .btn-outline 50 px, .btn-white/.btn-primary 48 px —
   yalnız outline'da kenarlık olduğu için. Alt alta gelen iki düğme 2 px kayıktı.
   Hepsi aynı kutu modeline alınır. */
.btn{border:1px solid transparent}
.btn-primary{border-color:var(--acid)}
.btn-white{border-color:#0E0E0C}
.btn-outline{border-color:rgba(244,243,238,.42)}
.btn-outline:hover{border-color:var(--acid)}

/* 3) by* ÜRÜN BAĞLANTILARI: ölçüm 54x17, 76x17, 44x17 — parmakla 17 px'lik
   satıra basılmıyor, yandakine deniyor. Dokunmalı cihazda nefes verilir. */
@media (pointer:coarse){
  .hazir-cozum a{display:inline-block;padding:.3rem .15rem;margin:-.3rem 0}
}

/* 4) DOKUNUNCA :hover KİLİTLENİYORDU — telefonda satıra basınca vurgusu
   üzerinde kalıp satır kayık duruyordu. Vurgular yalnız gerçek fareye. */
@media (hover:none){
  .eh-kime a:hover, .check-list li:hover, .contact-line:hover,
  .sk-kutu:hover, .step:hover{background:inherit;padding-left:inherit;padding-right:inherit}
}

/* 5) ONAY KUTUSU: appearance:auto olduğu için koyu kartta açık gri DOLU kare
   gibi görünüyordu — işaretli sanılıyordu. */
.onay-satir input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:1px solid var(--line-2);border-radius:3px;
  cursor:pointer;transition:background .15s, border-color .15s;
}
.onay-satir input[type=checkbox]:checked{
  background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/68% no-repeat;
  border-color:var(--acid);
}
.onay-satir input[type=checkbox]:focus-visible{outline:2px solid var(--acid);outline-offset:2px}

/* 6) SSS YAN KUTUSUNDAKİ DÜĞME telefonda yarım genişlikteydi (167/350),
   e-ihtiyaç sayfasındaki eşi tam genişlikti. */
@media (max-width:640px){
  .sss-yan .btn, .faq-yan .btn{align-self:stretch;width:100%;justify-content:center}
}

/* Denetimden geriye kalan tek tük küçük yazılar (tablete kadar): duvarın
   üst yazısı 9.6 px, duvar araç düğmeleri 10.6 px, panel maketindeki
   müşteri adı ve kaynak sayısı 10.6-10.9 px, demo sayfasındaki
   "4 tasarım" sayacı 10.9 px. */
@media (max-width:1024px){
  .td-baslik p:not(.crumb){font-size:.76rem;letter-spacing:.09em}
  .td-arac span, .td-arac .ad{font-size:.76rem}
  .dn-defter .kim, .dn-panel .kim, .dn-alt b, .dn-panel b{font-size:.76rem}
  .ts-sektor + span, .ts-baslik span, .ts-grup span{font-size:.76rem}
}