/* ── css/about.css ──────────────────────────────── */
/* about.css */

/* HOMEPAGE ABOUT TEASER (LIGHT BG) */
.about-teaser {
    background: var(--c-white);
    color: var(--c-black);
    padding: var(--section-v) var(--section-h);
    position: relative;
}

.about-teaser-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.about-teaser-img {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--c-white2);
}

.about-teaser-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--dur-l) var(--ease-std);
}
.about-teaser-img:hover img { transform: scale(1.04); }

.about-img-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-size: 9px; letter-spacing: 3px;
    color: rgba(6,6,6,0.2); text-transform: uppercase;
}

.about-img-accent {
    position: absolute; bottom: -20px; right: -20px;
    width: 140px; height: 140px;
    border: 1px solid var(--c-border-light);
    pointer-events: none; z-index: -1;
}

.about-teaser-content .s-label { color: rgba(6,6,6,0.4); }

.about-teaser-text { margin: 28px 0 40px; }
.about-teaser-text p {
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.95;
    color: rgba(6,6,6,0.52); margin-bottom: 16px;
}

/* ABOUT PAGE MAIN (DARK BG) */
#hakkimizda {
    background: var(--c-dark1);
}

.about-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 88px;
    align-items: center;
}

.about-text p {
    font-family: var(--font-body);
    font-size: 15.5px; line-height: 1.95;
    color: rgba(246,243,238,0.52); margin-bottom: 20px;
}

/* STATS (BLACK BG) */
.about-stats-section {
    background: var(--c-black);
    padding: var(--section-v) var(--section-h);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 64px;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.stat-card {
    background: var(--c-dark1);
    padding: 44px 36px;
    position: relative; overflow: hidden;
    transition: background var(--dur-s) var(--ease-std);
}

.stat-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px;
    background: rgba(246,243,238,0.20);
    transition: width 0.6s var(--ease-sharp);
}

.stat-card:hover { background: var(--c-dark2); }
.stat-card:hover::after { width: 100%; }

.stat-number {
    font-family: var(--font-display);
    font-size: 54px; font-weight: 300;
    letter-spacing: -2px; line-height: 1; margin-bottom: 10px;
}
.stat-number em {
    font-style: normal; color: rgba(246,243,238,0.55);
    font-size: 0.5em; font-weight: 400;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 9.5px; letter-spacing: 2.5px;
    color: var(--c-gray); text-transform: uppercase; font-weight: 500;
}

/* VALUES (LIGHT BG) */
.values-section {
    background: var(--c-white); color: var(--c-black);
    padding: var(--section-v) var(--section-h);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px; margin-top: 64px;
}

.value-card {
    background: var(--c-white2);
    padding: 52px 40px;
    transition: background var(--dur-s) var(--ease-std);
}
.value-card:hover { background: #E5E0D8; }

.value-num {
    font-family: var(--font-display);
    font-size: 64px; font-weight: 300;
    color: rgba(6,6,6,0.06); line-height: 1; margin-bottom: 20px;
}

.value-title {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 700;
    color: var(--c-black); margin-bottom: 14px; line-height: 1.15;
}

.value-desc {
    font-family: var(--font-body);
    font-size: 13.5px; line-height: 1.85;
    color: rgba(6,6,6,0.48);
}