'ler içindir. Gerçek bir
![]()
'de sabit height + object-fit:cover görseli kırpar; bu yüzden img'de yükseklik
en-boy oranından gelir. img.media-img (0,1,1) boyut sınıflarını (0,1,0) yener. */
img.media-img { height: auto; }
/* İstisna: iletişim sayfasındaki harita bilinçli olarak sabit yükseklikte bir şerittir. */
img.media-slot-map { height: 220px; }
/*KRITIK:BAS*/
/* === İç sayfa bandı (_PageBanner) === */
/* Tasarımdaki renkler her iki temada da sabit; bant bilinçli olarak koyu kalır. */
.page-banner {
position: relative;
overflow: hidden;
background: linear-gradient(120deg, #16224E 0%, #1B2C66 60%, #22367C 100%);
}
.page-banner::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #5E7CE2 0%, #8FA6F0 40%, transparent 80%);
}
/* Anasayfa hero'suyla aynı kare ızgara: 60px hücre, aşağı doğru sönümlenen maske. */
.pb-desen {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
}
.pb-halka {
position: absolute;
border-radius: 50%;
}
.pb-halka-ust {
right: -90px;
top: -120px;
width: 340px;
height: 340px;
border: 1px solid rgba(255, 255, 255, 0.14);
}
.pb-halka-alt {
right: 60px;
bottom: -150px;
width: 280px;
height: 280px;
border: 1px solid rgba(255, 255, 255, 0.09);
}
.pb-inner {
position: relative;
z-index: 1;
padding-top: clamp(48px, 6.5vw, 84px);
padding-bottom: clamp(48px, 6.5vw, 84px);
display: flex;
flex-direction: column;
gap: 18px;
animation: az-up .6s ease both;
}
.pb-yol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.08em;
}
.pb-yol a { color: rgba(230, 236, 252, 0.55); }
@media (hover: hover) { .pb-yol a:hover { color: #FFFFFF; } }
.pb-yol > span[aria-hidden] { color: rgba(230, 236, 252, 0.3); }
.pb-simdiki {
color: #8FA6F0;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.page-banner h1 {
font-size: clamp(22px, 3.2vw, 40px);
line-height: 1.12;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.01em;
max-width: 820px;
text-wrap: pretty;
}
.pb-ozet {
font-size: clamp(14px, 1.4vw, 17.5px);
line-height: 1.7;
color: rgba(230, 236, 252, 0.72);
max-width: 660px;
}
/* Detay bandı (çözüm ve blog yazıları): aynı zemin, ortalanmış içerik,
başlığın altında sayfa yolu ve ikinci halka sol altta. */
.pb-detay .pb-inner {
align-items: center;
text-align: center;
gap: 16px;
padding-top: clamp(44px, 6vw, 72px);
padding-bottom: clamp(44px, 6vw, 72px);
}
/* Detay başlığı bilinçli olarak sayfa bantlarından küçük; punto etiketten değil
bu kuraldan gelir, başlık seviyesi değişse de görünüm sabit kalır. */
.pb-detay .pb-baslik {
font-size: clamp(22px, 3.3vw, 40px);
line-height: 1.2;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.01em;
max-width: 860px;
text-wrap: pretty;
}
.pb-detay .pb-baslik em { font-style: normal; color: #8FA6F0; }
.pb-detay .pb-halka-alt {
right: auto;
left: -110px;
bottom: -160px;
width: 300px;
height: 300px;
}
.pb-detay .pb-yol { justify-content: center; }
/* === Koyu temada lacivert bantlar === */
/* Aynı gradyanın yaklaşık %62 koyusu: renk tonu korunur, sayfanın koyu zemini
(--bg: #0D1122) ile uyum sağlanır. Anasayfa hero'su ve iç sayfa bandı birlikte
değişmeli; ikisi aynı zemini paylaşıyor. */
[data-theme="dark"] .page-banner,
[data-theme="dark"] .hero2 {
background: linear-gradient(120deg, #0E1530 0%, #111B3F 60%, #15214D 100%);
}
/* Panel, bandın en koyu durağından da koyu kalmalı; aksi halde zemine karışır. */
[data-theme="dark"] .term,
[data-theme="dark"] .term-tab.is-active,
[data-theme="dark"] .stats2 { background: #080C1E; }
[data-theme="dark"] .term-gorsel-bos,
[data-theme="dark"] .hero2 .media-slot {
background:
repeating-linear-gradient(45deg, transparent 0 16px, rgba(94, 124, 226, 0.05) 16px 32px),
linear-gradient(135deg, #111B3F 0%, #080C1E 100%);
}
/*KRITIK:SON*/
/* === Yasal sayfalar === */
/* Kart genişliği satır başına ~78 karaktere denk gelecek şekilde sınırlı;
tam genişlikte metin satırları okunamayacak kadar uzuyordu. */
.legal-content {
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow);
max-width: 1480px;
padding: clamp(12px, 4vw, 35px);
}
.legal-content > * + * { margin-top: 16px; }
.legal-content h2 {
font-size: 1.15625rem;
font-weight: 700;
color: var(--ink);
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.legal-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content h2 + p { margin-top: 12px; }
.legal-content p, .legal-content li { font-size: 1rem; line-height: 1.8; color: var(--body); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a { color: var(--brand-text); }
.legal-content ul { padding-left: 22px; }
.legal-content li + li { margin-top: 8px; }
.legal-lead {
padding: 15px 18px;
background: color-mix(in srgb, var(--brand) 6%, var(--surface));
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 10px;
}
.legal-note {
font-size: 0.84375rem;
color: var(--muted);
border-top: 1px solid var(--line);
padding-top: 16px;
margin-top: 28px;
}
/* === Hata sayfaları === */
.error-section { display: flex; align-items: center; min-height: 55vh; }
.error-inner {
padding-top: clamp(64px, 9vw, 104px);
padding-bottom: clamp(64px, 9vw, 104px);
display: flex;
flex-direction: column;
gap: 18px;
animation: az-up .6s ease both;
}
.error-inner h1 { font-size: clamp(1.75rem, 3.6vw, 2.625rem); line-height: 1.15; font-weight: 700; color: var(--ink); }
.error-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
/* === Alt bilgi === */
.site-footer { background: #0E1530; color: #A9B1CC; border-top: 1px solid #1D2648; }
.site-footer .container { padding-top: clamp(48px, 4vw, 72px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(32px, 5vw, 56px); }
.footer-brand { display: flex; flex-direction: column; gap: 18px; max-width: 340px; }
.footer-brand img { width: 150px; height: 35px; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-brand p { font-size: 0.875rem; line-height: 1.7; }
.footer-contact { font-family: 'IBM Plex Mono', monospace; font-size: 0.8125rem; color: #7E88A8; }
.footer-contact a { color: inherit; }
@media (hover: hover) { .footer-contact a:hover { color: #FFFFFF; } }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h3 {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
color: #FFFFFF;
text-transform: uppercase;
margin-bottom: 6px;
}
.footer-col a { color: #A9B1CC; font-size: 0.875rem; }
@media (hover: hover) { .footer-col a:hover { color: #FFFFFF; } }
.footer-col p { font-size: 0.875rem; line-height: 1.7; }
.footer-bottom {
margin-top: clamp(40px, 6vw, 64px);
padding: 22px 0;
border-top: 1px solid #1D2648;
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
align-items: center;
justify-content: space-between;
}
.footer-bottom > p { font-size: 0.8125rem; color: #7E88A8; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { color: #7E88A8; font-size: 0.8125rem; }
@media (hover: hover) { .footer-legal a:hover { color: #FFFFFF; } }
/* === Çerez onayı === */
.cc-panel {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 300;
max-width: 560px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 20px 22px;
}
.cc-panel-inner { display: flex; gap: 14px; align-items: flex-start; }
.cc-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--btn-bg);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cc-body { display: flex; flex-direction: column; gap: 10px; }
.cc-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.cc-text { font-size: 0.84375rem; line-height: 1.6; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cc-btn {
font-size: 0.84375rem;
font-weight: 600;
padding: 9px 16px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s;
}
.cc-btn-light { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
@media (hover: hover) { .cc-btn-light:hover { border-color: var(--brand); color: var(--brand-text); } }
.cc-btn-primary { background: var(--btn-bg); color: #FFFFFF; }
@media (hover: hover) { .cc-btn-primary:hover { background: var(--btn-hover); } }
.cc-modal-backdrop {
position: fixed;
inset: 0;
z-index: 310;
background: rgba(13, 17, 34, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* display: flex, hidden özniteliğinin varsayılan display:none'ını ezdiği için açık kural gerekir. */
.cc-modal-backdrop[hidden],
.cc-panel[hidden] { display: none; }
.cc-modal {
width: 100%;
max-width: 720px;
max-height: calc(100vh - 40px);
background: var(--surface);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
}
.cc-modal-header { background: var(--btn-bg); padding: 16px 24px; }
.cc-modal-header h2 { font-size: 1.125rem; font-weight: 700; color: #FFFFFF; }
.cc-modal-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cc-modal-notice { font-size: 0.84375rem; line-height: 1.65; margin-bottom: 14px; }
.cc-modal-notice a { text-decoration: underline; }
.cc-accordion-item { border-top: 1px solid var(--line); }
.cc-accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
.cc-accordion-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: none;
cursor: pointer;
font-size: 0.90625rem;
font-weight: 600;
color: var(--ink);
padding: 0;
text-align: left;
}
.cc-accordion-btn svg { color: var(--brand-text); transition: transform .2s; }
.cc-accordion-btn.open svg { transform: rotate(45deg); }
.cc-accordion-body { font-size: 0.84375rem; line-height: 1.65; padding: 0 0 14px; }
.cc-always-active { font-size: 0.78125rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider {
position: absolute;
inset: 0;
background: var(--line);
border-radius: 99px;
cursor: pointer;
transition: background .2s;
}
.cc-slider::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 3px;
top: 3px;
background: #FFFFFF;
border-radius: 50%;
transition: transform .2s;
}
.cc-switch input:checked + .cc-slider { background: var(--btn-bg); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-slider { box-shadow: 0 0 0 3px var(--brand-soft); }
.cc-modal-footer {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 16px 24px;
border-top: 1px solid var(--line);
}
.cc-modal-footer .cc-btn { border-radius: 99px; padding: 11px 22px; }
.cc-reopen {
background: transparent;
border: none;
cursor: pointer;
color: #7E88A8;
font-size: 0.8125rem;
padding: 0;
font-family: inherit;
}
@media (hover: hover) { .cc-reopen:hover { color: #FFFFFF; } }
@media (max-width: 640px) {
.cc-panel { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
/*KRITIK:BAS*/
/* === Anasayfa hero v2 (koyu, index-v2 tasarımı) === */
.hero2 {
position: relative;
overflow: hidden;
background: linear-gradient(120deg, #16224E 0%, #1B2C66 60%, #22367C 100%);
color: #FFFFFF;
}
.hero2::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 85% 10%, rgba(143, 166, 240, 0.16), transparent 60%),
radial-gradient(ellipse 50% 70% at 5% 95%, rgba(94, 124, 226, 0.14), transparent 60%);
}
.hero2::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
mask-image: radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
}
.hero2-inner {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(26px, 4vw, 36px);
padding-top: clamp(48px, 6vw, 72px);
padding-bottom: clamp(36px, 5vw, 52px);
}
.hero2 .hero-slider { width: 100%; }
.hero2-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
color: #BFD6EC;
text-transform: uppercase;
}
.hero2 .slide-title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
color: #FFFFFF;
}
.hero2 .slide-lead { color: rgba(230, 236, 252, 0.72); }
.hero2 .media-frame {
height: auto;
min-height: clamp(240px, 28vw, 360px);
display: flex;
flex-direction: column;
/* Zemin artık daha açık lacivert; panelin ayrışması için kenarlık biraz belirgin,
gölge de teal-siyah yerine lacivert-siyah ve daha derin. */
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(6, 11, 34, 0.55);
}
/* Geniş ekranlarda fazla genişliğin tamamı metin tarafına gitmesin; panel de ekranla
birlikte büyüsün. Alt sınırlar 1400px'te mevcut değerlere denk gelir (40vw = 560px,
25.7vw = 360px), böylece eşikte sıçrama olmaz. */
@media (min-width: 1400px) {
.hero2 .slide-media { max-width: clamp(560px, 40vw, 720px); }
.hero2 .media-frame { min-height: clamp(360px, 25.7vw, 405px); }
}
.hero2 .media-slot {
background:
repeating-linear-gradient(45deg, transparent 0 16px, rgba(67, 198, 232, 0.05) 16px 32px),
linear-gradient(135deg, #1B2C66 0%, #0F1738 100%);
color: rgba(230, 236, 252, 0.55);
}
/* Kontroller her slaytın metin sütununda; dar ekranda butonların hemen altına düşer,
böylece uzun panelin arkasında kalmaz. Geniş ekranda ise slaytın sol altına
konumlanır ve sağdaki panelin alt kenarıyla hizalanır. */
.hero2 .slider-controls { margin-top: 6px; }
@media (min-width: 1021px) {
.hero2 .slide { position: relative; }
.hero2 .slide-copy > .slider-controls {
position: absolute;
left: 0;
bottom: 0;
margin-top: 0;
z-index: 2;
}
}
.hero2 .slider-arrow {
background: transparent;
border-color: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
}
@media (hover: hover) { .hero2 .slider-arrow:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #A6B8F8;
color: #A6B8F8;
} }
.hero2 .slider-dot { background: rgba(255, 255, 255, 0.25); }
.hero2 .slider-dot.is-active { background: #A6B8F8; }
/* === Özellik paneli === */
/* Sekmeler aynı ızgara hücresinde üst üste durur; panel yüksekliği en uzun sekmeye
kilitlenir. Pasif sekme display:none ile kaldırılsaydı yükseklik her sekme
değişiminde oynar ve sayfa aşağı yukarı zıplardı. */
.term {
flex: 1;
min-height: 0;
display: grid;
grid-template-rows: auto 1fr;
background: #0F1738;
text-align: left;
}
.term-bar { grid-area: 1 / 1; }
.term-pane { grid-area: 2 / 1; min-height: 0; }
.term-pane.is-pasif { visibility: hidden; }
.term-bar {
display: flex;
align-items: stretch;
justify-content: space-between;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.term-tabs { display: flex; align-items: stretch; }
.term-tab {
display: inline-flex;
align-items: center;
padding: 11px 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(230, 236, 252, 0.55);
background: transparent;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-top: 2px solid transparent;
cursor: pointer;
}
@media (hover: hover) { .term-tab:hover { color: #DCE4FA; } }
.term-tab.is-active {
color: #DCE4FA;
background: #0F1738;
border-top-color: #5E7CE2;
cursor: default;
}
.term-durum {
display: inline-flex;
align-items: center;
gap: 7px;
padding-right: 16px;
font-size: 0.65625rem;
font-weight: 600;
letter-spacing: 0.14em;
color: rgba(230, 236, 252, 0.55);
}
.term-durum i {
font-style: normal;
width: 7px;
height: 7px;
border-radius: 50%;
background: #A6B8F8;
box-shadow: 0 0 8px #A6B8F8;
animation: az-nabiz 2.2s ease-in-out infinite;
}
@keyframes az-nabiz {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.term-body {
padding: 20px 22px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 11px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.84375rem;
line-height: 1.6;
overflow: hidden;
}
.term-line { opacity: 0; }
/* Satır gecikmeleri site.js tarafından satır sayısına göre otomatik atanır */
.slide.is-active .term-line { animation: term-in 0.4s both; }
.term-cmd { color: #A6B8F8; }
.term-ok { color: #3DDC97; }
.term-out { color: rgba(230, 236, 252, 0.78); }
.term-line:last-child::after {
content: "▌";
margin-left: 6px;
color: #A6B8F8;
animation: az-blink 1s steps(1) infinite;
}
@keyframes az-blink { 50% { opacity: 0; } }
.term-gorsel { display: flex; }
/* Yükseklik panelden gelir; görsel kendi oranıyla yüksekliği belirlerse
sekme değişiminde panel zıplar. contain hiçbir kenarı kırpmaz. */
.term-gorsel img {
width: 100%;
height: auto;
align-self: stretch;
min-height: 0;
object-fit: contain;
display: block;
}
.term-gorsel-bos {
flex: 1;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: rgba(230, 236, 252, 0.55);
background:
repeating-linear-gradient(45deg, transparent 0 16px, rgba(94, 124, 226, 0.05) 16px 32px),
linear-gradient(135deg, #1B2C66 0%, #0F1738 100%);
}
.ozl-list {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 14px 16px;
overflow: hidden;
}
.ozl {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
opacity: 0;
}
.slide.is-active .ozl { animation: term-in 0.45s both; }
@keyframes term-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ozl-ikon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(166, 184, 248, 0.4);
border-radius: 50%;
color: #A6B8F8;
background-color: #223a53;
}
.ozl-metin {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ozl-metin b {
font-size: 0.84375rem;
font-weight: 600;
line-height: 1.35;
color: #FFFFFF;
}
.ozl-metin small {
font-size: 0.71875rem;
line-height: 1.35;
color: rgba(230, 236, 252, 0.55);
}
.ozl-rozet {
flex-shrink: 0;
padding: 3px 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #A6B8F8;
border: 1px solid rgba(166, 184, 248, 0.35);
border-radius: 999px;
}
/* === İstatistik şeridi === */
.stats2 { background: #0F1738; color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.stats2-in {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
padding-top: 36px;
padding-bottom: 36px;
}
.st2 { display: flex; flex-direction: column; gap: 5px; }
.st2 b {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.01em;
color: #FFFFFF;
line-height: 1;
}
.st2 b::before { content: "> "; color: #A6B8F8; }
.st2 b i, .st2 b em { font-style: normal; }
.st2 b em { color: #A6B8F8; }
.st2 small { font-size: 0.78125rem; color: rgba(230, 236, 252, 0.55); font-weight: 600; line-height: 1.45; }
@media (max-width: 1040px) {
.stats2-in { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 620px) {
.stats2-in { grid-template-columns: 1fr 1fr; }
.st2 b { font-size: 1.75rem; }
}
.hero2-badge {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
padding: 8px 18px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.71875rem;
font-weight: 600;
letter-spacing: 0.12em;
color: #BFD6EC;
text-transform: uppercase;
}
.hero2-badge i {
font-style: normal;
width: 7px;
height: 7px;
border-radius: 50%;
background: #A6B8F8;
box-shadow: 0 0 10px #A6B8F8;
}
.hero2 h1 {
font-size: clamp(2.125rem, 5.4vw, 3.75rem);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.03em;
color: #FFFFFF;
margin: 26px auto 0;
max-width: 19ch;
text-wrap: pretty;
}
.hero2 h1 em {
font-style: normal;
background: linear-gradient(92deg, #5E7CE2, #A6B8F8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero2-lead {
color: #A9C0D8;
font-size: 1.0625rem;
line-height: 1.7;
max-width: 56ch;
margin: 22px auto 0;
}
.hero2-actions {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 34px;
flex-wrap: wrap;
}
.btn-hero { background: #5E7CE2; color: #FFFFFF; }
@media (hover: hover) { .btn-hero:hover {
background: #6484EA;
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(94, 124, 226, 0.35);
} }
@media (hover: hover) { .hero2 .btn-outline-light:hover { background: rgba(255, 255, 255, 0.07); } }
.hero2-chips {
position: relative;
z-index: 5;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 22px 0;
overflow: hidden;
}
.hero2-track {
display: flex;
width: max-content;
animation: az-marquee 34s linear infinite;
}
@media (hover: hover) { .hero2-chips:hover .hero2-track { animation-play-state: paused; } }
.hero2-group { display: flex; gap: 12px; padding-right: 12px; flex-shrink: 0; }
.hero2-chip {
display: inline-flex;
align-items: center;
font-size: 0.78125rem;
font-weight: 600;
color: rgba(230, 236, 252, 0.82);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 9px 20px;
white-space: nowrap;
transition: color .2s, border-color .2s;
}
@media (hover: hover) { .hero2-chip:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45); } }
.hero2-chip b { color: #A6B8F8; font-weight: 700; margin-right: 7px; }
/* === Görsel canlandırma === */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
content: "";
width: 22px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 25%, transparent));
flex-shrink: 0;
}
.hero { position: relative; overflow: hidden; }
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 42px 42px;
opacity: 0.45;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(640px 420px at 86% 10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 65%),
radial-gradient(520px 380px at 4% 96%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%);
}
.hero-inner { position: relative; z-index: 1; }
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.btn-primary {
background: linear-gradient(135deg, var(--btn-bg) 0%, color-mix(in srgb, var(--btn-bg) 70%, #7C9BFF) 100%);
}
@media (hover: hover) { .btn-primary:hover {
background: linear-gradient(135deg, var(--btn-hover) 0%, color-mix(in srgb, var(--btn-hover) 70%, #7C9BFF) 100%);
} }
.solution-card {
position: relative;
overflow: hidden;
}
.solution-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(179deg, #162860, color-mix(in srgb, var(--brand) 99%, #ff0000));
/*background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 20%, transparent));*/
transform: scaleX(0);
transform-origin: left;
transition: transform .3s;
}
@media (hover: hover) { .solution-card:hover::before { transform: scaleX(1); } }
.icon-badge { transition: background .25s, color .25s, transform .25s; }
@media (hover: hover) { .solution-card:hover .icon-badge,
.feature-row:hover .icon-badge,
.mv-card:hover .icon-badge,
.info-card:hover .icon-badge {
background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7C9BFF));
color: #FFFFFF;
transform: scale(1.07) rotate(-5deg);
} }
.feature-row { border-left: 3px solid transparent; }
@media (hover: hover) { .feature-row:hover { border-left-color: var(--brand); } }
.marquee-section { background: color-mix(in srgb, var(--brand) 4%, var(--bg)); }
.process-grid .process-step {
background: var(--surface);
border: 1px solid var(--line);
border-top: 2px solid var(--brand);
border-radius: 12px;
padding: 22px 20px 20px;
transition: transform .25s, box-shadow .25s;
}
@media (hover: hover) { .process-grid .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.media-slot {
background:
repeating-linear-gradient(45deg, transparent 0 16px, color-mix(in srgb, var(--brand) 4%, transparent) 16px 32px),
linear-gradient(135deg, var(--brand-soft) 0%, var(--soft) 100%);
}
.blog-grid .blog-card:nth-child(2) .media-slot {
background:
repeating-linear-gradient(45deg, transparent 0 16px, color-mix(in srgb, var(--brand) 5%, transparent) 16px 32px),
linear-gradient(135deg, color-mix(in srgb, var(--brand) 20%, var(--soft)) 0%, var(--brand-soft) 100%);
}
.blog-grid .blog-card:nth-child(3) .media-slot {
background:
repeating-linear-gradient(-45deg, transparent 0 16px, color-mix(in srgb, var(--brand) 5%, transparent) 16px 32px),
linear-gradient(135deg, var(--brand-soft) 0%, color-mix(in srgb, var(--brand) 14%, var(--soft)) 100%);
}
@media (hover: hover) { .slider-arrow:hover { background: var(--brand-soft); } }
.cta-band::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.5;
pointer-events: none;
}
@keyframes az-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(14px); }
}
.cta-circle { animation: az-float 9s ease-in-out infinite; }
.cta-circle-2 { animation-delay: -4.5s; }
/* === Hareket azaltma === */
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; flex-wrap: wrap; width: auto; }
.hero2-track { animation: none; flex-wrap: wrap; width: auto; }
.cta-circle { animation: none; }
.slide.is-active .ozl { animation: none; opacity: 1; }
.slide.is-active .term-line { animation: none; opacity: 1; }
.term-line:last-child::after { animation: none; }
.term-durum i { animation: none; }
.hero-inner, .page-hero-inner, .error-inner, .service-hero-inner, .pb-inner { animation: none; }
.az-reveal { opacity: 1; animation: none; }
.slide { transition: none; }
*, *::before, *::after { transition-duration: 0.01ms !important; }
}
/*KRITIK:SON*/
*/
.media-img { display: block; width: 100%; object-fit: cover; }
/* Boyut sınıfları .media-slot'tan SONRA gelmeli; aksi halde .media-slot'un
height:100% değeri bunları ezer (blog kapağında bu hata yaşandı). */
.media-slot-hero { height: 100%; }
.media-slot-story { height: clamp(280px, 32vw, 440px); border-radius: 16px; border: 1px solid var(--line); }
.media-slot-shot { height: clamp(240px, 32vw, 540px); border-radius: 8px 8px 0 0; border: 1px solid var(--line); }
.media-slot-map { height: 220px; border-radius: 13px; border: 1px solid var(--line); }
.media-slot-blog { height: 172px; }
.media-slot-cover { height: clamp(240px, 36vw, 420px); border-radius: 14px; border: 1px solid var(--line); margin-bottom: 10px; }
/* Boyut sınıflarındaki sabit height yalnızca yer tutucu