/* ==========================================================================
   Biz Kimiz (About/WhoAreWe). Önek: .akb-
   ========================================================================== */

/* ------------------------------ 1. ZAMAN ÇİZGİSİ ------------------------------ */
.akb-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
}
/* Yatay yol: son durakta geleceğe doğru kesikli devam eder */
.akb-timeline::before {
    content: "";
    position: absolute;
    top: 31px;
    inset-inline-start: 32px;
    inset-inline-end: 0;
    height: 2px;
    background:
        linear-gradient(90deg, var(--ak-plum-300) 0, var(--ak-plum-300) 66%, transparent 66%),
        repeating-linear-gradient(90deg, var(--ak-sun-600) 0 8px, transparent 8px 15px);
}
html[dir="rtl"] .akb-timeline::before {
    background:
        linear-gradient(270deg, var(--ak-plum-300) 0, var(--ak-plum-300) 66%, transparent 66%),
        repeating-linear-gradient(270deg, var(--ak-sun-600) 0 8px, transparent 8px 15px);
}
.akb-milestone { position: relative; display: flex; flex-direction: column; gap: 22px; }
.akb-milestone__node { display: flex; align-items: center; }
.akb-milestone__star {
    --_s: 64px;
    font-size: 1.625rem;
    box-shadow: none;
}
.akb-milestone__node::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-inline-start: -2px;
    border-radius: 50%;
    background: var(--ak-bg);
    border: 2px solid var(--ak-plum-300);
}
.akb-milestone--next .akb-milestone__node::after { border-color: var(--ak-sun-600); }
.akb-milestone__body {
    flex: 1;
    padding: 26px 26px 28px;
    border-radius: 24px;
    background: var(--ak-surface);
    border: 1px solid var(--ak-line);
}
.akb-milestone--next .akb-milestone__body {
    background: var(--ak-plum-950);
    border-color: transparent;
    color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.akb-milestone--next .akb-milestone__body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ak-mashrabiya);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 90% 80% at 100% 0%, #000, transparent 70%);
}
.akb-milestone__year {
    display: block;
    font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--ak-plum-800);
}
.akb-milestone--next .akb-milestone__year { color: var(--ak-sun); }
.akb-milestone__ar {
    display: block;
    margin-top: 6px;
    font-family: var(--ak-font-kufi);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ak-sand);
    line-height: 1.2;
}
.akb-milestone__title { margin: 18px 0 8px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: inherit; }
.akb-milestone--next .akb-milestone__title { color: #fff; }
.akb-milestone__desc { margin: 0; color: var(--ak-muted); line-height: 1.7; }
.akb-milestone--next .akb-milestone__desc { color: rgba(255, 255, 255, .74); }

/* ------------------------------ 2. DEĞERLER ------------------------------ */
.akb-values__grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.akb-values__intro {
    position: sticky;
    top: calc(var(--navbar-height) + var(--top-banner-height, 0px) + 32px);
}
.akb-values__intro .ak-lead { margin-bottom: 32px; }
.akb-values__arch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(100%, 300px);
    aspect-ratio: 3 / 3.4;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 24px;
    border-radius: 50% 50% 24px 24px / 40% 40% 24px 24px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(238, 215, 21, .18), transparent 60%),
        linear-gradient(180deg, #7a2d63 0%, #43163a 100%);
    box-shadow: 0 40px 70px -40px rgba(31, 10, 24, .8);
}
.akb-values__arch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ak-mashrabiya);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.akb-values__arch::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    border: 1px solid rgba(238, 215, 21, .25);
}
.akb-values__arch-word { font-size: clamp(3.5rem, 2.6rem + 3vw, 5rem); line-height: 1.2; color: var(--ak-sun); text-shadow: 0 10px 40px rgba(238, 215, 21, .25); }
.akb-values__arch-line { font-family: var(--ak-font-naskh); font-size: 1.125rem; color: rgba(255, 255, 255, .7); direction: rtl; text-align: center; }

