body.about-page {
background: #fff;
}
body.about-page::after { display: none; }
body.about-page .explorer-bar { display: none; }
.about-shell {
max-width: 1040px;
margin: 0 auto;
padding: 130px 20px 40px;
}
.about-hero {
padding-bottom: 70px;
border-bottom: 1px solid rgba(20, 20, 25, .08);
}
.about-kicker {
margin: 0 0 28px;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(18px, 2.2vw, 22px);
letter-spacing: -.01em;
color: #18181b;
}
.about-hero-grid {
display: grid;
grid-template-columns: minmax(180px, 280px) 1fr;
gap: clamp(28px, 5vw, 56px);
align-items: start;
}
.about-hero-grid--yazi {
grid-template-columns: 1fr;
max-width: 68ch;
}
.about-photos {
display: flex;
flex-direction: column;
gap: 12px;
}
.about-photo {
aspect-ratio: 4 / 3;
border-radius: 14px;
background: #fafafa;
border: 1px dashed rgba(20, 20, 25, .16);
}
.about-bio {
font-family: var(--font-ui);
font-size: clamp(14.5px, 1.6vw, 16.5px);
line-height: 1.7;
color: #3f3f46;
}
.about-bio p { margin: 0 0 14px; }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio strong { color: #18181b; }
@media (max-width: 640px) {
.about-hero-grid { grid-template-columns: 1fr; }
.about-photos { flex-direction: row; }
.about-photo { flex: 1; }
}
.about-links {
padding: 60px 0;
border-bottom: 1px solid rgba(20, 20, 25, .08);
text-align: center;
}
.about-yanyana { display: block; }
.about-konum--sag { display: none; }
.about-konum--alt { display: inline; }
@media (min-width: 1000px) {
.about-konum--sag { display: inline; }
.about-konum--alt { display: none; }
.about-yanyana {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(30px, 4vw, 64px);
align-items: start;
}
.about-yanyana .about-hero { padding-bottom: 20px; border-bottom: none; }
.about-yanyana .about-links { padding: 0; border-bottom: none; text-align: left; }
.about-yanyana .about-links-kicker { text-align: left; }
.about-yanyana .butonlar { justify-content: flex-start; }
.about-yanyana .butonlar-sahne--yatay { flex-direction: column; align-items: stretch; }
}
.buton-grup {
display: flex;
flex-direction: column;
align-items: stretch;
}
.butonlar-sahne--yatay { align-items: flex-start; }
.kanal-liste {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
opacity: 0;
background: linear-gradient(180deg, #0f0f12 0%, #060607 100%);
border: 1px solid rgba(255, 255, 255, .14);
border-top: none;
transition: grid-template-rows .26s cubic-bezier(.22, 1, .36, 1), opacity .26s ease;
}
.kanal-liste > * { min-height: 0; }
.kanal-liste.acik { grid-template-rows: 1fr; opacity: 1; }
.kanal-liste-ic {
display: flex;
flex-direction: column;
padding: 6px;
}
.kanal {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
text-align: left;
transition: background .18s ease;
}
.kanal:hover { background: rgba(255, 255, 255, .08); }
.kanal-pp {
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: #1a1a1f;
}
.kanal-ad {
font-family: var(--font-ui);
font-size: 14.5px;
font-weight: 600;
color: #f6f6f8;
}
.buton[aria-expanded="true"] .buton-yuz--on {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.about-links .butonlar-sahne { transform: none; transform-style: flat; }
.about-links .buton { transform-style: flat; }
.about-links .buton .buton-govde,
.about-links .buton:hover .buton-govde,
.about-links .buton:focus-visible .buton-govde,
.about-links .buton[aria-expanded="true"] .buton-govde {
transform: none;
transform-style: flat;
}
.about-links .buton-yuz--on { transform: none; }
.about-links .buton-yuz--ust,
.about-links .buton-yuz--dip,
.about-links .buton-yuz--sol,
.about-links .buton-yuz--sag { display: none; }
.about-links-kicker {
margin: 0 0 8px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #a1a1aa;
}
.about-contact {
padding: 60px 0 40px;
scroll-margin-top: 100px;
}
.about-contact-kicker {
margin: 0 0 8px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #a1a1aa;
text-align: center;
}
.about-contact-title {
margin: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(24px, 3.6vw, 32px);
letter-spacing: -.01em;
color: #18181b;
text-align: center;
}
.about-contact-sub {
margin: 12px 0 0;
font-family: var(--font-ui);
font-size: 14px;
color: #52525b;
text-align: center;
}
.contact-form {
max-width: 520px;
margin: 32px auto 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 560px) {
.contact-row { grid-template-columns: 1fr; }
}
.contact-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: #71717a;
}
.contact-hp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.contact-submit {
align-self: stretch;
}
.contact-privacy {
margin: 0;
font-family: var(--font-ui);
font-size: 12.5px;
line-height: 1.5;
color: #52525b;
text-align: center;
}
.contact-privacy a {
color: #27272a;
text-decoration: underline;
text-underline-offset: 3px;
}
.contact-status {
margin: 0;
min-height: 1.4em;
font-family: var(--font-ui);
font-size: 13px;
text-align: center;
}
.contact-status.is-ok { color: #16a34a; }
.contact-status.is-err { color: #dc2626; }
@media (prefers-reduced-motion: reduce) {
.contact-submit { transition-duration: .01ms; }
}
:root[data-tema="koyu"] body.about-page { background: var(--tm-zemin); }
:root[data-tema="koyu"] .about-hero { border-bottom-color: var(--tm-cizgi); }
:root[data-tema="koyu"] .about-kicker { color: var(--tm-yazi); }
:root[data-tema="koyu"] .about-photo {
background: var(--tm-yuzey-2);
border-color: var(--tm-cizgi);
}
:root[data-tema="koyu"] .about-bio { color: var(--tm-soluk); }
:root[data-tema="koyu"] .about-bio strong { color: var(--tm-yazi); }
:root[data-tema="koyu"] .about-links { border-bottom-color: var(--tm-cizgi); }
:root[data-tema="koyu"] .about-contact-title { color: var(--tm-yazi); }
:root[data-tema="koyu"] .about-contact-sub { color: var(--tm-soluk); }
:root[data-tema="koyu"] .contact-label { color: var(--tm-soluk); }
:root[data-tema="koyu"] .contact-privacy { color: var(--tm-soluk); }
:root[data-tema="koyu"] .contact-privacy a { color: var(--tm-yazi); }
:root[data-tema="koyu"] .contact-input {
color: var(--neu-yazi, #f0f0f2);
background-color: var(--neu-yuzey, #1c1c20);
border-color: var(--tm-cizgi);
}