/* ============================================================================
   ÖYS — ADAY (DIŞ) TEMA
   ----------------------------------------------------------------------------
   Bu dosya _MainLayout'a bağlı TÜM sayfaların ortak görünümünü yönetir:
       Aday/Index, Aday/Giris, Aday/Kaydol, Aday/Profil,
       Basvuru/Index, SinavGirisBelgesi/Index
   Sayfaların içine ayrı ayrı <style> yazmak yerine buraya eklenmelidir.

   HeroBiz (Bootstrap 5.3) şablonundan SONRA yüklenir; renk paleti HeroBiz'in
   variables.css dosyasındaki --color-* değişkenlerinden türetilir ki üniversite
   sitesiyle uyum bozulmasın.

   Bölümler
     1. Tasarım değişkenleri
     2. Sayfa zemini ve tipografi
     3. Üst menü (header / navbar)
     4. Sayfa başlığı ve bölüm başlıkları
     5. Kart, form, buton, rozet — ortak bileşenler
     6. Adım kartları (anasayfa yönlendirmesi)
     7. Takvim
     8. Boş durum, uyarı şeridi
     9. Kimlik ekranları (giriş / kaydol)
    10. Erişilebilirlik, hareket azaltma, yazdırma
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TASARIM DEĞİŞKENLERİ
   -------------------------------------------------------------------------- */
:root {
    --ay-ana: var(--color-primary, #0ea2bd);
    --ay-ana-koyu: var(--color-primary-dark, #0189a1);
    --ay-ana-acik: var(--color-primary-light, #1ec3e0);
    --ay-ana-rgb: var(--color-primary-rgb, 14, 162, 189);

    --ay-metin: #12202b;
    --ay-metin-soluk: #5b6b7a;
    --ay-metin-cok-soluk: #8a9aa8;

    --ay-zemin: #f4f7fa;
    --ay-yuzey: #ffffff;
    --ay-cizgi: #e3eaf1;
    --ay-cizgi-koyu: #cfdae4;

    --ay-basari: #0f9d58;
    --ay-basari-zemin: rgba(15, 157, 88, .10);
    --ay-uyari: #d97706;
    --ay-uyari-zemin: rgba(217, 119, 6, .12);
    --ay-hata: #dc2626;
    --ay-hata-zemin: rgba(220, 38, 38, .10);
    --ay-bilgi: #2563eb;
    --ay-bilgi-zemin: rgba(37, 99, 235, .10);

    /* Takvim aşama renkleri */
    --ay-basvuru: #2563eb;
    --ay-belge: #7c3aed;
    --ay-sonuc: #0f9d58;

    --ay-golge: 0 1px 2px rgba(18, 32, 43, .05), 0 8px 24px -12px rgba(18, 32, 43, .18);
    --ay-golge-yuksek: 0 2px 4px rgba(18, 32, 43, .06), 0 18px 40px -18px rgba(18, 32, 43, .28);

    --ay-yuvarlak: 14px;
    --ay-yuvarlak-kucuk: 10px;
}

/* ---------------------------------------------------------------------------
   2. SAYFA ZEMİNİ VE TİPOGRAFİ
   -------------------------------------------------------------------------- */
body {
    background: var(--ay-zemin);
    color: var(--ay-metin);
    -webkit-font-smoothing: antialiased;
}

/* HeroBiz bölümlerinin beyaz zemini sayfa zeminini yutuyordu; şeffaflaştırıyoruz
   ki bölümler arasındaki ayrım kartlarla kurulsun. */
.services,
.about,
.features,
.blog,
.contact {
    background: transparent;
}

/* İçerik üst menünün altında kalmasın (menü fixed-top). */
main#main {
    padding-bottom: 60px;
}

/* ---------------------------------------------------------------------------
   3. ÜST MENÜ
   -------------------------------------------------------------------------- */
#header.header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ay-cizgi);
    box-shadow: 0 1px 18px rgba(18, 32, 43, .06);
    transition: box-shadow .25s ease, background .25s ease;
}

#header.header .logo img {
    max-height: 46px;
}

#header.header .logo h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ay-ana-koyu);
    margin: 0 0 0 10px;
}

/* Masaüstünde menü bağlantıları */
@media (min-width: 1200px) {
    .navbar > ul > li > a {
        padding: 9px 14px;
        border-radius: 99px;
        font-weight: 600;
        color: var(--ay-metin-soluk);
        transition: background .2s ease, color .2s ease;
    }

        .navbar > ul > li > a:hover {
            background: rgba(var(--ay-ana-rgb), .09);
            color: var(--ay-ana-koyu);
        }

    /* Bulunduğumuz sayfa: menüde net biçimde işaretli olsun */
    .navbar > ul > li > a.ay-etkin {
        background: rgba(var(--ay-ana-rgb), .12);
        color: var(--ay-ana-koyu);
    }

        .navbar > ul > li > a.ay-etkin::after {
            content: "";
            display: block;
            height: 3px;
            width: 22px;
            margin: 5px auto -6px;
            border-radius: 3px;
            background: var(--ay-ana);
        }
}

