/**
 * Hakkımızda — dar editorial genişlik, bento grid, glass kartlar
 */

.about-page {
    --about-accent: #01b1af;
    --about-accent-light: #00ece9;
    --about-text: #f4f8fc;
    --about-muted: rgba(196, 210, 224, 0.88);
    --about-card: rgba(14, 20, 30, 0.78);
    --about-icon: #00ece9;
    padding: 8px 0 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---- Hero ---- */
.about-hero {
    position: relative;
    text-align: center;
    padding: 28px 20px 24px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(
        160deg,
        rgba(1, 177, 175, 0.18) 0%,
        rgba(8, 14, 24, 0.92) 55%,
        rgba(6, 10, 18, 0.96) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 20px 48px rgba(0, 0, 0, 0.38);
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 50% at 50% -10%,
        rgba(0, 236, 233, 0.22),
        transparent 60%
    );
    pointer-events: none;
}

.about-hero__eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 7px 16px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--about-accent-light);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(1, 177, 175, 0.35);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.about-hero__title {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-size: clamp(1.85rem, 5vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fafcfe;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.about-hero__lead {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 42ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--about-muted);
}

/* ---- İstatistik şeridi ---- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 76px;
    padding: 14px 10px;
    text-align: center;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: rgba(32, 40, 52, 0.72);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 28px rgba(0, 0, 0, 0.32);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.about-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(120, 130, 145, 0.14) 100%
    );
    pointer-events: none;
}

.about-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(1, 177, 175, 0.45);
    background: rgba(36, 44, 58, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 36px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(1, 177, 175, 0.12);
}

.about-stat__value {
    position: relative;
    z-index: 1;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #b8fcfa;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.about-stat__label {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(232, 238, 242, 0.92);
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ---- Hikaye + kalite: tam genişlik, eşit oran ---- */
.about-bento {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-glass {
    background: var(--about-card);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 40px rgba(0, 0, 0, 0.32);
}

.about-bento__story,
.about-bento__aside {
    width: 100%;
    box-sizing: border-box;
}

.about-bento__story {
    padding: 24px 22px;
}

.about-bento__aside {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: rgba(1, 177, 175, 0.18);
    border: 1px solid rgba(1, 177, 175, 0.35);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.about-icon--building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 3 2 9v12h20V9L12 3zm0 2.5 6 3.9V19H6v-9.6l6-4.1zM8 19v-6h8v6H8z'/%3E%3C/svg%3E");
}

.about-icon--shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm0 2.2 6 2.3v4.5c0 3.9-2.6 7.5-6 8.7-3.4-1.2-6-4.8-6-8.7V6.5l6-2.3z'/%3E%3C/svg%3E");
}

.about-icon--vision {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 4C7 4 2.7 7.1 1 12c1.7 4.9 6 8 11 8s9.3-3.1 11-8c-1.7-4.9-6-8-11-8zm0 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

.about-icon--mission {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 2a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm0 3a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 2a3 3 0 1 1-3 3 3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}

.about-card__head h2 {
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--about-text);
}

.about-prose {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--about-muted);
    max-width: none;
}

.about-prose p {
    margin: 0 0 1em;
    text-align: left;
}

.about-prose p:last-child {
    margin-bottom: 0;
}

.about-highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-highlights li {
    position: relative;
    padding-left: 1.5em;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--about-muted);
}

.about-highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--about-accent-light);
}

