/* ========================================================================== BosNets — bosnets.com Tasarım sistemi + tüm sayfa stilleri. Bağımlılık yok, build adımı yok. ========================================================================== */ /* --- Tokenlar ------------------------------------------------------------ Renk, köşe, çizgi ve tipografi BosApp ile BosLog konsolundan alınmıştır. Site iki temada çalışır ve ikisi de BosApp’ın kendi paletidir: koyu (VARSAYILAN) → src/theme/ThemeContext.tsx içindeki darkColors açık → src/theme/colors.ts Tema, özniteliğiyle değişir; öznitelik yoksa koyu tema geçerlidir. Seçim localStorage’da saklanır (assets/js/main.js). Marka mavisi iki temada da AYNIDIR — BosApp’ta da öyle (colors.info). */ :root { /* Ürün mavisi ve durum renkleri — temadan bağımsız */ --blue-700: #0050B5; /* MARKA AKSİYON RENGİ — iki üründe de birincil */ --blue-600: #2A6FDB; /* birincil buton degradesinin üst durağı */ --blue-500: #5C96F3; /* odak kenarlığı ve ikincil vurgu */ --blue-300: #93B8F7; --blue-50: #EDF3FE; --cyan-400: #4FD1E0; --green-500: #1F9D55; --red-500: #D85757; --amber-500: #E3A008; --ink: #151515; /* BosApp colors.primary */ /* Koyu zeminde okunması için aydınlatılmış durum renkleri */ --green-on-dark: #55C98D; --red-on-dark: #F08A8A; --amber-on-dark: #F0C05A; /* Marka — eski adlar korundu */ --blue: var(--blue-500); --blue-deep: var(--blue-700); --blue-bright: var(--blue-600); --cyan: var(--cyan-400); --periwinkle: var(--blue-300); /* Ölçek */ --maxw: 1200px; --gutter: 24px; /* Köşeler. Konsolun yarıçap üçgeni: 12 kapsayıcı, 9 kontrol, 999 durum. 14px büyük pazarlama kartları için — BosApp’ın öne çıkan kart köşesi. */ --radius: 12px; --radius-lg: 14px; --radius-ctl: 9px; --radius-pill: 999px; /* Tipografi. Titillium Web BosApp ve BosLog’un marka fontudur; başlıklar ve arayüz öğeleri onunla yazılır, uzun gövde metni Inter’de kalır. Poppins’e dönmek için --font-head’i "Poppins", "Poppins Fallback" yapın. */ --font-head: "Titillium Web", "Titillium Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* --- Hareket ----------------------------------------------------------- Apple'in akiskan arayuz dili iki sayiyla anlatilir: SONMLEME (damping — yay hedefi asiyor mu) ve TEPKI (response — hedefe ne kadar cabuk variyor, saniye). Sure degil; yayin oturma suresi bu ikisinden dogar. Web'de yay kutuphanesi yok (bagimlilik yok kurali), o yuzden ikisini de cubic-bezier ile karsiliyoruz: --ease-out sonumleme 1.0 — asma yok, yumusak oturma. VARSAYILAN. --ease-spring sonumleme ~0.8 — hafif asma. YALNIZCA hareketin kendisi ivme tasiyorsa (parmakla surukleme, firlatma, aciliş). Kendiliginden beliren bir menude asma yanlis hissettirir. --ease-in --ease-out'un aynasi. Geri donusu olan gecisin KAPANIS yonu; gidis ile gelis ayni yolu izlesin diye. Tepki degerleri Apple'in yayimladigi olculerden: yer degistirme 0.4 sn, donme 0.4 sn, cekmece/panel 0.3 sn. */ --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1); /* --ease-out'un TAM TERSI: cubic-bezier(x1,y1,x2,y2) egrisinin aynasi cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1). Geri donusu olan gecislerde (panel acilir/kapanir) gidis ve donus AYNI YOLU izlesin diye: gelis yavaslayarak yerine oturur, gidis hizlanarak cekilir. Iki yonde de --ease-out kullanilsaydi kapanis, acilisin tersi degil BASKA bir hareket gibi okunurdu. */ --ease-in: cubic-bezier(1, 0, 0.68, 0.28); --dur-press: 100ms; /* basma geri bildirimi — gecikme hissedilmemeli */ --dur-fast: 180ms; /* renk, kenarlik, kucuk oge */ --dur-panel: 300ms; /* tepki 0.3 — panel, cekmece, akordeon */ --dur-move: 400ms; /* tepki 0.4 — yer degistirme, buyuk hareket */ --dur-slow: 550ms; /* gorsel yakinlasmasi gibi yavas, ortam hareketi */ --dur-reveal: 620ms; /* gorunure girisin uzun yayi */ /* --- Malzeme ----------------------------------------------------------- Saydam katmanlar hiyerarsi anlatir: buyuk yuzey daha kalin bulanir ve daha derin golge dusurur. Ust seritteki ince ust kenar, isigin malzemeye carpmasidir — camin kalinligini gosterir. */ --blur-chrome: 20px; /* ust serit — ince, surekli katman */ --blur-panel: 28px; /* acilir panel — daha buyuk yuzey, daha kalin cam */ --material-sat: 180%; --material-edge: rgba(255, 255, 255, 0.14); } /* --- Koyu tema (varsayılan) — BosApp darkColors ------------------------- */ :root { --bg: #000000; /* darkColors.bgDark */ --bg-soft: #0A0A0A; --surface: #121212; /* darkColors.bgMain */ --surface-2: #1E1E1E; /* darkColors.bgCard */ --border: #2C2C2C; /* darkColors.border — kutu kenarlığı */ --border-strong: #3D3D3D; --border-soft: #242424; /* darkColors.borderLight — kutu İÇİ satır ayracı */ --text: #F5F5F5; /* darkColors.textPrimary */ --muted: #CCCCCC; /* darkColors.textSecondary */ --muted-dim: #9A9A9A; /* darkColors.textMuted */ --prose-fg: rgba(245, 245, 245, 0.88); --vision-dim: rgba(245, 245, 245, 0.26); /* Kart, zeminden bir kademe açılır. Eskiden #121212 → #000000 idi: kartın ALT KENARI sayfayla tam olarak aynı siyahtı, yani kart zemine eriyordu. Bunun sonucu, koyu temada derinliği taşıyan tek şeyi — yüzeyin kendi açıklığını — yok etmekti; gölge zaten siyah üstünde siyah okunmaz. Yeni değer aynı zamanda BosApp'e DAHA sadık: ürünün gerçek kart rengi darkColors.bgCard = #1E1E1E'dir (aşağıdaki --surface-2 ile aynı). Siyaha eriyen gradyan paletin kendisi değil, ondan bir sapmaydı. */ --card-top: #1E1E1E; /* darkColors.bgCard */ --card-bottom: #141414; /* Yüzey üzerine ince ışık katmanları (rozet, segment, hamburger) */ --tint-1: rgba(255, 255, 255, 0.045); --tint-2: rgba(255, 255, 255, 0.075); --header-bg: rgba(0, 0, 0, 0.62); --header-bg-stuck: rgba(0, 0, 0, 0.86); --menu-bg: rgba(0, 0, 0, 0.97); /* Serit ile icerik arasindaki yumusak gecis (1px cizgi yerine) */ --edge-fade: rgba(0, 0, 0, 0.55); /* Saydam yüzey üzerindeki metin. Camın ALTINDAN geçen şey değişkendir: bir an siyah zemin, bir an beyaz bir ekran görüntüsü. Düz gri (#CCCCCC) bu iki durumun ikisinde de zayıf kalır. Canlılık, kontrastı yükseltip ağırlığı bir kademe artırmaktır — renk saydam katmana değil, altındaki dolu katmana konur. */ --vibrant-fg: #E4E4E4; --scrim: rgba(0, 0, 0, 0.55); --field-bg: #161616; --field-bg-hover: #1C1C1C; --field-bg-focus: #1E1E1E; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6); --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(92, 150, 243, 0.10); --art-shadow: rgba(0, 0, 0, 0.75); /* Arka plandaki mavi hüzmeler ve ızgara dokusu */ --glow-opacity: 1; --grid-filter: none; --grid-opacity: .5; color-scheme: dark; } /* --- Açık tema — BosApp colors.ts -------------------------------------- ERTELENDİ (25 Ağu 2026). Palet hazır ama SAYFADA ETKİN DEĞİL: hiçbir yer yazmıyor, arayüzde anahtar yok. Sebep: ürün görselleri beyaz zemine göre üretilmedi — BosMag beyaz gövdeli olduğu için beyaz zemine gömülüyor, cihaz render’ları ve ekran görüntüleri havada duruyor. Açık tema ancak koyu zemin için üretilmiş görsel seti gelince açılmalı. O gün gerekenler: (1) görsellerin açık zemin sürümleri, (2) üzerine data-theme yazan bir anahtar, (3) main.js’te tercihi localStorage’da saklayan küçük bir blok. Logo’nun siyah sürümü (logo-dark.png) ve aşağıdaki değerler zaten hazır. */ [data-theme="light"] { --bg: #FFFFFF; /* colors.bgMain */ --bg-soft: #FAFAFA; --surface: #F2F2F2; /* colors.bgCard — BosLog’un sayfa zemini de aynı */ --surface-2: #FAFAFA; --border: #E4E4E4; /* colors.border */ --border-strong: #D0D0D0; --border-soft: #F0F0F0; /* colors.borderLight */ --text: #151515; /* colors.textPrimary */ --muted: #666666; /* colors.tertiary */ --muted-dim: #999999; /* colors.textMuted */ --prose-fg: #333333; /* colors.textSecondary */ --vision-dim: rgba(21, 21, 21, 0.20); /* Aynı sorunun aynadaki hâli: kartın üst kenarı sayfayla aynı beyazdı. */ --card-top: #FAFAFA; --card-bottom: #F2F2F2; /* colors.bgCard */ --tint-1: rgba(21, 21, 21, 0.035); --tint-2: rgba(21, 21, 21, 0.07); --header-bg: rgba(255, 255, 255, 0.72); --header-bg-stuck: rgba(255, 255, 255, 0.92); --menu-bg: rgba(255, 255, 255, 0.98); --edge-fade: rgba(255, 255, 255, 0.70); --vibrant-fg: #1F1F1F; --scrim: rgba(21, 21, 21, 0.35); /* Işık kenarı her iki temada da IŞIK rengindedir; açık zeminde neredeyse görünmez olması doğrudur — açık yüzeyin üstünde yansıyacak kontrast zaten yoktur. Koyu değer koysaydık bu bir vurgu değil, kenarlık olurdu. */ --material-edge: rgba(255, 255, 255, 0.75); --field-bg: #FAFAFA; /* konsolun alan dolgusu */ --field-bg-hover: #F2F2F2; --field-bg-focus: #FFFFFF; /* konsolda odakta alan beyaza açılır */ --shadow-sm: 0 1px 3px rgba(20, 30, 54, 0.08); --shadow-md: 0 6px 18px rgba(20, 30, 54, 0.10); --shadow-lg: 0 18px 44px rgba(20, 30, 54, 0.16); --shadow-hover: 0 18px 44px rgba(20, 30, 54, 0.16), 0 0 0 1px rgba(92, 150, 243, 0.18); --art-shadow: rgba(20, 30, 54, 0.18); /* Beyaz zeminde hüzmeler kısılır, ızgara dokusu ters çevrilir */ --glow-opacity: .42; --grid-filter: invert(1); --grid-opacity: .28; color-scheme: light; } /* --- Sıfırlama ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); /* 16px yazmak, tarayici varsayilanini 20px yapmis bir kullanicinin tercihini eziyordu. 100% o tercihi olduğu gibi kabul eder; asagidaki punto degerleri rem oldugu icin butun olcek onunla birlikte buyur. */ font-size: 100%; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); /* Konsolda her başlık 800 ağırlıkta; Titillium’un 800 yüzü yok, tarayıcı 700’e yuvarlar — doğrudan 700 yazıyoruz. */ font-weight: 700; margin: 0; text-wrap: balance; /* --- Optik harf araligi ve satir yuksekligi --------------------------- Onceden butun basliklar tek bir degeri paylasiyordu: -0.02em aralik ve 1.12 satir. Buyuk baslikta dogru, kucukte yanlis. Harfler buyudukce aralari optik olarak acilir — bu yuzden 64px'lik baslik SIKILASTIRILIR; 17px'lik bir kart basligi ayni oranda sikilastirilirsa harfler birbirine girer ve okunurluk duser. Satir yuksekligi ters yonde calisir: buyuk baslikta dar, kucuk metinde genis olmali. Ikisi de artik SABIT DEGIL, PUNTONUN FONKSIYONU. calc() icinde em punto ile, px punto ile degismedigi icin, ikisini toplamak "orantisiz" — yani optik — bir egri verir: aralik = -0.03 x punto + 0.51px satir = 0.95 x punto + 7px punto 96px 64px 44px 27px 19px 15px aralik -.025em -.022em -.018em -.011em -.003em +.004em satir 1.02 1.06 1.11 1.21 1.32 1.42 Satir katsayisi 0.94 degil 0.95: Turkce'de I, G, S ve c, g, s, i harfleri hem uzun cikinti hem uzun inti tasiyor. Uzun cikintisi/intisi olan yazilarda satir araligi bir tik acilmali — 64px'te bu tam olarak elle ayarlanmis eski 1.06 degerini veriyor, yani rampa dogru kalibre. clamp() ile akiskan buyuyen basliklarda da kendiliginden dogru calisir: ekran daraldikca baslik kuculur, aralik gevser, satir acilir. */ letter-spacing: calc(-0.03em + 0.51px); line-height: calc(0.95em + 7px); } /* Uzun gövde metninde son satırda tek kelime kalmasın */ p { margin: 0; text-wrap: pretty; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } /* Ekran okuyucu için gizli */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* İçeriğe atla bağlantısı */ .skip-link { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%); /* --blue (#5C96F3) uzerinde beyaz metin 2.95:1 veriyordu, WCAG AA 4.5:1 istiyor. Ustelik bu bag yalnizca klavye odaginda goruniyor — yani tam da dusuk kontrasttan en cok etkilenecek kullanicida. --blue-deep (#0050B5) ile ayni beyaz metin 7.46:1"e cikiyor, gorunum degismiyor. */ background: var(--blue-deep); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 600; z-index: 200; transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus { transform: translate(-50%, 0); } /* --- Düzen --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: 104px; } .section--tight { padding-block: 72px; } /* Bölüm üstündeki ince ayırıcı çizgi */ .section--divided { border-top: 1px solid var(--border); } /* Arka plan ışıması — bölümlerin üstüne binen radyal mavi hüzme */ .glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; /* Beyaz zeminde mavi hüzmeler kısılır — bkz. --glow-opacity */ opacity: var(--glow-opacity); } .glow::before { content: ""; position: absolute; left: 50%; top: -78px; width: min(1100px, 130%); aspect-ratio: 1 / 0.62; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(92, 150, 243, 0.20) 0%, rgba(0, 80, 181, 0.10) 34%, transparent 68%); filter: blur(4px); } .glow--bottom::before { top: auto; bottom: -170px; } .section > .wrap { position: relative; z-index: 1; } /* --- Bölüm başlıkları ---------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(79, 209, 224, 0.10), transparent); box-shadow: inset 0 1px 0 var(--material-edge), inset 0 0 24px rgba(92, 150, 243, 0.18); /* Konsolun mikro etiketi: marka fontu, 700, büyük harf, dar aralık */ font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; color: var(--text); } .section-head { text-align: center; max-width: 720px; margin-inline: auto; } .section-head .eyebrow { margin-bottom: 26px; } .section-head h2, .section-head h1:not(.eyebrow) { font-size: clamp(1.875rem, 4.2vw, 3.1875rem); } .section-head p { margin-top: 18px; color: var(--muted); font-size: 0.9375rem; line-height: 1.7; } /* --- Butonlar ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 0; /* Konsolda tüm kontroller 9px — buton da hap değil, yumuşak dikdörtgen */ border-radius: var(--radius-ctl); font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } /* Konsolun birincil butonu: 180deg blue-600 → blue-700, hover’da renk değiştirmez, parlaklık çarpar. */ .btn--primary { background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 6px 20px rgba(0, 80, 181, 0.38); } .btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn--bright { background: var(--blue-500); color: var(--ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 26px rgba(92, 150, 243, 0.34); } .btn--bright:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn--block { width: 100%; padding-block: 14px; } .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; } /* --- Kartlar ------------------------------------------------------------- */ /* Konsolun en belirgin işareti: her kart AYNI ANDA kenarlık ve gölge taşır — ikisinden biri değil. */ .card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 50% 0%, rgba(92, 150, 243, 0.07) 0%, transparent 60%), linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%); /* Üst kenardaki ince aydınlık çizgi = ışığın malzemeye çarpması. Neredeyse siyah bir zeminde gölge okunmaz — 0 1px 3px siyah, siyahın üstünde görünmez. Derinliği taşıyan şey gölge değil, YÜZEYIN KENDI IŞIĞIDIR. Bu tek satır, kartı sayfadan fiziksel olarak ayıran şeydir. */ box-shadow: inset 0 1px 0 var(--material-edge), var(--shadow-sm); overflow: hidden; } /* İkon kutusu */ .icon-box { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-ctl); border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(42, 111, 219, 0.28), rgba(19, 26, 46, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); color: var(--blue); flex: none; } .icon-box svg { width: 20px; height: 20px; } /* --- Üst menü ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); /* Saydam malzeme: bulaniklik + doygunluk. Doygunluk olmadan altindan gecen renkler gri camasir suyuna donuyor; %180 camin altindaki rengi canli tutar — Apple'in malzemelerini "cam" yapan sey budur. */ backdrop-filter: blur(var(--blur-chrome)) saturate(var(--material-sat)); -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(var(--material-sat)); /* Ust kenardaki ince aydinlik cizgi = isigin malzemeye carpmasi. */ border-bottom: 1px solid transparent; box-shadow: inset 0 1px 0 var(--material-edge); transition: background-color var(--dur-panel) var(--ease-out); } .site-header.is-stuck { background: var(--header-bg-stuck); } /* Kaydirma kenari etkisi (§12): serit ile icerik arasina 1px sert cizgi koymak yerine, ikisinin ortustugu yerde kisa bir yumusama birakiliyor. Cizgi "burada bir kutu bitti" der; solma "icerik bu seridin ALTINDAN geciyor" der — floating chrome'un dogru anlatimi budur. Yalnizca serit gercekten icerigin ustune bindiginde (is-stuck) belirir. */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, var(--edge-fade), transparent); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); transition: opacity var(--dur-panel) var(--ease-out); } .site-header.is-stuck::after { opacity: 1; } /* Menu acikken serit ile icerik arasinda "gecis" diye bir sey yok: panel ikisinin arasini zaten tamamen kapatiyor. */ .site-header.is-open::after { opacity: 0; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; } .nav__logo { display: flex; align-items: center; min-height: 44px; } .nav__logo img { width: 129px; height: auto; } .nav__links { display: flex; align-items: center; gap: 34px; margin: 0 0 0 auto; padding: 0; list-style: none; } .nav__links a { font-size: 0.9375rem; /* Saydam şerit üzerindeki metin: daha yüksek kontrast, bir kademe kalın ve minik bir aralık artışı. Üçü birlikte, altından ne geçerse geçsin yazının okunmasını sağlar. */ color: var(--vibrant-fg); font-weight: 500; letter-spacing: 0.008em; transition: color var(--dur-fast) var(--ease-out); } .nav__links a:hover, .nav__links a[aria-current="page"], .nav__links a.is-section { color: var(--text); } /* aktif bolum */ .nav__cta { margin-left: 8px; } /* Mobil menü düğmesi */ .nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-ctl); background: var(--tint-1); cursor: pointer; padding: 0; /* Uc cizgi izgara satirlarina dagiliyordu: olculen aralik 6.5px degil 15px idi, bu yuzden acik haldeki +-6.5px oteleme cizgileri ayni merkezde bulusturamiyor ve X yerine ">" gibi gorunuyordu. place-content satirlari paketler, gap araligi 6.5px"e sabitler. */ place-content: center; justify-items: center; gap: 5px; } .nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* --- Dil değiştirici ------------------------------------------------------ Konsolun sol rayındaki etkin öğe dili: dolu blue-700 blok, 9px köşe, bekleyen öğeler #8A93AD. Segment kontrolü bu idyomun yatay hâli. */ .langswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-left: 22px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--tint-1); flex: none; } .langswitch a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 28px; padding: 0 9px; border-radius: 6px; font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted-dim); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .langswitch a:hover { background: var(--tint-2); color: var(--text); } .langswitch a[aria-current="true"] { background: var(--blue-700); color: #fff; } /* --- Açık tema kalıntısı --------------------------------------------------- Logo beyaz mürekkeplidir; açık tema geri geldiğinde siyah sürümü (assets/img/logo-dark.png, hazır) gösterecek kural burada durur. */ .brand--light { display: none; } [data-theme="light"] .brand--dark { display: none; } [data-theme="light"] .brand--light { display: block; } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; padding-block: 72px 96px; overflow: hidden; } .hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: var(--glow-opacity); } /* Sağ üstten gelen mavi hüzme */ .hero__bg::before { content: ""; position: absolute; right: -8%; top: -32%; width: 78%; height: 150%; background: radial-gradient(ellipse at 62% 34%, rgba(92, 150, 243, 0.24) 0%, rgba(0, 80, 181, 0.11) 32%, transparent 66%); transform: rotate(-14deg); filter: blur(6px); } /* Izgara dokusu */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: url("../img/grid.svg") center / 513px 272px repeat; /* Izgara beyaz çizgilidir; açık temada ters çevrilir */ filter: var(--grid-filter); opacity: var(--grid-opacity); mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 72%); } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: 48px; } .hero__art { position: relative; } .hero__art img { width: 100%; max-width: 380px; margin-inline: auto; filter: drop-shadow(0 34px 60px var(--art-shadow)); } .hero__copy h1 { font-size: clamp(2.125rem, 5.2vw, 4rem); } .hero__copy p { margin-top: 22px; max-width: 46ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.75; } .hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } /* --- Vizyon -------------------------------------------------------------- */ .vision { text-align: center; } .vision .eyebrow { margin-bottom: 34px; } .vision__text { max-width: 680px; margin-inline: auto; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.375rem, 3.2vw, 2.25rem); line-height: 1.36; letter-spacing: calc(-0.03em + 0.51px); color: var(--vision-dim); } /* Kaydırırken kelime kelime aydınlanan metin */ .vision__text .w { transition: color var(--dur-move) var(--ease-out); color: inherit; } .vision__text .w.on { color: var(--text); } .vision__text .hl { color: var(--blue); } .vision__text .hl.on { color: var(--blue); } /* --- Özellikler ---------------------------------------------------------- */ .features__badge { display: flex; justify-content: center; margin-bottom: 26px; } /* Üç eşit kart yan yana, her sitede görülen kalıptır. İlk kartı genişletmek çekirdek önermeyi (mesajlaşma) öne çıkarır ve sırayı kırar. */ .feature-grid { margin-top: 56px; display: grid; grid-template-columns: 1.24fr 1fr 1fr; gap: 18px; } .feature-card { padding: 34px 30px 38px; } .feature-card h3 { margin-top: 26px; font-size: 1.1875rem; font-weight: 600; } .feature-card p { margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.7; } /* Küçük istatistik satırı */ .mini-row { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 46px; } .mini-row li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.84375rem; } .mini-row { list-style: none; padding: 0; } .mini-row svg { width: 16px; height: 16px; color: var(--blue); flex: none; } /* --- Hibrit iletişim ------------------------------------------------------ İki taşıyıcı yan yana. Kartlar iç içe iki çerçeve taşır: dış kabuk 14px, iç çekirdek 9px ve arada 5px boşluk — 14 eksi 5 dokuz ettiği için köşeler eşmerkezli kalır, içiçe geçen yayın kırılması olmaz. Yarıçapların üçü de konsolun kendi ölçeğinden. */ .modes { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mode { padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--tint-1); transition: border-color var(--dur-move) var(--ease-out); } .mode:hover { border-color: var(--border-strong); } .mode__inner { height: 100%; padding: 24px 26px 28px; border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%); box-shadow: var(--shadow-sm); } /* Durum rozeti — konsolun nokta-sonra-etiket idyomu. Nokta burada gerçek bir durumu anlatıyor: şebeke var mı, yok mu. */ .mode__state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius-pill); font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } .mode__state i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .mode--online .mode__state { background: rgba(31, 157, 85, 0.14); color: var(--green-on-dark); } .mode--online .mode__state i { background: var(--green-500); } .mode--offline .mode__state { background: rgba(227, 160, 8, 0.14); color: var(--amber-on-dark); } .mode--offline .mode__state i { background: var(--amber-500); } /* Şema. Bir çizim değil, bir OLAYIN KAYDI: soldaki telefondan çıkan tek bir mesajın karşı tarafa varana kadar geçtiği yol. Simgeler bilerek sade — dikdörtgen telefon, mavi nokta cihaz. Üç katman var ve üçü farklı ağırlıkta çizilir, göz bu sırayla okusun diye: 1. TOPOLOJİ sönük, currentColor — hangi cihaz nerede, hangi hat var. Hep görünür; hareket dursa bile şema eksik kalmaz. 2. TAŞIMA kalın, marka mavisi — o an havada olan paket. Tek parça; hattın başında belirir, sonunda kaybolur. 3. VARIŞ anlık mavi dolgu — paketin düştüğü cihaz yanar. Önceki çizimde bütün hatlar aynı anda ve aynı fazda akıyordu. Gerçekte olan bu değil: örgü ağda paket bir durağa VARIR, o durak onu YENİDEN yayınlar. Aşağıdaki .step-* gecikmeleri bu sırayı anlatır; şemayı süsten ayıran şey de bu. */ .mode__art { display: block; width: 100%; height: auto; margin: 26px 0 2px; color: var(--muted-dim); overflow: visible; stroke-linecap: round; stroke-linejoin: round; } /* 1) Topoloji — duran her şey ------------------------------------------- */ .mode__art .shell { stroke: currentColor; stroke-width: 1.5; } .mode__art .link { stroke: currentColor; stroke-width: 1.5; opacity: .3; } /* Örgü ağın kullanılmayan ikinci yolu. Sönük duruyor: yol var, trafik yok — ağı bir zincirden ayıran şey bu yedek yoldur. */ .mode__art .link--alt { stroke-dasharray: 2 5; opacity: .16; } .mode__art .node { fill: var(--blue-700); stroke: var(--blue-500); stroke-width: 1.5; } /* 2) Taşıma — havadaki paket -------------------------------------------- */ /* pathLength="100" her hattı aynı ölçeğe indirir: hat ister 70 ister 140 birim olsun paket ikisini de aynı sürede geçer. Boşluk (120) yol boyundan uzun tutuldu; kısa olsaydı desen başa sarar ve hattın sonunda ikinci bir paket belirirdi. Park değerleri (13 ve -117) deseni yolun İKİ ucundan da tamamen dışarı atar — tam sınırda bırakılırsa yuvarlak uç orada bir nokta bırakıyor. Hız sabit olmalı — radyo dalgası hızlanıp yavaşlamaz — bu yüzden bilerek linear. */ .mode__art .send { stroke: var(--blue-500); stroke-width: 2.5; stroke-dasharray: 10 120; stroke-dashoffset: 13; animation: send 4s linear 0s infinite; } /* Bir bacagin havada gecen suresi: 1,7 sn = %42,5. Iki bacak arka arkaya 3,4 sn eder; ayni sayi orgu agdaki dort atlamanin toplami. Iki kart bu yuzden ayni anda baslayip ayni anda biter. */ @keyframes send { 0% { stroke-dashoffset: 13; } 42.5%, 100% { stroke-dashoffset: -117; } } /* Örgü ağ kartında iki uzun bacak değil dört kısa atlama var; her biri daha çabuk kat edilir. Menzilin neden atlamayla büyüdüğü de buradan okunur. */ .mode--offline .mode__art .send { animation-name: send-hop; } @keyframes send-hop { 0% { stroke-dashoffset: 13; } 21.25%, 100% { stroke-dashoffset: -117; } } /* 3) Varış — paketin düştüğü yer ---------------------------------------- */ /* Kural: açık mavi (--blue-500) HAREKET, koyu mavi (--blue-700) DURAKLAMA. Nokta zaten koyu mavi olduğu için o, açık maviye parlayarak varışı gösterir; içi boş telefon ve sunucu ise koyu maviyle dolar. */ .mode__art .flash { opacity: 0; animation: flash 4s linear infinite; } .mode__art .flash--face { fill: var(--blue-700); fill-opacity: .92; } /* Nokta zaten koyu mavi duruyor; varisi okunur kilmak icin iki kademe birden aciliyor (--blue-700 -> --blue-300). Tek kademe yeterli degildi. */ .mode__art .flash--node { fill: var(--blue-300); } @keyframes flash { 0% { opacity: 0; } 4% { opacity: 1; } /* varış anı — sert */ 26% { opacity: 0; } /* sönüş — yumuşak, ışığın söndüğü gibi */ 100% { opacity: 0; } } /* Yayın halkaları: telsizin havaya bıraktığı dalga. İki halka yeter — ikincisi gecikmeli açıldığı için göz genişleyen tek bir dalga okur. Gecikme sınıfla değil kendi karesiyle veriliyor, böylece iki halka da durağın .step-* sınıfını paylaşabiliyor. */ .mode__art .ring { stroke: var(--blue-500); stroke-width: 1.2; opacity: 0; animation: ring 4s linear infinite; } .mode__art .ring--2 { animation-name: ring-late; } @keyframes ring { 0% { opacity: 0; } 5% { opacity: .5; } 24% { opacity: 0; } 100% { opacity: 0; } } @keyframes ring-late { 0%, 3% { opacity: 0; } 8% { opacity: .42; } 27% { opacity: 0; } 100% { opacity: 0; } } /* Olayın zaman çizelgesi. İki kart da 4 sn'lik aynı döngüyü paylaşır ve ikisi de t=0'da yola çıkıp t=3,4'te karşı telefona varır — yan yana durdukları için farklı bitmeleri yarışıyormuş gibi okunuyordu. Aradaki fark artık süre değil YOL: aynı 3,4 sn'yi biri iki uzun bacakla, öteki dört kısa atlamayla kat eder. Bacak süresi bu yüzden yola göre ayarlı (1,7 sn'ye karşı 0,85 sn), gecikmeler değil. Şebeke var — iki uzun bacak: 0,0 telefon gönderir 1,7 sunucu alır 3,4 karşı telefon alır Şebeke yok — dört kısa atlama: 0,0 telefon gönderir 0,85 / 1,7 / 2,55 duraklar sırayla aktarır 3,4 karşı telefon alır Paket varır varmaz yeniden yola çıkar; ikinci bacağın gecikmesi bu yüzden varış anına eşittir. */ .mode--online .mode__art .step-1 { animation-delay: 1.7s; } .mode--online .mode__art .step-2 { animation-delay: 3.4s; } .mode--online .mode__art .send--2 { animation-delay: 1.7s; } .mode--offline .mode__art .step-1 { animation-delay: .85s; } .mode--offline .mode__art .step-2 { animation-delay: 1.7s; } .mode--offline .mode__art .step-3 { animation-delay: 2.55s; } .mode--offline .mode__art .step-4 { animation-delay: 3.4s; } .mode--offline .mode__art .send--2 { animation-delay: .85s; } .mode--offline .mode__art .send--3 { animation-delay: 1.7s; } .mode--offline .mode__art .send--4 { animation-delay: 2.55s; } /* Blog yazılarındaki şemalar (.post-diagram .flow) hâlâ akan kesik çizgiyi kullanıyor; kare onlar için burada duruyor. */ @keyframes flow { to { stroke-dashoffset: -22; } } .mode h3 { margin-top: 20px; font-size: 1.1875rem; font-weight: 700; } .mode p { margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.7; } .mode__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .mode__chips li { padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--tint-1); color: var(--muted); font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } /* İki modu birbirine bağlayan şerit. Ayraç olarak orta nokta değil çizgi kullanılıyor. */ .modes__spine { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; margin: 24px 0 0; padding: 0; list-style: none; text-align: center; } .modes__spine li { padding: 0 24px; border-left: 1px solid var(--border); color: var(--muted-dim); font-size: 0.84375rem; } .modes__spine li:first-child { border-left: 0; } @media (prefers-reduced-motion: reduce) { /* Hareket kalkınca şema eksik kalmamalı. Anlatılan üç şeyin (yol, taşıma, varış) üçü de duruyor: paket hattın ortasında donar, varış noktaları yanık kalır. Boş bir çizgi bırakmak anlatının üçte ikisini silerdi. */ .mode__art .send { animation: none; stroke-dashoffset: -45; } .mode__art .flash { animation: none; opacity: .85; } .mode__art .ring { animation: none; opacity: .16; } .mode { transition: none; } } /* --- Ürün ailesi --------------------------------------------------------- */ .products { display: grid; gap: 18px; margin-top: 58px; } .product { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr) minmax(0, 0.72fr); gap: 18px; align-items: stretch; } /* Tek numaralı ürünlerde sıralama ters: teknik özellikler solda, görsel sağda */ .product--flip { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.18fr) minmax(0, 0.92fr); } .product--flip .product__art { order: 3; } .product--flip .product__body { order: 2; } .product--flip .product__spec { order: 1; } .product__art { display: grid; place-items: center; padding: 22px; min-height: 290px; } .product__art img { max-height: 296px; width: auto; object-fit: contain; filter: drop-shadow(0 22px 44px var(--art-shadow)); } .product__body { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; text-align: left; } .product--flip .product__body { text-align: right; } .product__body h3 { font-size: 1.875rem; margin-bottom: 16px; } .product__body p { color: var(--muted); font-size: 0.875rem; line-height: 1.75; } .product__spec { padding: 32px 30px; } .product__spec h4 { font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; margin-bottom: 22px; } .product__spec ul { list-style: none; margin: 0; padding: 0; } .product__spec li { color: var(--muted); font-size: 0.84375rem; line-height: 1.5; padding-block: 11px; } /* Kutu İÇİNDEKİ satır ayracı — kutuyu çizen çizgiden bir tık daha yumuşak */ .product__spec li + li { border-top: 1px solid var(--border-soft); } /* --- Kullanım senaryoları ------------------------------------------------ */ /* Senaryolar kutu değil, ayraçlı liste: bir üstteki özellikler bölümüyle aynı ızgara ailesini tekrarlamasın ve uzun metin nefes alsın diye altı kart kaldırıldı. Konsolun kutu içi satır ayracı burada bölümü örgütlüyor. */ .usecase-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 0; } .usecase-card { padding: 30px 2px 32px; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; } .usecase-card h3 { margin-top: 22px; font-size: 1.1875rem; font-weight: 700; } .usecase-card p { margin-top: 12px; color: var(--muted); font-size: 0.875rem; line-height: 1.7; } /* --- Kayan etiket şeridi ------------------------------------------------- */ .marquee { margin-top: 56px; display: grid; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 46s linear infinite; } .marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 54s; } .marquee__row { overflow: hidden; } /* Imlec seride gelince kayma durmasin — animasyon kesintisiz surer. (Onceki .marquee:hover { animation-play-state: paused } kuralı kaldirildi.) */ .marquee__track span { flex: none; padding: 9px 20px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--tint-1), transparent); color: var(--muted); font-size: 0.84375rem; white-space: nowrap; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { mask-image: none; -webkit-mask-image: none; } .marquee__row { overflow-x: auto; } } /* --- Karşılaştırma ------------------------------------------------------- */ .compare { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 1000px; margin-inline: auto; } .compare__head { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; } .compare__head img { width: 108px; height: auto; } .compare__head svg { width: 19px; height: 19px; color: var(--muted); } .compare__list { list-style: none; margin: 0; padding: 12px 10px; } .compare__list li { display: flex; align-items: center; gap: 13px; padding: 19px 20px; font-size: 0.875rem; line-height: 1.45; } .compare__list li + li { border-top: 1px solid var(--border-soft); } .compare__list svg { width: 17px; height: 17px; flex: none; } .compare--yes .compare__list svg { color: var(--blue); } .compare--no .compare__list { color: var(--muted); } .compare--no .compare__list svg { color: var(--muted-dim); } /* --- Kapanış çağrısı ----------------------------------------------------- */ .closing { text-align: center; overflow: hidden; } .closing .btn { margin-top: 30px; } .closing__art { margin: -30px auto 0; max-width: 400px; } .closing__art img { filter: drop-shadow(0 30px 60px var(--art-shadow)); } /* --- Alt bilgi ----------------------------------------------------------- */ .site-footer { position: relative; border-top: 1px solid var(--border); padding-top: 46px; } .footer__top { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .footer__logo { display: flex; align-items: center; min-height: 44px; /* Menü şeridinin ilk ayraç çizgisi kelime markasına yapışmasın */ padding-right: 30px; } .footer__logo img { width: 129px; height: auto; } .footer__nav { display: flex; align-items: center; flex: 1; list-style: none; margin: 0; padding: 0; } .footer__nav li { flex: 1; text-align: center; border-left: 1px solid var(--border); font-size: 0.875rem; } .footer__nav a { display: block; padding: 15px 10px; color: var(--muted); transition: color var(--dur-fast) var(--ease-out); } .footer__nav a:hover { color: var(--text); } .footer__nav a.is-mail { color: var(--blue); } /* LinkedIn, alt menünün son gözü gibi davranır: ayraç çizgisini sürdürür, kendi kutusu yoktur. Kutulu bir ikon düğmesi olsaydı hemen yanındaki çağrı butonuyla iki rakip düğme gibi çarpışırdı. */ .footer__social { display: grid; place-items: center; min-width: 58px; padding: 15px 16px; border-left: 1px solid var(--border); color: var(--muted-dim); transition: color var(--dur-fast) var(--ease-out); } .footer__social svg { width: 18px; height: 18px; } /* Yatay şeritte ikon tek başına yeterli; metin yalnızca mobilde açılır. */ .footer__social-label { display: none; } .footer__social:hover { color: var(--blue); } /* Çağrı butonu menü şeridinden belirgin biçimde ayrılır */ .footer__cta { margin-left: 28px; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 30px 0 34px; color: var(--muted-dim); font-size: 0.84375rem; } .footer__bottom a { color: var(--muted-dim); } .footer__bottom a:hover { color: var(--muted); } .footer__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .footer__legal a { display: inline-flex; align-items: center; min-height: 40px; } /* Sayfanın en altındaki mavi ışık bandı */ .footer__beam { height: 130px; opacity: var(--glow-opacity); background: radial-gradient(ellipse at 50% 130%, rgba(92, 150, 243, 0.55) 0%, rgba(0, 80, 181, 0.30) 32%, transparent 68%); } /* --- İletişim sayfası ---------------------------------------------------- */ .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 56px; align-items: start; } .contact__intro h1 { font-size: clamp(2rem, 4.6vw, 3.1875rem); margin-top: 24px; } .contact__points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; } .contact__points li { display: flex; gap: 13px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; } .contact__points svg { width: 17px; height: 17px; color: var(--blue); flex: none; margin-top: 4px; } .contact__card { margin-top: 38px; padding: 32px 34px 34px; } .contact__card h2 { font-size: 1.375rem; margin-top: 22px; } .contact__card p { margin-top: 12px; color: var(--muted); font-size: 0.90625rem; line-height: 1.7; } .contact__card a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .form-card { padding: 30px 32px 34px; } .field { margin-bottom: 18px; } .field label { display: block; margin-bottom: 9px; font-family: var(--font-head); font-size: 0.875rem; font-weight: 600; color: var(--text); } .field input, .field textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--field-bg); color: var(--text); font-size: 0.90625rem; /* Kart YÜKSELİR, alan İÇERİ BASILIR. Bu yüzden ışık kenarı kartta üstte, alanda altta: yön, yüzeyin hangi tarafa gittiğini söyler. */ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field textarea { min-height: 122px; resize: vertical; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); } .field input:focus, .field textarea:focus { /* Ürünlerdeki tek tip odak halkası: blue-500 kenarlık + 3px mavi hale, alan dolgusu bir kademe açılır (konsolda #FAFAFA → #fff). */ outline: none; border-color: var(--blue-500); background: var(--field-bg-focus); box-shadow: 0 0 0 3px rgba(92, 150, 243, 0.20); } .field--invalid input, .field--invalid textarea { border-color: var(--red-500); } .field__error { display: none; margin-top: 7px; color: var(--red-on-dark); font-size: 0.78125rem; } .field--invalid .field__error { display: block; } /* Bot tuzağı — ekranda görünmez, ekran okuyucudan da gizli */ .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .form-status { margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-ctl); font-size: 0.875rem; line-height: 1.55; display: none; } .form-status.is-ok { display: block; border: 1px solid rgba(31, 157, 85, 0.42); background: rgba(31, 157, 85, 0.13); color: var(--green-on-dark); } .form-status.is-err { display: block; border: 1px solid rgba(216, 87, 87, 0.42); background: rgba(216, 87, 87, 0.13); color: var(--red-on-dark); } /* --- Hakkımızda / metin sayfaları ---------------------------------------- */ .prose { max-width: 940px; margin-inline: auto; } .prose h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); text-align: center; margin-bottom: 42px; } .prose h2 + p { margin-top: 0; } .prose h3 { font-size: 1.3125rem; margin-top: 40px; margin-bottom: 14px; } .prose p { color: var(--prose-fg); font-size: 1.0625rem; line-height: 1.72; } .prose p + p { margin-top: 22px; } .prose ul { color: var(--muted); font-size: 0.96875rem; line-height: 1.75; padding-left: 22px; } .prose li + li { margin-top: 8px; } .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .prose--legal p, .prose--legal li { font-size: 0.9375rem; color: var(--muted); } .prose--legal h2 { font-size: 1.1875rem; text-align: left; margin-top: 40px; margin-bottom: 14px; } .prose--legal .updated { color: var(--muted-dim); font-size: 0.875rem; text-align: center; margin-bottom: 46px; } .about-block + .about-block { margin-top: 82px; } /* --- Blog ---------------------------------------------------------------- İki yüzey var: /blog listesi ve tek yazı sayfası. İkisi de sitenin geri kalanıyla aynı tokenları kullanır; yeni renk veya köşe tanımlanmadı. */ /* Liste */ .post-list { display: grid; gap: 18px; margin-top: 58px; max-width: 940px; margin-inline: auto; } .post-card { display: block; color: inherit; } .post-card__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: stretch; } .post-card__art { position: relative; overflow: hidden; background: var(--surface-2); } .post-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .post-card:hover .post-card__art img { transform: scale(1.045); } /* Ürün render'ları saydam ve dik; fotoğraf gibi kırpılırlarsa cihazın yarısı gider. Bu yüzden kırpmak yerine kutuya sığdırılır. */ .post-card__art--pad { display: grid; place-items: center; padding: 30px; background: radial-gradient(120% 90% at 50% 0%, rgba(92, 150, 243, 0.10) 0%, transparent 62%), /* Kart yüzeyi açıldığına göre bu kuyu ondan KOYU olmalı: içine gömülü bir alan yukarıdan gelen ışığı daha az alır. Eski değerler (--surface → --card-bottom) artık koyudan açığa gidiyordu, yani ışık aşağıdan geliyormuş gibi. */ linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); } .post-card__art--pad img { width: auto; height: auto; max-width: 100%; max-height: 210px; object-fit: contain; } .post-card__body { padding: 32px 34px 34px; display: flex; flex-direction: column; } .post-card__body h2 { margin-top: 14px; font-size: 1.5625rem; } .post-card__body p { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; line-height: 1.72; } .post-card__more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: var(--blue); } .post-card__more svg { width: 15px; height: 15px; transition: transform var(--dur-panel) var(--ease-out); } .post-card:hover .post-card__more svg { transform: translateX(4px); } /* Yazının künyesi: tarih · okuma süresi. Listede ve yazı başında aynı. */ .post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-head); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-dim); } .post-meta__sep { color: var(--border-strong); } /* Yazar adı. Künyenin geri kalanıyla aynı ölçüde durur; bağ olduğu alt çizgiden anlaşılır, renk ancak imleç üstündeyken güçlenir. */ .post-meta__author { color: var(--muted-dim); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: color var(--dur-panel) var(--ease-out), border-color var(--dur-panel) var(--ease-out); } .post-meta__author:hover, .post-meta__author:focus-visible { color: var(--text); border-bottom-color: currentColor; } /* Tek yazı: gövde ölçüsü 760px — 940 uzun metinde satırı fazla uzatıyor. */ .post { max-width: 760px; margin-inline: auto; } .post__head { text-align: center; max-width: 760px; margin-inline: auto; } .post__head h1 { font-size: clamp(1.875rem, 4.6vw, 3rem); } .post__head .post-meta { justify-content: center; margin-top: 24px; } .post__lede { margin-top: 26px; color: var(--text); font-size: 1.125rem; line-height: 1.65; } .post p { color: var(--prose-fg); font-size: 1.03125rem; line-height: 1.78; } .post p + p { margin-top: 20px; } .post h2 { margin-top: 62px; font-size: 1.6875rem; } .post h2 + p { margin-top: 18px; } .post h3 { margin-top: 40px; font-size: 1.1875rem; } .post h3 + p { margin-top: 12px; } .post strong { color: var(--text); font-weight: 600; } /* Gövde metnindeki bağlantılar altı çizili mavi. Buton ve "Tüm yazılar" bağlantısı bunun dışında: aksi hâlde butonun beyaz yazısı maviye dönüyor ve altı çiziliyordu. */ .post a:not(.btn):not(.post__back) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } /* Görseller. Yazının ölçüsünden biraz taşarlar; okuma akışını kesmeden nefes alsınlar diye. */ .post figure { margin: 46px 0 0; } .post figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .post figcaption { margin-top: 14px; color: var(--muted-dim); font-size: 0.84375rem; line-height: 1.6; text-align: center; } .post .figure--wide { margin-inline: -90px; } /* Sahada ne yapıldığını anlatan üç kart */ .poc-grid { display: grid; gap: 16px; margin-top: 30px; } .poc-card { padding: 28px 28px 30px; } .poc-card h3 { margin: 18px 0 0; font-size: 1.125rem; } .poc-card p { margin-top: 10px; color: var(--muted); font-size: 0.9375rem; line-height: 1.72; } .poc-card__tag { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--tint-1); font-family: var(--font-head); font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue); } /* Yazı içi şema. Ana sayfadaki .mode__art ile aynı görsel dili konuşur: kesik akan mavi çizgi taşımayı, dolu mavi daire bir cihazı anlatır. Şemalar süs değil; anlatılan mekanizmanın kendisini gösterirler. */ .post-figure { margin: 46px 0 0; } .post-diagram { display: block; width: 100%; height: auto; padding: 30px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%); box-shadow: var(--shadow-sm); color: var(--muted-dim); overflow: visible; } .post-diagram .flow { stroke: var(--blue-500); stroke-width: 1.5; stroke-linecap: round; fill: none; } .post-diagram .flow--weak { stroke: var(--blue-700); } .post-diagram .flow--dead { stroke: var(--red-on-dark); opacity: .75; } .post-diagram .node { fill: var(--blue-700); stroke: var(--blue-500); stroke-width: 1.5; } .post-diagram .node--off { fill: none; stroke: var(--border-strong); } .post-diagram .box { stroke: currentColor; stroke-width: 1.5; fill: none; } .post-diagram .lbl { fill: var(--muted); font-family: var(--font-head); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; } .post-diagram .lbl--on { fill: var(--blue-300); } .post-diagram .lbl--off { fill: var(--muted-dim); } .post-diagram .flow { stroke-dasharray: 4 7; animation: flow 2.6s linear infinite; } /* Ürün ailesini tanıtan kart ızgarası. Görseller sitenin kendi saydam ürün render'ları — koyu zemin için üretildikleri için blogda da uyuyor. */ .post-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; } .post-product { padding: 26px 26px 30px; } .post-product__art { display: grid; place-items: center; height: 132px; margin-bottom: 20px; } .post-product__art img { max-height: 132px; width: auto; } .post-product h3 { margin: 0; font-size: 1.0625rem; } .post-product p { margin-top: 8px; color: var(--muted); font-size: 0.90625rem; line-height: 1.68; } /* Numaralı anlatım. Madde imi yerine numara kutusu; uzun listelerde nokta nokta akan