/* Yönetici girişi bağlantısı — adayın yanlışlıkla girmemesi için ayrı durur */
.navbar a.ay-yonetici {
    background: #eef3f7 !important;
    color: var(--ay-metin-soluk) !important;
    border: 1px solid var(--ay-cizgi-koyu);
    font-weight: 600;
}

    .navbar a.ay-yonetici:hover {
        background: var(--ay-metin-soluk) !important;
        color: #fff !important;
        border-color: var(--ay-metin-soluk);
    }

/* Giriş yapan adayın adı */
.ay-kullanici {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ay-kullanici__avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-acik));
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   4. SAYFA BAŞLIĞI VE BÖLÜM BAŞLIKLARI
   -------------------------------------------------------------------------- */

/* Aday/Index dışındaki sayfaların üstünde duran başlık şeridi.
   HeroBiz'in .breadcrumbs bloğunu da kapsar. */
.ay-sayfa-basligi,
.breadcrumbs {
    margin-top: 90px;
    padding: 34px 0 26px;
    background: linear-gradient(120deg, #0b3b47 0%, var(--ay-ana-koyu) 55%, var(--ay-ana) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .ay-sayfa-basligi::after,
    .breadcrumbs::after {
        content: "";
        position: absolute;
        right: -60px;
        top: -80px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .07);
    }

        .ay-sayfa-basligi h1,
        .ay-sayfa-basligi h2,
        .breadcrumbs h2 {
            font-size: 1.7rem;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

.ay-sayfa-basligi__aciklama {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    max-width: 720px;
}

/* Bölüm başlığı (Kılavuz, Takvim ...) */
.section-header h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ay-metin);
    padding-bottom: 0;
}

    .section-header h2::after {
        content: "";
        display: block;
        width: 54px;
        height: 4px;
        border-radius: 4px;
        margin: 12px auto 0;
        background: linear-gradient(90deg, var(--ay-ana), var(--ay-ana-acik));
    }

.section-header p {
    color: var(--ay-metin-soluk);
}

/* ---------------------------------------------------------------------------
   5. ORTAK BİLEŞENLER
   -------------------------------------------------------------------------- */

/* -- Kart -- */
.ay-kart {
    background: var(--ay-yuzey);
    border: 1px solid var(--ay-cizgi);
    border-radius: var(--ay-yuvarlak);
    box-shadow: var(--ay-golge);
    overflow: hidden;
}

.ay-kart__baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--ay-cizgi);
    background: linear-gradient(180deg, #fbfdff, #f5f8fb);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ay-metin);
}

    .ay-kart__baslik i {
        color: var(--ay-ana);
    }

.ay-kart__govde {
    padding: 20px;
}

.ay-kart__govde--sifir {
    padding: 0;
}

/* -- Form alanları: tüm dış sayfalarda aynı görünsün -- */
.ay-alan {
    margin-bottom: 18px;
}

.ay-etiket,
.ay-alan > label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ay-metin-soluk);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 7px;
}

.ay-etiket--zorunlu::after {
    content: " *";
    color: var(--ay-hata);
}

/* HeroBiz'in form-control'ü ince; okunur hale getiriyoruz */
.php-email-form .form-control,
.php-email-form .form-select,
.ay-kart .form-control,
.ay-kart .form-select,
.ay-form .form-control,
.ay-form .form-select {
    padding: 11px 14px;
    font-size: .95rem;
    border: 1px solid var(--ay-cizgi-koyu);
    border-radius: var(--ay-yuvarlak-kucuk);
    background-color: #fff;
    color: var(--ay-metin);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .php-email-form .form-control:focus,
    .php-email-form .form-select:focus,
    .ay-kart .form-control:focus,
    .ay-kart .form-select:focus,
    .ay-form .form-control:focus,
    .ay-form .form-select:focus {
        border-color: var(--ay-ana);
        box-shadow: 0 0 0 4px rgba(var(--ay-ana-rgb), .14);
        outline: none;
    }

    .ay-kart .form-control[readonly],
    .ay-form .form-control[readonly],
    .php-email-form .form-control[readonly] {
        background-color: #f6f8fa;
        color: var(--ay-metin-soluk);
        cursor: default;
    }

.ay-alan__ipucu {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    color: var(--ay-metin-cok-soluk);
    line-height: 1.45;
}

/* -- Butonlar -- */
.kaydetButon,
.ay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-koyu));
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(var(--ay-ana-rgb), .8);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

    .kaydetButon:hover,
    .ay-btn:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -8px rgba(var(--ay-ana-rgb), .9);
        filter: saturate(1.08);
    }

    .kaydetButon:disabled,
    .kaydetButon[disabled],
    .ay-btn:disabled {
        background: #dde5ec !important;
        color: #93a4b3 !important;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
        filter: none;
    }

.ay-btn--sade {
    background: #fff;
    color: var(--ay-metin-soluk);
    border-color: var(--ay-cizgi-koyu);
    box-shadow: none;
}

    .ay-btn--sade:hover {
        background: #f6f8fa;
        color: var(--ay-metin);
        box-shadow: none;
    }

.ay-btn--kucuk {
    padding: 8px 18px;
    font-size: .85rem;
}

/* -- Rozet -- */
.ay-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    background: #eef2f6;
    color: var(--ay-metin-soluk);
    border-color: var(--ay-cizgi-koyu);
}

