/* ========================================================================= Datagram Bilişim — site stilleri ========================================================================= Yapı: 1 font · 2 tokenlar · 3 reset · 4 tipografi · 5 yerleşim 6 bileşenler · 7 bölümler · 8 formlar · 9 yardımcı sınıflar Build adımı yok. Tek dosya, custom property tabanlı, mobile-first. Bu ölçekteki sabit bir kurumsal sitede Tailwind derleme zinciri ya da 60 KB ölü Bootstrap kodu taşımanın karşılığı yok. KRİTİK CSS İŞARETLERİ --------------------- `!kritik-basla` ve `!kritik-bitir` arasındaki bloklar, ilk ekranda görünen her şeyi kapsar; App\Core\Css bunları buradan çıkarıp içine gömüyor, dosyanın kalanı eşzamansız yükleniyor. Ayrı bir critical.css dosyası TUTULMUYOR: iki dosya kaçınılmaz olarak birbirinden ayrışır ve ayrıştığı gün ilk boyama yanlış görünür. Tek kaynak burası. Yeni bir kural eklerken sorulacak soru: bu, sayfa açılır açılmaz görünen bir şeyi mi biçimlendiriyor? Öyleyse işaretli bir bloğun içine koyun. Değilse dışına — gömülen CSS büyüdükçe kazanç azalır. ====================================================================== */ /* !kritik-basla */ /* ---------------------------------------------------------------- 1 FONT */ /* latin-ext ZORUNLU: ş ğ İ harfleri orada. Yalnızca latin yüklenirse Türkçe metin sistem fontuna düşer ve satır yüksekliği kayar. Dosya TÜRKÇEYE İNDİRGENDİ (tools/subset-fonts.py): Google'ın latin-ext alt kümesi 733 karakter ve 85 KB idi, sitede o kümeden yalnızca dört karakter kullanılıyor (ğ İ Ş ş — ölçüldü, 20 sayfa). Subset sonrası 3,4 KB. İki font dosyası toplamı 130 KB'den 50 KB'ye indi. AŞAĞIDAKİ unicode-range, DOSYANIN İÇİNDEKİ kümeyle birebir aynı olmalı. Genişletilirse tarayıcı dosyada olmayan bir harf için dosyayı indirir, bulamaz ve sistem fontuna düşer — yani geniş aralık sessiz bir hata. Yeni bir harf gerekiyorsa önce betiğin KEEP listesine eklenip dosya yeniden üretilir, sonra burası güncellenir. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------ 2 TOKENLAR */ :root { /* Lacivert: başlıklar, hero, footer */ --navy-900: #0b1b33; --navy-800: #12294a; --navy-700: #1b3a63; --navy-600: #274d7d; /* Teknoloji mavisi: bağlantı, buton, vurgu */ --brand-700: #0a4d9e; --brand-600: #0f62c9; --brand-500: #2a7de1; /* brand-500 koyu lacivertte 4.20 kalıyor (AA için 4.5 gerek); koyu zemindeki küçük metinler bu tonu kullanır — 6.07. */ --brand-400: #5b9ceb; --brand-100: #cfe2fa; --brand-050: #eaf2fd; /* Aksan — çok az kullanılır, sadece rakam/işaret vurgusunda */ --accent-600: #0c8b8b; --accent-500: #0ea5a5; --gray-900: #111827; --gray-800: #1f2937; --gray-700: #374151; --gray-600: #4b5563; --gray-500: #6b7280; --gray-400: #9ca3af; --gray-300: #d1d5db; --gray-200: #e5e7eb; --gray-100: #f3f4f6; --gray-050: #f8fafc; --white: #ffffff; --danger-600: #b91c1c; --danger-050: #fef2f2; --success-700: #15803d; --success-050: #f0fdf4; --warning-700: #a16207; --warning-050: #fefce8; /* Anlamsal */ --text: var(--gray-900); --text-muted: var(--gray-600); --text-invert: var(--white); /* Koyu zeminde ikincil metin. --text-muted (gray-600) oraya konduğunda kontrast 1.92'ye düşüyordu — okunmuyordu. */ --text-muted-invert: #a8bdd8; --bg: var(--white); --bg-subtle: var(--gray-050); --border: var(--gray-200); --border-strong: var(--gray-300); --link: var(--brand-600); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; /* Akışkan tipografi ölçeği */ --size-xs: 0.8125rem; --size-sm: 0.9062rem; --size-base: 1rem; --size-lg: 1.125rem; --size-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); --size-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); --size-3xl: clamp(1.625rem, 1.4rem + 1.05vw, 2.25rem); --size-4xl: clamp(2rem, 1.6rem + 1.9vw, 3rem); --size-5xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5.5rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; /* Gölge minimum: kurumsal ciddiyet, "ajans" parlaklığı değil */ --shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.06); --shadow: 0 2px 8px rgba(11, 27, 51, 0.07); --shadow-lg: 0 12px 32px rgba(11, 27, 51, 0.10); --container: 1180px; --container-narrow: 760px; --header-height: 72px; } /* --------------------------------------------------------------- 3 RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--size-base); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } /* Görsel odak halkası: klavye kullanıcısı nerede olduğunu görmeli */ :focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--brand-100); color: var(--navy-900); } /* ----------------------------------------------------------- 4 TİPOGRAFİ */ h1, h2, h3, h4 { margin: 0 0 var(--space-4); font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; color: var(--navy-900); text-wrap: balance; } h1 { font-size: var(--size-5xl); letter-spacing: -0.028em; } h2 { font-size: var(--size-4xl); } h3 { font-size: var(--size-2xl); } h4 { font-size: var(--size-xl); font-weight: 600; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-700); } strong { font-weight: 600; color: var(--navy-900); } ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; } li { margin-bottom: var(--space-2); } li:last-child { margin-bottom: 0; } /* !kritik-bitir */ /* Buradan itibaren zengin metin tipografisi: yalnızca gövde içeriğinde geçiyor, yani her zaman sayfa başlığının ALTINDA. İlk boyamada görünmediği için gömülü kümeye alınmıyor. */ code { font-family: var(--font-mono); font-size: 0.9em; background: var(--brand-050); color: var(--brand-700); padding: 0.15em 0.4em; border-radius: var(--radius-sm); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; } blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--brand-500); background: var(--brand-050); border-radius: 0 var(--radius) var(--radius) 0; } table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); } th, td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border); } th { font-weight: 600; color: var(--navy-800); background: var(--bg-subtle); } /* Geniş tablo sayfayı yatay kaydırmaya zorlamasın */ .table-scroll { overflow-x: auto; margin-bottom: var(--space-5); } /* !kritik-basla */ /* -------------------------------------------------------------- 5 YERLEŞİM */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .container-narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-8); } .section-lg { padding-block: var(--space-9); } .section-subtle { background: var(--bg-subtle); } .section-dark { background: var(--navy-900); color: var(--brand-100); } .section-dark h2, .section-dark h3 { color: var(--white); } @media (min-width: 768px) { .section { padding-block: var(--space-9); } .section-lg { padding-block: var(--space-10); } } .section-head { max-width: 46rem; margin-bottom: var(--space-7); } .section-head p { color: var(--text-muted); font-size: var(--size-lg); margin: 0; } .grid { display: grid; gap: var(--space-5); } @media (min-width: 620px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 620px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 200; background: var(--navy-900); color: var(--white); padding: var(--space-3) var(--space-4); border-radius: var(--radius); transition: top 0.15s; } .skip-link:focus { top: var(--space-4); color: var(--white); } /* ---------------------------------------------------------- 6 BİLEŞENLER */ /* Başlık, butonlar, kırıntı yolu ve çerez bildirimi kritik; kart, akordeon, sayfalama gibi bileşenler ilk ekranda görünmüyor. */ /* --- Başlık / navigasyon --- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; } .header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-height); } .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .logo svg, .logo img { height: 34px; width: auto; } .nav { display: none; } .nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .nav-link { display: block; padding: var(--space-2) var(--space-3); font-size: var(--size-sm); font-weight: 500; color: var(--gray-700); text-decoration: none; border-radius: var(--radius); white-space: nowrap; } .nav-link:hover { color: var(--brand-600); background: var(--brand-050); } .nav-link.is-active { color: var(--brand-700); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .lang-switch { font-size: var(--size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-600); text-decoration: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); } .lang-switch:hover { color: var(--brand-600); border-color: var(--brand-500); } /* Arama simgesi — dil değiştiriciyle aynı ölçüde dursun diye kare. */ .header-search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--gray-600); border: 1px solid var(--border); border-radius: var(--radius); } .header-search:hover { color: var(--brand-600); border-color: var(--brand-500); } /* Mobilde menü düğmesi ve dil değiştirici yeterli; arama zaten menünün içinde bir kutu olarak duruyor. */ /* Dar ekranda başlık taşıyordu: ölçüldü, 390 px viewport'ta sayfa 463 px genişliğe çıkıyor ve yatay kaydırma oluşuyordu. Kaynak, logo (≈219 px) + dil + "Teklif Alın" + hamburger toplamının kapsayıcıya sığmaması. Teklif düğmesi mobilde KAYBOLMUYOR: hamburger menüsünün altında zaten aynısı var (partials/header.php), ayrıca hero'da da duruyor. Arama simgesi de aynı sebeple gizli, form mobil menüde. */ @media (max-width: 619px) { .header-search { display: none; } .header-actions > .btn { display: none; } } /* Çok dar ekranda (≤ 419 px) üç kalem birden daralıyor: kelime işareti, kapsayıcı boşluğu ve öğeler arası aralık. Üçü olmadan 320 px'lik eski cihazlarda başlık hâlâ taşıyordu (ölçüldü: 340 px sayfa genişliği). */ @media (max-width: 419px) { .logo svg { height: 28px; } .header .container { padding-inline: var(--space-4); } .header-inner { gap: var(--space-3); } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--navy-800); } .nav-toggle svg { width: 22px; height: 22px; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Mobil menü: JS kapalıyken de erişilebilir kalması için details değil, sadece sınıf değişimiyle açılıyor. */ .nav-mobile { display: none; border-top: 1px solid var(--border); padding-block: var(--space-4); } .nav-mobile.is-open { display: block; } .nav-mobile .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-mobile .nav-link { padding: var(--space-3) var(--space-2); font-size: var(--size-base); } .nav-mobile .btn { margin-top: var(--space-3); width: 100%; } /* Yatay menünün açıldığı genişlik. * * 1024 idi ve SIĞMIYORDU: ölçüldü, altı bağlantıyla 1024 px viewport'ta * sayfa 1038 px'e, "Çözümler" yayına girip yedi bağlantı olduğunda * 1133 px'e çıkıyor ve yatay kaydırma oluşuyor. Türkçe menü etiketleri * uzun ("Referanslar", "Hakkımızda", "IzgirWebErp"), bu yüzden alışıldık * 1024 eşiği bu sitede yetmiyor. * * DİKKAT — bu sayı menüdeki bağlantı SAYISINA bağlı. Yeni bir menü * bağlantısı eklenirse (partials/header.php) bu eşik yeniden ölçülmeli; * yoksa dizüstü genişliklerinde başlık sessizce taşar. Ölçüm için: * tarayıcıyı o genişliğe getirip `document.documentElement.scrollWidth` * ile `clientWidth` değerlerini karşılaştırmak yeterli. * * Altında hamburger menü devreye giriyor ve o menü EKSİKSİZ: arama * formu, bütün bağlantılar ve teklif düğmesi orada. */ @media (min-width: 1140px) { .nav { display: block; } .nav-toggle { display: none; } .nav-mobile { display: none !important; } } /* --- Butonlar --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.7rem 1.4rem; font-size: var(--size-sm); font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .btn-primary { background: var(--brand-600); color: var(--white); } .btn-primary:hover { background: var(--brand-700); color: var(--white); } .btn-secondary { background: var(--white); color: var(--navy-800); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--brand-500); color: var(--brand-700); } .btn-ghost { background: transparent; color: var(--brand-600); padding-inline: var(--space-2); } .btn-ghost:hover { color: var(--brand-700); text-decoration: underline; } .btn-invert { background: var(--white); color: var(--navy-900); } .btn-invert:hover { background: var(--brand-050); color: var(--navy-900); } .btn-outline-invert { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.35); } .btn-outline-invert:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); } .btn-lg { padding: 0.85rem 1.75rem; font-size: var(--size-base); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* --- Kart --- */ /* Sitenin en çok tekrar eden bileşeni ve masaüstünde katlama çizgisinin hemen altında başlıyor. Stilsizken kart içindeki ok simgesi doğal boyutuna açılıp devasa görünüyordu; 1,2 KB'lik blok bunu önlüyor. */ .card { display: flex; flex-direction: column; padding: var(--space-5); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } a.card, .card-link { text-decoration: none; color: inherit; } a.card:hover, .card-link:hover { border-color: var(--brand-500); box-shadow: var(--shadow); } .card h3 { font-size: var(--size-xl); margin-bottom: var(--space-2); } .card p { color: var(--text-muted); font-size: var(--size-sm); } .card-foot { margin-top: auto; padding-top: var(--space-4); } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: var(--space-4); background: var(--brand-050); color: var(--brand-600); border-radius: var(--radius); } .card-icon svg { width: 24px; height: 24px; } .card-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-sm); font-weight: 600; color: var(--brand-600); } .card-arrow svg { width: 16px; height: 16px; transition: transform 0.15s; } a.card:hover .card-arrow svg { transform: translateX(3px); } /* !kritik-bitir */ /* --- Rozet / etiket --- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.28rem 0.7rem; font-size: var(--size-xs); font-weight: 600; border-radius: 999px; background: var(--brand-050); color: var(--brand-700); } .badge-neutral { background: var(--gray-100); color: var(--gray-700); } .badge-invert { background: rgba(255, 255, 255, 0.12); color: var(--brand-100); } /* !kritik-basla */ /* Hero'nun ve iç sayfa başlıklarının üstündeki küçük etiket — ilk ekranda. */ .eyebrow { display: block; margin-bottom: var(--space-3); font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand-600); } .section-dark .eyebrow { color: var(--brand-400); } /* --- Kırıntı yolu --- */ .breadcrumb { padding-block: var(--space-4); font-size: var(--size-xs); color: var(--text-muted); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--space-2); } .breadcrumb li + li::before { content: '/'; color: var(--gray-400); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-600); text-decoration: underline; } .breadcrumb [aria-current] { color: var(--gray-800); font-weight: 500; } /* !kritik-bitir */ /* --- Arama --- */ /* Form üç yerde kullanılıyor: arama sayfası, mobil menü ve 404 sayfası. Hiçbiri ilk ekranda değil (arama sayfasında bile başlık altında), bu yüzden kritik CSS dışında. */ .search-form { display: flex; gap: var(--space-3); max-width: 32rem; } .search-form input[type=search] { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); font: inherit; color: var(--text); background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); } .search-form input[type=search]:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-050); } .search-form-compact { max-width: none; margin-bottom: var(--space-5); } .search-results { list-style: none; margin: var(--space-5) 0 0; padding: 0; } .search-result { margin-bottom: var(--space-6); } .search-result h2 { font-size: var(--size-xl); margin: 0 0 var(--space-2); } .search-result h2 a { text-decoration: none; } .search-result h2 a:hover { text-decoration: underline; } .search-result p { color: var(--text-muted); margin: 0; } /* Eşleşen kelime — tarayıcı varsayılanı sarı, marka paletine çekiliyor. */ .search-result mark { background: var(--brand-100); color: var(--navy-900); padding: 0 0.15em; border-radius: 2px; } /* --- Bildirim --- */ .alert { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); border: 1px solid; border-radius: var(--radius); font-size: var(--size-sm); } .alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .alert-success { background: var(--success-050); border-color: #bbf7d0; color: var(--success-700); } .alert-error { background: var(--danger-050); border-color: #fecaca; color: var(--danger-600); } .alert-warning { background: var(--warning-050); border-color: #fef08a; color: var(--warning-700); } .alert strong { color: inherit; } /* --- Akordeon (SSS) --- */ .accordion { border-top: 1px solid var(--border); } .accordion details { border-bottom: 1px solid var(--border); } .accordion summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 600; font-size: var(--size-lg); color: var(--navy-800); cursor: pointer; list-style: none; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary:hover { color: var(--brand-600); } .accordion summary::after { content: ''; flex-shrink: 0; width: 12px; height: 12px; margin-top: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.18s; } .accordion details[open] summary::after { transform: rotate(-135deg); } .accordion-body { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 60ch; } /* --- Sayfalama --- */ .pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-8); } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding-inline: var(--space-3); font-size: var(--size-sm); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--gray-700); } .pagination a:hover { border-color: var(--brand-500); color: var(--brand-600); } .pagination [aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); font-weight: 600; } .pagination .gap { border: 0; min-width: auto; } /* --- Çerez bildirimi --- */ /* position: fixed — sayfa akışını itmez, dolayısıyla CLS üretmez. * * KRİTİK KÜMEDE DEĞİL. Band HTML'de `hidden` olarak basılıyor ve onu * görünür yapan site.js; aynı dosya tam stil dosyasını da uygulamaya * alıyor ve bunu ÖNCE yapıyor (site.js:29 vs :159, tek senkron tik). * Yani band göründüğünde tam CSS zaten uygulanmış oluyor; stilsiz * görünme ihtimali yok. JS hiç çalışmazsa band hiç açılmıyor. * * Bu sıra değişirse — bandı gösteren kod stil değişiminin ÖNÜNE * geçerse — bu blok kritik kümeye geri alınmalı. */ .cookie-banner { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 150; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); max-width: 46rem; margin-inline: auto; padding: var(--space-4) var(--space-5); background: var(--navy-900); color: var(--brand-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--size-sm); } .cookie-banner p { margin: 0; flex: 1 1 18rem; } .cookie-banner a { color: var(--white); } .cookie-banner[hidden] { display: none; } /* !kritik-basla */ /* -------------------------------------------------------------- 7 BÖLÜMLER */ /* --- Hero --- */ /* Ana sayfada ilk ekranın tamamı bu. */ .hero { position: relative; background: var(--navy-900); color: var(--brand-100); overflow: hidden; } /* Çok hafif bir derinlik — gradient burada bitiyor, başka yerde yok */ .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80rem 40rem at 78% -10%, rgba(42, 125, 225, 0.28), transparent 62%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; padding-block: var(--space-9) var(--space-9); } @media (min-width: 1024px) { .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--space-9); padding-block: var(--space-10); } } .hero h1 { color: var(--white); margin-bottom: var(--space-5); max-width: 20ch; } .hero-lead { font-size: var(--size-xl); line-height: 1.6; color: #c3d6ef; max-width: 52ch; margin-bottom: var(--space-6); } .hero-note { margin-top: var(--space-6); font-size: var(--size-sm); color: #8fb0d8; } .hero-visual { display: none; } @media (min-width: 1024px) { .hero-visual { display: block; } } /* --- Güven şeridi --- */ /* Hero'nun hemen altında, kısa ekranlarda katlama çizgisinin üstünde kalıyor; stilsiz hâli hero ile aynı karede görünüyordu. */ .stats { display: grid; gap: var(--space-5); padding-block: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); } @media (min-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat-value { display: block; font-size: var(--size-xl); font-weight: 700; color: var(--white); letter-spacing: -0.02em; } .stat-label { display: block; margin-top: var(--space-1); font-size: var(--size-sm); color: #8fb0d8; } /* !kritik-bitir */ /* --- Ürün vitrini --- */ .product-showcase { display: grid; gap: var(--space-7); } @media (min-width: 1000px) { .product-showcase { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-9); } } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); } .module-chip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); font-size: var(--size-sm); font-weight: 500; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); color: var(--brand-100); } .module-chip svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-500); } .integration-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .integration-list li { margin: 0; } /* --- Referans logo şeridi --- */ .logo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-4); } .logo-item { display: flex; align-items: center; justify-content: center; min-height: 86px; padding: var(--space-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; text-decoration: none; } .logo-item img { max-height: 40px; width: auto; filter: grayscale(100%); opacity: 0.68; transition: filter 0.2s, opacity 0.2s; } .logo-item:hover img { filter: grayscale(0); opacity: 1; } /* Logo dosyası yokken firma adı kartı — boşluk bırakmaktan iyidir */ .logo-item-text { font-size: var(--size-sm); font-weight: 600; color: var(--navy-800); line-height: 1.35; } .logo-item-text span { display: block; margin-top: 2px; font-size: var(--size-xs); font-weight: 400; color: var(--gray-500); } /* --- Süreç adımları --- */ .steps { counter-reset: step; display: grid; gap: var(--space-5); } @media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { counter-increment: step; position: relative; padding-top: var(--space-6); } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-size: var(--size-sm); font-weight: 700; color: var(--brand-500); letter-spacing: 0.06em; } .step h3 { font-size: var(--size-lg); margin-bottom: var(--space-2); } .step p { font-size: var(--size-sm); color: var(--text-muted); margin: 0; } /* --- CTA bandı --- */ .cta-band { background: var(--navy-800); color: var(--brand-100); } .cta-band h2 { color: var(--white); } .cta-grid { display: grid; gap: var(--space-7); } @media (min-width: 900px) { .cta-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-9); align-items: start; } } /* --- İçerik (zengin metin) --- */ .prose { max-width: 68ch; } .prose h2 { font-size: var(--size-3xl); margin-top: var(--space-8); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: var(--size-xl); margin-top: var(--space-6); } .prose ul { padding-left: 1.2rem; } .prose li::marker { color: var(--brand-500); } .prose img { border-radius: var(--radius); } /* Editörün "görsel açıklaması" seçeneği
üretiyor. */ .prose figure { margin: var(--space-5) 0; } .prose figcaption { margin-top: var(--space-2); font-size: var(--size-sm); color: var(--text-muted); } /* Gömülü video (YouTube/Vimeo). Editör iframe'e sabit width/height basar; dar ekranda genişlik küçülüp yükseklik kaldığı için görüntü şeritleniyordu. */ .prose iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); } .prose .note { padding: var(--space-4) var(--space-5); background: var(--warning-050); border: 1px solid #fef08a; border-radius: var(--radius); color: var(--warning-700); } /* !kritik-basla */ /* --- Sayfa başlığı --- */ /* İç sayfalarda ilk ekran: başlık + kırıntı yolu. */ .page-head { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--border); } .page-head h1 { margin-bottom: var(--space-3); } .page-head p { font-size: var(--size-lg); color: var(--text-muted); max-width: 58ch; margin: 0; } /* !kritik-bitir */ /* --- Metrik kutuları (vaka çalışması) --- */ .metrics { display: grid; gap: var(--space-4); } @media (min-width: 620px) { .metrics { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } } .metric { padding: var(--space-5); background: var(--brand-050); border-radius: var(--radius-lg); } .metric-value { display: block; font-size: var(--size-3xl); font-weight: 700; color: var(--brand-700); letter-spacing: -0.03em; } .metric-label { display: block; margin-top: var(--space-1); font-size: var(--size-sm); color: var(--gray-600); } /* --- Harita --- */ .map-wrap { position: relative; aspect-ratio: 16 / 9; background: var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; } .map-wrap iframe { width: 100%; height: 100%; border: 0; } .map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); background: var(--gray-100); border: 0; cursor: pointer; font-size: var(--size-sm); color: var(--gray-600); } /* --- Footer --- */ .footer { background: var(--navy-900); color: #9db7d6; font-size: var(--size-sm); padding-block: var(--space-8) var(--space-5); } .footer a { color: #c3d6ef; text-decoration: none; } .footer a:hover { color: var(--white); text-decoration: underline; } .footer-grid { display: grid; gap: var(--space-7); margin-bottom: var(--space-7); } @media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-6); } } /* Çözüm sayfaları yayınlanınca footer'a beşinci sütun geliyor. Dört sütunluk kural kalıyor: yayında açılış sayfası yokken sütun da yok. */ @media (min-width: 1000px) { .footer-grid.has-solutions { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; } } .footer h2 { font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: var(--space-4); } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: var(--space-2); } .footer-brand .logo svg { height: 30px; } .footer-brand p { margin-top: var(--space-4); max-width: 32ch; } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--size-xs); color: #7f9cbf; } .social-list { display: flex; gap: var(--space-3); } .social-list a { display: inline-flex; } .social-list svg { width: 20px; height: 20px; } /* ---------------------------------------------------------------- 8 FORMLAR */ .form-grid { display: grid; gap: var(--space-4); } @media (min-width: 620px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field-full { grid-column: 1 / -1; } .field label { font-size: var(--size-sm); font-weight: 600; color: var(--navy-800); } .field .optional { font-weight: 400; color: var(--gray-500); } .field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-050); } .field textarea { min-height: 9rem; resize: vertical; } .field-error input, .field-error select, .field-error textarea { border-color: var(--danger-600); } .field-error input:focus, .field-error textarea:focus { box-shadow: 0 0 0 3px var(--danger-050); } .field-message { font-size: var(--size-xs); color: var(--danger-600); } .field-hint { font-size: var(--size-xs); color: var(--gray-500); } .field-check { flex-direction: row; align-items: flex-start; gap: var(--space-3); } .field-check input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex-shrink: 0; accent-color: var(--brand-600); } .field-check label { font-weight: 400; font-size: var(--size-sm); color: var(--gray-700); line-height: 1.5; } /* Bal küpü: gerçek kullanıcı bunu görmez, klavyeyle de ulaşamaz; botlar doldurur ve gönderim sessizce reddedilir. */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Koyu zeminde form (CTA bandı) */ .form-invert label { color: var(--brand-100); } /* Açık zemin için seçilmiş gri tonlar koyu panelde okunmuyor: .optional 3.01, .muted 1.92 ölçüldü (Lighthouse, 21 Eylül 2026). .section-dark de aynı sebeple burada. */ .form-invert .optional, .form-invert .muted, .section-dark .muted { color: var(--text-muted-invert); } .form-invert input, .form-invert select, .form-invert textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: var(--white); } .form-invert input::placeholder, .form-invert textarea::placeholder { color: #7f9cbf; } .form-invert input:focus, .form-invert textarea:focus, .form-invert select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.25); } .form-invert .field-check label { color: #c3d6ef; } .form-invert select option { color: var(--gray-900); } /* !kritik-basla */ /* -------------------------------------------------- 9 YARDIMCI SINIFLAR */ /* Küçük ve her yerde kullanılıyor; ayırmanın kazancı yok. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .muted { color: var(--text-muted); } .small { font-size: var(--size-sm); } .tiny { font-size: var(--size-xs); } .lead { font-size: var(--size-lg); color: var(--text-muted); } .center { text-align: center; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mb-0 { margin-bottom: 0; } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-6); } .icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* !kritik-bitir */ /* Yazdırma ilk boyama değil; gömülmesine gerek yok. */ @media print { .header, .footer, .cookie-banner, .btn, .nav-toggle { display: none !important; } body { color: #000; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; } }