.site-nav {
position: fixed;
top: 18px;
left: 50%;
z-index: 50;
transform: translateX(-50%);
width: fit-content;
max-width: 94vw;
}
.site-nav-inner {
display: flex;
align-items: center;
gap: clamp(20px, 3.4vw, 40px);
padding: 8px clamp(20px, 3vw, 30px);
border-radius: 999px;
background: rgba(255, 255, 255, .66);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
border: 1px solid rgba(20, 20, 25, .08);
box-shadow: 0 10px 32px rgba(20, 20, 30, .12);
}
.site-nav-brand {
--marka-boy: 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
line-height: 1;
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
letter-spacing: -.01em;
color: #18181b;
text-decoration: none;
white-space: nowrap;
}
.site-nav-brand .marka-simge {
margin-top: -3px;
margin-bottom: -6px;
}
.site-nav-links {
position: relative;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 0;
}
.site-nav-links::-webkit-scrollbar { display: none; }
.site-nav-dil {
flex: none;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
color: #5c5c68;
background: transparent;
border: 0;
border-radius: 999px;
padding: 4px 11px;
cursor: pointer;
transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
@media (max-width: 560px) {
.site-nav-dil { font-size: 10.5px; padding: 4px 9px; }
}
.site-nav-sag {
display: flex;
align-items: center;
gap: 3px;
padding: 3px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(20, 20, 25, .105), rgba(20, 20, 25, .035));
box-shadow:
inset 0 2px 3px rgba(20, 20, 30, .2),
inset 0 -1px 0 rgba(255, 255, 255, .62),
0 1px 0 rgba(255, 255, 255, .78);
}
.site-nav-dil:hover,
.site-nav-tema:hover,
.site-nav-dil:focus-visible,
.site-nav-tema:focus-visible {
color: #18181b;
background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .84));
box-shadow: 0 1.5px 3px rgba(20, 20, 30, .18), 0 0 0 .5px rgba(20, 20, 25, .07);
}
.site-nav-dil:active,
.site-nav-tema:active {
transform: scale(.93);
box-shadow: inset 0 1px 2px rgba(20, 20, 30, .2);
}
.site-nav-tema {
position: relative;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
color: #5c5c68;
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.site-nav-tema svg {
position: absolute;
inset: 0;
margin: auto;
width: 14px;
height: 14px;
transition: opacity .2s ease, transform .34s cubic-bezier(.34, 1.4, .5, 1);
}
.tema-ikon-gunes { opacity: 1; transform: rotate(0deg) scale(1); }
.tema-ikon-ay { opacity: 0; transform: rotate(-80deg) scale(.4); }
:root[data-tema="koyu"] .tema-ikon-gunes { opacity: 0; transform: rotate(80deg) scale(.4); }
:root[data-tema="koyu"] .tema-ikon-ay { opacity: 1; transform: rotate(0deg) scale(1); }
@media (max-width: 560px) {
.site-nav-tema { width: 22px; height: 22px; }
.site-nav-tema svg { width: 12.5px; height: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.site-nav-tema svg { transition: opacity .12s ease; transform: none !important; }
}
:root[data-tema="koyu"] .site-nav-inner {
background: var(--tm-cam);
border-color: var(--tm-cam-cizgi);
}
:root[data-tema="koyu"] .site-nav-brand,
:root[data-tema="koyu"] .site-nav-links a.site-nav-link--active { color: var(--tm-yazi); }
:root[data-tema="koyu"] .site-nav-links a { color: var(--tm-soluk); }
:root[data-tema="koyu"] .site-nav-links a:hover,
:root[data-tema="koyu"] .site-nav-links a:focus-visible { color: var(--tm-yazi); }
:root[data-tema="koyu"] .site-nav-sag {
background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .22));
box-shadow:
inset 0 2px 3px rgba(0, 0, 0, .75),
inset 0 -1px 0 rgba(255, 255, 255, .075),
0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-tema="koyu"] .site-nav-dil,
:root[data-tema="koyu"] .site-nav-tema {
color: var(--tm-soluk);
background: transparent;
}
:root[data-tema="koyu"] .site-nav-dil:hover,
:root[data-tema="koyu"] .site-nav-tema:hover,
:root[data-tema="koyu"] .site-nav-dil:focus-visible,
:root[data-tema="koyu"] .site-nav-tema:focus-visible {
color: var(--tm-yazi);
background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .08));
box-shadow: 0 1.5px 3px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .1);
}
:root[data-tema="koyu"] .site-nav-dil:active,
:root[data-tema="koyu"] .site-nav-tema:active {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55);
}
:root[data-tema="koyu"] .site-nav-gocuk {
background-image: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .22));
box-shadow:
inset 0 2px 3px rgba(0, 0, 0, .75),
inset 0 -1px 0 rgba(255, 255, 255, .075),
0 1px 0 rgba(255, 255, 255, .07);
}
.site-nav-gocuk {
position: absolute;
left: 0;
top: 50%;
height: 30px;
margin-top: -15px;
width: 0;
border-radius: 999px;
pointer-events: none;
z-index: 0;
background-image: linear-gradient(180deg, rgba(20, 20, 25, .105), rgba(20, 20, 25, .035));
box-shadow:
inset 0 2px 3px rgba(20, 20, 30, .2),
inset 0 -1px 0 rgba(255, 255, 255, .62),
0 1px 0 rgba(255, 255, 255, .78);
transition:
transform .52s cubic-bezier(.34, 1.12, .38, 1),
width .52s cubic-bezier(.34, 1.12, .38, 1),
opacity .25s ease;
}
.site-nav-links:not(.gocuk-hazir) .site-nav-gocuk { transition: none; }
.site-nav-links a {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: -.005em;
color: #6c6c78;
text-decoration: none;
white-space: nowrap;
padding: 6px 13px;
border-radius: 999px;
flex-shrink: 0;
transform-origin: 50% 50%;
transition:
color .34s ease,
transform .46s cubic-bezier(.34, 1.12, .38, 1);
}
.site-nav-links a:hover,
.site-nav-links a:focus-visible { color: #18181b; }
.site-nav-links a.site-nav-link--active {
color: #131318;
transform: scale(1.14);
}
@media (max-width: 560px) {
.site-nav { top: 12px; left: 12px; right: 12px; transform: none; width: auto; max-width: none; }
.site-nav-inner { gap: 12px; padding: 10px 16px; }
.site-nav-brand { font-size: 13px; flex-shrink: 0; }
.site-nav-links {
gap: 2px;
padding: 3px 0;
}
.site-nav-links a { font-size: 11.5px; padding: 6px 10px; }
.site-nav-links {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.site-nav-links a.site-nav-link--active { transform: scale(1.09); }
.site-nav-gocuk { height: 27px; margin-top: -13.5px; }
}
@media (prefers-reduced-motion: reduce) {
.site-nav-gocuk { transition-duration: .01ms; }
.site-nav-links a { transition-duration: .01ms; }
}