.ay-rozet--basari {
    background: var(--ay-basari-zemin);
    color: #0b7a44;
    border-color: rgba(15, 157, 88, .3);
}

.ay-rozet--uyari {
    background: var(--ay-uyari-zemin);
    color: #a1560a;
    border-color: rgba(217, 119, 6, .32);
}

.ay-rozet--hata {
    background: var(--ay-hata-zemin);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, .28);
}

.ay-rozet--bilgi {
    background: var(--ay-bilgi-zemin);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, .26);
}

/* Canlı durum noktası */
.ay-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: ay-nabiz 2s infinite;
}

@keyframes ay-nabiz {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 157, 88, .5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(15, 157, 88, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15, 157, 88, 0);
    }
}

/* -- Kılavuz indirme bağlantısı -- */
.ay-kilavuz {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--ay-yuzey);
    border: 1px solid var(--ay-cizgi);
    border-radius: var(--ay-yuvarlak);
    box-shadow: var(--ay-golge);
    text-decoration: none;
    color: var(--ay-metin);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}

    .ay-kilavuz:hover {
        transform: translateY(-3px);
        box-shadow: var(--ay-golge-yuksek);
        border-color: rgba(var(--ay-ana-rgb), .45);
        color: var(--ay-metin);
    }

.ay-kilavuz__ikon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--ay-hata-zemin);
    color: var(--ay-hata);
}

.ay-kilavuz__ad {
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.3;
    display: block;
}

.ay-kilavuz__alt {
    font-size: .8rem;
    color: var(--ay-metin-cok-soluk);
    display: block;
    margin-top: 3px;
}

.ay-kilavuz__ok {
    margin-left: auto;
    color: var(--ay-metin-cok-soluk);
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   6. ADIM KARTLARI
   -------------------------------------------------------------------------- */
.ay-adimlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
    counter-reset: ay-adim;
}

.ay-adim {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px 20px;
    background: var(--ay-yuzey);
    border: 1px solid var(--ay-cizgi);
    border-radius: var(--ay-yuvarlak);
    box-shadow: var(--ay-golge);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .ay-adim:hover {
        transform: translateY(-4px);
        box-shadow: var(--ay-golge-yuksek);
        border-color: rgba(var(--ay-ana-rgb), .45);
        color: inherit;
    }

.ay-adim__no {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(var(--ay-ana-rgb), .14), rgba(var(--ay-ana-rgb), .05));
    color: var(--ay-ana-koyu);
    border: 1px solid rgba(var(--ay-ana-rgb), .22);
}

.ay-adim__baslik {
    font-size: 1.06rem;
    font-weight: 750;
    margin: 4px 0 0;
    color: var(--ay-metin);
}

.ay-adim__metin {
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
    margin: 0;
}

.ay-adim__git {
    margin-top: auto;
    padding-top: 12px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ay-ana-koyu);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ay-adim:hover .ay-adim__git i {
    transform: translateX(3px);
}

.ay-adim__git i {
    transition: transform .18s ease;
}

/* Bağlantısı olmayan adım (kendiliğinden gerçekleşen aşama) */
.ay-adim--bilgi {
    background: #fbfdff;
}

    .ay-adim--bilgi .ay-adim__no {
        background: #eef2f6;
        color: var(--ay-metin-soluk);
        border-color: var(--ay-cizgi-koyu);
    }

/* ---------------------------------------------------------------------------
   7. TAKVİM
   -------------------------------------------------------------------------- */
.ay-fakulte-sekmeleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 22px;
    padding: 0;
    list-style: none;
}

    .ay-fakulte-sekmeleri .nav-link {
        padding: 9px 20px;
        border-radius: 99px;
        border: 1px solid var(--ay-cizgi-koyu);
        background: #fff;
        color: var(--ay-metin-soluk);
        font-weight: 650;
        font-size: .92rem;
    }

    .ay-fakulte-sekmeleri .nav-link.active {
        background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-koyu));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px -10px rgba(var(--ay-ana-rgb), .9);
    }

/* Takvim üst şeridi: fakülte adı + o anki durum */
.ay-takvim-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ay-cizgi);
    background: linear-gradient(180deg, #fbfdff, #f5f8fb);
}

.ay-takvim-ust__ad {
    font-size: 1.12rem;
    font-weight: 750;
    margin: 0;
    color: var(--ay-metin);
}

.ay-takvim-ust__alt {
    font-size: .82rem;
    color: var(--ay-metin-cok-soluk);
    margin: 3px 0 0;
}

/* Aşama listesi */
.ay-asamalar {
    display: grid;
    gap: 0;
}

.ay-asama {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    border-top: 1px solid var(--ay-cizgi);
    position: relative;
}

    .ay-asama:first-child {
        border-top: none;
    }

/* Aşamaları birbirine bağlayan dikey çizgi */
.ay-asama:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 47px;
    top: 62px;
    bottom: -4px;
    width: 2px;
    background: var(--ay-cizgi);
}

.ay-asama__ikon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #eef2f6;
    color: var(--ay-metin-soluk);
    border: 1px solid var(--ay-cizgi-koyu);
    position: relative;
    z-index: 1;
}

.ay-asama--basvuru .ay-asama__ikon {
    background: rgba(37, 99, 235, .1);
    color: var(--ay-basvuru);
    border-color: rgba(37, 99, 235, .26);
}

