/* =============== HEADER =============== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 0; transition: padding .3s var(--ease), background .3s var(--ease), backdrop-filter .3s var(--ease); } .header::before { content: ''; position: absolute; inset: 0; background: rgba(17,17,17,0.0); backdrop-filter: blur(0); transition: all .3s var(--ease); border-bottom: 1px solid transparent; } .header.is-scrolled { padding: .5rem 0; } .header.is-scrolled::before { background: rgba(17,17,17,0.72); backdrop-filter: blur(20px); border-bottom-color: var(--color-border); } .header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header__logo { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: var(--fs-lg); letter-spacing: -0.01em; } .header__logo-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--gradient-primary); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; box-shadow: 0 8px 20px rgba(14,72,246,0.35); position: relative; overflow: hidden; } .header__logo-mark::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%); } .header__logo-text { display: flex; flex-direction: column; line-height: 1.05; } .header__logo-text small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: 0.25em; color: rgba(255,255,255,0.6); text-transform: uppercase; } .header__nav { display: flex; align-items: center; gap: .2rem; } .header__nav a { padding: .5rem .9rem; font-size: var(--fs-sm); color: rgba(255,255,255,0.75); border-radius: var(--radius-full); transition: all .2s var(--ease); position: relative; } .header__nav a:hover { color: #fff; background: rgba(255,255,255,0.05); } .header__nav a.is-active { color: #fff; background: rgba(218,0,255,0.12); border: 1px solid rgba(218,0,255,0.3); } .header__actions { display: flex; align-items: center; gap: .6rem; } .mode-toggle { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); padding: .25rem; backdrop-filter: blur(10px); } .mode-toggle button { padding: .45rem .95rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); border-radius: var(--radius-full); transition: all .25s var(--ease); } .mode-toggle button.is-active { background: var(--gradient-cta); color: #fff; } .header__hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--color-border-strong); background: rgba(255,255,255,0.04); } .header__hamburger span { width: 18px; height: 2px; background: #fff; position: relative; } .header__hamburger span::before, .header__hamburger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; } .header__hamburger span::before { top: -6px; } .header__hamburger span::after { top: 6px; } /* Mobile nav overlay — lives in , never inside

*/ .header__mobile { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 8, 20, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 9999; padding: 5rem 2rem 2rem; flex-direction: column; gap: .75rem; overflow-y: auto; } .header__mobile.is-open { display: flex; animation: mobileNavIn .35s var(--ease-out) both; } @keyframes mobileNavIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .header__mobile a { font-family: var(--font-display); font-size: var(--fs-2xl); color: rgba(255,255,255,.9); padding: .65rem 0; border-bottom: 1px solid var(--color-border); transition: color .2s; } .header__mobile a:hover, .header__mobile a.is-active { color: var(--color-primary-accent); } .header__mobile-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--color-border-strong); display: grid; place-items: center; color: #fff; cursor: pointer; transition: background .2s; } .header__mobile-close:hover { background: rgba(255,255,255,.14); } @media (max-width: 960px) { .header__nav, .header__actions .mode-toggle, .header__actions .btn { display: none; } .header__hamburger { display: flex; } } /* =============== FOOTER =============== */ .footer { margin-top: var(--space-9); padding: var(--space-8) 0 var(--space-5); border-top: 1px solid var(--color-border); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); position: relative; } .footer::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(218,0,255,0.5), rgba(14,72,246,0.5), transparent); } .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 2.5rem; margin-bottom: var(--space-7); } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .footer h5 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 1.2rem; } .footer ul { display: flex; flex-direction: column; gap: .7rem; } .footer ul a { color: rgba(255,255,255,0.6); font-size: var(--fs-sm); } .footer ul a:hover { color: var(--color-primary-accent); } .footer__brand-desc { color: rgba(255,255,255,0.55); font-size: var(--fs-sm); margin: 1rem 0 1.2rem; } .footer__brand-desc p { margin: 0; } .footer__social { display: flex; gap: .6rem; } .footer__social a { width: 38px; height: 38px; border: 1px solid var(--color-border-strong); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.7); transition: all .25s var(--ease); } .footer__social a:hover { border-color: var(--color-primary-accent); color: var(--color-primary-accent); transform: translateY(-2px); } .footer__newsletter { display: flex; gap: .4rem; padding: .35rem; background: rgba(255,255,255,0.04); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); } .footer__newsletter input { flex: 1; background: none; border: 0; padding: .6rem 1rem; color: #fff; font: inherit; font-size: var(--fs-sm); } .footer__newsletter input:focus { outline: none; } .footer__newsletter button { padding: .6rem 1.1rem; background: var(--gradient-cta); color: #fff; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: 0.15em; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); letter-spacing: 0.08em; } .footer__bottom a { color: rgba(255,255,255,0.7); } /* =============== GRIDS =============== */ .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* =============== BREADCRUMBS =============== */ .breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1.5rem; } .breadcrumbs a { color: rgba(255,255,255,0.65); } .breadcrumbs a:hover { color: var(--color-primary-accent); } .breadcrumbs span { color: rgba(255,255,255,0.3); } /* =============== PAGE HERO =============== */ .page-hero { position: relative; padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-7); overflow: hidden; } .page-hero__eyebrow { margin-bottom: 1.25rem; } .page-hero h1 { font-size: var(--fs-4xl); max-width: 22ch; } .page-hero__lede { font-size: var(--fs-lg); color: rgba(255,255,255,0.72); max-width: 60ch; margin-top: 1.25rem; } .page-hero__lede--full { max-width: none; } .page-hero .hero__visual-col { display: none; } @media (min-width: 900px) { .page-hero .hero__visual-col { display: flex; } } /* Page sub-navigation (bireysel / kurumsal eyebrow menu) */ .page-subnav { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; } .page-subnav::-webkit-scrollbar { display: none; } .page-subnav__link { display: block; padding: .6rem 1.1rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,.5); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .2s; position: relative; } .page-subnav__link:first-child { padding-left: 0; } .page-subnav__link:hover { color: rgba(255,255,255,.85); } .page-subnav__link.is-active { color: #fff; } .page-subnav__link.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--gradient-cta); }