/* ============================================================
   beIN Connect kutusuz online basvuru sihirbazi (mobil oncelikli)
   Ödeme Türü → Paket Seçiniz → Form → SMS OTP
   ============================================================ */
.bc {
    background: #f5f5f5;
    min-height: 70vh;
    padding: 20px 0 50px;
}

.bc-wrap {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* Mini header */
.bc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 16px;
    box-shadow: 0 3px 12px rgba(41,20,95,.08);
}

.bc-logo {
    width: 128px;
    height: auto;
}

.bc-bein {
    color: var(--mor, #660099);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .bc-bein b {
        font-weight: 400;
    }

.bc-bein-play {
    background: var(--mor, #660099);
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
}

.bc-form {
    display: block;
}

.bc-title {
    text-align: center;
    font-size: 24px;
    color: var(--baslik, #29145f);
    margin: 8px 0 20px;
}

/* -------- Butonlar -------- */
.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(120deg, #4a1d6b, #6a2c91);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 20px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(102,0,153,.28);
    transition: .2s;
}

    .bc-btn:hover {
        filter: brightness(1.08);
        color: #fff;
        text-decoration: none;
    }

.bc-btn--ghost {
    background: #f0e8f6;
    color: var(--mor, #660099);
    box-shadow: none;
}

    .bc-btn--ghost:hover {
        background: #e6d9f0;
        color: var(--mor, #660099);
        filter: none;
    }

.bc-back {
    max-width: 200px;
    margin: 18px auto 0;
}

/* ============ Ödeme kartlari ============ */
.bc-pay {
    display: block;
    position: relative;
    background: #fff;
    border: 2px solid #e6e2ea;
    border-radius: 18px;
    padding: 22px 20px 20px;
    margin-bottom: 18px;
    cursor: pointer;
}

.bc-pay--reco {
    border-color: var(--mor, #660099);
    padding-top: 34px;
}

.bc-pay.is-selected {
    border-color: var(--mor, #660099); /* box-shadow: 0 0 0 3px rgba(102,0,153,.12); */
    overflow: hidden;
}

.bc-pay-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, #4a1d6b, #6a2c91);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 6px;
    border-radius: 16px 16px 0 0;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.bc-pay-check {
    position: absolute;
    top: 34px;
    right: 20px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #cbb6da;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.bc-pay.is-selected .bc-pay-check {
    background: var(--mor, #660099);
    border-color: var(--mor, #660099);
}

.bc-pay--reco .bc-pay-check {
    top: 44px;
}

.bc-pay-kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mor, #660099);
}

.bc-pay[data-pay="monthly"] .bc-pay-kicker {
    color: var(--kirmizi, #dd1936);
}

.bc-pay-name {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--baslik, #29145f);
    margin: 2px 0 8px;
}

.bc-pay-price {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: var(--mor, #660099);
}

.bc-pay[data-pay="monthly"] .bc-pay-price {
    color: #3a3a3a;
}

.bc-pay-price small {
    font-size: 14px;
    color: #6b6b6b;
    font-weight: 600;
}

.bc-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f6f0fa;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 13.5px;
    color: #6b6b6b;
}

    .bc-pay-row b {
        color: var(--baslik, #29145f);
        font-size: 16px;
    }

.bc-pay-note {
    display: block;
    font-size: 13px;
    color: #6b6b6b;
    background: #f4f4f6;
    border-radius: 8px;
    padding: 10px 12px;
}

.bc-pay-note--ok {
    color: #1c7a3f;
    background: #e9f7ee;
    font-weight: 600;
}

.bc-pay-sub {
    display: block;
    font-size: 12.5px;
    color: #8a8a8a;
    margin: 12px 0 16px;
}

.bc-pay-cta {
    width: 100%;
}

/* ============ Paket kartlari ============ */
.bc-pkg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #ffffff;
    border: 2px solid #0000000d;
    border-radius: 16px;
    padding: 22px 16px;
    /* margin-bottom: 14px; */
    cursor: pointer;
    transition: .18s;
    text-align: center;
}

.bc-step[data-step="2"] {
}

    .bc-step[data-step="2"] .bc-pkg.bc-pkg--wide {
        margin: 0 0 11px;
    }

.bc-pkg:hover {
    border-color: var(--mor, #660099);
    background: #f0e8f6;
}

.bc-pkg img {
    height: 84px;
    width: auto;
    object-fit: contain;
}

.bc-pkg-name {
    font-weight: 700;
    color: var(--baslik, #29145f);
    font-size: 15px;
}

.bc-pkg-price {
    font-weight: 800;
    color: var(--mor, #660099);
    font-size: 19px;
}

.bc-pkg--wide img {
    height: 96px;
}

.bc-pkg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

    .bc-pkg-grid .bc-pkg img {
        height: 74px;
    }

/* ============ Form ============ */
.bc-summary {
    background: #fff;
    border: 1px solid #eadff2;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: 0 3px 12px rgba(41,20,95,.06);
}

.bc-sum-name {
    text-align: center;
    color: var(--baslik, #29145f);
    font-size: 20px;
    margin: 0 0 8px;
}

.bc-sum-desc {
    text-align: center;
    color: #7a7a7a;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.bc-sum-badge {
    background: #f6f0fa;
    color: var(--mor, #660099);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.bc-sum-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

    .bc-sum-prices > div {
        background: #652c8b;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 12px;
        text-align: center;
    }

    .bc-sum-prices span {
        display: block;
        font-size: 13px;
        color: #ffffff;
        font-weight: 500;
    }

    .bc-sum-prices b {
        display: block;
        color: #ffffff;
        font-size: 16px;
        margin-top: 2px;
    }

.bc-field {
    margin-bottom: 16px;
}

    .bc-field label {
        display: block;
        font-weight: 600;
        color: var(--baslik, #29145f);
        font-size: 14px;
        margin-bottom: 6px;
    }

    .bc-field .req {
        color: var(--kirmizi, #dd1936);
    }

    .bc-field input, .bc-field select {
        width: 100%;
        padding: 14px;
        border: 1px solid #dcd5e2;
        border-radius: 12px;
        font-size: 16px;
        font-family: inherit;
        background: #fff;
        color: #3a3a3a;
    }

        .bc-field input:focus, .bc-field select:focus {
            outline: none;
            border-color: var(--mor, #660099);
            box-shadow: 0 0 0 3px rgba(102,0,153,.12);
        }

    .bc-field.has-error input, .bc-field.has-error select {
        border-color: var(--kirmizi, #dd1936);
    }

.bc-err {
    display: block;
    color: var(--kirmizi, #dd1936);
    font-size: 12.5px;
    margin-top: 5px;
}

.bc-err--form {
    background: #fdeef0;
    border: 1px solid #f5c6cd;
    color: #a3122a;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0 14px;
}

.bc-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    color: #6b6b6b;
    margin: 8px 0 20px;
}

    .bc-consent input {
        margin-top: 3px;
        flex: 0 0 auto;
    }

.bc-nav {
    display: flex;
    gap: 12px;
}

    .bc-nav .bc-btn {
        flex: 1;
    }

    .bc-nav .bc-btn--ghost {
        max-width: 130px;
        margin: 0;
    }

/* ============ Sonuç ============ */
.bc-done {
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 40px 24px;
    box-shadow: 0 3px 12px rgba(41,20,95,.08);
}

.bc-done-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e9f7ee;
    color: #1c7a3f;
    font-size: 38px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}

.bc-done h2 {
    color: var(--baslik, #29145f);
    font-size: 22px;
    margin: 0 0 10px;
}

.bc-done p {
    color: #6b6b6b;
    margin: 0 auto 22px;
    max-width: 460px;
}

.bc-done .bc-btn {
    max-width: 260px;
    margin-inline: auto;
}

/* ============ Masaüstü ============ */
@media (min-width: 620px) {
    .bc-title {
        font-size: 28px;
    }

    .bc-pay-price {
        font-size: 34px;
    }
}

/* -------- Adım göstergesi (hizlibasvuru paneliyle aynı desen, mor tema) -------- */
.bc-panel {
    background: #fff;
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(41,20,95,.06);
}

.bc-main-title {
    text-align: center;
    font-size: 22px;
    color: var(--baslik, #29145f);
    margin: 0 0 16px;
}

.bc-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bc-stepbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: #f5f6fa;
    border-radius: 12px;
    padding: 14px 8px;
    transition: .2s;
}

    .bc-stepbox.is-active {
        background: #f0e8f6;
    }

.bc-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mor, #660099);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 8px rgba(102,0,153,.28);
}

.bc-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: #7a8091;
    line-height: 1.25;
}

.bc-stepbox.is-active .bc-lbl {
    color: var(--baslik, #29145f);
}

.bc-stepbox.is-done .bc-dot {
    background: #1c7a3f;
    box-shadow: 0 3px 8px rgba(28,122,63,.25);
}

@media (max-width: 560px) {
    .bc-lbl {
        font-size: 10.5px;
    }

    .bc-stepbox {
        padding: 11px 4px;
    }

    .bc-dot {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .bc-main-title {
        font-size: 19px;
    }
}

/* -------- İşleniyor ekranı (spinner + aşamalı ilerleme) -------- */
.bc-loading {
    text-align: center;
    background: #fff;
    border-radius: 14px;
    padding: 30px 18px 26px;
}

.bc-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid #eadff2;
    border-top-color: var(--mor, #660099);
    border-radius: 50%;
    margin: 6px auto 20px;
    animation: bc-spin .9s linear infinite;
}

@keyframes bc-spin {
    to {
        transform: rotate(360deg);
    }
}

.bc-loading h2 {
    color: var(--baslik, #29145f);
    margin: 0 0 6px;
    font-size: 21px;
}

.bc-loading p {
    color: #6b6b6b;
    margin: 0 0 22px;
}

.bc-progress {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 380px;
    text-align: left;
}

    .bc-progress li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 0;
        color: #9aa0b5;
        font-size: 14.5px;
        transition: color .3s;
    }

        .bc-progress li.is-active {
            color: var(--baslik, #29145f);
            font-weight: 600;
        }

        .bc-progress li.is-done {
            color: #1c7a3f;
        }

.bc-p-mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #d5d8e3;
    flex: 0 0 auto;
    position: relative;
    transition: .3s;
}

.bc-progress li.is-active .bc-p-mark {
    border-color: var(--mor, #660099);
    box-shadow: 0 0 0 4px rgba(102,0,153,.12);
}

.bc-progress li.is-done .bc-p-mark {
    border-color: #1c7a3f;
    background: #1c7a3f;
}

    .bc-progress li.is-done .bc-p-mark::after {
        content: "✓";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

/* -------- Güven şeridi -------- */
.bc-guven {
    margin-top: 14px;
    text-align: center;
}

.bc-guven-ic {
    display: inline-block;
    color: #7a8091;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ============================================================
   Mobil revizyon (2026-08-14):
   1) Hata ipuçları başlangıçta GİZLİ (display:block [hidden]'ı eziyordu —
      form daha doldurulmadan tüm uyarılar görünüyordu).
   2) Mini header (Digiturk+beIN şeridi) mobilde gereksiz → gizli.
   3) Ödeme kartları mobilde kompakt: iki seçenek tek ekranda net görünür.
   4) Üyelik formu hizlibasvurudaki gibi BEYAZ KUTU içinde ve kompakt.
   ============================================================ */
.bc-err[hidden] {
    display: none !important;
}

.bc-err--form:empty {
    display: none !important;
}

/* Üyelik formu adımı beyaz kart içinde */
.bc-step[data-step="3"] {
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px 20px;
    box-shadow: 0 2px 10px rgba(41,20,95,.06);
}

    .bc-step[data-step="3"] .bc-summary {
        border: 0;
        box-shadow: none;
        background: #f8f6fb;
        padding: 20px 8px 10px;
        margin-bottom: 16px;
    }

.bc-field {
    margin-bottom: 16px;
}

    .bc-field input, .bc-field select {
        padding: 12px 13px;
    }

@media (max-width: 620px) {
    /* Mini header mobilde gizli */
    .bc-head {
        display: none;
    }

    /* Ödeme kartları kompakt */
    .bc-title {
        font-size: 20px;
        margin: 4px 0 14px;
    }

    .bc-pay {
        padding: 16px 14px 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .bc-pay--reco {
        padding-top: 30px;
    }

    .bc-pay-ribbon { /* font-size: 10.5px; */
        padding: 8px;
        border-radius: 8px 8px 0 0;
    }

    .bc-pay-check {
        top: 16px;
        right: 14px;
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .bc-pay--reco .bc-pay-check {
        top: 54px;
    }

    .bc-pay-kicker {
        font-size: 11px;
    }

    .bc-pay-name {
        font-size: 17px;
        ma;
        margin: 4px 0 8px;
    }

    .bc-pay-price {
        font-size: 24px;
    }

        .bc-pay-price small {
            font-size: 12px;
        }

    .bc-pay-row {
        padding: 9px 12px;
        margin: 8px 0;
        font-size: 12.5px;
    }

        .bc-pay-row b {
            font-size: 14px;
        }

    .bc-pay-note {
        font-size: 12px;
        padding: 8px 10px;
    }

    .bc-pay-sub {
        display: none;
    }
    /* uzun taksit açıklaması mobilde gizli */
    .bc-pay-cta {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Üyelik formu kompakt (input 16px kalır — iOS zoom tetiklenmez) */
    .bc-sum-desc {
        display: none;
    }
    /* uzun paket açıklaması mobilde gizli */
    .bc-sum-name {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .bc-sum-badge {
        font-size: 15px;
        padding: 0 10px;
        margin: 20px 0 12px;
        font-weight: 500;
    }

    .bc-sum-prices b {
        font-size: 14.5px;
    }

    .bc-field label {
        /* font-size: 13px; */
        /* margin-bottom: 4px; */
    }

    .bc-field input, .bc-field select {
        padding: 11px 12px;
    }

    .bc-consent {
        margin: 8px 0 14px;
    }
}

/* Ödeme kartları: son sıkılaştırma — iki seçenek 375px ekranda birden görünür. */
@media (max-width: 620px) {
    .bc-panel {
        padding: 14px 12px;
        margin-bottom: 26px;
    }

    .bc-main-title {
        margin-bottom: 10px;
    }

    .bc-title {
        margin: 10px 0 16px;
        /* font-size: 19px; */
        display: none;
    }

    .bc-pay {
        padding: 13px 12px 12px;
        margin-bottom: 10px;
    }

    .bc-pay--reco {
        padding-top: 56px;
    }

    .bc-pay-price {
        font-size: 28px;
        line-height: 1.15;
    }

    .bc-pay-row {
        padding: 10px 10px;
        margin: 13px 0;
        font-size: 13px;
    }

        .bc-pay-row b {
            font-size: 13px;
        }

    .bc-pay-note {
        font-size: 13px;
        padding: 10px 9px;
        margin: 0 0 12px;
    }

    .bc-pay-cta {
        padding: 11px 14px;
        font-size: 14px;
        margin-top: 8px;
    }
}