.ay-asama--belge .ay-asama__ikon {
    background: rgba(124, 58, 237, .1);
    color: var(--ay-belge);
    border-color: rgba(124, 58, 237, .26);
}

.ay-asama--sonuc .ay-asama__ikon {
    background: rgba(15, 157, 88, .1);
    color: var(--ay-sonuc);
    border-color: rgba(15, 157, 88, .26);
}

/* Biten aşama soluklaşır, açık olan öne çıkar */
.ay-asama--bitti {
    background: #fafcfd;
}

    .ay-asama--bitti .ay-asama__ikon {
        background: #eef2f6 !important;
        color: var(--ay-metin-cok-soluk) !important;
        border-color: var(--ay-cizgi-koyu) !important;
    }

    .ay-asama--bitti .ay-asama__ad {
        color: var(--ay-metin-soluk);
    }

.ay-asama--devam {
    background: linear-gradient(90deg, rgba(15, 157, 88, .07), transparent 60%);
    box-shadow: inset 3px 0 0 var(--ay-basari);
}

.ay-asama__ad {
    font-size: 1rem;
    font-weight: 750;
    margin: 0 0 4px;
    color: var(--ay-metin);
}

.ay-asama__tarih {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: .88rem;
    color: var(--ay-metin);
    font-weight: 600;
    margin: 0 0 6px;
}

.ay-asama__tarih .ay-ok {
    color: var(--ay-metin-cok-soluk);
}

.ay-asama__saat {
    font-weight: 500;
    color: var(--ay-metin-soluk);
}

.ay-asama__metin {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
    margin: 0;
}

.ay-asama__sag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}

/* ---------------------------------------------------------------------------
   8. BOŞ DURUM, UYARI ŞERİDİ, DURUM PANOSU
   -------------------------------------------------------------------------- */
.ay-bos {
    padding: 44px 22px;
    text-align: center;
    color: var(--ay-metin-soluk);
}

    .ay-bos i {
        font-size: 2.4rem;
        color: var(--ay-cizgi-koyu);
        display: block;
        margin-bottom: 12px;
    }

    .ay-bos strong {
        display: block;
        font-size: 1.05rem;
        color: var(--ay-metin);
        margin-bottom: 6px;
    }

    .ay-bos p {
        margin: 0 auto;
        max-width: 460px;
        font-size: .9rem;
        line-height: 1.6;
    }

/* Bilgi / uyarı şeridi */
.ay-serit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #fff;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
}

    .ay-serit i {
        font-size: 1.05rem;
        line-height: 1.4;
        flex: 0 0 auto;
    }

    .ay-serit strong {
        color: var(--ay-metin);
    }

.ay-serit--bilgi {
    background: var(--ay-bilgi-zemin);
    border-color: rgba(37, 99, 235, .24);
}

    .ay-serit--bilgi i {
        color: var(--ay-bilgi);
    }

.ay-serit--uyari {
    background: var(--ay-uyari-zemin);
    border-color: rgba(217, 119, 6, .3);
}

    .ay-serit--uyari i {
        color: var(--ay-uyari);
    }

.ay-serit--basari {
    background: var(--ay-basari-zemin);
    border-color: rgba(15, 157, 88, .28);
}

    .ay-serit--basari i {
        color: var(--ay-basari);
    }

/* "Şu an ne yapmalıyım?" panosu */
.ay-durum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: var(--ay-yuvarlak);
    background: var(--ay-yuzey);
    border: 1px solid var(--ay-cizgi);
    box-shadow: var(--ay-golge);
}

.ay-durum__ikon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(var(--ay-ana-rgb), .1);
    color: var(--ay-ana-koyu);
    border: 1px solid rgba(var(--ay-ana-rgb), .22);
}

.ay-durum__govde {
    flex: 1 1 260px;
    min-width: 0;
}

.ay-durum__baslik {
    font-size: 1.06rem;
    font-weight: 750;
    margin: 0 0 4px;
    color: var(--ay-metin);
}

.ay-durum__metin {
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
    margin: 0;
}

.ay-durum--acik .ay-durum__ikon {
    background: var(--ay-basari-zemin);
    color: #0b7a44;
    border-color: rgba(15, 157, 88, .3);
}

.ay-durum--kapali .ay-durum__ikon {
    background: #eef2f6;
    color: var(--ay-metin-soluk);
    border-color: var(--ay-cizgi-koyu);
}

.ay-durum--yaklasan .ay-durum__ikon {
    background: var(--ay-uyari-zemin);
    color: #a1560a;
    border-color: rgba(217, 119, 6, .32);
}

/* ---------------------------------------------------------------------------
   9. KİMLİK EKRANLARI (Aday/Giris, Aday/Kaydol)
   -------------------------------------------------------------------------- */

/* Solda form, sağda açıklama. Mobilde açıklama formun altına iner. */
.ay-kimlik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 24px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .ay-kimlik {
        grid-template-columns: 1fr;
    }
}

.ay-kimlik__form {
    padding: 26px 28px 28px;
}