.akb-values__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.akb-value {
    position: relative;
    padding: 28px 26px 26px;
    border-radius: 24px;
    background: var(--ak-bg);
    border: 1px solid var(--ak-line);
}
.akb-values__list { padding-bottom: 32px; }
.akb-value:nth-child(2),
.akb-value:nth-child(4) { translate: 0 32px; }
.akb-value__num {
    position: absolute;
    top: 18px;
    inset-inline-end: 22px;
    font-family: var(--ak-font-kufi);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ak-plum-100);
}
.akb-value__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0%, 63% 18%, 85% 15%, 82% 37%, 100% 50%, 82% 63%, 85% 85%, 63% 82%, 50% 100%, 37% 82%, 15% 85%, 18% 63%, 0% 50%, 18% 37%, 15% 15%, 37% 18%);
    background: var(--ak-plum-600);
    color: #fff;
    font-size: 1.125rem;
}
.akb-value:nth-child(4n+2) .akb-value__icon { background: var(--ak-sun); color: var(--ak-plum-950); }
.akb-value:nth-child(4n+3) .akb-value__icon { background: var(--ak-sand); color: #fff; }
.akb-value:nth-child(4n+4) .akb-value__icon { background: var(--ak-plum-900); color: var(--ak-sun); }
.akb-value__title { margin: 20px 0 8px; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }
.akb-value__desc { margin: 0; color: var(--ak-muted); line-height: 1.65; }

/* ------------------------------ 3. VİZYON & MİSYON ------------------------------ */
.akb-vm { background: var(--ak-plum-950); }
.akb-vm .ak-lead { color: rgba(255, 255, 255, .72); }
.akb-vm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.akb-vm__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px clamp(22px, 3vw, 44px) 36px;
    border-radius: 50% 50% 28px 28px / 150px 150px 28px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 60%);
    border: 1px solid rgba(255, 255, 255, .12);
}
.akb-vm__card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: inherit;
    border: 1px solid rgba(238, 215, 21, .16);
    pointer-events: none;
}
.akb-vm__word { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1.25; color: var(--ak-sun); }
.akb-vm__card--mission .akb-vm__word { color: var(--ak-sand); }
.akb-vm__icon {
    margin-top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    color: var(--ak-sun);
}
.akb-vm .akb-vm__title { margin: 14px 0 12px; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.akb-vm .akb-vm__text { margin: 0; color: rgba(255, 255, 255, .76); line-height: 1.75; max-width: 52ch; }
.akb-vm .akb-vm__pull {
    margin: 22px 0 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(238, 215, 21, .08);
    border: 1px solid rgba(238, 215, 21, .2);
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    line-height: 1.7;
    text-align: start;
}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 991.98px) {
    .akb-values__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .akb-values__intro { position: static; }
    .akb-values__arch { display: none; }
    .akb-values__intro .ak-lead { margin-bottom: 0; }
    .akb-values__list { padding-bottom: 0; }
    .akb-value:nth-child(2),
    .akb-value:nth-child(4) { translate: none; }
    .akb-vm__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}

@media (max-width: 767.98px) {
    /* Zaman çizgisi telefonda dikey */
    .akb-timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .akb-timeline::before {
        top: 28px;
        bottom: 0;
        inset-inline-start: 27px;
        inset-inline-end: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--ak-plum-300) 0, var(--ak-plum-300) 70%, transparent 70%),
            repeating-linear-gradient(180deg, var(--ak-sun-600) 0 7px, transparent 7px 13px);
    }
    html[dir="rtl"] .akb-timeline::before {
        background: linear-gradient(180deg, var(--ak-plum-300) 0, var(--ak-plum-300) 70%, transparent 70%),
            repeating-linear-gradient(180deg, var(--ak-sun-600) 0 7px, transparent 7px 13px);
    }
    .akb-milestone { flex-direction: row; align-items: flex-start; gap: 14px; }
    .akb-milestone__node::after { display: none; }
    .akb-milestone__star { --_s: 56px; font-size: 1.375rem; }
    .akb-milestone__body { padding: 20px; border-radius: 20px; min-width: 0; }
    .akb-milestone__year { font-size: 2.5rem; }

    .akb-values__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .akb-value { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
    .akb-value__icon { width: 48px; height: 48px; grid-row: span 2; }
    .akb-value__title { margin: 2px 0 6px; padding-inline-end: 28px; }
    .akb-value__num { top: 16px; inset-inline-end: 18px; font-size: 1.5rem; }

    .akb-vm__card { padding: 40px 20px 26px; border-radius: 50% 50% 24px 24px / 110px 110px 24px 24px; }
    .akb-vm .akb-vm__pull { padding: 16px; font-size: .9688rem; }
}