.about-aside__note {
    margin: 4px 0 0;
    padding-top: 12px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(184, 200, 216, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Çözüm alanları ---- */
.about-section-title {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(45, 212, 210, 0.9);
}

.about-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 14px 10px;
    text-align: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.about-service:hover {
    transform: translateY(-3px);
    border-color: rgba(1, 177, 175, 0.42);
    background: rgba(1, 177, 175, 0.08);
}

.about-service__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(1, 177, 175, 0.15);
    border: 1px solid rgba(1, 177, 175, 0.3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.about-service__icon--camera {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M4 6h4l2-2h4l2 2h4v12H4V6zm2 2v8h12V8H6zm6 1.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z'/%3E%3C/svg%3E");
}

.about-service__icon--alarm {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7v2.3l-1.7 3.4h19.4L15 11.3V9a7 7 0 0 0-3-13zm0 2a5 5 0 0 1 5 5v3.1l1.3 2.6H5.7L7 12.1V9a5 5 0 0 1 5-5zm-2.5 17h5v2h-5v-2z'/%3E%3C/svg%3E");
}

.about-service__icon--network {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M4 12a8 8 0 0 1 8-8v2a6 6 0 0 0-6 6H4zm16 0h-2a6 6 0 0 0-6-6V4a8 8 0 0 1 8 8zm-8 4a4 4 0 0 1-4-4H6a6 6 0 0 0 6 6v-2zm4 0v2a6 6 0 0 0 6-6h-2a4 4 0 0 1-4 4zM12 14a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");
}

.about-service__icon--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.1.7 3.2.9.5.1.8.5.8 1v3.4c0 .6-.4 1-1 1C10.3 22 2 13.7 2 3c0-.6.4-1 1-1h3.4c.5 0 .9.3 1 .8.2 1.1.5 2.2.9 3.2.1.4 0 .9-.3 1.2L6.6 10.8z'/%3E%3C/svg%3E");
}

.about-service__icon--access {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.9 0-7.2 2.5-8.5 6h17c-1.3-3.5-4.6-6-8.5-6zM4 4h16v2H4V4z'/%3E%3C/svg%3E");
}

.about-service__icon--server {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300ece9'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 9h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm2 2v2h2v-2H6zm0-9v2h2V6H6zm0 9v2h2v-2H6z'/%3E%3C/svg%3E");
}

.about-service__label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(232, 238, 242, 0.92);
}

/* ---- Vizyon / misyon ---- */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-pillar {
    padding: 22px 20px;
}

.about-pillar .about-prose {
    font-size: 0.9rem;
    max-width: none;
}

.about-mission-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-mission-list li {
    position: relative;
    padding-left: 1.35em;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--about-muted);
}

.about-mission-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7af8f6, #01b1af);
    box-shadow: 0 0 8px rgba(1, 177, 175, 0.5);
}

/* ---- Light mode ---- */
body.light-mode .about-page {
    --about-text: #0f172a;
    --about-muted: #475569;
    --about-card: rgba(255, 255, 255, 0.92);
}

body.light-mode .about-hero {
    background: linear-gradient(
        160deg,
        rgba(1, 177, 175, 0.1) 0%,
        rgba(248, 250, 252, 0.98) 100%
    );
    border-color: rgba(1, 177, 175, 0.2);
}

body.light-mode .about-hero__title {
    color: #0f172a;
    text-shadow: none;
}

body.light-mode .about-stat {
    background: rgba(248, 250, 252, 0.88);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(15, 23, 42, 0.1);
}

body.light-mode .about-stat::before {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(226, 232, 240, 0.55) 100%
    );
}

body.light-mode .about-stat:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(1, 138, 136, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 12px 32px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(1, 177, 175, 0.1);
}

body.light-mode .about-stat__value {
    color: #018a88 !important;
    text-shadow: none;
}

body.light-mode .about-stat__label {
    color: #475569 !important;
    text-shadow: none;
}

body.light-mode .about-service {
    background: rgba(1, 177, 175, 0.05);
    border-color: rgba(1, 177, 175, 0.15);
}

body.light-mode .about-service__label,
body.light-mode .containers .about-page h1,
body.light-mode .containers .about-page h2,
body.light-mode .containers .about-page .about-card__head h2 {
    color: var(--about-text) !important;
}

body.light-mode .containers .about-page .about-prose,
body.light-mode .containers .about-page .about-highlights li,
body.light-mode .containers .about-page .about-mission-list li,
body.light-mode .containers .about-page .about-aside__note {
    color: var(--about-muted) !important;
}

@media (min-width: 720px) {
    .about-bento {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
    }
}

@media (max-width: 991px) {
    .about-page {
        padding-bottom: 48px;
        gap: 22px;
    }

    .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-pillars {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .about-hero {
        padding: 22px 14px 20px;
    }

    .about-bento__story,
    .about-bento__aside,
    .about-pillar {
        padding: 18px 16px;
    }
}