/* Başındaki ikonla birlikte metin alanı */
.ay-girdi {
    position: relative;
}

    .ay-girdi > i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        color: var(--ay-metin-cok-soluk);
        pointer-events: none;
    }

    .ay-girdi .form-control {
        padding-left: 42px;
    }

    /* Sayısal alanlar hizalı okunsun */
    .ay-girdi .form-control.ay-sayisal {
        font-variant-numeric: tabular-nums;
        letter-spacing: .06em;
    }

/* Alan altındaki doğrulama uyarısı */
.ay-alan__hata {
    display: none;
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ay-hata);
}

.ay-alan--hatali .ay-alan__hata {
    display: block;
}

.ay-alan--hatali .form-control {
    border-color: var(--ay-hata);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .1);
}

/* Onay kutusu satırı (aydınlatma metni / açık rıza) */
.ay-onaylar {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--ay-cizgi);
    border-radius: var(--ay-yuvarlak-kucuk);
    background: #fafcfe;
}

.ay-onay {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ay-metin);
    cursor: pointer;
    margin: 0;
}

    .ay-onay input[type="checkbox"] {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: var(--ay-ana);
        cursor: pointer;
    }

    .ay-onay a {
        font-weight: 700;
        color: var(--ay-ana-koyu);
        text-decoration: underline;
    }

.ay-onaylar__not {
    font-size: .8rem;
    color: var(--ay-metin-cok-soluk);
    margin: 2px 0 0;
    line-height: 1.5;
}

/* Formun altındaki yönlendirme satırı */
.ay-alt-baglanti {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ay-cizgi);
    font-size: .9rem;
    color: var(--ay-metin-soluk);
    text-align: center;
}

    .ay-alt-baglanti a {
        font-weight: 700;
        color: var(--ay-ana-koyu);
    }

/* Sağdaki açıklama listesi */
.ay-yardim {
    display: grid;
    gap: 2px;
}

.ay-yardim__satir {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--ay-cizgi);
}

    .ay-yardim__satir:first-child {
        border-top: none;
        padding-top: 0;
    }

    .ay-yardim__satir:last-child {
        padding-bottom: 0;
    }

.ay-yardim__ikon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    background: rgba(var(--ay-ana-rgb), .1);
    color: var(--ay-ana-koyu);
    border: 1px solid rgba(var(--ay-ana-rgb), .2);
}

.ay-yardim__ad {
    font-size: .93rem;
    font-weight: 700;
    margin: 0 0 3px;
    color: var(--ay-metin);
}

.ay-yardim__metin {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   9b. PROFİL EKRANI
   -------------------------------------------------------------------------- */

/* Sol geniş kolon + sağ yan kolon */
.ay-profil {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .ay-profil {
        grid-template-columns: 1fr;
    }
}

.ay-profil__kolon {
    display: grid;
    gap: 22px;
    min-width: 0;
}

/* -- Tamamlanma paneli -- */
.ay-tamamlanma {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
}

@media (max-width: 575.98px) {
    .ay-tamamlanma {
        grid-template-columns: 1fr;
    }
}

/* Dairesel yüzde göstergesi: conic-gradient ile, ek betik gerektirmez */
.ay-halka {
    --ay-yuzde: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ay-basari) calc(var(--ay-yuzde) * 1%), #e8eef4 0);
    position: relative;
    flex: 0 0 92px;
}

    .ay-halka::before {
        content: "";
        position: absolute;
        inset: 9px;
        border-radius: 50%;
        background: #fff;
    }

.ay-halka__deger {
    position: relative;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ay-metin);
    font-variant-numeric: tabular-nums;
}

.ay-halka--eksik {
    background: conic-gradient(var(--ay-uyari) calc(var(--ay-yuzde) * 1%), #e8eef4 0);
}

/* Eksik alan listesi */
.ay-eksikler {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ay-eksik {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 650;
    background: var(--ay-uyari-zemin);
    border: 1px solid rgba(217, 119, 6, .3);
    color: #9a5407;
    text-decoration: none;
}

    .ay-eksik:hover {
        color: #7c4406;
        background: rgba(217, 119, 6, .2);
    }

.ay-eksik--kilitli {
    background: #eef2f6;
    border-color: var(--ay-cizgi-koyu);
    color: var(--ay-metin-soluk);
}

/* -- Bölüm başlığı: her bölüm ayrı kaydedildiği için numaralı -- */
.ay-bolum-no {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    background: rgba(var(--ay-ana-rgb), .12);
    color: var(--ay-ana-koyu);
    border: 1px solid rgba(var(--ay-ana-rgb), .24);
}

/* Her formun kendi kaydet şeridi */
.ay-kaydet-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ay-cizgi-koyu);
}

/* Kaydet düğmesi "hazır değil" görünümü.
   disabled DEĞİL: kapalı düğme tıklamayı yutuyor ve aday hiçbir karşılık
   almadığı için "kaydet çalışmıyor" diye anlıyordu. Soluk görünüyor ama
   tıklanabiliyor; tıklandığında eksiğin ne olduğu söyleniyor. */
.ay-kaydet--bekliyor {
    background: #dde5ec;
    color: #7c8ea0;
    box-shadow: none;
    filter: none;
}

    .ay-kaydet--bekliyor:hover {
        background: #d3dde6;
        color: #5b6b7a;
        transform: none;
        box-shadow: none;
    }

