/* ============================================================
   Tarihçe — yatay ray tasarımı (hakkımızda)
   Site fontu: Akkaya Nexa XBold · Site rengi: --rs-theme-orange
   Tüm sınıflar akk-th- ile prefix'li (genel .history/.nav/.rail/.ms
   ile çakışmasın diye).
   ============================================================ */
.akk-th {
    --akk-th-ink: var(--rs-title-primary, #1f1f1f);
    --akk-th-paper: #f7f7f7;
    --akk-th-steel: var(--rs-text-primary, #616161);
    --akk-th-line: rgba(16, 21, 26, 0.15);
    --akk-th-brand: var(--rs-theme-orange, #e22a2a);
    --akk-th-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --akk-th-ff: var(--rs-ff-body, "Akkaya Nexa XBold", sans-serif);
    --akk-th-pad: clamp(20px, 5vw, 64px);
    --akk-th-item: clamp(240px, 27vw, 340px);
    --akk-th-media: 215px;

    padding: clamp(72px, 10vw, 140px) 0;
    background: var(--akk-th-paper);
    color: var(--akk-th-ink);
}

/* ---------- Başlık ---------- */
.akk-th__head {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--akk-th-pad);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.akk-th__title {
    font-family: var(--akk-th-ff);
    font-size: clamp(30px, 4.6vw, 54px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    color: var(--akk-th-ink);
}
.akk-th__rule {
    display: block;
    width: 74px;
    height: 4px;
    background: var(--akk-th-brand);
    margin-top: 18px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--akk-th-ease);
}
.akk-th.is-in .akk-th__rule {
    transform: scaleX(1);
}

.akk-th-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.akk-th-nav__btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--akk-th-line);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        opacity 0.3s ease;
}
.akk-th-nav__btn svg {
    width: 15px;
    height: 15px;
    stroke: var(--akk-th-ink);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.3s ease;
}
.akk-th-nav__btn:hover:not(:disabled) {
    background: var(--akk-th-ink);
    border-color: var(--akk-th-ink);
}
.akk-th-nav__btn:hover:not(:disabled) svg {
    stroke: #fff;
}
.akk-th-nav__btn:focus-visible {
    outline: 2px solid var(--akk-th-brand);
    outline-offset: 3px;
}
.akk-th-nav__btn:disabled {
    opacity: 0.25;
    cursor: default;
}

/* ---------- Ray ---------- */
.akk-th-rail {
    /* Başlık ve ilerleme çubuğuyla aynı 1240px'lik kapta hizalanır;
       önceden tek başına tam genişlikte akıyordu. */
    max-width: 1240px;
    margin: clamp(40px, 6vw, 72px) auto 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 var(--akk-th-pad);
    list-style: none;
    cursor: grab;
}
.akk-th-rail::-webkit-scrollbar {
    display: none;
}
.akk-th-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.akk-th-ms {
    flex: 0 0 var(--akk-th-item);
    width: var(--akk-th-item);
    scroll-snap-align: center;
    display: grid;
    grid-template-rows: 1fr auto auto;
    text-align: center;
}

/* metin */
.akk-th-ms__text {
    align-self: end;
    font-size: 14px;
    line-height: 1.7;
    color: var(--akk-th-steel);
    margin: 0 auto 32px;
    padding: 0 14px;
    max-width: 30ch;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.7s ease,
        transform 0.7s var(--akk-th-ease),
        color 0.4s ease;
    transition-delay: var(--d, 0ms);
}
.akk-th.is-in .akk-th-ms__text {
    opacity: 0.5;
    transform: none;
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__text {
    opacity: 1;
    color: var(--akk-th-ink);
}

/* eksen + görsel */
.akk-th-ms__axis {
    position: relative;
    height: calc(var(--akk-th-media) * 1.34);
    display: grid;
    place-items: center;
}
.akk-th-ms__axis::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    height: 1px;
    background: var(--akk-th-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--akk-th-ease);
    transition-delay: var(--d, 0ms);
}
.akk-th.is-in .akk-th-ms__axis::before {
    transform: scaleX(1);
}

.akk-th-ms__media {
    position: relative;
    width: var(--akk-th-media);
    height: var(--akk-th-media);
    background: var(--akk-th-paper);
    padding: 7px;
    opacity: 0;
    transform: scale(0.72);
    transition:
        opacity 0.5s ease,
        transform 0.55s var(--akk-th-ease);
    transition-delay: var(--d, 0ms);
}
.akk-th.is-in .akk-th-ms__media {
    opacity: 1;
    transform: scale(0.86);
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__media {
    transform: scale(1.16);
    transition-delay: 0ms;
}

.akk-th-ms__frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, rgba(16, 21, 26, 0.05) 0 6px, transparent 6px 12px),
        rgba(16, 21, 26, 0.07);
    box-shadow: inset 0 0 0 1px var(--akk-th-line);
    transition: box-shadow 0.4s ease;
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__frame {
    box-shadow: inset 0 0 0 1px rgba(16, 21, 26, 0.28);
}
.akk-th-ms__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.05);
    opacity: 0.55;
    transition:
        filter 0.5s ease,
        opacity 0.5s ease;
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__frame img {
    filter: none;
    opacity: 1;
}

/* aktif göstergesi: kırmızı alt kenar */
.akk-th-ms__media::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    height: 3px;
    background: var(--akk-th-brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s var(--akk-th-ease);
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__media::after {
    transform: scaleX(1);
}

/* yıl */
.akk-th-ms__year {
    font-family: var(--akk-th-ff);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 24px;
    color: rgba(16, 21, 26, 0.24);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.7s ease,
        transform 0.7s var(--akk-th-ease),
        color 0.4s ease;
    transition-delay: var(--d, 0ms);
}
.akk-th.is-in .akk-th-ms__year {
    opacity: 1;
    transform: none;
}
.akk-th.is-in .akk-th-ms.is-active .akk-th-ms__year {
    color: var(--akk-th-ink);
}

/* ---------- İlerleme ---------- */
.akk-th-progress {
    max-width: 1240px;
    margin: clamp(44px, 6vw, 72px) auto 0;
    padding: 0 var(--akk-th-pad);
}
.akk-th-progress__track {
    position: relative;
    height: 2px;
    background: var(--akk-th-line);
    cursor: pointer;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--akk-th-ease) 0.2s;
}
.akk-th.is-in .akk-th-progress__track {
    transform: scaleX(1);
}
.akk-th-progress__track::before {
    content: "";
    position: absolute;
    inset: -12px 0;
}
.akk-th-progress__thumb {
    position: absolute;
    top: -1px;
    left: 0;
    height: 4px;
    background: var(--akk-th-brand);
    width: 22%;
    will-change: transform;
}

@media (max-width: 640px) {
    .akk-th {
        --akk-th-media: 66px;
    }
    .akk-th__head {
        flex-direction: column;
        align-items: flex-start;
    }
    .akk-th-nav {
        display: none;
    }
    .akk-th-ms__text {
        font-size: 13.5px;
        margin-bottom: 26px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .akk-th-ms__text,
    .akk-th-ms__year,
    .akk-th-ms__media,
    .akk-th-ms__media::after,
    .akk-th-ms__axis::before,
    .akk-th__rule,
    .akk-th-progress__track {
        transition: none;
    }
    .akk-th-rail {
        scroll-behavior: auto;
    }
}