/* ============================================================================= BARIŞ — RESPONSIVE KATMANI · TEK DOĞRULUK KAYNAĞI ============================================================================= Bu dosya baris.css'ten SONRA yüklenir ve mobil/tablet kompozisyonunun tamamını barındırır. --------------------------------------------------------------------------- MASAÜSTÜ SÖZLEŞMESİ (ihlal edilemez) --------------------------------------------------------------------------- Bu dosyadaki HER kural bir medya sorgusu içindedir ve HİÇBİRİ 1180px ve üzerini etkilemez. Dosyada medya sorgusu dışında tek bir bildirim yoktur. Böylece onaylanmış masaüstü tasarımı yapısal olarak korunur. Referans: qa/desktop-baseline.md --------------------------------------------------------------------------- KIRILIM NOKTALARI --------------------------------------------------------------------------- <=374 Küçük telefon 375–479 Telefon 480–767 Büyük telefon 768–899 Tablet dikey 900–1024 Tablet / küçük yatay 1025–1179 Geçiş >=1180 MASAÜSTÜ — BU DOSYA DOKUNMAZ --------------------------------------------------------------------------- İÇİNDEKİLER --------------------------------------------------------------------------- 1. MOBİL NAVİGASYON (çekmece) 2. (sonraki bölümler bu dosyaya eklenecek) ========================================================================== */ /* ========================================================================== 1. MOBİL NAVİGASYON — TAM EKRAN KOYU ÇEKMECE ------------------------------------------------------------------------- Şablonun mobil menüsü, başlığın altına açılan dar bir Bootstrap açılır paneliydi. Yerine tam yükseklikte, kaydırılabilir, premium bir çekmece gelir. Markup DEĞİŞMEZ — aynı .desktop-nav öğesi yeniden konumlandırılır, böylece js/all.js'in aç/kapat mantığı ve aria-expanded davranışı korunur. ========================================================================== */ @media (max-width: 1024px) { /* --- Başlık ---------------------------------------------------------- */ .main-nav.baris-nav { height: 72px !important; /* şablon inline yükseklik yazıyor */ background: var(--baris-black); } .main-nav.baris-nav.small-height { height: 64px !important; } .baris-nav .nav-logo-wrap .logo img { height: 40px; } .baris-nav.small-height .nav-logo-wrap .logo img { height: 36px; } /* Menü tetikleyicisi :: 48x48 dokunma alanı */ .baris-nav .mobile-nav { width: 48px; height: 48px; display: flex !important; align-items: center; justify-content: center; margin: 12px 0 0; border-radius: 2px; transition: background-color 200ms var(--ease); } .baris-nav .mobile-nav:hover, .baris-nav .mobile-nav:focus-visible { background: rgba(255, 255, 255, .06); } .baris-nav .b-nav-icon--menu { width: 24px; height: 24px; } /* --- Çekmece --------------------------------------------------------- */ .main-nav.baris-nav.mobile-on .desktop-nav { position: fixed; top: 72px; left: 0; right: 0; /* js/all.js çekmeceyi slideDown ile açıyor ve animasyon boyunca SATIR İÇİ height yazıyor; bitişte de bıraktığı değer kutuyu 1px'e düşürebiliyor. Satır içi stili yalnızca burada geçersiz kılıyoruz — bu, JS'in yazdığı stile karşı !important'ın meşru olduğu durum. Açık/kapalı durumu hâlâ display ile yönetiliyor, animasyon bozulmuyor. */ height: calc(100svh - 72px) !important; width: 100%; max-width: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0); background: radial-gradient(circle at 88% 4%, rgba(var(--baris-red-rgb), .10), transparent 38%), var(--baris-graphite); border-top: 1px solid rgba(255, 255, 255, .10); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .main-nav.baris-nav.small-height.mobile-on .desktop-nav { top: 64px; height: calc(100svh - 64px) !important; } .main-nav.baris-nav.mobile-on .desktop-nav > ul { display: flex; flex-direction: column; padding: .5rem 0 2rem; } /* --- Üst seviye satırlar --------------------------------------------- */ .main-nav.baris-nav.mobile-on .desktop-nav > ul > li { width: 100%; } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; /* dokunma hedefi */ padding: 0 var(--gutter); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(255, 255, 255, .07); } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li > a.active { color: #fff; box-shadow: inset 3px 0 0 var(--baris-red); } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li > a .b-nav-chevron { width: 20px; height: 20px; color: rgba(255, 255, 255, .5); transition: transform 240ms var(--ease), color 240ms var(--ease); } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li.js-opened > a .b-nav-chevron { transform: rotate(180deg); color: var(--baris-red-onDark); } /* --- Akordiyon içeriği ------------------------------------------------ */ .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub { background: var(--baris-warm-dark-1); border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); box-shadow: none; } /* BT menüsünün iki kolonlu float düzeni çekmeceye sızıyordu; öğeler üst üste biniyordu. Çekmecede her zaman tek kolon. */ /* Dar ekranda tek kolon: masaüstü sütun düzeni mobilde sıkıştırılmaz. */ .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub--2col { column-count: 1; } .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub--2col, .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub { min-width: 0; width: 100%; } .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub > li, .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub--2col > li, .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub--2col > li.mn-sub__lead { float: none; clear: both; width: 100%; border-left: 0; border-right: 0; } /* style.css: `.mobile-on .desktop-nav ul li { overflow: hidden }` Şablonun kendi slide animasyonu için konmuş, ama AÇILAN akordiyonu da kırpıyordu: ebeveyn
  • 357px'te kalırken alt menü 406px oluyor ve SON İKİ SATIR (Logo, Narbulut) görünmüyordu — ekran görüntüsü ve elementFromPoint(195,500) bunu doğruladı (orada «e-Dönüşüm» çıkıyordu). İçerik kırpıldığı için .desktop-nav'ın scrollHeight'i de yüksekliğine eşit kalıyor, çekmece KAYDIRILAMIYORDU. Kırpma kaldırılır; jQuery slideDown zaten animasyon boyunca kendi satır içi overflow'unu yazar. */ .main-nav.baris-nav.mobile-on .desktop-nav ul li { overflow: visible; } .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub--2col::after { content: none; } /* KÖK NEDEN (ekran görüntüsüyle doğrulandı): baris.css içindeki .main-nav.baris-nav.mobile-on .desktop-nav ul li a { height:52px; line-height:52px } bir TORUN seçicidir; üst düzey satırlar için yazılmış olsa da `.mn-sub li a`'ya da uyuyordu. İki sonuç doğuruyordu: 1) sabit height → bağlantı başlık+açıklamayı sığdıramıyor, açıklama taşıp BİR SONRAKİ satırın üstüne biniyordu (ölçüldü: 27px taşma), 2) line-height:52px miras alınıyor → tek satırlık .mn-sub__desc 52px yüksekliğe şişiyordu. min-height açık bir height'i EZEMEZ; eksik olan buydu. Özgüllük zaten yeterli (0,5,4 > 0,4,3), bu yüzden !important'a gerek yok. */ .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a { height: auto; min-height: 52px; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: .6rem var(--gutter) .6rem calc(var(--gutter) + 14px); border-left: 2px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .76); white-space: normal; font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; } .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a.is-current { border-left-color: var(--baris-red); background: rgba(var(--baris-red-rgb), .12); color: #fff; } /* Mobil akordiyonda açıklama satırı görünür kalır — yönelim sağlar */ .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a .mn-sub__desc { display: block; margin-top: 0; height: auto; font-size: .75rem; line-height: 1.35; /* 52px'lik miras satır yüksekliğini keser */ color: rgba(255, 255, 255, .46); white-space: normal; } .main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li.mn-sub__lead a { background: rgba(255, 255, 255, .03); } /* --- Destek Al :: çekmecenin altında güçlü CTA ------------------------ */ .main-nav.baris-nav.mobile-on .desktop-nav > ul > li.baris-nav__cta { margin-top: 1.25rem; padding: 0 var(--gutter); } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li.baris-nav__cta > a { justify-content: center; min-height: 54px; padding: 0 1.5rem; border-bottom: 0; border-radius: 2px; background: var(--baris-red); color: #fff; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: .8125rem; } .main-nav.baris-nav.mobile-on .desktop-nav > ul > li.baris-nav__cta > a:hover { background: var(--baris-red-hover); box-shadow: none; } /* Çekmece açıkken arka plan kaymasın */ body.baris-nav-open { overflow: hidden; } } /* ========================================================================== 2. ANA SAYFA — MOBİL KOMPOZİSYON ------------------------------------------------------------------------- Ölçüm (390px, önce): sayfa 15.685px ≈ 18 telefon ekranı. En büyük kalemler: yazılım 2284 · donanım 1912 · infra 1643 · mali müşavir 1634 · e-dönüşüm 1557 · footer 1527 · teknik 1208. Amaç: masaüstü bölümlerini dikey yığmak değil, her bölüme telefona özgü kompakt bir kompozisyon vermek. ========================================================================== */ @media (max-width: 767px) { /* ---------- HOME SOFTWARE ---------------------------------------------- */ /* Masaüstü 3×2 matris DOKUNULMAZ. Mobilde altı hücre 272px'lik dikey bloklara dönüşüyordu; kompakt satır listesine indirgenir (§18). */ .software__list > li:nth-child(even) .software-row, .software-row { min-height: 0; } .software-row { padding: 1rem var(--gutter) 1rem 0; } .software-row__inner { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "id go" "text text"; column-gap: .75rem; row-gap: .5rem; } /* Sıra numarası mobilde görsel gürültü — logo zaten kimliği taşıyor */ .software-row__num { display: none; } .software-row__logo-plate { margin-bottom: .5rem; padding: 5px 8px; } .software-row__logo-plate .software-row__logo { height: 20px; } .software-row__logo-plate .brand-mark--zirve { height: 23px; } .software-row__logo-plate .brand-mark--mikro { height: 21px; } .software-row__logo-plate .brand-mark--parasut { height: 18px; } .software-row__logo-plate .brand-mark--dia { height: 25px; } .software-row__logo-plate .brand-mark--narbulut { height: 16px; } .software-row__logo-plate .brand-mark--logo { height: 20px; } .software-row .software-row__name { font-size: 1.125rem; } .software-row__role { margin-top: .25rem; font-size: .625rem; } .software-row__text { font-size: .8125rem; line-height: 1.5; } /* Yetenek çipleri mobilde satırı iki katına çıkarıyordu; açıklama zaten aynı bilgiyi taşıyor (§50 görsel fazlalığı azalt). */ .software-row__caps { display: none; } /* ---------- HOME DONANIM & BT ------------------------------------------ */ /* Altı hücre telefonda 248–340px'lik bloklar halinde yığılıyordu (1965px). Hücreler yatay kompakt satıra dönüşür: ikon solda, içerik sağda (§25). .solution__bg mutlak konumlu olduğu için ızgara akışını bozmaz. */ .solution { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "ikon baslik" "ikon metin" "ikon ok"; column-gap: .85rem; align-content: start; min-height: 0; padding: 1.05rem 1.1rem; } .solution__num { display: none; } .solution__tags { display: none; } .solution .b-icon { grid-area: ikon; margin-top: .2rem; } .solution__title { grid-area: baslik; margin: 0; font-size: 1.0625rem; } .solution__text { grid-area: metin; margin-top: .3rem; font-size: .8125rem; line-height: 1.55; } .solution__arrow { grid-area: ok; margin-top: .6rem; padding-top: 0; font-size: .6875rem; } /* Görsel hücre görsel çıpa olarak kalır — ama tam ekran değil */ .solution--media { min-height: 190px; align-content: end; } /* ---------- HOME E-DONUSUM --------------------------------------------- */ .edonusum-step { padding-top: 1rem; } .edonusum-step__title { font-size: .9375rem; } .edonusum-step__text { font-size: .78125rem; line-height: 1.45; } .edonusum__docs { margin-top: 1.5rem; row-gap: .5rem; } .edoc { padding: .9rem 1rem; } .edoc .edoc__name { font-size: .9375rem; } .edoc .edoc__desc { font-size: .75rem; } /* ---------- HOME TEKNIK HIZMETLER (destek) ----------------------------- */ .support-item { padding: .7rem .25rem; } .support-item__title { font-size: 1rem; } .support-item__text { margin-top: .15rem; font-size: .8125rem; line-height: 1.5; } .support__actions { margin-top: 1.5rem; } .support__actions .b-btn { width: 100%; justify-content: center; } /* ---------- HOME MALI MUSAVIR ------------------------------------------ */ /* baris.css @767 içinde .mm-step ikonu gövdenin ÜSTÜNE alıyordu (grid-template-columns: minmax(0,1fr) + row-gap), adım başına ~160px. Telefonda ikon SOLDA tek kolon liste daha kompakt ve daha okunur. */ /* 8 adım var: tek kolona zorlamak bölümü UZATIYOR (ölçüldü: 1642 vs 1474). İki kolon korunur, kazanç ikonun sola alınmasından gelir. */ .mm__steps { row-gap: .35rem; } .mm-step { grid-template-columns: 22px minmax(0, 1fr); column-gap: .7rem; row-gap: 0; padding: .8rem .25rem .8rem 0; } .mm-step .b-icon { width: 20px; height: 20px; margin-top: .1rem; } .mm-step__title { font-size: .9375rem; } .mm-step__text { margin-top: .15rem; font-size: .8125rem; line-height: 1.45; } /* ---------- HOME BT ALTYAPISI ------------------------------------------ */ /* Şema: masaüstü 4:1 şeridinin küçültülmüş hâli DEĞİL, kavramsal olarak sadeleştirilmiş dikey zincir (bkz. index.php · MOBİL TOPOLOJİ). Önce 350x125'lik okunamayan bir minyatürdü. */ .baris-home .netviz--desktop, .baris-home .netviz--tablet { display: none; } /* 360:380 oran; genişlik büyüdükçe yükseklik de büyür. 430px'te 412px'e çıkıyordu — hedef bant 280–380 (§18), bu yüzden genişlik sınırlanır. */ .baris-home .netviz--mobile { display: block; max-width: 356px; margin-inline: auto; } .infra__network { padding-top: 1.25rem; } /* Etiketler zumsuz okunmalı (§18): hem punto hem kontrast yükselir */ .netviz__label { font-size: 11px; letter-spacing: .06em; fill: rgba(255, 255, 255, .58); } .infra-item { padding: .85rem .25rem .85rem 0; } .infra__index { row-gap: 0; } .infra-item__key { font-size: .625rem; } .infra-item__title { margin: .3rem 0 .2rem; font-size: 1rem; } .infra-item__text { font-size: .8125rem; line-height: 1.5; } /* ---------- HOME ZIRVE -------------------------------------------------- */ /* Ekran görseli telefonda 440px kaplıyordu; bölüm 1109px'e çıkıyordu. Barış ekran kompozisyonu şerit olarak kalır, bölümü ezmez (§33). baris.css'teki .zirve__visual .b-visual (0,2,0) ile aynı özgüllük — bu dosya sonra yüklendiği için kaynak sırasıyla kazanır, !important yok. */ .zirve__visual .b-visual { height: clamp(190px, 26vh, 240px); min-height: 0; } /* ---------- HOME KURUMSAL ---------------------------------------------- */ .about__points { row-gap: 0; } .about-point { padding: .9rem .25rem .9rem 0; } .about-point h3 { margin-bottom: .3rem; font-size: 1rem; } .about-point p { font-size: .8125rem; line-height: 1.5; } /* ---------- HOME DOKUNMA HEDEFLERI ------------------------------------- */ /* Birincil eylemler telefonda tam genişlik — 44px'lik dokunma hedefi (§45). .b-btn genel bir bileşen; bu oturum ana sayfa kapsamlı olduğu için kural body.baris-home ile sınırlandırılır. */ .baris-home .b-btn { width: 100%; justify-content: center; } /* ---------- HOME PARTNERS ---------------------------------------------- */ .partner-rail__item { min-height: 68px; } /* ---------- HOME CTA ---------------------------------------------------- */ .cta .b-actions { gap: .5rem; } .cta .b-btn { width: 100%; justify-content: center; } /* ---------- HOME FOOTER ------------------------------------------------- */ /* Tek kolonda 1527px'e çıkıyordu (§41). Bağlantı grupları iki kolona alınır, marka bloğu tam genişlikte kalır. KAPSAM: footer elements/footer.php'den geldiği için 26 sayfanın HEPSİNDE ortak. Bu oturum yalnızca ana sayfa kapsamlı olduğundan kural body.baris-home ile sınırlandırılır — diğer 25 sayfa etkilenmez. */ .baris-home .b-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; } .baris-home .b-footer__brand { grid-column: 1 / -1; padding-right: 0; } .baris-home .b-footer__logo img { max-width: 190px; } .baris-home .b-footer__statement { font-size: .875rem; } .baris-home .b-footer__col h2 { font-size: .6875rem; margin-bottom: .75rem; } .baris-home .b-footer__col li + li { margin-top: .4rem; } .baris-home .b-footer__col a { font-size: .8125rem; } .baris-home .b-footer__bottom { flex-direction: column; gap: .35rem; align-items: flex-start; } } /* ========================================================================== 3. ANA SAYFA — TABLET ------------------------------------------------------------------------- 768–1179 telefon değildir: iki kolonlu ızgaralar, daha büyük görseller, daha geniş oluklar. Navigasyon masaüstü menüsü rahat sığana kadar çekmece olarak kalır (§6) — sıkışık masaüstü menüsü yerine güçlü çekmece. ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { /* ---------- TABLET BT ALTYAPISI ---------------------------------------- */ /* Masaüstüyle AYNI 6 düğüm, ama 4:1 şerit yerine 680x380'lik daha kare bir çerçeve: tabletin genişliği kullanılır, etiketler ezilmez (§21). */ .baris-home .netviz--desktop, .baris-home .netviz--mobile { display: none; } /* 680:380 oran; 1024'te 932x521'e çıkıyordu — şema bölümü ezmesin. */ .baris-home .netviz--tablet { display: block; max-width: 748px; margin-inline: auto; } /* Yazılım matrisi 2 kolon — masaüstü 3'lüsü portre tablete sıkışmasın */ .software-row { min-height: 240px; } /* İş ortağı rayı 3 kolon × 2 satır */ .partner-rail__item { min-height: 76px; } /* ---------- TABLET FOOTER ---------------------------------------------- */ /* 3 kolona 4 bağlantı grubu sığmıyordu: "BT & Destek" tek başına ikinci satıra düşüp sağında geniş bir boşluk bırakıyordu. 2×2 dengeli (§42). */ .baris-home .b-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .baris-home .b-footer__brand { grid-column: 1 / -1; padding-right: 0; } } /* ---------- TABLET HERO ------------------------------------------------- */ /* Hero her boyutta tam kanama sinematik bir kompozisyon; tablette de yığılmış masaüstü değil. Sorun oranıydı: 768 ve 1024'te 860px — masaüstündeki 760px'ten DAHA uzun. Yükseklik .hero__track'ten değil .hero'dan geliyor: baris.css @1024 içindeki clamp(680px, 88vh, 860px) her iki genişlikte de tavana oturuyordu. 1025–1179 kapsam DIŞI: oradaki 792px zaten masaüstüne yakın ve 1180'deki devir teslimini geriye sıçratmamalı (§15). */ @media (min-width: 768px) and (max-width: 1024px) { .hero { min-height: clamp(620px, 76vh, 740px); } } /* 900px üstü tabletlerde ray 4 kolona geçer — 1180'deki masaüstü devir teslimi ani bir sıçrama olmaktan çıkar (§6). */ @media (min-width: 900px) and (max-width: 1179px) { .hero-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-rail__item:nth-child(n+3) { border-top: 0; } } /* ========================================================================== 4. ANA SAYFA — YATAY (LANDSCAPE) / KISA GÖRÜNÜM ------------------------------------------------------------------------- Dikey için yazılmış min-height'lar yatayda devasa bir hero üretiyordu: 844x390'da hero 679px, yani ekranın 1.74 katı — birincil CTA katlamanın ALTINDA kalıyordu (ölçüldü). Burada ölçü svh ve içeriğe devredilir. Hero GİZLENMEZ; yalnızca dikey nefes payı kısılır (§24–25). ========================================================================== */ @media (max-width: 1179px) and (max-height: 520px) and (orientation: landscape) { .baris-home .hero { min-height: 0; padding-bottom: 0; } .baris-home .hero__track { min-height: clamp(248px, 66svh, 320px); } /* İçerik bloğunun kendi dikey nefes payı da kısılır */ .baris-home .hero-slide__content { padding-top: 1rem; padding-bottom: 1rem; } .baris-home .hero-slide__lead { margin-top: .6rem; } .baris-home .hero-slide__actions { margin-top: .9rem; } .baris-home .hero-slide--a .hero-slide__title, .baris-home .hero-slide--b .hero-slide__title, .baris-home .hero-slide--c .hero-slide__title { font-size: clamp(1.55rem, 4vw, 2rem); line-height: 1.1; } .baris-home .hero-slide__lead { font-size: .875rem; line-height: 1.5; max-width: 52ch; } /* Yatayda genişlik var: butonlar yan yana, tam genişlik değil */ .baris-home .hero-slide__actions { flex-direction: row; flex-wrap: wrap; gap: .5rem; } .baris-home .hero-slide__actions .b-btn { width: auto; } .baris-home .b-btn--hero { min-height: 44px; padding: .6rem 1.1rem; } /* Hizmet rayı yatayda tek satır — dört sütun sığar */ .baris-home .hero-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .baris-home .hero-rail__item:nth-child(n+3) { border-top: 0; } /* Bölüm ritmi de kısalır, yoksa her bölüm birkaç ekran sürer */ .baris-home .b-section { padding-block: clamp(2rem, 6vh, 3rem); } } /* ========================================================================== 5. ANA SAYFA — MOBİL TİPOGRAFİ ------------------------------------------------------------------------- Sorun ölçüldü, tahmin edilmedi (390px, önce): · .mm__steps 12 kolonluk ızgarada 5 kolonda kalıyordu → adım 60px, başlık 23px'lik bir kutuda 2 satıra sarıyordu. Bölümdeki tek gerçek ızgara hatası. · Bölüm başlıkları 21–23 karakter/satır (hedef 12–16) → gelişigüzel kırılma · Gövde metinleri 13px, kart açıklamaları 44–45 karakter/satır · Kart BAŞLIKLARI gövde satır yüksekliği taşıyordu (lh 1.65) · Hero lead 41 karakter/satır, lh 1.70 · CTA H2'de text-wrap yok → 4 satır, yetim kelime ========================================================================== */ @media (max-width: 767px) { /* ---------- TİPOGRAFİ RİTİM TOKEN'LARI --------------------------------- */ /* Rastgele margin yerine tek bir ölçek. Yalnızca ana sayfa kapsamında. */ .baris-home { --type-gap-xs: .5rem; /* 8px — etiket ↔ başlık */ --type-gap-sm: .875rem; /* 14px — eyebrow ↔ H1 */ --type-gap-md: 1.25rem; /* 20px — H1 ↔ lead */ --type-gap-lg: 1.625rem; /* 26px — lead ↔ CTA */ } /* ---------- IZGARA HATASI (tipografiyi bozan asıl neden) --------------- */ .baris-home .mm__steps { grid-column: 1 / -1; } /* ---------- ETİKET / EYEBROW ------------------------------------------- */ /* .16em, 11px Türkçe versalde fazla; harfler dağılıyordu (§30). */ .baris-home .b-eyebrow, .baris-home .section-index, .baris-home .software-row__role, .baris-home .solution__arrow, .baris-home .b-footer__col h2 { letter-spacing: .1em; } .baris-home .b-eyebrow, .baris-home .section-index { font-size: .6875rem; line-height: 1.4; } .baris-home .software-row__role { font-size: .6875rem; } /* ---------- HERO -------------------------------------------------------- */ .baris-home .hero-slide__title { text-wrap: balance; } /* Slayt 03 metni diğerlerinden belirgin şekilde uzun. Aynı punto, .hero-slide__line span'ları blok olduğu için «Güçlü Bir» gibi zayıf bir satır üretiyordu. §9: ham CSS değeri değil GÖRSEL AĞIRLIK eşit olmalı — bu yüzden 03 kendi puntosunu alır. */ .baris-home .hero-slide--c .hero-slide__title { font-size: 2.125rem; } .baris-home .b-eyebrow { margin-bottom: var(--type-gap-sm); } .baris-home .hero-slide__lead { margin-top: var(--type-gap-md); max-width: 31ch; /* ≈ 37 gerçek karakter/satır, 3 satır */ font-size: 1rem; line-height: 1.58; color: rgba(255, 255, 255, .72); text-wrap: pretty; } .baris-home .hero-slide__actions { margin-top: var(--type-gap-lg); } /* ---------- BÖLÜM GİRİŞ SİSTEMİ ---------------------------------------- */ /* Üç seviye anında ayırt edilebilir olmalı: etiket / başlık / destek (§10) */ /* NOT: Inter'de 1ch ≈ 0.68em, yani "0" glifi ortalama harften GENİŞ. 16ch satır başına ~21 karakter veriyordu. Hedef 12–16 gerçek karakter olduğu için değer ölçüme göre 13ch'e çekildi (§11). */ .baris-home .section-title, .baris-home .cta__title { max-width: 15ch; line-height: 1.08; text-wrap: balance; } .baris-home .section-lead, .baris-home .cta__lead, .baris-home .solutions__aside p, .baris-home .edonusum__body p, .baris-home .about__body p, .baris-home .support__body > p { max-width: 32ch; /* ≈ 39 gerçek karakter/satır */ font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .70); text-wrap: pretty; } /* ---------- GİRİŞ → İÇERİK RİTMİ --------------------------------------- */ /* Ölçülen boşluklar tutarsızdı: 72 / 56 / 40 / 32 / 32 / 32 / 48px. .b-grid satır boşluğu zaten 32px; üstüne binen margin'ler eşitlenir. */ .baris-home .software__list, .baris-home .edonusum__flow, .baris-home .edonusum__docs, .baris-home .about__points, .baris-home .solutions-grid, .baris-home .infra__index { margin-top: .5rem; } /* ---------- KART / SATIR BAŞLIKLARI ------------------------------------ */ /* Başlıklar gövde satır yüksekliği taşıyordu — hiyerarşi bu yüzden zayıftı */ .baris-home .edonusum-step__title, .baris-home .edoc__name, .baris-home .support-item__title, .baris-home .mm-step__title, .baris-home .infra-item__title, .baris-home .about-point h3, .baris-home .solution__title, .baris-home .software-row__name { line-height: 1.22; } /* ---------- KART / SATIR GÖVDE METİNLERİ ------------------------------- */ /* 13px + 44 karakter/satır "küçültülmüş masaüstü"ydü. 14.5px + ölçülü en. */ .baris-home .solution__text, .baris-home .support-item__text, .baris-home .infra-item__text, .baris-home .about-point p, .baris-home .software-row__text { font-size: .90625rem; /* 14.5px */ line-height: 1.5; max-width: 31ch; /* ≈ 38 gerçek karakter/satır */ color: rgba(255, 255, 255, .68); } .baris-home .mm-step__text { font-size: .875rem; line-height: 1.45; } .baris-home .edoc__desc { font-size: .84375rem; line-height: 1.45; } /* Yazılım satırında açıklama 2 satırla sınırlanır; TAM İÇERİK her satırın kendi detay sayfasında erişilebilir kalır (§35 — kritik metin kırpılmaz). */ .baris-home .software-row__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- YAZILIM SATIRI: OKUMA SIRASI (§15–16) ---------------------- */ /* DOM sırası logo → AD → kategori; ekranda ise kategori ADIN ÜSTÜNDE olmalı. Ok, logonun yanında havada duruyordu; açıklamanın sonuna alınır, böylece satır tek bir tasarlanmış birim gibi okunur: LOGO / KATEGORİ / AD / AÇIKLAMA → OK */ .baris-home .software-row__inner { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "id id" "text go"; row-gap: .55rem; } .baris-home .software-row__id { display: flex; flex-direction: column; align-items: flex-start; } .baris-home .software-row__logo-plate { order: 0; margin-bottom: .65rem; } .baris-home .software-row__role { order: 1; margin: 0 0 .1rem; } .baris-home .software-row .software-row__name { order: 2; margin: 0; } .baris-home .software-row__go { align-self: center; } /* Uzun başlıklarda 15ch, text-wrap:balance'ı sıkıştırıp «da doğru» / «bir engel» gibi zayıf satırlar üretiyordu; bu ikisi daha geniş ölçü alır. */ .baris-home #altyapi .section-title { max-width: 18ch; } /* CTA'da balance TERS etki yapıyordu: dört eşit satıra bölmek için «bir engel» gibi zayıf bir satır üretiyordu. Doğal sarma satırları doldurup üçe indiriyor; pretty yalnızca yetim kelimeyi engeller (§29). */ /* .cta__title içindeki iki authored blok olduğu için her biri ayrı ayrı sarıyor ve «önünde» / «çıkaralım.» gibi tek kelimelik satırlar üretiyordu. Telefonda satır akışına bırakılır; balance yerine pretty. */ .baris-home .cta__title { max-width: none; text-wrap: pretty; } .baris-home .cta__title span { display: inline; } /* ---------- BÖLÜME ÖZGÜ TON ------------------------------------------- */ /* Mali Müşavir: BT'nin sert teknik tonu değil, daha editoryal ve sıcak (§20) */ .baris-home #mali-musavir .section-lead { line-height: 1.68; max-width: 33ch; } /* Zirve: yetenek çipleri başlıkla yarışmasın; ikincil kalsınlar (§21) */ .baris-home .zirve__caps { font-size: .8125rem; } .baris-home .zirve__caps li { color: rgba(255, 255, 255, .58); } /* Çözüm Ekosistemi: içerik logolardır, başlık bölümü yutmasın (§23) */ .baris-home .partner-rail__title { font-size: 1.75rem; /* 28px */ line-height: 1.12; letter-spacing: -.02em; max-width: 15ch; text-wrap: balance; } /* Kapanış CTA: güçlü olsun ama bir bölüm daha olmasın (§25) */ .baris-home .cta__title { font-size: 1.9375rem; } /* 31px */ .baris-home .cta__lead { max-width: 32ch; } /* ---------- BUTON ------------------------------------------------------- */ .baris-home .b-btn { font-size: .875rem; letter-spacing: .08em; } /* ---------- FOOTER ------------------------------------------------------ */ .baris-home .b-footer__statement { font-size: .9375rem; line-height: 1.6; max-width: 32ch; } .baris-home .b-footer__col h2 { font-size: .75rem; } .baris-home .b-footer__col a { font-size: .90625rem; } } /* ========================================================================== 6. ANA SAYFA — TABLET TİPOGRAFİSİ ------------------------------------------------------------------------- Tablet, büyütülmüş telefon DEĞİLDİR (§27). Başlıklar büyür ama metin sütunları dizginlenir; ölçülen sorunlar: hero lead 62 karakter/satır, bölüm lead'i lh 1.70, kart gövdesi 14px. ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { .baris-home .section-title, .baris-home .cta__title, .baris-home .partner-rail__title { text-wrap: balance; } /* Ölçü: başlık büyüsün, paragraf 900px'e yayılmasın */ .baris-home .hero-slide__lead { max-width: 34ch; /* ≈ 55 karakter/satır */ line-height: 1.6; } .baris-home .section-lead, .baris-home .cta__lead, .baris-home .solutions__aside p, .baris-home .edonusum__body p, .baris-home .about__body p { max-width: 44ch; /* ≈ 54 karakter/satır */ font-size: 1.0625rem; line-height: 1.62; } /* Kart gövdesi telefondan büyük olmalı; 14px tablette küçük kalıyordu */ .baris-home .solution__text, .baris-home .support-item__text, .baris-home .infra-item__text, .baris-home .about-point p, .baris-home .software-row__text { font-size: .9375rem; /* 15px */ line-height: 1.55; max-width: 40ch; } .baris-home .b-footer__col a { font-size: .9375rem; } /* ---------- TABLET ZİRVE: FOTOĞRAF + EKRAN TEK KOMPOZİSYON ------------- */ /* KÖK NEDEN (ölçüldü, 768): .zirve__visual bir flex kolon ve İKİ çocuğu var — figure.b-visual (400px) + div.zirve__screen (278px, margin-top:-88px). 400 + 278 - 88 = 590px, ızgara satırının tam boyu. Yani "boşluk" aslında BOŞLUK DEĞİL: örtüşme masaüstü için ayarlanmış, tablette ise yetersiz kalıp koyu fotoğrafın altında ölü bir bant bırakıyordu. Çözüm negatif margin UYDURMAK değil, örtüşmeyi bu kırılımda doğru ölçeklemek: fotoğraf biraz kısalır, ekran gerçekten fotoğrafın ÜSTÜNE oturur — ikisi tek bir kompozisyon olarak okunur (§35–36). */ .baris-home .zirve__visual .b-visual { height: clamp(290px, 34vh, 350px); } .baris-home .zirve__screen { margin-top: -22%; margin-left: 7%; align-self: stretch; } } /* ========================================================================== 7. DOKUNMATİK — YAPIŞIK HOVER DURUMU ------------------------------------------------------------------------- baris.css'te :hover kuralları zaten `(hover: hover) and (pointer: fine)` içinde. ANCAK :focus-within kuralları (baris.css ~1795–1810) korumasızdı: telefonda bir karta dokunmak bağlantıya odak veriyor, odak da dokunuştan sonra KALIYOR — kart masaüstündeki açık/hover görünümüne kilitleniyordu (ekran görüntüsünde Mikro / Mikrogrup böyleydi). Burada yalnızca DOKUNMATİKTE odak kaynaklı açık görünüm geri alınır. :focus-visible'a DOKUNULMAZ — klavye kullanıcısı göstergesini korur. Masaüstü (hover: hover) bu bloktan hiç etkilenmez. ========================================================================== */ @media (hover: none) { .baris-home .software-row:focus-within::before, .baris-home .software-row:focus-within::after { transform: scaleY(0) scaleX(0); } .baris-home .software-row:focus-within .software-row__name.software-row__name { color: #fff; } .baris-home .software-row:focus-within .software-row__role { color: rgba(255, 255, 255, .55); } .baris-home .software-row:focus-within .software-row__text { color: rgba(255, 255, 255, .68); } .baris-home .software-row:focus-within .software-row__num { color: rgba(255, 255, 255, .55); } /* Dinlenme durumundaki DEĞERLERE dönülür (ölçüldü), şeffafa değil: şeffaf yapmak logo plakasını ve oku görünmez kılıyordu. */ .baris-home .software-row:focus-within .software-row__logo-plate { background: rgba(255, 255, 255, .93); } .baris-home .software-row:focus-within .software-row__go { background: rgba(255, 255, 255, .75); transform: none; } /* Dokunma geri bildirimi: yalnızca parmak basılıyken, kalıcı değil */ .baris-home .software-row:active { background: rgba(255, 255, 255, .04); } /* Aynı yapışma riski taşıyan diğer ana sayfa kartları */ .baris-home .solution:focus-within, .baris-home .edoc:focus-within { background: inherit; } } /* ========================================================================== 8. e-DÖNÜŞÜM — GERÇEK DİKEY ZAMAN ÇİZELGESİ (telefon) ------------------------------------------------------------------------- ÖNCEKİ HÂL (reddedildi): baris.css @767 içinde .edonusum__flow::before { display: none } → bağlayıcı YOK .edonusum-step { border-top: 1px solid ... } → tam genişlikte yatay ayraçlar Yani süreç, üstünde nokta duran bir dizi yatay çizgi gibi okunuyordu. YENİ YAPI: TEK bir dikey bağlayıcı; düğümler çizginin ÜZERİNDE; metin çizginin SAĞINDA. ● Muhasebe │ Kayıtların yazılımda oluşması ○ e-Belge ========================================================================== */ @media (max-width: 767px) { .baris-home .edonusum__flow { position: relative; grid-template-columns: 1fr; row-gap: 0; } /* Yatay bağlayıcı DİKEYE çevrilir (766'da display:none idi) */ .baris-home .edonusum__flow::before { display: block; top: 7px; bottom: 14px; left: 5px; right: auto; width: 1px; height: auto; background: rgba(255, 255, 255, .17); } /* Yatay ayraçlar kaldırılır; metin sağdaki sütuna alınır */ .baris-home .edonusum-step { border-top: 0; padding: 0 0 1.6rem 30px; /* düğüm sütunu 30px */ min-height: 0; } .baris-home .edonusum-step:last-child { padding-bottom: 0; } .baris-home .edonusum-step__dot { top: 2px; left: 0; z-index: 2; } .baris-home .edonusum-step__title { margin-top: -2px; } /* --- Tek bir birincil aktif düğüm (§7) --------------------------------- Önceden ilk VE son adım kırmızıydı, koyu geçişi de 3. adıma kırmızı veriyordu: üç aşama aynı anda seçili görünüyordu. Telefonda yalnızca İLK adım aktif kalır, diğerleri sakin halka olur. */ .baris-home .b-section--dark .edonusum-step:last-child .edonusum-step__dot, .baris-home .b-section--dark .edonusum-step:nth-child(3) .edonusum-step__dot { background: var(--baris-surface-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .baris-home .b-section--dark .edonusum-step:first-child .edonusum-step__dot { background: var(--baris-red); box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .16); } } /* ========================================================================== 9. DONANIM & BT — SATIR SIKILAŞTIRMA (telefon) ------------------------------------------------------------------------- Kompozisyon KORUNUR (büyük teknik fotoğraf + kırmızı ikon + beyaz başlık + sönük destek metni). Yalnızca satır yoğunluğu ve etiket harf aralığı düzeltilir (§9–10). ========================================================================== */ @media (max-width: 767px) { .baris-home .solution { padding: .9rem 1.1rem; } .baris-home .solution__title { font-size: 1.125rem; } /* 18px */ .baris-home .solution__text { margin-top: .25rem; } /* 14.5px korunur */ /* Etiketler otoriter kalmalı ama YAPAY aralıklı görünmemeli: .16em → .07em (§10). Aynı sorun bölüm bağlantılarında da vardı. */ .baris-home .solution__arrow { margin-top: .5rem; font-size: .8125rem; /* 13px */ letter-spacing: .07em; } .baris-home .b-link, .baris-home .support__actions .b-btn, .baris-home .solutions__aside .b-link { letter-spacing: .07em; } } /* ========================================================================== 10. KÜÇÜK TELEFON (<=374) ------------------------------------------------------------------------- 360'ta Mali Müşavir adımları 2 kolonda kalınca gövde sütunu 115px'e düşüyor, açıklamalar 3 satıra bölünüyor ve satırlar tırtıklı görünüyordu (ekranda doğrulandı). Bu genişlikte tek kolon DAHA OKUNUR. Kapsam <=374: 390 ve 430 iki kolonlu düzenini korur. ========================================================================== */ @media (max-width: 374px) { .baris-home .mm__steps { grid-template-columns: minmax(0, 1fr); } .baris-home .mm-step { grid-template-columns: 22px minmax(0, 1fr); padding: .7rem .25rem .7rem 0; } /* Kart açıklamaları da bu genişlikte biraz daha nefes alsın */ .baris-home .solution__text, .baris-home .software-row__text { max-width: none; } } /* ========================================================================== 11. TABLET e-DÖNÜŞÜM SÜRECİ (768–1179) ------------------------------------------------------------------------- ONAYLANMAYAN DURUM: baris.css @900 bloğu tablette süreci grid-template-columns: repeat(3, ...) → 5 aşama 3+2 diye kırılıyor .edonusum__flow::before { display: none } → BAĞLANTI YAPISI YOK Sonuç yapısal olarak yarım görünüyordu. Tablette genişlik 5 aşamayı yatay taşımaya yeter (768'de adım ~136px), bu yüzden masaüstündeki YATAY yapı korunur ama bağlayıcı GÖRÜNÜR kalır. Telefondaki dikey zaman çizelgesi <=767'de kalır; buraya sızmaz. ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { .baris-home .edonusum__flow { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(10px, 1.4vw, 20px); row-gap: 0; } /* Yatay bağlayıcı geri getirilir (gizlenmiş değil, görünür yapı) */ .baris-home .edonusum__flow::before { display: block; top: 5px; left: 0; right: 0; bottom: auto; width: auto; height: 1px; background: rgba(255, 255, 255, .17); } .baris-home .edonusum-step { border-top: 0; padding: 1.35rem .5rem 0 0; } .baris-home .edonusum-step__dot { top: 0; left: 0; } .baris-home .edonusum-step__title { font-size: .9375rem; line-height: 1.25; } .baris-home .edonusum-step__text { font-size: .8125rem; line-height: 1.4; } /* Tek birincil aktif düğüm — telefonla aynı hiyerarşi */ .baris-home .b-section--dark .edonusum-step:last-child .edonusum-step__dot, .baris-home .b-section--dark .edonusum-step:nth-child(3) .edonusum-step__dot { background: var(--baris-surface-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .baris-home .b-section--dark .edonusum-step:first-child .edonusum-step__dot { background: var(--baris-red); box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .16); } } /* ========================================================================== 12. ANA SAYFA — MOBİL SANAT YÖNETİMİ ------------------------------------------------------------------------- YAZILIM DİZİNİ: kart yığınından editoryal listeye ------------------------------------------------------------------------- ÖNCEKİ SORUN (ekranda görüldü, ölçüyle değil): · her satırın kendi kutusu vardı (arka plan + sağ/alt kenarlık) ve tek/çift satırlar farklı zeminler alıyordu → altı yığılı dikdörtgen, yönetim paneli hissi · logo plakası metnin ÜSTÜNDE tek başına duran beyaz bir tuğlaydı · açıklama addan kopuktu, ok sağda ayrı bir hizada asılı kalıyordu KARAR: kutuyu kaldır, tek ince ayraç bırak; logoyu KATEGORİ ile aynı satıra al (marka + bağlam tek birim olarak okunur); adı onun altına güçlü tipografiyle koy; oku ad hizasına çek. Kart değil, marka dizini. ========================================================================== */ @media (max-width: 767px) { /* --- kutu kaldırılır -------------------------------------------------- */ /* Matrisin dış çerçevesi ve zemini de kalkar: telefonda liste, bölümün kendi zemininde yaşar — çerçeve içinde bir bileşen gibi durmaz. */ .baris-home .software__list { border: 0; background: transparent; } .baris-home .software-row, .baris-home .software__list > li:nth-child(even) .software-row { background: transparent; } .baris-home .software-row { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); min-height: 0; padding: 1.15rem var(--gutter) 1.15rem 0; overflow: visible; } .baris-home .software__list > li:last-child .software-row { border-bottom: 0; } /* --- logo + kategori AYNI satırda ------------------------------------ */ .baris-home .software-row__id { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plate rol" "ad ad"; column-gap: .7rem; row-gap: .45rem; align-items: center; } .baris-home .software-row__logo-plate { grid-area: plate; margin: 0; padding: 4px 7px; border-radius: 2px; } .baris-home .software-row__role { grid-area: rol; margin: 0; font-size: .625rem; letter-spacing: .11em; color: rgba(255, 255, 255, .5); } .baris-home .software-row .software-row__name { grid-area: ad; margin: 0; font-size: 1.1875rem; /* 19px */ letter-spacing: -.02em; } /* --- açıklama + ok tek satır ----------------------------------------- */ .baris-home .software-row__inner { grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "id id" "text go"; row-gap: .4rem; column-gap: .6rem; align-items: end; } .baris-home .software-row__text { margin: 0; font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .58); } .baris-home .software-row__go { align-self: end; margin-bottom: 2px; } /* Dokunuşta kart beyaza dönmez; ince kırmızı ipucu yeter (§4) */ .baris-home .software-row::before { top: 0; bottom: 0; left: 0; width: 2px; height: auto; background: var(--baris-red); } .baris-home .software-row:active::before { transform: scaleY(1); } } /* ========================================================================== 13. SPRINT 2 — e-DÖNÜŞÜM · DONANIM · TEKNİK (mobil sanat yönetimi) ------------------------------------------------------------------------- Ortak ilke (onaylanan Yazılım dizininden): KUTUYU KALDIR, tipografi ve tek bir saç teli çizgi yapıyı taşısın. Üç bölüm aynı marka dilini paylaşır ama ANLATISI farklıdır: e-Dönüşüm → süreç / dijital akış Donanım → ekipman / altyapı fotoğrafı Teknik → uzmanlık / müdahale (numaralı servis dizini) ========================================================================== */ @media (max-width: 767px) { /* ---------- e-DÖNÜŞÜM · SÜREÇ İNCELTME ---------------------------------- */ .baris-home .edonusum-step { padding-bottom: 1.35rem; } .baris-home .edonusum-step__title { font-size: 1.0625rem; font-weight: 600; } .baris-home .edonusum-step__text { font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .55); } /* Düğümler küçülür; mimari bir çizgi hissi */ .baris-home .edonusum-step__dot { width: 9px; height: 9px; top: 4px; } .baris-home .edonusum__flow::before { left: 4px; background: rgba(255, 255, 255, .13); } /* ---------- e-DÖNÜŞÜM · BELGE DİZİNİ ------------------------------------ */ /* ÖNCESİ: altı tam kenarlıklı kart, kalın dolgu → UI paneli hissi. SONRASI: kutusuz editoryal satırlar, saç teli ayraç, kırmızı ikon. */ .baris-home .edoc { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding: .95rem 0; grid-template-columns: 26px minmax(0, 1fr) 12px; column-gap: .85rem; align-items: center; } .baris-home .edonusum__docs > li:last-child .edoc { border-bottom: 0; } .baris-home .edoc .edoc__name { color: #fff; font-size: 1.0625rem; } .baris-home .edoc .edoc__desc { color: rgba(255, 255, 255, .52); font-size: .8125rem; } .baris-home .edoc .b-icon { color: var(--baris-red); } .baris-home .edoc__go { background: rgba(255, 255, 255, .38); } /* Dokunuşta beyaza dönmez: ince kırmızı kural + hafif yükselme */ .baris-home .edoc:active { background: rgba(255, 255, 255, .03); box-shadow: inset 2px 0 0 var(--baris-red); } /* ---------- DONANIM · FOTOĞRAF ÖNDE, SATIRLAR SESSİZ -------------------- */ /* Bölüm fotoğrafla açılmalı; destek hizmetleri onunla YARIŞMAMALI. */ .baris-home .solutions-grid { border: 0; background: transparent; gap: 0; } .baris-home .solution { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: .95rem 1.1rem .95rem 0; } .baris-home .solutions-grid > :last-child .solution { border-bottom: 0; } /* Görsel çıpa büyür ve kendi kompozisyonunu korur */ .baris-home .solution--media { min-height: 260px; padding: 1.25rem; border-bottom: 0; margin-bottom: 1.1rem; } .baris-home .solution__title { font-size: 1.1875rem; } .baris-home .solution__text { font-size: .90625rem; color: rgba(255, 255, 255, .56); } .baris-home .solution__arrow { font-size: .8125rem; letter-spacing: .06em; } /* ---------- TEKNİK HİZMETLER · NUMARALI UZMANLIK DİZİNİ ----------------- */ /* Donanım'dan görsel olarak AYRIŞIR: kırmızı sıra numarası taşıyan sakin bir liste; ekipman değil, müdahale ve süreklilik anlatısı. */ .baris-home .support__list { border-top: 0; } .baris-home .support-item { grid-template-columns: 30px minmax(0, 1fr); column-gap: .9rem; padding: .95rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); align-items: start; } .baris-home .support__list > li:last-child .support-item { border-bottom: 0; } /* AYRIŞMA (§19/§22): Donanım ikon+fotoğraf anlatısı kullanır. Teknik Hizmetler ise KIRMIZI SIRA NUMARALI bir uzmanlık dizini olur — müdahale ve süreklilik sırası. Numara CSS sayacıyla üretilir, işaretlemeye dokunulmaz. */ .baris-home .support__list { counter-reset: tk; } .baris-home .support-item { counter-increment: tk; } .baris-home .support-item > .b-icon { display: none; } .baris-home .support-item::before { content: counter(tk, decimal-leading-zero); font-size: .8125rem; font-weight: 700; color: var(--baris-red); letter-spacing: .04em; font-variant-numeric: tabular-nums; padding-top: .2rem; } .baris-home .support-item__title { font-size: 1.1875rem; } .baris-home .support-item__text { font-size: .90625rem; color: rgba(255, 255, 255, .56); } /* Destek görseli bölümün kendi anı olur */ .baris-home .support__visual .b-visual { min-height: 230px; } } /* ========================================================================== 14. SPRINT 2 — TABLET (768–1179) ------------------------------------------------------------------------- Telefon listeleri tablet genişliğine YAYILMAZ; iki kolonlu yetenek sistemlerine dönüşür. e-Dönüşüm süreci (yatay 5 adım + görünür bağlayıcı) önceki sprintte onaylandı; ona dokunulmaz. ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { /* Donanım: büyük görsel çıpa + 2 kolonlu yetenek dizini (§18) */ .baris-home .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 36px); } /* baris.css @1099 çocuklara `span 6` veriyor; bu ızgarayı 6 kolona genişletiyordu. Açıklıklar bu kırılımda tek kolona sıfırlanır. */ .baris-home .solution--wide, .baris-home .solution--third { grid-column: span 1; grid-row: auto; } .baris-home .solution--lead { grid-column: 1 / -1; grid-row: auto; min-height: 320px; } .baris-home .solution { border-bottom: 1px solid rgba(255, 255, 255, .08); background: transparent; padding: 1.1rem 1rem 1.1rem 0; } /* Teknik: numaralı dizin tablette de kimliğini korur, 2 kolona açılır */ .baris-home .support__list { counter-reset: tk; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 36px); border-top: 0; } .baris-home .support-item { counter-increment: tk; grid-template-columns: 34px minmax(0, 1fr); column-gap: .9rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .baris-home .support-item > .b-icon { display: none; } .baris-home .support-item::before { content: counter(tk, decimal-leading-zero); font-size: .875rem; font-weight: 700; color: var(--baris-red); font-variant-numeric: tabular-nums; padding-top: .15rem; } /* e-Dönüşüm belge dizini tablette de kutusuz kalır */ .baris-home .edoc { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding: 1rem 0; } .baris-home .edoc .edoc__name { color: #fff; } .baris-home .edoc .edoc__desc { color: rgba(255, 255, 255, .52); } .baris-home .edoc .b-icon { color: var(--baris-red); } .baris-home .edoc__go { background: rgba(255, 255, 255, .38); } } /* ========================================================================== 15. SÜRÜM DÜZELTMELERİ — ETKİLEŞİM ÖLÇEĞİ + DİKEY VERİ AKIŞI ========================================================================== */ /* --- Menü tetikleyicisi: dokunma hedefi 48px KALIR, görsel iz küçülür ---- baris.css: `.baris-nav .mobile-nav:hover, .active { background: var(--baris-bg) }` --baris-bg AÇIK bir renk; çekmece açıkken şablon .active eklediği için navbar'da büyük BEYAZ bir kare beliriyordu (ekran görüntüsü). Koyu ve ölçülü bir yüzeye çevrilir. (§4–5) */ @media (max-width: 1179px) { /* Şablonun dolgusu tetiği 71x71'e şişiriyordu; görsel iz 48'e sabitlenir. Dokunma hedefi ::before ile 48px korunur (§4). */ .main-nav.baris-nav .mobile-nav { width: 48px; height: 48px; min-width: 0; padding: 0; border-radius: 3px; } .baris-nav .mobile-nav:hover, .main-nav.baris-nav .mobile-nav.active { background: rgba(255, 255, 255, .07); color: #fff; } } /* --- Dokunmatikte abartılı etkileşim yüzeyi yok (§6) --------------------- */ @media (hover: none), (pointer: coarse) { .baris-nav .mobile-nav:hover { background: none; } .baris-nav .mobile-nav:active { background: rgba(255, 255, 255, .09); } } /* --- Klavye erişimi korunur (§7) ---------------------------------------- */ @media (max-width: 1179px) { .baris-nav .mobile-nav:focus-visible { outline: 2px solid var(--baris-red); outline-offset: 2px; background: rgba(255, 255, 255, .07); } } /* --- Mobil süreç: veri noktası AŞAĞI iner (§8–11) ----------------------- baris.css'teki animasyon `left: 0 → 100%` yani YATAY. Telefonda süreç DİKEY olduğu için kırmızı nokta metnin üzerinden yana kayıyordu. Burada konektörün x'ine sabitlenir ve top ekseninde ilerler. Konektör left:4px / 1px genişlik → merkez 4.5px; nokta 5px → left 2px. */ @media (max-width: 767px) { .baris-home .edonusum__flow::after { left: 2px; top: 0; animation-name: baris-edonusum-dikey; animation-duration: 8s; } @keyframes baris-edonusum-dikey { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 14px); opacity: 0; } } } /* --- Hareket azaltma: akış durur, aktif durum okunur kalır (§12) --------- */ @media (prefers-reduced-motion: reduce) { .baris-home .edonusum__flow::after { animation: none; opacity: 1; top: 0; } } /* ========================================================================== 16. BATCH A — ANA SAYFANIN KALAN BÖLÜMLERİ (mobil sanat yönetimi) ------------------------------------------------------------------------- Onaylanan desen uygulanır: KUTUYU KALDIR → saç teli ayraç → kırmızı ikon/indeks → tipografi yapıyı taşısın. ========================================================================== */ @media (max-width: 767px) { /* ---------- MALİ MÜŞAVİR · insani/sıcak sıfırlama ---------------------- */ .baris-home #mali-musavir .b-visual { min-height: 260px; } .baris-home .mm-step { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .85rem .25rem .85rem 0; } .baris-home .mm__steps > li:last-child .mm-step, .baris-home .mm__steps > .mm-step:last-child { border-bottom: 0; } .baris-home .mm-step__title { font-size: 1rem; } .baris-home .mm-step__text { color: rgba(255, 255, 255, .54); } /* ---------- ZİRVE · imza bölüm, çip duvarı değil ----------------------- */ .baris-home .zirve__caps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; } .baris-home .zirve__caps li { border: 0; padding: 0; font-size: .78125rem; color: rgba(255, 255, 255, .5); } /* Çipler artık kutulu değil; ayraç olarak ince nokta kullanılır */ .baris-home .zirve__caps li + li::before { content: "·"; margin-right: .45rem; color: rgba(255, 255, 255, .28); } /* ---------- BT ALTYAPISI · topoloji birincil görsel -------------------- */ .baris-home #altyapi .section-lead { max-width: 30ch; } .baris-home .infra-item { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .85rem .25rem .85rem 0; } .baris-home .infra__index > li:last-child .infra-item, .baris-home .infra__index > .infra-item:last-child { border-bottom: 0; } /* ---------- ÇÖZÜM EKOSİSTEMİ · sessiz, logolar içerik ------------------ */ .baris-home .partner-rail__item { min-height: 62px; border-color: rgba(255, 255, 255, .06); } .baris-home .partner-rail__label { margin-bottom: .75rem; } /* ---------- KURUMSAL · editoryal ---------------------------------------- */ .baris-home .about-point { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .9rem .25rem .9rem 0; } .baris-home .about-point::before { display: none; } .baris-home .about__points > li:last-child .about-point, .baris-home .about__points > .about-point:last-child { border-bottom: 0; } /* ---------- KAPANIŞ CTA · kısa ve kararlı ------------------------------ */ .baris-home .cta { padding-block: clamp(3rem, 9vw, 3.75rem); } .baris-home .cta__side { margin-top: 1.25rem; } /* ---------- FOOTER · kompakt hiyerarşi --------------------------------- */ .baris-home .b-footer__grid { row-gap: 1.5rem; } .baris-home .b-footer__brand { padding-bottom: .25rem; } } /* ========================================================================== 17. BATCH A — TABLET ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { /* Mali Müşavir: fotoğraf/içerik editoryal bölünme */ .baris-home .mm__head { grid-column: 1 / span 7; align-self: center; } .baris-home .mm__visual { grid-column: 8 / -1; } .baris-home .mm__steps { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .baris-home #mali-musavir .b-visual { min-height: 320px; } /* Kurumsal: fotoğraf + içerik kompozisyonu, servis ızgarası değil */ .baris-home .about__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .baris-home .about-point { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .9rem 1rem .9rem 0; } .baris-home .about-point::before { display: none; } /* BT altyapısı: destek metni dizginlenir, şema öne çıkar */ .baris-home .infra-item { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .9rem 1rem .9rem 0; } /* CTA: butonlar yan yana */ .baris-home .cta .b-actions { flex-direction: row; flex-wrap: wrap; } .baris-home .cta .b-btn { width: auto; } /* Zirve çipleri tablette de sessiz */ .baris-home .zirve__caps li { font-size: .8125rem; } } /* ========================================================================== 18. İŞ ORTAĞI LOGO PLAKALARI (mobil + tablet) ------------------------------------------------------------------------- Plaka doğrudan üzerinde `rgba(255,255,255,.9)` idi ve dolgusu yoktu: logonun sınır kutusuna yapışıyor, koyu zeminin üstünde .9 opaklık GRİ bir blok gibi okunuyordu. Plakası olmayan logoların (Paraşüt, Logo) yanında tutarsız ve ucuz görünüyordu. Yazılım dizinindeki onaylanmış plakayla aynı dile getirilir: gerçek dolgu, tam beyaz, küçük yarıçap. Logolar YENİDEN RENKLENDİRİLMEZ. ========================================================================== */ @media (max-width: 1179px) { /* ASIL NEDEN: logolar durağan hâlde `opacity: .68` ile sönükleştiriliyor ve hover'da açılıyordu — masaüstü deseni. Dokunmatikte hover OLMADIĞI için logolar kalıcı olarak sönük kalıyor, beyaz plaka da griye dönüyordu. Telefon/tablette tam opaklık: özgün marka renkleri korunur (§21). */ .baris-home .partner-rail__item img { opacity: 1; } .baris-home .partner-rail__item img[src$=".svg"], .baris-home .partner-rail__item .brand-mark--zirve, .baris-home .partner-rail__item .brand-mark--mikro, .baris-home .partner-rail__item .brand-mark--dia, .baris-home .partner-rail__item .brand-mark--narbulut { background: #fff; padding: 7px 11px; border-radius: 3px; box-sizing: content-box; } } /* ========================================================================== 19. GENEL DOKUNMA SÖZLEŞMESİ (tüm site — ana sayfa + iç sayfalar) ------------------------------------------------------------------------- SİSTEMİK KUSUR: birçok paylaşılan bileşen DİNLENME hâlinde sönük duruyor ve tam görünürlüğü HOVER'a bırakıyor. Dokunmatik cihazda hover olmadığı için bu öğeler KALICI OLARAK yarım kalıyordu: .partner-rail__item img opacity .68 → hover 1 (logolar sönük) .partner-rail__name opacity .50 → hover 1 (marka adı sönük) .b-capability__go opacity .40 → hover 1 (İÇ SAYFA okları sönük) .edoc__go sönük → hover 1 (belge okları sönük) Dokunmatikte VARSAYILAN durum eksiksiz olmalıdır (§TOUCH CONTRACT). Masaüstündeki dekoratif hover (hover:hover + pointer:fine) korunur. Yeni !important yok — bunlar aynı özgüllükte ve DAHA SONRA geldiği için kaynak sırasıyla kazanır. ========================================================================== */ @media (hover: none), (pointer: coarse) { /* İş ortağı / marka işaretleri: özgün renkler tam güçte */ .partner-rail__item img { opacity: 1; } .partner-rail__name { opacity: 1; } /* Yönlendirme okları: dokunmatikte zaten görünür olmalı */ .b-capability__go { opacity: .75; } .edoc__go { opacity: .75; } /* Dokunma geri bildirimi: kısa, kalıcı beyaz kart yok */ .b-capability--link:active { background: rgba(255, 255, 255, .04); } } /* Klavye erişilebilirliği korunur — dev beyaz kart DEĞİL, ölçülü kırmızı halka */ .b-capability--link:focus-visible, .edoc:focus-visible, .partner-rail__item a:focus-visible { outline: 2px solid var(--baris-red); outline-offset: 3px; } /* ========================================================================== 20. PAYLAŞILAN İÇ SAYFA SİSTEMİ — MOBİL ------------------------------------------------------------------------- Tek bir bileşen katmanı 25 iç sayfayı birden düzeltir; sayfa başına yama YAZILMAZ. Ölçüldü (zirve-yazilim.php @390): .b-page-hero 968px — içerik başlamadan 1.2 ekran. Hedef ~560–680px. ========================================================================== */ @media (max-width: 767px) { /* --- İç sayfa hero: kısalt, marka önde kalsın --------------------- */ /* nav-h telafisi KORUNMALI (sabit navbar) — yalnızca dekoratif boşluk kısılır */ .b-page-hero { padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vw, 1.75rem)); padding-bottom: clamp(1.5rem, 4vw, 2rem); } .b-page-hero__title { font-size: clamp(2.125rem, 9vw, 2.5rem); /* 34–40px */ line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; } .b-page-hero__lead { max-width: 32ch; font-size: 1rem; line-height: 1.58; } /* GÖRSEL SLOT VARYANTI: metin hero'sunun ALTINA 300px'lik bir blok eklemek yerine kompakt bir şerit. Ölçüldü: __screen 244 + 56 boşluk = 300px, hero'yu 936'ya çıkarıyordu. */ .b-page-hero .b-grid { row-gap: 1.25rem; } .b-page-hero__screen .zscreen { max-height: 140px; overflow: hidden; border-radius: 3px; } .b-page-hero .b-actions { margin-top: 1.5rem; } .b-page-hero .b-btn { width: 100%; justify-content: center; } /* --- Breadcrumb: kompakt, iki satıra düşse de sıkışmasın ---------- */ .b-breadcrumb { font-size: .6875rem; letter-spacing: .08em; line-height: 1.6; } /* --- Yetenek listeleri: kutu yerine saç teli (onaylı desen) ------- */ .b-capability { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding: .9rem 0; } .b-capability__title { font-size: 1.0625rem; line-height: 1.25; } .b-capability__text { font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .55); } /* --- İç sayfa bölüm başlıkları: ana sayfayla aynı ölçek ----------- */ .b-section .section-title { max-width: 15ch; line-height: 1.08; text-wrap: balance; } .b-section .section-lead { max-width: 32ch; font-size: 1rem; line-height: 1.6; } } /* ========================================================================== 21. PAYLAŞILAN İÇ SAYFA SİSTEMİ — TABLET ========================================================================== */ @media (min-width: 768px) and (max-width: 1179px) { .b-page-hero__title { font-size: clamp(2.75rem, 5.4vw, 3.25rem); } /* 44–52px */ .b-page-hero__lead { max-width: 44ch; font-size: 1.0625rem; } .b-page-hero .b-actions { flex-direction: row; flex-wrap: wrap; } .b-page-hero .b-btn { width: auto; } /* Yetenekler tablette iki kolon — 390px'lik sütun 1024'te yüzmez */ .b-capability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 36px); } .b-capability { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding: 1rem 1rem 1rem 0; } .b-section .section-lead { max-width: 46ch; } } /* ========================================================================== 22. PAYLAŞILAN İÇ SAYFA FOOTER'I ------------------------------------------------------------------------- Ölçüldü (zirve-yazilim.php @390): 1 kolon, **1527px**. Bu, masaüstü footer'ının dikey yığılmış hâliydi — istemciye gösterilebilir değil. Ana sayfada onaylanmış 2 kolonlu düzenin aynısı iç sayfalara taşınır. ÖZGÜLLÜK NOTU: ana sayfa kuralları `.baris-home .b-footer__*` (0,2,0); buradakiler (0,1,0). Ana sayfa kendi onaylı davranışını KORUR. ========================================================================== */ @media (max-width: 767px) { .b-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; } .b-footer__brand { grid-column: 1 / -1; padding-right: 0; } .b-footer__logo img { max-width: 190px; } .b-footer__statement { font-size: .9375rem; line-height: 1.6; max-width: 32ch; } .b-footer__col h2 { font-size: .75rem; letter-spacing: .1em; margin-bottom: .75rem; } .b-footer__col li + li { margin-top: .4rem; } .b-footer__col a { font-size: .90625rem; } .b-footer__bottom { flex-direction: column; gap: .35rem; align-items: flex-start; } } @media (min-width: 768px) and (max-width: 1179px) { .b-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .b-footer__brand { grid-column: 1 / -1; padding-right: 0; } .b-footer__col a { font-size: .9375rem; } }