/* Eksik olan kılavuz onayıysa oraya kaydırıp kısa süre vurguluyoruz */
.ay-kilavuz-onay--dikkat {
    animation: ayDikkat 1.1s ease 2;
    border-radius: var(--ay-yuvarlak-kucuk);
}

@keyframes ayDikkat {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--ay-ana-rgb), 0);
    }

    45% {
        box-shadow: 0 0 0 5px rgba(var(--ay-ana-rgb), .28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ay-kilavuz-onay--dikkat {
        animation: none;
        box-shadow: 0 0 0 3px rgba(var(--ay-ana-rgb), .3);
    }
}

.ay-kaydet-serit__not {
    font-size: .8rem;
    color: var(--ay-metin-cok-soluk);
    margin: 0;
    flex: 1 1 200px;
    line-height: 1.5;
}

/* -- Salt okunur bilgi kutusu (ÖSYM'den gelen alanlar) -- */
.ay-okunur-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.ay-okunur {
    padding: 12px 14px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #f7f9fb;
}

.ay-okunur__etiket {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-cok-soluk);
    margin-bottom: 4px;
}

.ay-okunur__deger {
    display: block;
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--ay-metin);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.ay-okunur__deger--bos {
    color: var(--ay-uyari);
    font-weight: 650;
    font-size: .92rem;
}

/* -- Fotoğraf bölümü -- */
.ay-foto {
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
}

.ay-foto__cerceve {
    width: 150px;
    height: 190px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi-koyu);
    background: #f7f9fb;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .ay-foto__cerceve img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ay-foto__bos {
    color: var(--ay-metin-cok-soluk);
    font-size: .84rem;
    padding: 12px;
    line-height: 1.5;
}

    .ay-foto__bos i {
        display: block;
        font-size: 1.9rem;
        margin-bottom: 8px;
        color: var(--ay-cizgi-koyu);
    }

.ay-foto__ornek {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ay-yuvarlak-kucuk);
    background: var(--ay-uyari-zemin);
    border: 1px solid rgba(217, 119, 6, .3);
    text-align: left;
    font-size: .82rem;
    line-height: 1.5;
    color: #8a4b06;
}

    .ay-foto__ornek img {
        width: 58px;
        flex: 0 0 58px;
        border-radius: 6px;
        border: 1px solid rgba(217, 119, 6, .4);
        background: #fff;
    }

/* -- Koşullu belge bloğu (engel / ek puan) -- */
.ay-kosullu {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #fafcfe;
}

.ay-kosullu--kapali {
    opacity: .55;
    pointer-events: none;
}

.ay-kosullu__baslik {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ay-metin-soluk);
    margin: 0 0 10px;
}

/* Anahtar görünümlü onay kutusu */
.ay-anahtar {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .93rem;
    font-weight: 650;
    color: var(--ay-metin);
    cursor: pointer;
    margin: 0;
}

    .ay-anahtar input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        accent-color: var(--ay-ana);
        cursor: pointer;
    }

/* Yüklenmiş belge bağlantısı */
.ay-belge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid rgba(15, 157, 88, .3);
    background: var(--ay-basari-zemin);
    font-size: .85rem;
    font-weight: 650;
    color: #0b7a44;
    text-decoration: none;
}

    .ay-belge:hover {
        color: #085c33;
        background: rgba(15, 157, 88, .16);
    }

    .ay-belge i:first-child {
        font-size: 1.1rem;
    }

    .ay-belge span {
        margin-right: auto;
    }

/* ---------------------------------------------------------------------------
   9c. BAŞVURULARIM (SinavGirisBelgesi/Index)
   -------------------------------------------------------------------------- */
.ay-basvurular {
    display: grid;
    gap: 20px;
}

/* Başvuru kartının üst şeridi: fakülte hiyerarşisi + durum */
.ay-basvuru__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--ay-cizgi);
    background: linear-gradient(180deg, #fbfdff, #f5f8fb);
}

/* Fakülte › Birim */
.ay-hiyerarsi__ust {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-cok-soluk);
    margin-bottom: 2px;
}

.ay-hiyerarsi__alt {
    display: block;
    font-size: 1.08rem;
    font-weight: 750;
    color: var(--ay-metin);
    line-height: 1.3;
}

/* Kart gövdesindeki bilgi ızgarası */
.ay-bilgi-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ay-cizgi);
}

.ay-bilgi {
    min-width: 0;
}

.ay-bilgi__etiket {
    display: block;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-cok-soluk);
    margin-bottom: 3px;
}

.ay-bilgi__deger {
    display: block;
    font-size: .97rem;
    font-weight: 700;
    color: var(--ay-metin);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Kart içi alt bölüm */
.ay-alt-bolum {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ay-cizgi);
}

    .ay-alt-bolum:last-child {
        border-bottom: none;
    }

.ay-alt-bolum__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-soluk);
    margin: 0 0 12px;
}

    .ay-alt-bolum__baslik i {
        color: var(--ay-ana);
        font-size: .95rem;
    }

/* Tercih listesi */
.ay-tercihler {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ay-tercih;
}

.ay-tercih {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #fafcfe;
    font-size: .91rem;
}

.ay-tercih__no {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    background: rgba(var(--ay-ana-rgb), .12);
    color: var(--ay-ana-koyu);
    border: 1px solid rgba(var(--ay-ana-rgb), .22);
}

