/* ========================================================================== Channel Switch — v2 "Open Signal" (acik tema) — CMS template 107 uyarlamasi Ayni yerlesim, acik zemin. Palet logodan: #1C4475 (lacivert) + #009EED (mavi) NOT: .bg-950 / .bg-850 sinif adlari v2'nin koyu surumunden kaldi; HTML degismesin diye korundu. Artik "beyaz bant" ve "mavi tonlu bant" demek. ========================================================================== */ :root { /* Marka */ --navy: #1C4475; --navy-deep: #143154; --blue: #009EED; --blue-deep: #0A72B3; /* acik zeminde okunur mavi metin */ --blue-tint: #E7F4FD; --blue-glow: rgba(0, 158, 237, .30); /* Zeminler */ --bg: #F5F8FC; --bg-flat: #FFFFFF; --bg-tint: #EAF1F9; --card: #FFFFFF; /* Cizgiler */ --line: rgba(28, 68, 117, .14); --line-soft: rgba(28, 68, 117, .08); --line-lit: rgba(0, 158, 237, .55); /* Metin */ --fg: #0E2340; /* basliklar */ --fg-dim: #55657E; /* govde */ --fg-faint: #6B7B93; /* mono etiket, meta */ --radius: 22px; --radius-lg: 30px; --radius-sm: 14px; --shadow-sm: 0 2px 10px -4px rgba(14, 35, 64, .12); --shadow: 0 18px 44px -26px rgba(14, 35, 64, .38); --shadow-lg: 0 30px 70px -34px rgba(28, 68, 117, .50); --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --bs-primary: #1C4475; --bs-primary-rgb: 28, 68, 117; --bs-body-color: #55657E; --bs-body-bg: #F5F8FC; --bs-border-color: rgba(28, 68, 117, .14); } /* ---------- Temel ---------- */ * { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg-dim); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; letter-spacing: -.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; } a { text-decoration: none; color: var(--blue-deep); } a:hover { color: var(--navy); } ::selection { background: var(--blue); color: #fff; } /* ---------- Bolum ritmi ---------- */ .section { padding: 126px 0; position: relative; } .section-sm { padding: 78px 0; position: relative; } @media (max-width: 991.98px) { .section { padding: 80px 0; } .section-sm { padding: 54px 0; } } .bg-950 { background: var(--bg-flat); } /* beyaz bant */ .bg-850 { background: var(--bg-tint); } /* mavi tonlu bant */ .hairline-top { border-top: 1px solid var(--line-soft); } .hairline-bottom { border-bottom: 1px solid var(--line-soft); } /* Arka plan izgarasi */ .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(28, 68, 117, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 68, 117, .07) 1px, transparent 1px); background-size: 78px 78px; mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 25%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 25%, transparent 76%); } /* Aurora lekeleri — acik zeminde cok daha yumusak */ .aurora { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .aurora--blue { background: rgba(0, 158, 237, .22); } .aurora--navy { background: rgba(28, 68, 117, .14); } /* ---------- Tipografi ---------- */ .label { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 1.4rem; } .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 158, 237, .16); } .label--plain::before { display: none; } .h-display { font-size: clamp(2.1rem, 5.1vw, 3.9rem); letter-spacing: -.042em; } .h-section { font-size: clamp(1.9rem, 3.9vw, 3.1rem); } .h-sub { font-size: clamp(1.25rem, 2vw, 1.6rem); } .text-grad { background: linear-gradient(100deg, var(--blue) 0%, var(--navy) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead-lg { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--fg-dim); max-width: 46ch; } .text-fg { color: var(--fg) !important; } .text-faint { color: var(--fg-faint) !important; } .text-blue { color: var(--blue-deep) !important; } /* ---------- Butonlar ---------- */ .btn { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.75rem; --bs-btn-font-size: .92rem; --bs-btn-font-weight: 500; --bs-btn-border-radius: 50rem; font-family: var(--font-body); letter-spacing: -.01em; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease; } .btn-signal { --bs-btn-color: #fff; --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-deep); --bs-btn-hover-border-color: var(--navy-deep); --bs-btn-active-bg: var(--navy-deep); font-weight: 600; box-shadow: 0 14px 32px -18px rgba(28, 68, 117, .85); } .btn-signal:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -18px rgba(28, 68, 117, .9), 0 0 0 4px rgba(0, 158, 237, .14); } .btn-line { --bs-btn-color: var(--fg); --bs-btn-bg: var(--card); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--card); --bs-btn-hover-border-color: var(--line-lit); box-shadow: var(--shadow-sm); } .btn-line:hover { transform: translateY(-2px); } .btn-bare { --bs-btn-color: var(--navy); --bs-btn-padding-x: 0; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; } .btn-bare:hover { color: var(--blue-deep); gap: .9rem; } /* ---------- Navbar (yuzen ada) ---------- */ .nav-shell { position: fixed; top: 14px; left: 0; right: 0; z-index: 1040; transition: top .3s ease; } .nav-island { display: flex; align-items: center; gap: 1rem; padding: .4rem .4rem .4rem 1.05rem; border: 1px solid var(--line); border-radius: 50rem; background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-sm); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } .nav-shell.is-stuck .nav-island { background: rgba(255, 255, 255, .94); border-color: rgba(28, 68, 117, .18); box-shadow: 0 16px 40px -26px rgba(14, 35, 64, .5); } .nav-shell.is-stuck { top: 9px; } /* PNG'lerin seffaf kenarlari kirpildi; bu yukseklik artik dogrudan logonun kendisi */ .nav-island .brand img { height: clamp(40px, 4.2vw, 58px); width: auto; display: block; } /* Navbar icindeki butonlar govde butonlarindan bir tik kucuk */ .nav-island .btn { --bs-btn-padding-y: .58rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: .86rem; } .nav-island .nav-list { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0 auto; padding: 0; } .nav-island .nav-list a { display: block; padding: .45rem .85rem; border-radius: 50rem; font-size: .88rem; font-weight: 500; color: var(--fg-dim); transition: color .22s ease, background .22s ease; } .nav-island .nav-list a:hover { color: var(--navy); background: rgba(28, 68, 117, .06); } .nav-island .nav-list a.active { color: var(--navy); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(0, 158, 237, .32); } .nav-toggle { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--navy); font-size: 1.15rem; align-items: center; justify-content: center; } .lang-pick .dropdown-toggle { border: 1px solid var(--line); border-radius: 50rem; background: var(--card); color: var(--fg-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; padding: .45rem .8rem; } .lang-pick .dropdown-toggle:hover { color: var(--navy); border-color: var(--line-lit); } .lang-pick .dropdown-toggle::after { margin-left: .45rem; } .lang-pick .dropdown-menu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .35rem; min-width: 10.5rem; } .lang-pick .dropdown-item { color: var(--fg-dim); border-radius: 10px; font-size: .88rem; padding: .5rem .7rem; } .lang-pick .dropdown-item:hover { background: rgba(28, 68, 117, .06); color: var(--navy); } .lang-pick .dropdown-item.active { background: var(--blue-tint); color: var(--navy); } @media (max-width: 991.98px) { .nav-toggle { display: inline-flex; } .nav-island { padding-right: .5rem; } .nav-island .nav-collapse { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; display: none; flex-direction: column; gap: .75rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .97); backdrop-filter: blur(18px); box-shadow: var(--shadow); } .nav-island .nav-collapse.open { display: flex; } .nav-island .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; margin: 0; } .nav-island .nav-list a { padding: .7rem .9rem; } .nav-island .nav-actions { display: flex; gap: .6rem; align-items: center; } .nav-island .nav-actions .btn { flex: 1 1 auto; } } @media (min-width: 992px) { .nav-island .nav-collapse { display: contents; } .nav-island .nav-actions { display: flex; align-items: center; gap: .6rem; } } /* ---------- Hero ---------- */ .hero { position: relative; /* Ust bosluk sabit navbar'i (≈78px) temizler, kalani ekranla olceklenir */ padding: clamp(102px, 5.5vw + 74px, 138px) 0 clamp(54px, 5vw, 88px); background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 62%); overflow: hidden; } .hero .aurora--a { width: 640px; height: 640px; top: -260px; right: -160px; } .hero .aurora--b { width: 560px; height: 560px; bottom: -300px; left: -200px; } .hero > .container { position: relative; z-index: 2; } .hero h1 { margin-bottom: 1.15rem; } .hero-note { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .45rem; border: 1px solid var(--line); border-radius: 50rem; background: var(--card); box-shadow: var(--shadow-sm); font-size: .78rem; color: var(--fg-dim); margin-bottom: 1.3rem; } .hero-note b { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #04263A; background: var(--blue); padding: .22rem .6rem; border-radius: 50rem; font-weight: 600; } /* Hero gorseli: dogrudan baglanti semasi */ .wire { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 50% 0%, rgba(0, 158, 237, .10), transparent 62%), var(--card); box-shadow: var(--shadow-lg); padding: clamp(1.1rem, 1.6vw, 1.5rem); overflow: hidden; } .wire::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(28, 68, 117, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 68, 117, .06) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; } .wire-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); padding-bottom: 1.1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line-soft); position: relative; z-index: 2; } .wire-live { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue-deep); } .wire-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 var(--blue-glow); } 50% { opacity: .5; box-shadow: 0 0 0 6px rgba(0,158,237,0); } } .wire-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; } .wire-col { display: grid; gap: .6rem; } .wire-node { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); font-size: .82rem; color: var(--fg); font-weight: 500; } .wire-node span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--fg-faint); display: block; font-weight: 400; } .wire-node i { color: var(--blue-deep); font-size: 1rem; } .wire-hub { display: grid; place-items: center; text-align: center; width: 104px; height: 104px; border-radius: 26px; color: #fff; background: linear-gradient(140deg, var(--blue), var(--navy)); box-shadow: 0 16px 38px -14px rgba(28, 68, 117, .75); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; line-height: 1.5; } .wire-hub i { font-size: 1.5rem; display: block; margin-bottom: .15rem; } .wire-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); } .wire-foot div { flex: 1; } .wire-foot .v { font-family: var(--font-display); font-size: 1.3rem; color: var(--fg); line-height: 1; } .wire-foot .k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin-top: .35rem; } @media (max-width: 575.98px) { .wire-grid { grid-template-columns: 1fr; } .wire-hub { width: 100%; height: 76px; } } /* ---------- Marquee ---------- */ .marquee { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-flat); overflow: hidden; padding: 1.1rem 0; } .marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { display: inline-flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; } .marquee-track span::after { content: "◆"; color: var(--blue); font-size: .55rem; letter-spacing: 0; } @keyframes slide { to { transform: translateX(-50%); } } /* ---------- Bento ---------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .bento-tile { position: relative; grid-column: span 3; padding: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .bento-tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 158, 237, .10), transparent 62%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .bento-tile:hover { border-color: var(--line-lit); transform: translateY(-4px); box-shadow: var(--shadow); } .bento-tile:hover::after { opacity: 1; } .bento-tile > * { position: relative; z-index: 1; } .bento-tile h3 { font-size: 1.22rem; margin-bottom: .7rem; } .bento-tile p { margin-bottom: 0; font-size: .95rem; } .bento-tile--wide { grid-column: span 4; } .bento-tile--narrow { grid-column: span 2; } @media (max-width: 991.98px) { .bento-tile, .bento-tile--wide, .bento-tile--narrow { grid-column: span 6; } } .tile-num { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; color: var(--fg-faint); margin-bottom: 1.4rem; display: block; } .tile-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(0, 158, 237, .22); border-radius: 15px; background: var(--blue-tint); color: var(--blue-deep); font-size: 1.2rem; margin-bottom: 1.3rem; transition: background .3s ease, color .3s ease, border-color .3s ease; } .bento-tile:hover .tile-icon, .reach:hover .tile-icon { background: var(--blue); color: #fff; border-color: var(--blue); } /* ---------- Hairline satirlari ---------- */ .rule-list { border-top: 1px solid var(--line-soft); } .rule-item { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line-soft); transition: padding-left .3s ease; } .rule-item:hover { padding-left: .6rem; } .rule-item .k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; color: var(--blue-deep); padding-top: .45rem; min-width: 3rem; } .rule-item h3 { font-size: 1.15rem; margin-bottom: .45rem; } .rule-item p { margin: 0; font-size: .95rem; } /* ---------- Rakamlar ---------- */ .figures { display: grid; grid-template-columns: repeat(4, 1fr); } .figures > div { padding: 2.4rem 1.5rem; border-left: 1px solid var(--line-soft); text-align: center; } .figures > div:first-child { border-left: 0; } .figure-v { font-family: var(--font-display); font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.05em; } .figure-k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin: .8rem 0 0; } @media (max-width: 767.98px) { .figures { grid-template-columns: repeat(2, 1fr); } .figures > div:nth-child(odd) { border-left: 0; } .figures > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); } } /* ---------- Gorsel cerceveleri ---------- */ .shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot--wide { aspect-ratio: 16 / 11; } .shot--tall { aspect-ratio: 4 / 5; } .shot--square { aspect-ratio: 1; } .shot-pair { position: relative; padding: 0 3rem 3rem 0; } .shot-pair .shot--back { aspect-ratio: 4 / 3; } .shot-pair .shot--front { position: absolute; right: 0; bottom: 0; width: 54%; aspect-ratio: 1; border: 1px solid var(--line); outline: 8px solid var(--bg); } .shot-tag { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 3; display: flex; align-items: center; gap: .8rem; padding: .8rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } .shot-tag .v { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); line-height: 1; } .shot-tag .k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.4; } /* ---------- Isaret listesi ---------- */ .ticks { list-style: none; padding: 0; margin: 0; } .ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .85rem; font-size: .96rem; } .ticks li::before { content: "\2b"; /* fa-plus (Font Awesome 6) */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .05rem; font-size: .7rem; color: var(--blue); } /* ---------- Adimlar ---------- */ .flow { counter-reset: flow; } .flow-step { position: relative; padding: 0 0 2.6rem 4.2rem; } .flow-step:last-child { padding-bottom: 0; } .flow-step::before { counter-increment: flow; content: "0" counter(flow); position: absolute; left: 0; top: -.15rem; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(0, 158, 237, .28); border-radius: 50%; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--blue-deep); background: var(--blue-tint); } .flow-step::after { content: ""; position: absolute; left: 23.5px; top: 54px; bottom: .6rem; width: 1px; background: linear-gradient(180deg, rgba(0,158,237,.5), transparent); } .flow-step:last-child::after { display: none; } .flow-step h3 { font-size: 1.1rem; margin-bottom: .45rem; } .flow-step p { margin: 0; font-size: .95rem; } /* ---------- Sayfa basligi ---------- */ .page-head { position: relative; padding: clamp(102px, 5.5vw + 74px, 140px) 0 clamp(44px, 4vw, 74px); background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%); overflow: hidden; border-bottom: 1px solid var(--line-soft); } .page-head .aurora--a { width: 620px; height: 620px; top: -340px; left: 42%; } .page-head > .container { position: relative; z-index: 2; } .page-head h1 { font-size: clamp(1.9rem, 4.2vw, 3.15rem); margin-bottom: 1rem; } .page-head p { max-width: 52ch; } .crumb { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.15rem; } .crumb a { color: var(--fg-faint); } .crumb a:hover { color: var(--blue-deep); } .crumb .sep { color: rgba(0, 158, 237, .6); } .crumb .now { color: var(--navy); } /* ---------- Blog ---------- */ .entry { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .entry:hover { border-color: var(--line-lit); transform: translateY(-5px); box-shadow: var(--shadow); } .entry-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .entry-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); } .entry:hover .entry-shot img { transform: scale(1.05); } .entry-kind { position: absolute; left: 1rem; top: 1rem; z-index: 2; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); padding: .32rem .7rem; border: 1px solid var(--line); border-radius: 50rem; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px); } .entry-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1 1 auto; } .entry-meta { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: .9rem; } .entry h3 { font-size: 1.12rem; margin-bottom: .65rem; } .entry h3 a { color: var(--fg); } .entry h3 a:hover { color: var(--blue-deep); } .entry p { font-size: .93rem; } .entry .btn-bare { margin-top: auto; font-size: .88rem; } .prose { font-size: 1.04rem; color: var(--fg-dim); } .prose .lead { font-size: 1.2rem; color: var(--fg); } .prose h2 { font-size: 1.65rem; margin: 2.6rem 0 1rem; } .prose h3 { font-size: 1.22rem; margin: 2rem 0 .75rem; } .prose ul { padding-left: 1.15rem; } .prose li { margin-bottom: .5rem; } .prose blockquote { margin: 2.2rem 0; padding: 1.5rem 1.75rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--blue-tint); color: var(--navy); font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; } .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); padding: 1.6rem; } .panel + .panel { margin-top: 1.25rem; } .panel h4 { font-size: .95rem; margin-bottom: 1.1rem; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); font-weight: 500; } .mini { display: flex; gap: .85rem; align-items: flex-start; } .mini + .mini { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .mini img { width: 64px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; } .mini a { font-size: .9rem; font-weight: 600; color: var(--fg); line-height: 1.45; display: block; } .mini a:hover { color: var(--blue-deep); } .mini .d { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--fg-faint); } /* ---------- Formlar ---------- */ .form-control, .form-select { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg); padding: .85rem 1.05rem; font-size: .95rem; } .form-control::placeholder { color: var(--fg-faint); } .form-control:focus, .form-select:focus { background: #fff; border-color: var(--blue); color: var(--fg); box-shadow: 0 0 0 3px rgba(0, 158, 237, .16); } .form-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .5rem; font-weight: 500; } textarea.form-control { min-height: 150px; } .form-check-input { background-color: #fff; border-color: rgba(28, 68, 117, .3); } .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 158, 237, .16); border-color: var(--blue); } .form-check-label { font-size: .88rem; } .invalid-feedback { font-size: .8rem; } .contact-box { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: 2.4rem; } @media (max-width: 575.98px) { .contact-box { padding: 1.5rem; } } .reach { height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; background: var(--card); box-shadow: var(--shadow-sm); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .reach:hover { border-color: var(--line-lit); transform: translateY(-4px); box-shadow: var(--shadow); } .reach h3 { font-size: 1.02rem; margin-bottom: .5rem; } .reach p, .reach a { font-size: .93rem; margin-bottom: 0; } .reach p { color: var(--fg-dim); } .map-el { width: 100%; height: 430px; border: 1px solid var(--line); border-radius: var(--radius-lg); display: block; box-shadow: var(--shadow); } /* ---------- Accordion ---------- */ .accordion { --bs-accordion-bg: transparent; } .accordion-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: .85rem; overflow: hidden; box-shadow: var(--shadow-sm); } .accordion-button { background: var(--card); color: var(--fg); font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.02em; padding: 1.2rem 1.4rem; } .accordion-button:not(.collapsed) { background: var(--blue-tint); color: var(--navy); box-shadow: none; } .accordion-button:focus { box-shadow: none; border-color: transparent; } .accordion-button::after { width: .95rem; height: .95rem; background-size: .95rem; } .accordion-body { padding: 0 1.4rem 1.35rem; font-size: .95rem; color: var(--fg-dim); } /* ---------- CTA (sayfanin tek koyu blogu) ---------- */ .cta { position: relative; border-radius: var(--radius-lg); padding: 4rem 3rem; overflow: hidden; color: rgba(255, 255, 255, .78); background: radial-gradient(110% 130% at 8% 0%, rgba(0, 158, 237, .55), transparent 58%), linear-gradient(120deg, var(--navy) 0%, #12294A 100%); box-shadow: var(--shadow-lg); } .cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 70% 90% at 70% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 30%, #000, transparent 75%); } .cta > * { position: relative; z-index: 1; } .cta h2 { color: #fff; } .cta .label { color: #8FD9FF; } .cta .text-faint { color: rgba(255, 255, 255, .62) !important; } .cta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .cta a:hover { color: #8FD9FF; } .cta .form-control { border-color: rgba(255, 255, 255, .22); } .cta .form-check-input { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); } .cta .btn-signal { --bs-btn-color: var(--navy); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #E7F4FD; --bs-btn-hover-border-color: #E7F4FD; box-shadow: none; } .cta .invalid-feedback { color: #FFC9D6; } /* .cta a genel kurali butonlari ezmesin (beyaz zeminde beyaz metin + alt cizgi) */ .cta .btn { text-decoration: none; } .cta .btn-signal { color: var(--navy); } .cta .btn-signal:hover { color: var(--navy); } .cta .btn-line { color: var(--fg); } .cta .btn-line:hover { color: var(--navy); } @media (max-width: 767.98px) { .cta { padding: 2.4rem 1.5rem; } } /* ---------- Footer (koyu capa) ---------- */ .foot { background: #0E2340; color: rgba(255, 255, 255, .66); padding-top: 84px; } .foot .foot-logo { height: clamp(34px, 3vw, 42px); width: auto; margin-bottom: 1.4rem; } .foot h4 { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 500; margin-bottom: 1.35rem; } .foot ul { list-style: none; padding: 0; margin: 0; } .foot li + li { margin-top: .7rem; } .foot a { color: rgba(255, 255, 255, .66); font-size: .93rem; } .foot a:hover { color: #fff; } .foot .reach-list li { display: flex; gap: .7rem; font-size: .93rem; } .foot .reach-list i { color: var(--blue); margin-top: .3rem; font-size: .85rem; } .foot-base { margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.6rem 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .foot .socials a { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); } .foot .socials a:hover { background: var(--blue); border-color: var(--blue); color: #fff; } .socials { display: flex; gap: .55rem; } .socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--fg-dim); font-size: .95rem; transition: all .25s ease; } .socials a:hover { color: #fff; background: var(--blue); border-color: var(--blue); transform: translateY(-3px); } /* ---------- Sayfalama ---------- */ .pagination { --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--line); --bs-pagination-color: var(--fg-dim); } .page-link { border-radius: 50rem !important; margin: 0 .2rem; min-width: 42px; text-align: center; font-size: .88rem; } .page-link:hover { background: var(--blue-tint); color: var(--navy); border-color: var(--line-lit); } .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; } .page-item.disabled .page-link { background: #fff; color: var(--fg-faint); opacity: .55; } /* ---------- Yukari cik ---------- */ #toTop { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: var(--shadow); color: var(--navy); font-size: 1rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease; z-index: 1035; } #toTop.on { opacity: 1; visibility: visible; transform: none; } #toTop:hover { color: #fff; background: var(--blue); border-color: var(--blue); } /* ---------- Reveal ---------- */ /* Belirme animasyonu yalniz JS calisiyorsa (html.js) devreye girer; main.js yuklenmezse icerik gorunur kalir */ html.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); } html.js [data-in].shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } [data-in] { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } .wire-live i { animation: none; } .btn, .bento-tile, .entry, .reach { transition: none; } } /* ========================================================================== Connectivity positioning eklentileri (Ağu 2026) Ekosistem şeması, karşılaştırma panelleri, bağlantı çiftleri, veri çipleri ========================================================================== */ /* ---------- Ekosistem seması: sistemler <-> ChannelSwitch <-> sistemler ---------- */ .eco { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: clamp(1.6rem, 3.4vw, 2.8rem); overflow: hidden; } .eco::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 50% 50%, rgba(0, 158, 237, .10), transparent 70%); pointer-events: none; } .eco > * { position: relative; z-index: 1; } .eco-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .6rem; } .eco-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 50rem; background: var(--bg); font-size: .85rem; font-weight: 600; color: var(--fg); white-space: nowrap; } .eco-chip i { color: var(--blue-deep); font-size: .95rem; } .eco-flow { display: flex; justify-content: center; gap: clamp(2rem, 8vw, 5rem); margin: 1rem 0; color: var(--blue-deep); font-size: 1.05rem; line-height: 1; } .eco-hub { margin: 0 auto; max-width: 620px; text-align: center; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 120%); color: #fff; border-radius: var(--radius); padding: 1.2rem 1.8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; box-shadow: var(--shadow-lg); } .eco-hub small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #BFE9FF; margin-top: .35rem; } .eco-caption { text-align: center; margin: 1.6rem 0 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); } .eco-caption b { color: var(--blue-deep); font-weight: 500; } /* ---------- Karsilastirma: point-to-point vs gateway ---------- */ .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .versus-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 1.9rem 1.6rem; text-align: center; } .versus-card svg { width: 100%; height: auto; max-width: 340px; } .versus-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); display: block; margin-bottom: 1.2rem; } .versus-card p { font-size: .88rem; margin: 1.1rem 0 0; } .versus-card--good { border-color: var(--line-lit); box-shadow: var(--shadow); } .versus-card--good .versus-tag { color: var(--blue-deep); } @media (max-width: 767.98px) { .versus { grid-template-columns: 1fr; } } /* ---------- Baglanti ciftleri (PMS <-> Channel Manager vb.) ---------- */ .pairs { display: grid; gap: .55rem; } .pair { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: .72rem 1.05rem; font-size: .9rem; font-weight: 600; color: var(--fg); } .pair i { color: var(--blue-deep); font-size: .9rem; flex: 0 0 auto; } /* ---------- Veri cipleri ---------- */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chips span { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 50rem; background: var(--bg-flat); font-size: .85rem; color: var(--fg-dim); } .bg-950 .chips span, .bg-950 .pair { background: var(--bg); } /* ---------- Hero tipografisi bir tik kucuk (Agu 2026) ---------- Sadece hero'ya ozel; site geneli olculer degismedi. SEO/GEO etkisi yok, H1/H2 hiyerarsisi ayni. Diyagram karti (.wire) zaten kucuk, dokunulmadi. */ .hero .h-display { font-size: clamp(1.9rem, 4.6vw, 3.45rem); } .hero .lead-lg { font-size: clamp(.96rem, 1.4vw, 1.08rem); } .hero p { font-size: .92rem; } .hero .hero-note { font-size: .73rem; } .hero .label { font-size: .65rem; } .hero .btn-lg { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1.55rem; --bs-btn-font-size: .88rem; } /* ---------- Ok cipli sik buton (btn-bare'in gosterisli hali) ---------- */ .btn-flow { display: inline-flex; align-items: center; gap: .9rem; padding: .45rem .5rem .45rem 1.5rem; border: 1px solid var(--line); border-radius: 50rem; background: var(--card); color: var(--navy); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease, color .3s ease; } .btn-flow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,158,237,.10), rgba(28,68,117,.06)); opacity: 0; transition: opacity .3s ease; } .btn-flow > * { position: relative; z-index: 1; } .btn-flow .arr { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 110%); color: #fff; font-size: .95rem; box-shadow: 0 8px 18px -8px var(--blue-glow); transition: transform .3s cubic-bezier(.2,.7,.3,1); } .btn-flow .arr i { transition: transform .3s cubic-bezier(.2,.7,.3,1); } .btn-flow:hover { color: var(--navy); border-color: var(--line-lit); transform: translateY(-2px); box-shadow: 0 18px 38px -20px rgba(28, 68, 117, .55), 0 0 0 4px rgba(0, 158, 237, .10); } .btn-flow:hover::before { opacity: 1; } .btn-flow:hover .arr { transform: scale(1.06); } .btn-flow:hover .arr i { transform: translateX(3px); } /* ---------- "Built for technology companies" panosu ---------- */ .claim { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3.6rem); } .claim::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(28, 68, 117, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 68, 117, .06) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 90% at 88% 12%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 60% 90% at 88% 12%, #000, transparent 72%); } .claim::after { content: ""; position: absolute; width: 460px; height: 460px; top: -220px; right: -160px; border-radius: 50%; background: rgba(0, 158, 237, .12); filter: blur(110px); pointer-events: none; } .claim > * { position: relative; z-index: 1; } .claim-item { display: flex; gap: 1.15rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 1.35rem 1.5rem; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .claim-item + .claim-item { margin-top: 1rem; } .claim-item:hover { border-color: var(--line-lit); transform: translateY(-3px); box-shadow: var(--shadow); } .claim-item:hover .tile-icon { background: var(--blue); color: #fff; border-color: var(--blue); } .claim-item .tile-icon { flex: 0 0 auto; margin-bottom: 0; } .claim-item h3 { font-size: 1.1rem; margin-bottom: .4rem; } .claim-item p { margin: 0; font-size: .92rem; } /* ---------- Hero semasi: dikey yapi (Your platform -> ChannelSwitch -> Connected systems) ---------- */ .wire-group { display: block; text-align: center; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .55rem; } .wire .eco-row { gap: .4rem .45rem; } .wire .eco-chip { font-size: .76rem; padding: .4rem .78rem; gap: .4rem; } .wire .eco-chip i { font-size: .82rem; } .wire .eco-flow { margin: .7rem 0; gap: 1.6rem; font-size: .95rem; align-items: center; } .wire .eco-flow small { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); } .wire .eco-hub { max-width: 100%; font-size: 1.05rem; padding: .85rem 1.2rem; border-radius: var(--radius-sm); } .wire .eco-hub small { font-size: .58rem; margin-top: .25rem; } .wire-stack { position: relative; z-index: 2; } /* ========================================================================== CMS entegrasyonu ekleri (template 107, Eyl 2026) Icerik kutulari editor HTML'i uretir; asagidaki yapisal kurallar sinif gerektirmeden (ilk

= lead,