/* ══════════════════════════════════════════════════════════════════════
   Hakkımızda
   ----------------------------------------------------------------------
   İçerik sayfalarının iskeleti (legal-page + yan menü) site.css'ten gelir;
   bu dosya yalnızca ana sütundaki bölümleri tanımlar. Sayfa lacivert bir
   karşılama kartıyla açılır, aynı tonda bir kapanış bandıyla biter; aradaki
   bölümler açık zeminde kalır. Renk, ölçü ve yazı değerleri oa-ui.css
   değişkenlerinden okunur.

   Ana sütunun genişliği ekrana değil yan menüye bağlı (menüyle ~670–850px,
   menü üstteyken ekranın tamamı). Izgaralar bu yüzden en fazla iki sütuna
   çıkar ve kırılımlar sütun darken de okunur kalacak şekilde seçildi.
   ══════════════════════════════════════════════════════════════════════ */

.about-page {
    --about-dark: #0d1526;
    --about-dark-2: #16233c;
    --about-on-dark-soft: rgba(255, 255, 255, .76);
    --about-hairline: rgba(255, 255, 255, .14);
}

/* site.css'teki `.app-body a { color: inherit }` kuralı, <a> olarak yazılan
   düğmelerin yazı rengini ezer; renkler sayfa sınıfıyla geri verilir. */
.about-page .oa-btn--primary { color: var(--text-on-brand); }

.about-page .oa-btn--on-dark {
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.about-page .oa-btn--on-dark:hover {
    border-color: #fff;
    background: #fff;
    color: var(--about-dark);
}

.about-page .oa-eyebrow .material-symbols-outlined { font-size: 16px; }

/* ── 1 — Karşılama ─────────────────────────────────────────────────── */
.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 5vw, 52px);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(var(--brand-rgb), .28) 0%, rgba(var(--brand-rgb), 0) 60%),
        linear-gradient(135deg, var(--about-dark-2) 0%, var(--about-dark) 70%);
    color: #fff;
    box-shadow: var(--shadow-raised);
}

/* Halkaların merkezi kartın sağ kenarında: yalnızca sol yarıları görünür,
   metnin arkasında soluk kalır. Magenta yay en içteki halkada, kenara 90px
   mesafede durur; kart daraldığında da metin sütununun dışında kalır. */
.about-hero__rings {
    position: absolute;
    top: 50%;
    right: -280px;
    z-index: -1;
    width: 560px;
    height: 560px;
    color: #fff;
    transform: translateY(-50%);
    pointer-events: none;
}

.about-hero__arc { color: var(--brand-primary); }

.about-hero__body { max-width: min(540px, 76%); }

/* Magenta 12px etiket lacivert zeminde AA kontrastına ulaşmıyor; etiket
   markanın açık tonuyla yazılır. */
.about-hero__eyebrow { color: var(--brand-border); }

.about-hero__title {
    margin: var(--space-3) 0 0;
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(30px, 2.6vw + 16px, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.about-hero__title span { color: var(--brand-primary); }

.about-hero__lead {
    margin: var(--space-4) 0 0;
    color: var(--about-on-dark-soft);
    font-size: 16px;
    line-height: 1.7;
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Izgara, dar kartta üçüncü maddenin tek başına alt satıra düşmesini önler:
   maddeler ya aynı satırda eşit paylaşır ya da alt alta dizilir. */
.about-hero__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: var(--space-7) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--about-hairline);
    list-style: none;
}

.about-hero__highlights li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
}

.about-hero__highlights .material-symbols-outlined {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: rgba(var(--brand-rgb), .16);
    color: var(--brand-border);
    font-size: 18px;
}

/* ── 2 — Biz kimiz ─────────────────────────────────────────────────── */
.about-story .oa-h2 {
    margin: var(--space-2) 0 0;
    text-wrap: balance;
}

.about-story__text {
    display: grid;
    gap: var(--space-3);
    max-width: 70ch;
    margin-top: var(--space-4);
}

.about-story__text p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.about-compare {
    margin-top: var(--space-6);
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}

.about-compare__head { display: none; }

.about-compare__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.about-compare__row {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.about-compare__row dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.about-compare__row dt .material-symbols-outlined {
    color: var(--text-muted);
    font-size: 19px;
}

.about-compare__cell {
    position: relative;
    margin: 0;
    padding: 10px var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.about-compare__cell--brand {
    background: var(--brand-soft);
    color: var(--text-primary);
    font-weight: 600;
}

.about-compare__label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.about-compare__cell--brand .about-compare__label,
.about-compare__brand { color: var(--brand-primary-active); }

@media (min-width: 640px) {
    .about-compare__head,
    .about-compare__row {
        grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-3);
    }

    .about-compare__head {
        display: grid;
        padding: var(--space-2) var(--space-3) var(--space-3);
        color: var(--text-secondary);
        font-size: var(--fs-xs);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .about-compare__head > span { padding-inline: var(--space-3); }

    .about-compare__row { padding: var(--space-2) var(--space-3); }

    /* Geniş ekranda etiket sütun başlığında yazıyor; hücrede yalnızca ekran
       okuyucular için kalır. */
    .about-compare__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ── 3 — Misyon ve vizyon ──────────────────────────────────────────── */
.about-purpose {
    display: grid;
    gap: var(--space-4);
}

.about-purpose__card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Sol kenardaki şerit: misyon marka rengini, vizyon laciverti taşır. */
.about-purpose__card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--brand-primary);
    content: "";
}

.about-purpose__card--vision::before { background: var(--navy); }

.about-purpose__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.about-purpose__icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand-primary);
}