/* İlk tercih öne çıkar */
.ay-tercih--ilk {
    border-color: rgba(var(--ay-ana-rgb), .4);
    background: rgba(var(--ay-ana-rgb), .06);
    font-weight: 650;
}

.ay-tercih__ad {
    min-width: 0;
    word-break: break-word;
}

/* Belge indirme bölümü */
.ay-belge-alani {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ay-belge-alani__metin {
    flex: 1 1 240px;
    min-width: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ay-metin-soluk);
    margin: 0;
}

    .ay-belge-alani__metin strong {
        color: var(--ay-metin);
    }

/* Sonuç bloğu */
.ay-sonuc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #fafcfe;
}

.ay-sonuc--yerlesti {
    background: var(--ay-basari-zemin);
    border-color: rgba(15, 157, 88, .3);
}

.ay-sonuc--yerlesemedi {
    background: #eef2f6;
    border-color: var(--ay-cizgi-koyu);
}

.ay-sonuc--girmedi {
    background: var(--ay-uyari-zemin);
    border-color: rgba(217, 119, 6, .3);
}

.ay-sonuc__ikon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: #fff;
    border: 1px solid var(--ay-cizgi-koyu);
    color: var(--ay-metin-soluk);
}

.ay-sonuc--yerlesti .ay-sonuc__ikon {
    color: #0b7a44;
    border-color: rgba(15, 157, 88, .35);
}

.ay-sonuc--girmedi .ay-sonuc__ikon {
    color: #a1560a;
    border-color: rgba(217, 119, 6, .35);
}

.ay-sonuc__govde {
    flex: 1 1 220px;
    min-width: 0;
}

.ay-sonuc__baslik {
    font-size: 1rem;
    font-weight: 750;
    margin: 0 0 3px;
    color: var(--ay-metin);
}

.ay-sonuc__metin {
    font-size: .87rem;
    line-height: 1.5;
    color: var(--ay-metin-soluk);
    margin: 0;
}

/* Puan çiftleri */
.ay-puanlar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ay-puan__etiket {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-cok-soluk);
}

.ay-puan__deger {
    display: block;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--ay-metin);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Ret gerekçesi */
.ay-ret {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid rgba(220, 38, 38, .28);
    background: var(--ay-hata-zemin);
    font-size: .89rem;
    line-height: 1.55;
    color: #8f1a1a;
}

    .ay-ret i {
        font-size: 1.05rem;
        color: var(--ay-hata);
        flex: 0 0 auto;
    }

    .ay-ret strong {
        display: block;
        margin-bottom: 3px;
    }

/* ---------------------------------------------------------------------------
   9d. BAŞVURU EKRANI (Basvuru/Index)
   -------------------------------------------------------------------------- */

/* -- Koşul kartları (taban puan / tarih aralığı) -- */
.ay-kosullar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ay-cizgi);
}

.ay-kosul {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi);
    background: #fafcfe;
}

.ay-kosul--olumlu {
    background: var(--ay-basari-zemin);
    border-color: rgba(15, 157, 88, .3);
}

.ay-kosul--olumsuz {
    background: var(--ay-hata-zemin);
    border-color: rgba(220, 38, 38, .28);
}

.ay-kosul--bekleyen {
    background: var(--ay-uyari-zemin);
    border-color: rgba(217, 119, 6, .3);
}

.ay-kosul__ikon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: #fff;
    border: 1px solid var(--ay-cizgi-koyu);
    color: var(--ay-metin-soluk);
}

.ay-kosul--olumlu .ay-kosul__ikon {
    color: #0b7a44;
    border-color: rgba(15, 157, 88, .35);
}

.ay-kosul--olumsuz .ay-kosul__ikon {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, .32);
}

.ay-kosul--bekleyen .ay-kosul__ikon {
    color: #a1560a;
    border-color: rgba(217, 119, 6, .35);
}

.ay-kosul__govde {
    min-width: 0;
}

.ay-kosul__ad {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-cok-soluk);
    margin: 0 0 3px;
}

.ay-kosul__deger {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ay-metin);
    margin: 0;
    line-height: 1.35;
}

.ay-kosul__not {
    font-size: .82rem;
    color: var(--ay-metin-soluk);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* -- Birim sekmeleri -- */
.ay-birim-sekmeleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

    .ay-birim-sekmeleri .nav-link {
        padding: 8px 18px;
        border-radius: 99px;
        border: 1px solid var(--ay-cizgi-koyu);
        background: #fff;
        color: var(--ay-metin-soluk);
        font-weight: 650;
        font-size: .9rem;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .ay-birim-sekmeleri .nav-link.active {
        background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-koyu));
        border-color: transparent;
        color: #fff;
    }

