/* --------------------------------------------------------------------------
   AŞAMALAR
   Zeminler tam genişlik (full-bleed), içerik container'da kalır.
   -------------------------------------------------------------------------- */

.ss-steps {
    --step-indent: clamp(16px, 9vw, 130px);
    --step-icon: clamp(80px, 8.5vw, 120px);
    --step-icon-inner: clamp(56px, 5.8vw, 80px);
    --step-gap: clamp(20px, 1.6vw, 30px);
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ss-steps::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: calc(var(--step-icon) / 2);
        bottom: calc(var(--step-icon) / 2);
        left: calc(var(--step-indent) + var(--step-icon) / 2 - 1px);
        border-left: 1px solid var(--red-980B12);
    }


.ss-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--step-icon) minmax(0, 1fr);
    gap: clamp(15px, 1.6vw, 30px);
    padding-left: var(--step-indent);
    margin-bottom: var(--step-gap);
}

    .ss-step:last-child {
        margin-bottom: 0;
    }

    /* Tam genişlik zemin */
    .ss-step::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--step-bg, transparent);
    }

    .ss-step:nth-child(1) {
        --step-bg: #a3a3a320;
        --reveal-angle: 90deg; /* İlk çeyrek açılır */
    }

    .ss-step:nth-child(2) {
        --step-bg: #a3a3a43c;
        --reveal-angle: 180deg; /* Yarısı açılır */
    }

    .ss-step:nth-child(3) {
        --step-bg: #a3a3a370;
        --reveal-angle: 270deg; /* Üç çeyreği açılır */
    }

    .ss-step:nth-child(4) {
        --step-bg: #980b12;
        --reveal-angle: 360deg; /* Tamamı açılır */
    }

    /* Şeritlerin üzerindeki halftone baloncuk dokusu — 1. şerit hariç */
    .ss-step::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--step-bubbles, none) center / cover no-repeat;
        pointer-events: none;
    }

    .ss-step:nth-child(2),
    .ss-step:nth-child(3),
    .ss-step:nth-child(4) {
        --step-bubbles: url("../../img/bubble.svg");
    }

.ss-step__icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--step-icon);
    height: var(--step-icon);
    border-radius: var(--radius-full);
    background: var(--neutral-F5F5F5);
    box-shadow: 0 3px 10px rgb(26 24 24 / 12%);
    margin-top: calc(var(--step-gap) * -1);
}

@media(max-width:767px){
    .ss-step__icon {
        margin-top: calc(var(--step-gap) * -2);
    }
}

.ss-step__icon-inner {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--step-icon-inner);
    height: var(--step-icon-inner);
    border-radius: var(--radius-full);
    background: var(--neutral-FFFFFF);
    box-shadow: 0 3px 10px rgb(26 24 24 / 12%);
    overflow: hidden;
}

.ss-step__icon-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #000000ba;
    backdrop-filter: grayscale(1);
    border-radius: inherit;
        -webkit-mask-image: conic-gradient(transparent var(--reveal-angle), black var(--reveal-angle));
    mask-image: conic-gradient(transparent var(--reveal-angle), black var(--reveal-angle));
}

.ss-step:nth-child(4) .ss-step__icon-inner::after {
    display: none;
}

    .ss-step__icon svg {
        width: 50%;
        height: 60%;
    }

.ss-step__icon::before,
.ss-step__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 3;
    border-radius: var(--radius-full);
}

.ss-step__icon::after {
    top: 100%;
    transform: translate(-50%, -100%);
    width: 12px;
    height: 12px;
    background: var(--neutral-F5F5F5);
    border: 2px solid var(--red-980B12);
}

.ss-step__icon::before {
    top: 0;
    transform: translate(-50%, 10%);
    width: 10px;
    height: 10px;
    background: var(--red-980B12);
}

.ss-step:first-child .ss-step__icon::before,
.ss-step:last-child .ss-step__icon::after {
    display: none;
}


.ss-step__text {
    --rte-fs: var(--df-text-fs-18);
    --rte-gap: clamp(8px, 0.8vw, 12px);
    --rte-color: var(--neutral-1A1818);
    max-width: 62rem;
    padding: clamp(18px, 1.8vw, 28px) 0;
}

    .ss-step__text a {
        color: inherit;
    }

/* Son adım — puantiyeli kırmızı bant */
.ss-step--final {
    --step-bg: radial-gradient(rgb(255 255 255 / 13%) 1.4px, transparent 1.5px) 0 0 / 9px 9px,
               linear-gradient(100deg, var(--red-D11019) 0%, var(--red-BF0D16) 60%, var(--red-980B12) 100%);
}

    .ss-step--final .ss-step__text {
        --rte-color: var(--neutral-FFFFFF);
    }

@media (max-width: 767.98px) {
    .ss-steps {
        --step-indent: 8px;
    }

    .ss-step {
        align-items: start;
        gap: 16px;
        padding-block: 20px;
    }
}

/* --------------------------------------------------------------------------
   ABONELİK TÜRÜ KARTLARI
   -------------------------------------------------------------------------- */

.ss-types__title {
    font-size: var(--df-text-fs-28);
    font-weight: var(--fw-bold);
    color: var(--neutral-1A1818);
}

.ss-type-card {
    display: block;
    color: inherit;
    transition: transform var(--transition-base);
}

    .ss-type-card:hover {
        transform: translateY(-6px);
        color: inherit;
    }

    .ss-type-card .card-text-content {
        font-size: var(--df-text-fs-32);
        font-weight: var(--fw-semibold);
        flex-grow: 0;
    }

.icon-glass-ring svg {
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
}
/* --------------------------------------------------------------------------
   ALT YÖNLENDİRME BANDI — tam genişlik, gri diyagonal geçişli
   -------------------------------------------------------------------------- */
.ss-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3vw, 46px) 0;
    background: transparent conic-gradient(from 277deg at 80% 55%, var(--neutral-858585) 0.00%, var(--neutral-858585) 43.00%, var(--red-F8777E) 50%, var(--red-F8777E) 98%, var(--red-980B12) 99.80%, var(--neutral-858585) 100.00%) 0% 0% no-repeat padding-box;
    color: var(--neutral-FFFFFF);
}

.ss-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: clamp(0px, 3.5vw, 56px);
}

.ss-cta__text {
    font-size: var(--df-text-fs-32);
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
    color: var(--neutral-FFFFFF);
}

    .ss-cta__text a {
        color: var(--neutral-FFFFFF);
        text-decoration: underline;
    }

.ss-cta .df-round-btn {
    --rb-size: clamp(52px, 5vw, 76px);
    --rb-bg: var(--red-D11019);
    --rb-color: var(--neutral-FFFFFF);
    --rb-ring: 5px;
    --rb-ring-color: var(--neutral-FFFFFF);
}