.about-purpose__icon .material-symbols-outlined { font-size: 22px; }

.about-purpose__card--vision .about-purpose__icon {
    background: var(--navy-soft);
    color: var(--navy);
}

.about-purpose__card h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.about-purpose__card p {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.65;
}

@media (min-width: 720px) {
    .about-purpose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Bölüm başlığı (değerler, hizmetler, künye) ────────────────────── */
.about-section__head {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    max-width: 64ch;
}

.about-section__head .oa-h2,
.about-section__head .oa-sub { margin: 0; }

.about-section > .about-section__head { margin-bottom: var(--space-5); }

/* ── 4 — Değerlerimiz ─────────────────────────────────────────────── */
/* Maddeler tek bir yüzeyi 1px çizgilerle böler (ana sayfadaki güven
   şeridiyle aynı dil); hizmet kartlarından ayrı okunur. */
.about-values {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--border-subtle);
    box-shadow: var(--shadow-card);
    list-style: none;
    overflow: hidden;
}

.about-values__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-card);
}

.about-values__icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-primary);
}

.about-values__icon .material-symbols-outlined { font-size: 22px; }

.about-values__item h3 {
    margin: 2px 0 var(--space-1);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 700;
    letter-spacing: -.01em;
}

.about-values__item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: var(--lh-relaxed);
}

@media (min-width: 560px) {
    .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5 — Neler yapıyoruz ──────────────────────────────────────────── */
.about-services {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-service {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.about-service:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.about-service:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

.about-service__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--navy);
    color: #fff;
    transition: background var(--dur-base) var(--ease);
}

.about-service__icon .material-symbols-outlined { font-size: 24px; }
.about-service:hover .about-service__icon { background: var(--brand-primary); }

.about-service__title {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 700;
    letter-spacing: -.015em;
    transition: color var(--dur-base) var(--ease);
}

.about-service:hover .about-service__title { color: var(--brand-primary-active); }

.about-service__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: var(--lh-relaxed);
}

.about-service__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--brand-primary-active);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.about-service__more .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--dur-base) var(--ease);
}

.about-service:hover .about-service__more .material-symbols-outlined { transform: translateX(3px); }

@media (min-width: 560px) {
    .about-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .about-service,
    .about-service__more .material-symbols-outlined { transition: none; }

    .about-service:hover,
    .about-service:hover .about-service__more .material-symbols-outlined { transform: none; }
}

/* ── 6 — Künye ─────────────────────────────────────────────────────── */
.about-company__list {
    display: grid;
    column-gap: var(--space-6);
    margin: var(--space-5) 0 0;
}

.about-company__item {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.about-company__item dt {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.about-company__item dd {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-normal);
    overflow-wrap: anywhere;
}

.about-company__item dd a { color: var(--brand-primary-active); }

.about-company__item dd a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (min-width: 640px) {
    .about-company__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-company__item--wide { grid-column: 1 / -1; }
}

/* ── 7 — Kapanış ───────────────────────────────────────────────────── */
.about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(70% 140% at 0% 100%, rgba(var(--brand-rgb), .24) 0%, rgba(var(--brand-rgb), 0) 60%),
        linear-gradient(135deg, var(--about-dark-2) 0%, var(--about-dark) 80%);
    color: #fff;
}

.about-cta__text {
    flex: 1 1 320px;
    min-width: 0;
}

.about-cta h2 {
    margin: 0;
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: clamp(22px, 1.2vw + 16px, 28px);
    font-weight: 800;
    letter-spacing: -.02em;
}

.about-cta p {
    max-width: 56ch;
    margin: var(--space-2) 0 0;
    color: var(--about-on-dark-soft);
    line-height: var(--lh-relaxed);
}

.about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ── Dar ekran ─────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .about-hero__body { max-width: none; }

    /* Metin tam genişliğe yayılınca yay metnin üstüne düşer; halkalar
       kenara itilir, yay gizlenir. */
    .about-hero__rings { right: -380px; }
    .about-hero__arc { display: none; }

    .about-hero__lead { font-size: var(--fs-body); }

    .about-hero__actions .oa-btn,
    .about-cta__actions .oa-btn { flex: 1 1 100%; }

    .about-hero__highlights { margin-top: var(--space-6); }
}