/* -- TERCİH LİSTESİ -- */
.ay-tercih-listesi {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ay-secim {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid var(--ay-cizgi-koyu);
    background: #fff;
    cursor: pointer;
    /* Sıra değişimi FLIP tekniğiyle animasyonlanır; geçiş JS tarafından kurulur. */
    will-change: transform;
}

    .ay-secim:hover {
        border-color: rgba(var(--ay-ana-rgb), .45);
        background: #fbfeff;
    }

/* Seçili bölüm */
.ay-secim--secili {
    border-color: rgba(var(--ay-ana-rgb), .55);
    background: rgba(var(--ay-ana-rgb), .05);
    box-shadow: inset 3px 0 0 var(--ay-ana);
}

/* Sıra göstergesi: seçilmemişse boş daire, seçilmişse numara */
.ay-sira {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 62px;
    height: 34px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 800;
    background: #eef2f6;
    border: 1px solid var(--ay-cizgi-koyu);
    color: var(--ay-metin-cok-soluk);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ay-secim--secili .ay-sira {
    background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-koyu));
    border-color: transparent;
    color: #fff;
}

/* Numara değiştiğinde kısa bir vurgu */
.ay-sira--degisti {
    animation: ay-sira-vurgu .5s ease;
}

@keyframes ay-sira-vurgu {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.22);
    }

    100% {
        transform: scale(1);
    }
}

/* Taşınan satırın kısa vurgusu */
.ay-secim--tasindi {
    animation: ay-satir-vurgu .7s ease;
}

@keyframes ay-satir-vurgu {
    0% {
        box-shadow: inset 3px 0 0 var(--ay-ana), 0 0 0 0 rgba(var(--ay-ana-rgb), .45);
    }

    40% {
        box-shadow: inset 3px 0 0 var(--ay-ana), 0 0 0 8px rgba(var(--ay-ana-rgb), 0);
    }

    100% {
        box-shadow: inset 3px 0 0 var(--ay-ana), 0 0 0 0 rgba(var(--ay-ana-rgb), 0);
    }
}

.ay-secim__govde {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ay-secim__kutu {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    accent-color: var(--ay-ana);
    cursor: pointer;
}

.ay-secim__ad {
    font-size: .97rem;
    font-weight: 650;
    color: var(--ay-metin);
    line-height: 1.35;
    word-break: break-word;
}

.ay-secim__kontenjan {
    display: block;
    font-size: .79rem;
    font-weight: 600;
    color: var(--ay-metin-cok-soluk);
    margin-top: 2px;
}

/* Taşıma düğmeleri */
.ay-tasi {
    display: flex;
    gap: 5px;
}

    .ay-tasi button {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        border: 1px solid var(--ay-cizgi-koyu);
        background: #fff;
        color: var(--ay-metin-soluk);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }

        .ay-tasi button:hover:not(:disabled) {
            background: rgba(var(--ay-ana-rgb), .1);
            border-color: rgba(var(--ay-ana-rgb), .4);
            color: var(--ay-ana-koyu);
        }

        .ay-tasi button:disabled {
            opacity: .35;
            cursor: not-allowed;
        }

/* Seçim özeti */
.ay-ozet {
    margin-top: 16px;
    padding: 15px 18px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px dashed var(--ay-cizgi-koyu);
    background: #fafcfe;
}

.ay-ozet__baslik {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ay-metin-soluk);
    margin: 0 0 9px;
}

.ay-ozet__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ay-ozet__oge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid var(--ay-cizgi-koyu);
    font-size: .85rem;
    font-weight: 650;
    color: var(--ay-metin);
}

.ay-ozet__no {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ay-ana), var(--ay-ana-koyu));
    color: #fff;
}

.ay-ozet__bos {
    font-size: .86rem;
    color: var(--ay-metin-cok-soluk);
    margin: 0;
}

/* Kılavuz onayı */
.ay-kilavuz-onay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-radius: var(--ay-yuvarlak-kucuk);
    border: 1px solid rgba(var(--ay-ana-rgb), .3);
    background: rgba(var(--ay-ana-rgb), .05);
}

    .ay-kilavuz-onay label {
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: .93rem;
        font-weight: 650;
        color: var(--ay-metin);
        cursor: pointer;
        margin: 0;
        flex: 1 1 260px;
    }

    .ay-kilavuz-onay input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        accent-color: var(--ay-ana);
        cursor: pointer;
    }

/* ---------------------------------------------------------------------------
   10. ERİŞİLEBİLİRLİK, HAREKET AZALTMA, YAZDIRMA
   -------------------------------------------------------------------------- */

/* Klavyeyle gezenler için içeriğe atlama bağlantısı */
.ay-atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--ay-ana-koyu);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 10px 0;
}

    .ay-atla:focus {
        left: 0;
        color: #fff;
    }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(var(--ay-ana-rgb), .45);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .ay-asama {
        grid-template-columns: 40px 1fr;
        padding: 16px;
        gap: 12px;
    }

        .ay-asama:not(:last-child)::before {
            left: 35px;
            top: 52px;
        }

    .ay-asama__ikon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .ay-asama__sag {
        grid-column: 2;
        align-items: flex-start;
        text-align: left;
    }

    .ay-sayfa-basligi h1,
    .ay-sayfa-basligi h2,
    .breadcrumbs h2 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

        .ay-adim:hover,
        .ay-kilavuz:hover,
        .ay-btn:hover,
        .kaydetButon:hover {
            transform: none;
        }
}

@media print {
    #header,
    #footer,
    .scroll-top,
    #preloader,
    .ay-atla {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .ay-kart,
    .ay-adim,
    .ay-durum {
        box-shadow: none;
        border-color: #bbb;
    }
}