/* ===========================================================================
   Üyelik sayfaları — xGate / onepage teması
   ---------------------------------------------------------------------------
   Şu an yalnızca "Yeni Üyelik" (Views/Membership/GetMembership.cshtml,
   /Sicil/Index) ekranını kapsar; üyelik düzenleme ekranları da aynı dile
   geçirilirse buraya eklenir.

   Ebelediye projesindeki Content/UyelikDuzenle.css'in karşılığıdır; yapı ve
   sınıf adları (ud-hero / ud-card / ud-choice) bilerek aynı tutuldu ki iki
   proje arasında geçen biri aynı şeyi arasın. Farklar:
     * Bootstrap 5 (col-6, -ms-flexbox ön ekleri yok)
     * Ölçüler rem cinsinden
     * Yazı tipleri ve renkler temanın assets/css/main.css değişkenlerinden:
         --heading-font  Raleway  → başlıklar
         --default-font  Roboto   → gövde
         --heading-color #124265  → başlık rengi
         --accent-color  #a4206d  → sol vurgu şeridi, ikonlar, hover

   Tüm seçiciler ".ud-wrap" altında kapsamlandırılmıştır.
   =========================================================================== */

.ud-wrap {
    --ud-vurgu: var(--accent-color, #a4206d);
    --ud-vurgu-zemin: #f7eaf2;
    --ud-baslik: var(--heading-color, #124265);
    --ud-metin: #3f4b57;
    --ud-metin-silik: #6b7885;
    --ud-cizgi: #e2e8ee;

    font-family: var(--default-font, "Roboto", sans-serif);
    color: var(--ud-metin);
}


/* --------------------------------------------------------- Sayfa başlığı -- */
.ud-wrap .ud-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ud-cizgi);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #fbfcfd 0%, #ffffff 65%);
    box-shadow: 0 1px 3px rgba(16, 42, 67, .05);
}

    /* soldaki ince vurgu şeridi */
    .ud-wrap .ud-hero::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--ud-vurgu);
    }

.ud-wrap .ud-hero-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.ud-wrap .ud-hero-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--ud-vurgu-zemin);
    color: var(--ud-vurgu);
    font-size: 1.6rem;
}

.ud-wrap .ud-hero-text {
    flex: 1 1 16rem;
    min-width: 0;
}

    .ud-wrap .ud-hero-text h2 {
        margin: 0;
        color: var(--ud-baslik);
        font-family: var(--heading-font, "Raleway", sans-serif);
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .ud-wrap .ud-hero-text p {
        margin: 0.4rem 0 0;
        color: var(--ud-metin-silik);
        font-size: 0.9rem;
        line-height: 1.55;
    }


/* --------------------------------------------------------------- Kart ----- */
.ud-wrap .ud-card {
    margin-bottom: 1.25rem;
    border: 1px solid var(--ud-cizgi);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .05);
}

.ud-wrap .ud-card-head {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ud-cizgi);
    background: #f8fafb;
    border-radius: 0.75rem 0.75rem 0 0;
}

.ud-wrap .ud-card-ico {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin-right: 0.7rem;
    border-radius: 0.55rem;
    background: var(--ud-vurgu-zemin);
    color: var(--ud-vurgu);
    font-size: 0.95rem;
    line-height: 2rem;
    text-align: center;
}

.ud-wrap .ud-card-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ud-baslik);
    font-family: var(--heading-font, "Raleway", sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
}

.ud-wrap .ud-card-body {
    padding: 1.25rem;
}


/* ------------------------------------------------------- Seçim kutuları --- */
.ud-wrap .ud-choices {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0;
}

    /* sütunlar da flex olur ki kutular eşit boyda kalsın */
    .ud-wrap .ud-choices > div {
        display: flex;
    }

.ud-wrap .ud-choice {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    padding: 1.25rem 1.1rem 1.25rem 1.4rem;
    border: 1px solid #dbe3ec;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #fbfcfd 0%, #ffffff 60%);
    color: var(--ud-baslik);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    /* sol kenardaki vurgu şeridi — .ud-hero ile aynı his */
    .ud-wrap .ud-choice::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--ud-vurgu);
    }

    .ud-wrap .ud-choice:hover,
    .ud-wrap .ud-choice:focus {
        border-color: var(--ud-vurgu);
        color: var(--ud-baslik);
        text-decoration: none;
        box-shadow: 0 0.6rem 1.4rem rgba(16, 42, 67, .14);
        transform: translateY(-2px);
    }

    .ud-wrap .ud-choice:focus-visible {
        outline: 3px solid rgba(164, 32, 109, .3);
        outline-offset: 2px;
    }

.ud-wrap .ud-choice-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 1rem;
    border-radius: 0.9rem;
    background: var(--ud-vurgu-zemin);
    color: var(--ud-vurgu);
    font-size: 1.6rem;
}

.ud-wrap .ud-choice-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ud-wrap .ud-choice-title {
    margin: 0 0 0.25rem;
    color: var(--ud-baslik);
    font-family: var(--heading-font, "Raleway", sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
}

.ud-wrap .ud-choice-desc {
    display: block;
    color: var(--ud-metin-silik);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ud-wrap .ud-choice-go {
    flex: 0 0 auto;
    margin-left: 0.75rem;
    color: #a3b1c0;
    transition: color .15s ease;
}

.ud-wrap .ud-choice:hover .ud-choice-go {
    color: var(--ud-vurgu);
}


/* ------------------------------------------------------------ Duyarlılık -- */
@media (max-width: 767.98px) {
    .ud-wrap .ud-hero {
        padding: 1rem;
    }

    .ud-wrap .ud-hero-text h2 {
        font-size: 1.35rem;
    }

    .ud-wrap .ud-card-body {
        padding: 1rem;
    }

    /* İki seçenek telefonda da yan yana kalır; bunun için kutular dikey
       yerleşime geçer ve açıklama satırı gizlenir. */
    .ud-wrap .ud-choice {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0.85rem 1rem 1.1rem;
        text-align: left;
    }

    .ud-wrap .ud-choice-ico {
        width: 2.8rem;
        height: 2.8rem;
        margin: 0 0 0.6rem;
        font-size: 1.3rem;
    }

    .ud-wrap .ud-choice-title {
        font-size: 0.95rem;
    }

    .ud-wrap .ud-choice-go {
        position: absolute;
        right: 0.7rem;
        bottom: 0.7rem;
        margin-left: 0;
    }
}

@media (max-width: 479.98px) {
    /* Çok dar ekranda açıklama iki kutuyu da uzatıyor; başlık yeter. */
    .ud-wrap .ud-choice-desc {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ud-wrap .ud-choice {
        transition: none;
    }

        .ud-wrap .ud-choice:hover,
        .ud-wrap .ud-choice:focus {
            transform: none;
        }
}