/* ==========================================================================
   Bizimle Çalış (About/WorkWithUs). Önek: .akj-
   ========================================================================== */

/* ------------------------------ 1. ROLLER: kemer kapılar ------------------------------ */
.akj-roles__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.akj-role {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 22px 22px;
    border-radius: 50% 50% 22px 22px / 120px 120px 22px 22px;
    background: var(--ak-surface);
    border: 1px solid var(--ak-line);
}
.akj-role:hover { border-color: var(--ak-plum-200); box-shadow: var(--ak-shadow); }
.akj-role__crown {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: stretch;
    margin-inline: -22px;
    height: 150px;
    display: grid;
    place-items: center;
    padding-top: 26px;
    background-color: var(--ak-plum-50);
    background-image: var(--ak-pattern-plum);
    background-size: 66px 66px;
}
.akj-role__word {
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    bottom: -.32em;
    font-size: 4.25rem;
    line-height: 1;
    color: rgba(138, 53, 106, .1);
    text-align: center;
}
.akj-role__icon { --_s: 64px; font-size: 1.375rem; }
.akj-role--lead .akj-role__crown {
    background-color: var(--ak-plum-900);
    background-image: var(--ak-mashrabiya);
    background-size: 40px 40px;
}
.akj-role--lead .akj-role__word { color: rgba(238, 215, 21, .14); }
.akj-role--lead { border-color: var(--ak-plum-200); }
.akj-role__num {
    margin-top: 16px;
    font-family: var(--ak-font-kufi);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ak-sand);
}
.akj-role__title { margin: 10px 0 8px; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }
.akj-role__desc { margin: 0; color: var(--ak-muted); font-size: .9375rem; line-height: 1.65; }
.akj-role__link {
    margin-top: auto;
    padding-top: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ak-plum-600);
    text-decoration: none;
}
.akj-role__link:hover { color: var(--ak-plum-800); gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
    .akj-role { transition: border-color .2s, box-shadow .3s var(--ak-ease) !important; }
    .akj-role__link { transition: gap .2s var(--ak-ease), color .2s !important; }
}

/* ------------------------------ 2. NEDEN BİZ + BAŞVURU MEKTUBU ------------------------------ */
.akj-apply__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(36px, 6vw, 96px);
    align-items: center;
}
.akj-why .ak-lead { margin-bottom: 28px; }

/* Yönetim panelinden gelen HTML liste: kart satırları */
.akj-perks ul,
.akj-perks ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.akj-perks li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--ak-bg);
    border: 1px solid var(--ak-line);
    color: var(--ak-ink);
    font-weight: 600;
    line-height: 1.5;
}
.akj-perks li::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background: var(--ak-sun-600);
    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%);
}
.akj-perks p { margin: 0 0 12px; color: var(--ak-ink-2); line-height: 1.7; }

.akj-letter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 3vw, 40px);
    border-radius: 28px;
    background: var(--ak-plum-950);
    color: #fff;
    box-shadow: var(--ak-shadow-lg);
}
.akj-letter__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ak-mashrabiya);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000, transparent 70%);
}
html[dir="rtl"] .akj-letter__pattern {
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 0% 0%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse 80% 70% at 0% 0%, #000, transparent 70%);
}
.akj-letter__seal {
    width: 60px;
    height: 60px;
    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-sun);
    color: var(--ak-plum-950);
    font-size: 1.25rem;
}
.akj-letter .akj-letter__title { margin: 20px 0 22px; color: #fff; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 700; letter-spacing: -.025em; }
.akj-letter__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.akj-letter__steps li { display: flex; align-items: flex-start; gap: 14px; }
.akj-letter__num {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(238, 215, 21, .35);
    color: var(--ak-sun);
    font-family: var(--ak-font-kufi);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}
.akj-letter .akj-letter__steps p { margin: 0; padding-top: 8px; color: rgba(255, 255, 255, .82); line-height: 1.6; overflow-wrap: anywhere; }
.akj-letter__actions { display: grid; gap: 10px; margin-top: 28px; }
.akj-letter__actions .ak-btn { white-space: normal; text-align: center; }
.akj-letter__sign {
    position: absolute;
    z-index: -1;
    inset-inline-end: 18px;
    bottom: -.25em;
    font-size: 4rem;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    white-space: nowrap;
}

/* ------------------------------ 3. KÜLTÜR ------------------------------ */
.akj-culture { background: var(--ak-plum-950); }
.akj-culture .ak-lead { color: rgba(255, 255, 255, .72); }
.akj-culture__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.akj-culture__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px clamp(20px, 3vw, 44px);
}
.akj-culture__item + .akj-culture__item { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.akj-culture__icon { --_s: 68px; font-size: 1.375rem; }
.akj-culture .akj-culture__title { margin: 22px 0 8px; color: #fff; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; }
.akj-culture .akj-culture__desc { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, .72); line-height: 1.7; }

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 1199.98px) {
    .akj-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .akj-role { border-radius: 50% 50% 22px 22px / 110px 110px 22px 22px; }
}
@media (max-width: 991.98px) {
    .akj-apply__grid { grid-template-columns: minmax(0, 1fr); }
    .akj-letter { max-width: 560px; }
}
@media (max-width: 767.98px) {
    .akj-roles__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .akj-role { border-radius: 50% 50% 22px 22px / 96px 96px 22px 22px; }
    .akj-role__crown { height: 128px; padding-top: 22px; }
    .akj-role__icon { --_s: 56px; }

    .akj-perks li { padding: 14px 16px; }
    .akj-letter { border-radius: 24px; }

    .akj-culture__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .akj-culture__item { padding: 28px 8px; }
    .akj-culture__item + .akj-culture__item { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .akj-culture__item:first-child { padding-top: 0; }
    .akj-culture__item:last-child { padding-bottom: 0; }
}