/* =====================================================
   Okul Ara — keşif odaklı arama, kart ızgarası, sekmeli kampüs detayı
   Namespace: .oa-
   Palet: style.css token'ları (lacivert + sarı vurgu + bordo CTA).
   Burada hex tanımlanmaz; yalnızca token ve şeffaflık katmanları.

   NOT: style.css'te global `section { display: flex }` var; bu dosyadaki
   tüm <section>'lar bilerek `display: block` ile normal akışa alınır.
   ===================================================== */

/* ---------- Ortak ---------- */

.oa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 14px;
}

.oa-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.oa-title {
    position: relative;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--text-light);
    margin: 0;
}

.oa-title span {
    position: relative;
    white-space: nowrap;
    color: var(--secondary-color);
}

.oa-title span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 222, 89, 0.26);
}

.oa-lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-light-low);
    margin: 0;
    max-width: 520px;
}

.oa-error {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-light);
    background: rgba(191, 23, 26, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 16px 0 0;
}

.oa-boot {
    max-width: 1340px;
    margin: 160px auto 80px;
    padding: 0 20px;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark-low);
}

/* Butonlar */
.oa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 12px;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease,
        border-color 0.22s ease, box-shadow 0.22s ease;
}

.oa-btn i { transition: transform 0.22s ease; }
.oa-btn:hover { transform: translateY(-2px); }
.oa-btn:hover i.fa-arrow-right { transform: translateX(4px); }

.oa-btn--primary {
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    box-shadow: 0 6px 20px rgba(255, 222, 89, 0.26);
}

.oa-btn--primary:hover { background: #ffe887; }

.oa-btn--accent {
    background: var(--accent-color);
    color: var(--text-light);
    box-shadow: 0 6px 20px rgba(191, 23, 26, 0.24);
}

.oa-btn--accent:hover { background: var(--accent-color-dark); }

.oa-btn--outline {
    background: transparent;
    border: 1px solid rgba(5, 42, 97, 0.22);
    color: var(--primary-color);
}

.oa-btn--outline:hover { border-color: var(--primary-color); background: var(--primary-color-low); }

.oa-btn--ghost {
    background: var(--card-bg-low);
    color: var(--text-dark);
}

.oa-btn--ghost:hover { background: var(--bg-color-dark); }

/* Select / input ortak görünümü */
.oa-select {
    position: relative;
    display: block;
}

.oa-select select,
.oa-input {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-dark);
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.14);
    border-radius: 10px;
    padding: 10px 32px 10px 12px;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.oa-input { padding-right: 12px; }

.oa-select select:focus,
.oa-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-low);
}

.oa-select i {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    color: var(--primary-color);
    pointer-events: none;
}

/* =====================================================
   1) Arama bloğu — ana sayfa (.oa-finder) ve sonuç sayfası (.oa-search)
   ===================================================== */

.oa-finder,
.oa-search {
    display: block;
    width: 100%;
    background: var(--bg-color);
}

/* Bolum ana sayfada dogrudan hero'nun (.landing-sec, 100vh, alt dolgusu yok)
 * altinda duruyor; ustteki 36px cok sikisikti. 96px, hero'yu eskiden takip
 * eden .plan-sec'in ust dolgusuyla (~114px) ayni ritmi tutturuyor. Altta ise
 * bir sonraki bolum kendi dolgusunu getirdigi icin 36px yeterli. */
.oa-finder { padding: 96px 20px 36px; }
/* Navbar sabit (top:15px + ~75px yukseklik) ve saydam; lacivert blok onun
 * altindan baslamali. 132px, capa kaydirmasinda kullanilan bosluga (130px)
 * denk gelsin diye secildi. */
.oa-search { padding: 132px 20px 0; }

.oa-finder-inner,
.oa-search-inner {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    padding: 46px 46px 42px;
    border-radius: 28px;
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(255, 222, 89, 0.14) 0%, rgba(255, 222, 89, 0) 46%),
        linear-gradient(160deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}

/* Ana sayfada dekoratif halka blok disina tasip kirpilir. */
.oa-finder-inner { overflow: hidden; }

/* Sonuc sayfasinda kirpma YOK: filtre menusu blogun disina tasabilmeli.
 * Bu yuzden oradaki halka tamamen blogun icinde konumlanir. */
.oa-finder-inner::after,
.oa-search-inner::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -70px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 44px solid rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.oa-search-inner::after {
    top: 18px;
    right: 18px;
    width: 250px;
    height: 250px;
    border-width: 36px;
}

.oa-finder-head,
.oa-search-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: 30px;
    margin-bottom: 26px;
}

/* ---------- Arama çubuğu ---------- */

/* Arama cubugu kendi zemini/cercevesi olan bir kutu DEGIL: alan ve dugmeler
 * dogrudan blogun uzerinde durur. Onceki gri tepsi + ic alanin kendi
 * hairline'i beyaz kart uzerinde cift cerceve gibi kaliniyordu; sitenin baska
 * hicbir formunda boyle bir sarmalayici yok. */
.oa-searchbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.oa-searchbar-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 0 14px;
}

.oa-searchbar-field > i { color: var(--primary-color); flex-shrink: 0; }

.oa-searchbar-field input {
    width: 100%;
    min-width: 0;
    padding: 15px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: transparent;
}

.oa-searchbar-field input::placeholder { color: rgba(26, 35, 51, 0.42); }
.oa-searchbar-field input::-webkit-search-cancel-button { display: none; }

.oa-searchbar-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-dark-low);
    background: var(--card-bg-low);
}

.oa-searchbar-clear:hover { background: var(--bg-color-dark); }

.oa-searchbar-filters {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.oa-searchbar-filters:hover { background: rgba(255, 255, 255, 0.2); }

.oa-searchbar-filters.is-open {
    background: var(--card-bg);
    color: var(--primary-color);
    border-color: transparent;
}

.oa-searchbar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    font-size: 11px;
    font-weight: 700;
}

.oa-searchbar-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 32px;
    border-radius: 12px;
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease;
}

.oa-searchbar-submit:hover { background: #ffe887; }
.oa-searchbar-submit:disabled { opacity: 0.75; cursor: progress; }

/* ---------- Hızlı kısayollar ---------- */

.oa-quick {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.oa-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.oa-quick-chip i { color: var(--secondary-color); }

.oa-quick-chip:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

/* Ana sayfada cipler artik link degil, sorguyu acip kapayan dugmeler —
 * secili hali ulke kartlarindaki .is-selected ile ayni sari yuzey. */
.oa-quick-chip {
    cursor: pointer;
    font: inherit;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}

.oa-quick-chip.is-active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color-dark);
}

.oa-quick-chip.is-active i { color: var(--primary-color-dark); }

.oa-quick-chip.is-active:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* ---------- Ülke kartları ---------- */

.oa-country-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.oa-country-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 16px;
    text-align: left;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.oa-country-card:hover {
    background: var(--card-bg);
    transform: translateY(-3px);
}

.oa-country-flag {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1.4;
    color: var(--secondary-color);
}

.oa-country-name {
    font-family: 'Sora', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-light);
}

.oa-country-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    color: var(--text-light-low);
}

.oa-country-card:hover .oa-country-name { color: var(--primary-color-dark); }
.oa-country-card:hover .oa-country-meta { color: var(--text-dark-low); }
.oa-country-card:hover .oa-country-flag { color: var(--primary-color); }

.oa-country-card.is-selected {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.oa-country-card.is-selected .oa-country-name,
.oa-country-card.is-selected .oa-country-flag,
.oa-country-card.is-selected .oa-country-meta { color: var(--primary-color-dark); }

.oa-country-card.is-selected .oa-country-meta i { margin-left: auto; }

.oa-country-skeleton {
    height: 84px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.06) 100%);
    background-size: 200% 100%;
    animation: oa-shimmer 1.4s ease-in-out infinite;
}

@keyframes oa-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- Ana sayfa alt şeridi ---------- */

.oa-finder-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.oa-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.oa-trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    color: var(--text-light-low);
}

.oa-trust i { color: var(--secondary-color); }

/* ---------- Detaylı filtreler ---------- */

/* Arama cubugu + menu ayni sarmalayicida; menu cubugun altina yaslanir. */
.oa-searchdrop {
    position: relative;
    z-index: 30;
}

/* ---------- Detaylı filtreler — modal ----------
 * Önce arama çubuğunun altına açılan bir menüydü; max-height yüzünden geniş
 * ekranda bile kaydırma gerektiriyor, kategoriler birbirine giriyordu.
 * Artık portal ile body'ye basılan, kategorileri ayrı kartlara bölen kolonlu
 * bir modal. Palet: lacivert yüzey · sarı vurgu · bordo aksiyon. */

.oa-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    /* Kaydirma modalin KENDISINDE degil govdesinde: boylece baslik ve alt bar
     * her zaman yerinde durur, icerik onlarin ustune binemez. */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
    background: rgba(3, 20, 45, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: oa-fade 0.16s ease-out;
}

.oa-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1140px;
    max-height: min(92vh, 920px);
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: 0 40px 90px rgba(3, 20, 45, 0.45);
    overflow: hidden;
    /* Govdedeki kartlar baslik/alt barin uzerine cikamasin. */
    isolation: isolate;
    outline: none;
    animation: oa-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes oa-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes oa-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Başlık --- */

.oa-modal-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: var(--primary-color);
    border-bottom: 3px solid var(--secondary-color);
    flex-shrink: 0;
}

.oa-modal-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.oa-modal-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--secondary-color);
    color: var(--primary-color);
    flex-shrink: 0;
}

.oa-modal-title h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
    margin: 0;
}

.oa-modal-title p {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    color: var(--text-light-low);
    margin: 2px 0 0;
}

.oa-modal-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.oa-modal-badge {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--secondary-color);
    color: var(--primary-color);
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.oa-modal-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-light);
    transition: background 0.2s ease, transform 0.2s ease;
}

.oa-modal-close:hover {
    background: var(--accent-color);
    transform: rotate(90deg);
}

/* --- Gövde: kolonlu kart ızgarası --- */

.oa-modal-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* `start` her karti kendi icerigi kadar kisa birakiyordu; yan yana duran
     * kartlarin altlari (orn. "Ders sekli" ile "Kurs odagi") farkli
     * hizalarda bitiyordu. `stretch` ile ayni satirdaki kartlar en uzunun
     * boyunu alir. */
    align-items: stretch;
    gap: 13px;
    padding: 18px;
    background: var(--bg-color);
}

.oa-modal-body::-webkit-scrollbar { width: 10px; }

.oa-modal-body::-webkit-scrollbar-thumb {
    background: rgba(5, 42, 97, 0.22);
    border-radius: 999px;
    border: 3px solid var(--bg-color);
}

.oa-fcard {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    padding: 15px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.1);
}

.oa-fcard--wide { grid-column: 1 / -1; }

.oa-fcard-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--secondary-color-low);
}

.oa-fcard-title i { color: var(--secondary-color-dark); }

.oa-fcard-title small {
    flex-basis: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dark-low);
}

.oa-fcard-rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.oa-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.oa-field-label {
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dark-low);
}

.oa-filter-note {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    color: var(--text-dark-low);
    margin: 0;
}

/* --- Çipler --- */

.oa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oa-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(5, 42, 97, 0.16);
    background: var(--card-bg);
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Hover'da kenarlik RENGI degismez; cip yalnizca hafifce yukselir. */
.oa-chip:hover {
    background: var(--bg-color-dark);
    transform: translateY(-1px);
}

.oa-chip.is-on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.oa-chip-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(5, 42, 97, 0.1);
    color: var(--primary-color);
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.oa-chip.is-on .oa-chip-count {
    background: var(--secondary-color);
    color: var(--primary-color);
}


/* --- Hedef ülke seçici (modalın en üstü) ---
 * Solda aranabilir liste, sağda seçilenler. Sayfadaki ülke ızgarası da
 * çalışmaya devam eder; ikisi aynı `countries` alanını günceller. */

.oa-cpick {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.oa-cpick-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.oa-cpick-col--selected {
    padding-left: 14px;
    border-left: 1px solid rgba(5, 42, 97, 0.1);
    min-height: 100%;
}

.oa-cpick-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(5, 42, 97, 0.14);
    background: var(--card-bg);
}

.oa-cpick-search i { color: var(--primary-color); flex-shrink: 0; }

.oa-cpick-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-dark);
}

.oa-cpick-search input::placeholder { color: rgba(26, 35, 51, 0.45); }
.oa-cpick-search input::-webkit-search-cancel-button { display: none; }

.oa-cpick-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-dark-low);
}

.oa-cpick-clear {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-color);
    text-decoration: underline;
}

.oa-cpick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 10px;
    border: 1px solid rgba(5, 42, 97, 0.1);
}

.oa-cpick-list::-webkit-scrollbar { width: 8px; }

.oa-cpick-list::-webkit-scrollbar-thumb {
    background: rgba(5, 42, 97, 0.2);
    border-radius: 999px;
    border: 2px solid var(--card-bg);
}

.oa-cpick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(5, 42, 97, 0.06);
    transition: background 0.16s ease;
}

.oa-cpick-row:hover { background: var(--secondary-color-low); }

.oa-cpick-row.is-on {
    background: var(--primary-color-low);
    box-shadow: inset 3px 0 0 var(--secondary-color);
}

.oa-cpick-row.is-on .fa-check { color: var(--primary-color); margin-left: auto; }

.oa-cpick-code {
    display: grid;
    place-items: center;
    min-width: 30px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.oa-cpick-name {
    flex: 1;
    min-width: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-cpick-count {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark-low);
    flex-shrink: 0;
}

.oa-cpick-empty {
    padding: 14px 12px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    color: var(--text-dark-low);
}

@media (max-width: 720px) {
    .oa-cpick { grid-template-columns: minmax(0, 1fr); }

    .oa-cpick-col--selected {
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid rgba(5, 42, 97, 0.1);
    }

    /* Modal govdesi artik kendi icinde kaydigi icin ic listenin kisa
     * olmasi gerekiyor; 240px kucuk ekranda gorunur alanin yarisindan
     * fazlasini yiyor ve altindaki filtreler hic goze carpmiyordu. */
    .oa-cpick-list { max-height: min(44vh, 200px); }
}

/* --- Segmentli seçici --- */

.oa-segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--bg-color);
    border: 1px solid rgba(5, 42, 97, 0.1);
}

.oa-segmented button {
    padding: 9px 6px;
    border-radius: 7px;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark-low);
    transition: all 0.2s ease;
}

.oa-segmented button:hover { color: var(--primary-color); }

/* Kart, satirdaki en uzun karta gore uzuyor (bkz. .oa-modal-body
 * align-items: stretch). Segment secici tek satirlik oldugu icin basligin
 * hemen altinda kalip altta bos alan birakiyordu; auto margin ile artan
 * bosluga ortalanir. */
.oa-fcard .oa-segmented { margin-block: auto; }

.oa-segmented button.is-on {
    background: var(--secondary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(255, 222, 89, 0.5);
}

/* --- Sayaç --- */

.oa-stepper {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(5, 42, 97, 0.14);
    background: var(--card-bg);
    overflow: hidden;
}

.oa-stepper button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 44px;
    color: var(--primary-color);
    transition: background 0.2s ease;
}

.oa-stepper button:hover { background: var(--secondary-color); }

.oa-stepper input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    border-left: 1px solid rgba(5, 42, 97, 0.1);
    border-right: 1px solid rgba(5, 42, 97, 0.1);
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    background: transparent;
}

.oa-stepper input::-webkit-outer-spin-button,
.oa-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* --- Öğrenci profili --- */

.oa-student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

/* --- Alt bar --- */

.oa-modal-foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px;
    background: var(--card-bg);
    border-top: 1px solid rgba(5, 42, 97, 0.1);
    flex-shrink: 0;
}

.oa-filters-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark-low);
    transition: color 0.2s ease;
}

.oa-filters-reset:hover { color: var(--accent-color); }

/* Ana aksiyon bordo */
.oa-modal-foot .oa-btn--primary {
    background: var(--accent-color);
    color: #fff;
}

.oa-modal-foot .oa-btn--primary:hover { background: var(--accent-color-dark); }

/* --- Duyarlılık --- */

@media (max-width: 1100px) {
    .oa-modal-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    /* Mobilde modal tam ekran; kaydirma masaustundeki gibi govdede kalir. */
    .oa-modal {
        padding: 0;
        overflow: hidden;
    }

    .oa-modal-dialog {
        max-width: none;
        /* dvh: mobil tarayicida adres cubugu acikken 100vh ekrandan uzun
         * kalir ve alt bar gorunmez olur. vh, dvh desteklemeyene yedek. */
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .oa-modal-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
        /* min-height:0 sart — flex ogesinin varsayilan min-height'i `auto`,
         * yani icerik boyu; onsuz kucululemez ve overflow hic devreye girmez. */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .oa-modal-head { padding: 16px; }
    .oa-modal-title h2 { font-size: 18px; }
    .oa-modal-title p { display: none; }
    .oa-modal-badge { display: none; }
    .oa-modal-foot { padding: 12px 16px; }
}

/* ---------- Aktif filtre çipleri ---------- */

.oa-active {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.oa-active-label {
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-light-low);
    margin-right: 4px;
}

.oa-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.oa-active-chip:hover { background: rgba(191, 23, 26, 0.55); }
.oa-active-chip i { opacity: 0.8; }

.oa-active-clear {
    margin-left: 4px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: underline;
}

/* =====================================================
   2) Sonuçlar (.oa-results)
   ===================================================== */

.oa-results {
    display: block;
    width: 100%;
    padding: 34px 20px 90px;
    background: var(--bg-color);
}

.oa-results-inner {
    max-width: 1340px;
    margin: 0 auto;
}

.oa-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.oa-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--text-dark-low);
    margin: 0;
}

.oa-count strong {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    color: var(--primary-color);
}

.oa-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oa-sort > span {
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-dark-low);
}

.oa-sort .oa-select select { min-width: 210px; }

/* ---------- Kart ızgarası ---------- */

.oa-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.oa-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.07);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.oa-card:hover {
    transform: translateY(-4px);
    border-color: rgba(5, 42, 97, 0.16);
    box-shadow: 0 18px 44px rgba(5, 42, 97, 0.12);
}

.oa-card-media {
    position: relative;
    display: block;
    height: 168px;
    background: var(--card-bg-low);
    overflow: hidden;
}

.oa-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.oa-card:hover .oa-card-media img { transform: scale(1.05); }

.oa-card-place {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(3, 20, 45, 0.78);
    backdrop-filter: blur(6px);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
}

.oa-card-promo {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 11px;
    border-radius: 8px;
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    font-family: 'Sora', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.oa-card-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px 16px;
    flex: 1 1 auto;
}

.oa-card-focus {
    align-self: flex-start;
    font-family: 'Sora', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--accent-color);
}

.oa-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.32;
    margin: 0;
}

.oa-card-title a {
    color: var(--text-dark-dark);
    transition: color 0.2s ease;
}

.oa-card-title a:hover { color: var(--primary-color); }

.oa-card-campus {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.oa-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(5, 42, 97, 0.12);
}

.oa-card-facts li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--text-dark-low);
    min-width: 0;
}

.oa-card-facts i { color: var(--primary-color); flex-shrink: 0; }

.oa-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--card-bg-low);
}

.oa-card-price strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark-dark);
}

.oa-card-price small {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    color: var(--text-dark-low);
}

.oa-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-light);
    transition: background 0.2s ease, transform 0.2s ease;
}

.oa-card-cta:hover { background: var(--accent-color); transform: translateX(3px); }

.oa-card-skeleton {
    height: 372px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--card-bg) 0%, var(--card-bg-low) 50%, var(--card-bg) 100%);
    background-size: 200% 100%;
    animation: oa-shimmer 1.4s ease-in-out infinite;
}

/* ---------- Boş durum + sayfalama ---------- */

.oa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 64px 30px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px dashed rgba(5, 42, 97, 0.2);
}

.oa-empty i { color: var(--primary-color); }

.oa-empty h3 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    color: var(--text-dark-dark);
    margin: 0;
}

.oa-empty p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dark-low);
    margin: 0;
    max-width: 430px;
}

.oa-empty button {
    margin-top: 8px;
    padding: 11px 22px;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.oa-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 34px;
}

.oa-page-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.oa-page-gap { color: var(--text-dark-low); }

.oa-pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.1);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

.oa-pagination button:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.oa-pagination button.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.oa-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* =====================================================
   3) Kampüs detayı (.oa-campus, .oa-tabs, .oa-panel)
   ===================================================== */

.oa-campus-head {
    display: block;
    width: 100%;
    padding: 0 20px;
    background: var(--bg-color);
}

.oa-campus-cover {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    height: 320px;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    background: var(--primary-color-dark);
}

.oa-campus-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.oa-campus-crumbs {
    position: absolute;
    left: 34px;
    bottom: 92px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-light-low);
}

.oa-campus-crumbs a { color: var(--text-light-low); transition: color 0.2s ease; }
.oa-campus-crumbs a:hover { color: var(--secondary-color); }
.oa-campus-crumbs > span:last-child { color: var(--text-light); }

/* Kapak fotoğrafının üzerine binen künye kartı */
.oa-campus-card {
    position: relative;
    max-width: 1240px;
    margin: -70px auto 0;
    padding: 28px 32px;
    border-radius: 24px;
    background: var(--card-bg);
    box-shadow: 0 20px 60px rgba(5, 42, 97, 0.16);
}

.oa-campus-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
}

.oa-campus-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 12px;
    border-radius: 20px;
    background: var(--card-bg-low);
    border: 1px solid rgba(5, 42, 97, 0.07);
}

.oa-campus-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.oa-campus-place {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 6px;
}

.oa-campus-name {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.8px;
    color: var(--text-dark-dark);
    margin: 0 0 6px;
}

.oa-campus-provider {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.oa-campus-price {
    padding: 14px 20px;
    border-radius: 16px;
    background: var(--primary-color);
    text-align: right;
    min-width: 220px;
}

.oa-campus-price > span {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-light-low);
}

.oa-campus-price strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 3px 0 4px;
}

.oa-campus-price small {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--text-light-low);
}

.oa-campus-summary {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-dark-low);
    margin: 20px 0 0;
    max-width: 860px;
}

.oa-campus-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.oa-campus-metrics li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--card-bg-low);
}

.oa-campus-metrics strong {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.oa-campus-metrics span {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--text-dark-low);
}

.oa-campus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(5, 42, 97, 0.08);
}

/* ---------- Sekmeler ---------- */

.oa-tabs-wrap {
    position: sticky;
    top: 92px;
    z-index: 40;
    padding: 22px 20px 0;
    background: var(--bg-color);
}

.oa-tabs {
    display: flex;
    gap: 6px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.07);
    overflow-x: auto;
}

.oa-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 12px;
    white-space: nowrap;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark-low);
    transition: all 0.2s ease;
}

.oa-tabs button:hover { background: var(--card-bg-low); color: var(--primary-color); }

.oa-tabs button.is-active {
    background: var(--primary-color);
    color: var(--text-light);
}

.oa-tabs button.is-active i { color: var(--secondary-color); }

.oa-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--card-bg-low);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
}

.oa-tabs button.is-active .oa-tab-count {
    background: rgba(255, 255, 255, 0.16);
    color: var(--secondary-color);
}

/* ---------- Sekme içerikleri ---------- */

.oa-panel {
    display: block;
    width: 100%;
    padding: 22px 20px 20px;
    background: var(--bg-color);
}

.oa-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
}

.oa-block {
    padding: 30px 32px;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.07);
}

.oa-block--tight { padding: 22px 32px; }

.oa-block-title {
    position: relative;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark-dark);
    margin: 0 0 14px;
    padding-left: 16px;
}

.oa-block-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 3px;
    background: var(--secondary-color);
}

.oa-block-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dark-low);
    margin: -6px 0 18px;
}

.oa-paragraph {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-dark);
    margin: 0 0 14px;
}

.oa-paragraph:last-child { margin-bottom: 0; }
.oa-paragraph i { color: var(--accent-color); }

/* ---------- Program tablosu ---------- */

.oa-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(5, 42, 97, 0.08);
}

.oa-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
}

.oa-table thead th {
    padding: 13px 16px;
    text-align: left;
    background: var(--primary-color);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.oa-table tbody tr { border-top: 1px solid rgba(5, 42, 97, 0.07); }
.oa-table tbody tr:nth-child(even) { background: var(--card-bg-low); }
.oa-table tbody tr:hover { background: var(--primary-color-low); }

.oa-table td,
.oa-table tbody th {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-dark-low);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.oa-table tbody th { min-width: 260px; white-space: normal; }

.oa-table-name {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark-dark);
}

.oa-table-promo {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    font-family: 'Sora', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* `.oa-table td` (0,1,1) bu kuraldan daha ozgul oldugu icin secici tam yazilir. */
.oa-table thead th.oa-table-right,
.oa-table tbody td.oa-table-right { text-align: right; }

.oa-table-price {
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark-dark);
}

/* ---------- Konaklama ---------- */

.oa-stay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.oa-stay {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px;
    border-radius: 16px;
    background: var(--card-bg-low);
    border: 1px solid rgba(5, 42, 97, 0.06);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.oa-stay:hover { border-color: rgba(5, 42, 97, 0.2); transform: translateY(-2px); }

.oa-stay-type {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--primary-color);
    color: var(--text-light);
    font-family: 'Sora', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.oa-stay h3 {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-dark-dark);
    margin: 0;
}

.oa-stay ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oa-stay li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    color: var(--text-dark-low);
}

.oa-stay li i { color: var(--primary-color); }

.oa-stay-price {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(5, 42, 97, 0.08);
    font-family: 'Sora', sans-serif;
    font-size: 14.5px;
    color: var(--text-dark-dark);
}

/* ---------- Olanaklar / akreditasyon ---------- */

.oa-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.oa-facilities li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card-bg-low);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-dark);
}

.oa-facilities i { color: var(--primary-color); }

.oa-accreditations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.oa-accreditations li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 14px;
    background: var(--card-bg-low);
    border: 1px solid rgba(5, 42, 97, 0.06);
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark);
}

.oa-accreditations img { max-height: 44px; width: auto; object-fit: contain; }

/* ---------- Galeri (campus-gallery.tsx) ---------- */

.cd-gallery { position: relative; }

.cd-gallery-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.cd-gallery-track::-webkit-scrollbar { height: 6px; }
.cd-gallery-track::-webkit-scrollbar-thumb {
    background: var(--primary-color-low);
    border-radius: 4px;
}

.cd-gallery-item {
    flex: 0 0 clamp(240px, 32%, 340px);
    margin: 0;
    scroll-snap-align: start;
}

.cd-gallery-item img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.cd-gallery-item figcaption {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: var(--text-dark-low);
    margin-top: 8px;
}

.cd-gallery-nav {
    position: absolute;
    top: 88px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(5, 42, 97, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.cd-gallery-nav:hover { transform: scale(1.06); background: var(--secondary-color); }
.cd-gallery-prev { left: -14px; }
.cd-gallery-next { right: -14px; }

/* ---------- Alt CTA bandı ---------- */

.oa-cta-band {
    display: block;
    width: 100%;
    padding: 20px 20px 90px;
    background: var(--bg-color);
}

.oa-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 36px;
    border-radius: 24px;
    background:
        radial-gradient(120% 160% at 90% 0%, rgba(255, 222, 89, 0.16) 0%, rgba(255, 222, 89, 0) 50%),
        linear-gradient(160deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}

.oa-cta-inner h2 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 8px;
}

.oa-cta-inner p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-light-low);
    margin: 0;
    max-width: 620px;
}

.oa-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 260px;
}

.oa-cta-actions .oa-btn--outline {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--text-light);
}

.oa-cta-actions .oa-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--secondary-color);
}

.oa-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
}

/* =====================================================
   4) Duyarlı düzen
   ===================================================== */

@media (max-width: 1180px) {
    .oa-country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oa-student-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oa-campus-identity { grid-template-columns: auto minmax(0, 1fr); }
    .oa-campus-price { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 900px) {
    .oa-finder-head,
    .oa-search-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
    .oa-searchbar { flex-wrap: wrap; }
    .oa-searchbar-field { flex: 1 1 100%; }
    .oa-searchbar-filters { flex: 1 1 auto; justify-content: center; padding: 13px 18px; }
    .oa-searchbar-submit { flex: 1 1 auto; padding: 13px 24px; }
    .oa-cta-inner { grid-template-columns: minmax(0, 1fr); }
    .oa-tabs-wrap { top: 86px; }
}

@media (max-width: 720px) {
    .oa-finder { padding: 64px 14px 26px; }
    .oa-search { padding: 112px 14px 0; }
    .oa-finder-inner,
    .oa-search-inner { padding: 30px 20px 26px; border-radius: 22px; }
    .oa-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .oa-country-card { padding: 13px 14px; }
    .oa-grid { grid-template-columns: minmax(0, 1fr); }
    .oa-student-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oa-results { padding: 26px 14px 70px; }
    .oa-results-head { flex-direction: column; align-items: flex-start; }
    .oa-sort .oa-select select { min-width: 180px; }

    .oa-campus-head { padding: 0 14px; }
    .oa-campus-cover { height: 210px; }
    .oa-campus-crumbs { left: 20px; bottom: 76px; font-size: 10px; }
    .oa-campus-card { margin-top: -56px; padding: 22px 20px; border-radius: 20px; }
    .oa-campus-identity { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .oa-campus-logo { width: 72px; height: 72px; }
    .oa-campus-price { min-width: 0; }
    .oa-campus-actions .oa-btn { flex: 1 1 auto; }

    .oa-tabs-wrap { position: static; padding: 18px 14px 0; }
    .oa-tabs button { padding: 11px 14px; font-size: 12.5px; }
    .oa-panel { padding: 16px 14px; }
    .oa-block { padding: 22px 18px; border-radius: 18px; }
    .oa-cta-band { padding: 16px 14px 70px; }
    .oa-cta-inner { padding: 26px 20px; }
    .cd-gallery-nav { display: none; }
    .cd-gallery-item { flex-basis: 78%; }
}

/* ===========================================================================
 * ARAMA BLOGU — site paletine uyum (acik tema)
 *
 * Blok baslangicta koyu lacivert bir kart olarak tasarlanmisti; sayfanin geri
 * kalani ise "acik gri zemin + beyaz kart + lacivert metin + sari vurgu"
 * dilinde (bkz. .visa-sec, .partners-inner, .plan-card). Koyu blok araya
 * yamali giriyordu. Burada blok ayni yapiyi bozmadan acik temaya cevriliyor:
 * yuzey beyaz karta, metinler lacivert/gri tonlara, CTA lacivert butona,
 * sari ise vurgu rolune (secili durum, baslik alti cizgisi) donuyor.
 *
 * Kurallar dosyanin sonunda: ayni ozgullukte oldugu icin kaynak sirasiyla
 * yukaridaki koyu tema degerlerini eziyor.
 * ========================================================================= */

/* --- Blok yuzeyi: .partners-inner ile ayni beyaz kart --- */
.oa-finder-inner,
.oa-search-inner {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

/* Dekoratif halka: beyaz uzerinde cok hafif lacivert */
.oa-finder-inner::after,
.oa-search-inner::after {
    border-color: rgba(5, 42, 97, 0.045);
}

/* --- Baslik alani --- */

/* Cizgi + sari yazi yerine sitenin her yerinde kullanilan .tag-label hapi */
.oa-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--primary-color);
    background: var(--bg-color);
    border-radius: 6px;
    padding: 6px 14px;
}

.oa-eyebrow::before { display: none; }

.oa-title { color: var(--text-dark-dark); }

/* Sari vurgu ::after yerine background-image ile: mutlak konumlu bir kutu
 * metnin UZERINE binip harflerin altini keserdi; background metnin arkasinda
 * kalir. .about-page-heading-accent ile birebir ayni teknik. */
.oa-title span {
    color: var(--primary-color);
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
}

.oa-title span::after { display: none; }

.oa-lead { color: var(--text-dark-low); }

.oa-error {
    color: var(--accent-color-dark);
    background: var(--accent-color-low);
    border-color: rgba(191, 23, 26, 0.28);
}

/* --- Arama cubugu --- */



.oa-searchbar-field { border: 1px solid rgba(5, 42, 97, 0.1); }

.oa-searchbar-filters {
    background: var(--card-bg);
    border-color: rgba(5, 42, 97, 0.14);
    color: var(--primary-color);
}

.oa-searchbar-filters:hover {
    background: var(--bg-color);
}

.oa-searchbar-filters.is-open {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

/* Ana aksiyon lacivert — .plan-header-cta ile ayni dil */
.oa-searchbar-submit {
    background: var(--primary-color);
    color: var(--text-light);
}

.oa-searchbar-submit:hover { background: var(--primary-color-dark); }

.oa-finder .oa-btn--primary,
.oa-search .oa-btn--primary {
    background: var(--primary-color);
    color: var(--text-light);
    box-shadow: 0 6px 20px rgba(5, 42, 97, 0.18);
}

.oa-finder .oa-btn--primary:hover,
.oa-search .oa-btn--primary:hover { background: var(--primary-color-dark); }

/* --- Hizli kisayol cipleri --- */

.oa-quick-chip {
    background: var(--card-bg);
    border-color: rgba(5, 42, 97, 0.12);
    color: var(--text-dark);
}

.oa-quick-chip i { color: var(--primary-color); }

.oa-quick-chip:hover {
    background: var(--bg-color);
    transform: translateY(-1px);
}

/* Secili hal sari kalir — sitenin vurgu rengi */
.oa-quick-chip.is-active,
.oa-quick-chip.is-active:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color-dark);
}

/* --- Ulke kartlari --- */

.oa-country-card {
    background: var(--card-bg-low);
    border-color: rgba(5, 42, 97, 0.1);
}

.oa-country-flag { color: var(--secondary-color-dark); }
.oa-country-name { color: var(--text-dark-dark); }
.oa-country-meta { color: var(--text-dark-low); }

/* Hover'da kenarlik RENGI degismez; kart yalnizca yukselir ve golgelenir. */
.oa-country-card:hover {
    background: var(--card-bg);
    box-shadow: 0 8px 22px rgba(5, 42, 97, 0.1);
}

.oa-country-card:hover .oa-country-flag { color: var(--secondary-color-dark); }

.oa-country-skeleton {
    background: linear-gradient(
        90deg,
        rgba(5, 42, 97, 0.05) 0%,
        rgba(5, 42, 97, 0.11) 50%,
        rgba(5, 42, 97, 0.05) 100%
    );
    background-size: 200% 100%;
}

/* --- Alt serit + aktif filtre cipleri --- */

.oa-finder-foot,
.oa-active { border-top-color: rgba(5, 42, 97, 0.1); }

.oa-trust li { color: var(--text-dark-low); }
.oa-trust i { color: var(--primary-color); }

.oa-active-label { color: var(--text-dark-low); }

.oa-active-chip {
    background: var(--bg-color);
    color: var(--text-dark);
}

.oa-active-chip:hover {
    background: var(--accent-color);
    color: var(--text-light);
}

.oa-active-clear { color: var(--accent-color); }

/* ===========================================================================
 * Kampüs detayı — tasarım rafinesi
 *
 * Yapı ve ölçüler aynı kaldı (kart yarıçapları, ızgara, boşluk ritmi).
 * Değişen: sitenin kendi dili daha görünür hale getirildi —
 *   · sarı vurgu şeridi (navbar/footer/modal başlığındaki gibi)
 *   · lacivert yüzey + sarı sayı kontrastı
 *   · tek baskın CTA (bordo), ikincil aksiyonlar sakin
 * ========================================================================= */

/* --- Kapak: perde güçlendirildi, alt kenara marka şeridi --- */

.oa-campus-cover {
    height: 360px;
    background: var(--primary-color-dark);
}

.oa-campus-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(3, 20, 45, 0.18) 0%,
        rgba(3, 20, 45, 0.4) 58%,
        rgba(3, 20, 45, 0.78) 100%
    );
    pointer-events: none;
}

.oa-campus-cover img { opacity: 0.85; }

.oa-campus-crumbs {
    z-index: 2;
    bottom: 104px;
}

.oa-campus-crumbs > span:last-child { color: var(--secondary-color); }

/* --- Künye kartı: üstte sarı şerit --- */

.oa-campus-card {
    overflow: hidden;
    border-top: 3px solid var(--secondary-color);
    box-shadow: 0 24px 64px rgba(3, 20, 45, 0.2);
}

/* NOT: Kampus konum satirinin son hali dosyanin ilerisinde tanimli
 * ("Konum satırı — sakinleştirildi"): sade ustyazi + ince ulke kodu rozeti. */
.oa-campus-place { margin-bottom: 10px; }

/* --- Ücret bandı: sol kenarda sarı işaret --- */

.oa-campus-price {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding-left: 24px;
}

.oa-campus-price::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--secondary-color);
}

/* --- Ölçüler: düz gri hap yerine kart --- */

.oa-campus-metrics li {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 104px;
    padding: 13px 18px 12px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 1px solid rgba(5, 42, 97, 0.1);
    overflow: hidden;
}

.oa-campus-metrics li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--secondary-color);
}

.oa-campus-metrics strong { font-size: 20px; letter-spacing: -0.5px; }

.oa-campus-metrics span {
    font-family: 'Sora', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-dark-low);
}

/* --- Aksiyonlar: tek baskın CTA bordo, diğerleri sakin --- */

.oa-campus-actions .oa-btn--primary {
    background: transparent;
    border: 1.5px solid var(--secondary-color-dark);
    color: var(--primary-color);
}

.oa-campus-actions .oa-btn--primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

.oa-campus-actions .oa-btn--accent {
    box-shadow: 0 6px 18px rgba(191, 23, 26, 0.26);
}

/* --- Sekmeler: aktif sekmenin altına sarı gösterge --- */

.oa-tabs {
    border-radius: 18px;
    border-color: rgba(5, 42, 97, 0.1);
    box-shadow: 0 6px 20px rgba(5, 42, 97, 0.06);
}

.oa-tabs button { position: relative; }

.oa-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--secondary-color);
}

/* --- İçerik blokları: başlık şeridi kalınlaştı, üst etiket eklendi --- */

.oa-block-title {
    font-size: 21px;
    letter-spacing: -0.3px;
    padding-left: 18px;
}

.oa-block-title::before { width: 5px; }

/* Program tablosu başlığı lacivert bant — modal başlığıyla aynı dil */

.oa-table thead th {
    background: var(--primary-color);
    color: var(--text-light);
}

.oa-table thead th:first-child { border-top-left-radius: 12px; }
.oa-table thead th:last-child { border-top-right-radius: 12px; }

@media (max-width: 768px) {
    .oa-campus-cover { height: 260px; }
    .oa-campus-crumbs { bottom: 84px; left: 20px; }
    .oa-campus-metrics li { min-width: 88px; padding: 11px 14px 10px; }
}

/* ===========================================================================
 * DETAYLI FILTRELER MODALI — site diline hizalama
 *
 * Lacivert baslik bandi, sari serit, bordo CTA ve navy/sari kontrasti zaten
 * yerindeydi; asagidakiler sitenin geri kalaniyla ayrisan noktalar:
 *   · UI basligi marka serifiyle yaziliyordu (serif yalnizca vitrin basligi)
 *   · kart ikonlari cikplak altin glyph'ti (site: yumusak kare icinde lacivert)
 *   · her kart basliginin altinda 2px sari cizgi vardi (site: ince hairline)
 *   · liste satirinda hover sari, secili lacivert — ikisi karisiyordu
 * ========================================================================= */

/* Crimson Text sitede yalnizca buyuk vitrin basliklarinda kullanilir
 * (bkz. style.css "NYLA — marka tipografisi"); arayuz metni Sora. */
.oa-modal-title h2 {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.3px;
}

/* Kart yuzeyi: sitenin standart kart recetesi (.visa-board, .plan-card) */
.oa-fcard {
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

/* Baslik alti: 2px sari yerine notr hairline. Sari serit sitede tek bir
 * vurgu isareti; her kartta tekrarlaninca gurultuye donusuyordu. */
/* Sitedeki blok basliklari gibi: alt cizgi degil, sari sol cubuk. */
.oa-fcard-title {
    position: relative;
    padding: 1px 0 1px 13px;
    border-bottom: none;
}

.oa-fcard-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    /* Yalnizca baslik satiri kadar: aciklama satirina uzamasin. */
    height: 14px;
    width: 3px;
    border-radius: 2px;
    background: var(--secondary-color);
}

/* Ikon dili: .footer-info-icon / .visa-step-icon ile ayni yumusak kare */
.oa-fcard-title i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--primary-color-low);
    color: var(--primary-color);
    flex-shrink: 0;
}

/* Hover notr, secili lacivert + sari kenar isareti: iki durum ayrisiyor */
.oa-cpick-row:hover { background: var(--bg-color); }

/* ===========================================================================
 * KENARLIK + YARICAP — site olculerine cekme
 *
 * index.css'te `border-radius: 999px` HIC yok; hakim olculer 8 / 10 / 6 px.
 * Tam hap ciplerle rozet bu yuzden yabanci duruyordu. Kenarliklar da sitede
 * her yerde notr `rgba(0,0,0,0.06)`; buradaki lacivert tonlu hairline'lar
 * (rgba(5,42,97,...)) mavi bir cerceve etkisi yaratiyordu.
 * ========================================================================= */

.oa-searchbar-field,
.oa-searchbar-filters,
.oa-stepper,
.oa-country-card,
.oa-quick-chip { border-color: rgba(0, 0, 0, 0.1); }

/* Cipler: tam hap yerine sitenin buton yaricapi (.plan-header-cta = 10px),
 * kenarlik 1.5px yerine sitenin standart 1px hairline'i. */
.oa-chip {
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.oa-chip.is-on {
    border-color: var(--primary-color);
}

.oa-chip-count { border-radius: 6px; }

.oa-quick-chip,
.oa-active-chip { border-radius: 10px; }

.oa-modal-badge,
.oa-searchbar-count { border-radius: 8px; }

/* ===========================================================================
 * Kampüs künyesi — iki sütunlu düzen
 *
 * Eskiden her şey tek sütunda alt alta akıyordu (logo+ad+fiyat üstte,
 * özet, ölçüler, en altta bir sıra buton). Artık okuma ile karar verme
 * ayrıldı: solda beyaz bilgi sütunu, sağda lacivert karar paneli.
 * Renk geçişi sitenin diğer lacivert bantlarıyla aynı (footer üstü,
 * iletişim paneli, modal başlığı).
 * ========================================================================= */

.oa-campus-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-top: none;
}

/* --- Sol: bilgi --- */

.oa-campus-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 32px 30px;
    min-width: 0;
}

.oa-campus-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.oa-campus-place { margin-bottom: 0; }

.oa-campus-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Sora', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark-low);
    transition: color 0.2s ease, gap 0.2s ease;
}

.oa-campus-back:hover {
    color: var(--primary-color);
    gap: 10px;
}

.oa-campus-titles {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.oa-campus-titles > div { min-width: 0; }

.oa-campus-logo {
    width: 78px;
    height: 78px;
    border-radius: 16px;
    flex-shrink: 0;
}

.oa-campus-name { margin: 0 0 5px; }

.oa-campus-summary {
    margin: 0;
    max-width: none;
    padding-top: 14px;
    border-top: 1px solid rgba(5, 42, 97, 0.08);
}

.oa-campus-metrics {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

/* --- Sağ: karar paneli --- */

.oa-campus-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px 30px;
    background: linear-gradient(160deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    position: relative;
}

/* Sol kenarda sarı ayraç — sitenin lacivert bantlarındaki işaretin aynısı */
.oa-campus-aside::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--secondary-color);
}

.oa-campus-aside .oa-campus-price {
    padding: 0 0 16px;
    border-radius: 0;
    background: transparent;
    text-align: left;
    min-width: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.oa-campus-aside .oa-campus-price::before { display: none; }

.oa-campus-aside .oa-campus-price strong {
    font-size: 27px;
    letter-spacing: -0.8px;
    margin: 6px 0 5px;
}

.oa-campus-aside .oa-campus-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.oa-campus-aside .oa-btn {
    width: 100%;
    justify-content: center;
}

.oa-campus-aside .oa-btn--accent {
    box-shadow: 0 8px 22px rgba(191, 23, 26, 0.32);
}

/* Lacivert zeminde ikincil butonlar */
.oa-campus-aside .oa-btn--primary {
    background: transparent;
    border: 1.5px solid var(--secondary-color);
    color: var(--secondary-color);
}

.oa-campus-aside .oa-btn--primary:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.oa-campus-aside .oa-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.oa-campus-aside .oa-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); }

.oa-campus-aside-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-light-low);
}

.oa-campus-aside-note i {
    color: var(--secondary-color);
    margin-top: 3px;
    flex-shrink: 0;
}

/* --- Dar ekran: tek sütuna in --- */

@media (max-width: 900px) {
    .oa-campus-card { grid-template-columns: minmax(0, 1fr); }

    .oa-campus-aside::before {
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 3px;
    }

    .oa-campus-main { padding: 24px 22px 26px; }
    .oa-campus-aside { padding: 22px; }
}

@media (max-width: 560px) {
    .oa-campus-titles { align-items: flex-start; gap: 14px; }
    .oa-campus-logo { width: 62px; height: 62px; }
}

/* ===========================================================================
 * MODAL BASLIGI
 *
 * Sitede baslik dili tek: sari sol cubuk + Sora baslik (bkz. .oa-block-title,
 * .oa-fcard-title). Onceki hali — sari ikon karesi, sari cerceveli rozet ve
 * 3px sari serit — sitede karsiligi olmayan ayri bir krom katmaniydi.
 * ========================================================================= */

.oa-modal-head {
    background: var(--card-bg);
    /* Sitedeki ayirici hairline'i; 3px sari serit degil. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Baslik blogu: ikon karesi yerine sari sol cubuk */
.oa-modal-title {
    position: relative;
    gap: 0;
    padding-left: 14px;
}

.oa-modal-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    height: 20px;
    width: 3px;
    border-radius: 2px;
    background: var(--secondary-color);
}

.oa-modal-icon { display: none; }

.oa-modal-title h2 {
    font-size: 18px;
    color: var(--text-dark-dark);
}

.oa-modal-title p { color: var(--text-dark-low); }

/* Rozet: sitedeki sayac ciplerinin dili (lacivert ton, hairline yok) */
.oa-modal-badge {
    background: var(--primary-color-low);
    border: 0;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--primary-color);
}

/* Kapat: diger kontrollerle ayni beyaz yuzey + hairline */
.oa-modal-close {
    width: 36px;
    height: 36px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-dark);
}

.oa-modal-close:hover {
    background: var(--bg-color);
    color: var(--accent-color);
}

/* ---------------------------------------------------------------------------
 * Kampüs künyesi — ince ayar
 *   · Ölçü kartlarının üstündeki sarı şerit kaldırıldı (fazla parçalıydı).
 *   · Lacivert panelin kenarındaki sarı ayraç kaldırıldı; yerine beyazdan
 *     laciverte yumuşak geçiş kondu, sert dikiş kalmadı.
 * ------------------------------------------------------------------------- */

.oa-campus-metrics li::before { content: none; }

.oa-campus-metrics li {
    padding: 14px 18px 13px;
    background: var(--card-bg-low);
    border-color: rgba(5, 42, 97, 0.08);
}

.oa-campus-aside::before { content: none; }

.oa-campus-aside {
    background: linear-gradient(
        100deg,
        var(--card-bg) 0%,
        rgba(5, 42, 97, 0.55) 7%,
        var(--primary-color) 16%,
        var(--primary-color-dark) 100%
    );
}

@media (max-width: 900px) {
    /* Dar ekranda panel alta iniyor — geçiş de dikey olsun */
    .oa-campus-aside {
        background: linear-gradient(
            180deg,
            var(--card-bg) 0%,
            rgba(5, 42, 97, 0.55) 5%,
            var(--primary-color) 12%,
            var(--primary-color-dark) 100%
        );
        padding-top: 30px;
    }
}

/* ---------------------------------------------------------------------------
 * Lacivert panel — dikiş sorunu
 *
 * Panel beyaz sütunun tam bitişiğindeydi; iki ızgara hücresi arasında yatay
 * gradyan denedik ama sınır yine çizgi gibi duruyordu. Gradyanın geniş olması
 * gerekiyor, geniş olunca da açık zemine düşen yazı okunmuyor.
 *
 * Çözüm: dikişi yumuşatmak yerine kaldırmak. Panel artık beyaz kartın içinde
 * dört yanı boşluklu, kendi köşe yarıçapı olan ayrı bir kart. Sitenin başka
 * yerlerinde de kullanılan iç içe kart deseni.
 * ------------------------------------------------------------------------- */

.oa-campus-card {
    align-items: start;
    padding: 0;
}

.oa-campus-aside {
    margin: 22px 22px 22px 0;
    border-radius: 20px;
    overflow: hidden;
    padding: 24px 24px 26px;
    background: linear-gradient(155deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    box-shadow: 0 14px 34px rgba(3, 20, 45, 0.22);
}

@media (max-width: 900px) {
    .oa-campus-aside {
        margin: 0 22px 22px;
        background: linear-gradient(155deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
        padding: 24px;
    }

    .oa-campus-main { padding-bottom: 20px; }
}

@media (max-width: 560px) {
    .oa-campus-aside { margin: 0 16px 16px; }
}

/* ---------------------------------------------------------------------------
 * Konum satırı — sakinleştirildi.
 * Sarı dolgulu hap kartın geri kalanına göre fazla bağırıyordu. Artık sade
 * üstyazı: küçük harf aralıklı, soluk lacivert metin; ülke kodu ince
 * çerçeveli küçük bir rozet.
 * ------------------------------------------------------------------------- */

.oa-campus-place {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--text-dark-low);
    font-size: 11px;
    letter-spacing: 1.1px;
}

.oa-campus-place > span:first-child {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid rgba(5, 42, 97, 0.18);
    background: var(--card-bg-low);
    color: var(--primary-color);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

/* ---------------------------------------------------------------------------
 * Ölçü kartları — içerik ortalandı
 *
 * Kartlar `repeat(auto-fit, minmax(112px, 1fr))` ile satırı doldurup
 * genişliyor; içerik ise `align-items: flex-start` ile sola yapışık kalınca
 * sağda geniş bir boşluk bırakıyor ve sayı havada duruyordu.
 * ------------------------------------------------------------------------- */

.oa-campus-metrics li {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ===========================================================================
 * KONTROLLERDE KENARLIK YOK
 *
 * Hover'da kenarlik rengini kaldirmistik; sabit hairline'lar da kalkiyor.
 * Ogeler artik cizgiyle degil YUZEYLE ayrisiyor: beyaz kart uzerinde acik gri
 * dolgu (--card-bg-low), hover'da bir ton koyu/acik. Secili haller zaten dolu
 * renk (lacivert / sari) oldugu icin etkilenmiyor.
 *
 * Kartlar (.oa-fcard, .oa-card, .oa-block) haric: onlar gri zemin uzerinde
 * beyaz durdugu icin hairline'lari sitedeki kart diliyle ayni kaliyor.
 * ========================================================================= */

.oa-country-card,
.oa-quick-chip,
.oa-chip,
.oa-searchbar-field,
.oa-searchbar-filters,
.oa-cpick-search,
.oa-modal-close,
.oa-stepper,
.oa-segmented,
.oa-modal-body .oa-select select,
.oa-modal-body .oa-input {
    border: 0;
}

/* Beyaz yuzey uzerinde duran ogelere gri dolgu — cizgi olmadan da secilsin.
 * Ton, --card-bg-low (#f5f7fa) yerine bir basamak belirgin olan --bg-color
 * (#eceff4): kenarlik yokken oge beyazin uzerinde net ayrissin. */
.oa-quick-chip,
.oa-chip,
.oa-searchbar-field,
.oa-searchbar-filters,
.oa-cpick-search,
.oa-modal-close,
.oa-stepper,
.oa-modal-body .oa-select select,
.oa-modal-body .oa-input {
    background: var(--bg-color);
}

/* Ulke kartlari da ayni seviyeye gelir */
.oa-country-card { background: var(--bg-color); }

/* Varsayilan bir ton koyulastigi icin hover'lar da bir basamak ilerler */
.oa-quick-chip:not(.is-active):hover,
.oa-searchbar-filters:hover,
.oa-modal-close:hover,
.oa-chip:not(.is-on):hover { background: var(--bg-color-dark); }

/* Sonuc sayfasindaki siralama kutusu gri zeminde: beyaz kalsin ki kaybolmasin */
.oa-sort .oa-select select {
    background: var(--card-bg);
    border: 0;
}

/* Dolu renkli secili haller kenarliksiz da net: yalnizca zemin tasiyor */
.oa-chip.is-on { background: var(--primary-color); }
.oa-country-card.is-selected,
.oa-quick-chip.is-active,
.oa-quick-chip.is-active:hover { background: var(--secondary-color); }

/* ---------------------------------------------------------------------------
 * Sol sütun dikeyde ortalansın.
 * Kartın yüksekliğini sağdaki lacivert panel belirliyor; sol sütun `start`
 * hizasındayken içerik yukarıda kalıp altında boş beyaz alan bırakıyordu.
 * ------------------------------------------------------------------------- */

.oa-campus-card { align-items: stretch; }

.oa-campus-main { justify-content: center; }

@media (max-width: 900px) {
    /* Tek sütuna inince ortalamanın anlamı kalmıyor */
    .oa-campus-main { justify-content: flex-start; }
}

/* Konum satırı biraz büyüsün ve altına nefes alsın (satır dikeyde yukarı çıkar) */
.oa-campus-place { font-size: 12.5px; letter-spacing: 1.2px; }
.oa-campus-place > span:first-child { font-size: 10.5px; min-width: 27px; padding: 4px 7px; }
.oa-campus-topline { margin-bottom: 8px; }

/* ===========================================================================
 * MOBIL — KAMPUS DETAYI
 *
 * Mobilde yatay kaydirma gerektiren iki yer vardi: sekme seridi ve program
 * tablosu. Sitedeki mobil dil (bkz. /programs) tam genislikte YIGIN kartlar
 * uzerine kurulu; ikisini de o dile cekiyoruz.
 * ========================================================================= */

@media (max-width: 720px) {
    /* --- Sekmeler: yana kaymak yerine 2x2 izgara --- */
    .oa-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }

    .oa-tabs button {
        /* Bu boyutta etiketler sola yaslanir — ortalanunca izgaradaki dort
         * sekme birbirine gore kaymis gorunuyordu. */
        justify-content: flex-start;
        padding: 12px 12px;
        font-size: 12.5px;
        white-space: normal;
    }

    /* --- Program tablosu: satirlar karta doner --- */
    .oa-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .oa-table {
        min-width: 0;
        display: block;
    }

    /* Basliklar hucrelerin yanina tasindigi icin baslik satiri gizlenir */
    .oa-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .oa-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .oa-table tbody tr,
    .oa-table tbody tr:nth-child(even),
    .oa-table tbody tr:hover {
        display: block;
        padding: 15px 16px;
        border: 0;
        border-radius: 14px;
        background: var(--card-bg-low);
    }

    .oa-table tbody th {
        display: block;
        min-width: 0;
        padding: 0 0 10px;
    }

    .oa-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        white-space: normal;
        text-align: right;
        border-top: 1px solid rgba(5, 42, 97, 0.08);
    }

    .oa-table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-family: 'Sora', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--text-dark-low);
        text-align: left;
    }

    /* Ucret satiri vurgulu kapanis */
    .oa-table tbody td.oa-table-price {
        margin-top: 4px;
        padding-top: 12px;
        font-size: 15px;
        color: var(--primary-color);
    }

    /* --- Galeri: tek kare neredeyse tam genislikte --- */
    .cd-gallery-item { flex-basis: 86%; }
    .cd-gallery-item img { height: 190px; }
}

/* ---------------------------------------------------------------------------
 * Ülke kartları — kenarlıksız, dolgusu belirgin.
 *
 * Kart zemini (--card-bg-low #f5f7fa) sayfa zeminine (#eceff4) çok yakındı;
 * kartı yalnızca kenarlık ayırıyordu. Kenarlık istenmediği için ayırt etme
 * işini dolgu üstleniyor: lacivertten süzülmüş hafif bir ton. Hover'da ton
 * biraz koyulaşıp kart yükseliyor — yine kenarlık yok.
 * ------------------------------------------------------------------------- */

.oa-country-card {
    border: none;
    background: rgba(5, 42, 97, 0.07);
    box-shadow: none;
}

.oa-country-card:hover {
    border: none;
    background: rgba(5, 42, 97, 0.12);
    box-shadow: 0 8px 22px rgba(5, 42, 97, 0.1);
}

/* Seçili kart sarı kalır; onda da kenarlık yok */
.oa-country-card.is-selected,
.oa-country-card.is-selected:hover {
    border: none;
    background: var(--secondary-color);
}

/* ---------------------------------------------------------------------------
 * Modal içindeki çipler ve alanlar — ülke kartlarıyla aynı desen.
 * Kenarlık yerine dolgu ayırıyor: laciverten süzülmüş hafif ton, hover'da
 * bir kademe koyu. Seçili durum lacivert dolgu olarak kalıyor.
 * ------------------------------------------------------------------------- */

.oa-modal .oa-chip {
    border: none;
    background: rgba(5, 42, 97, 0.07);
}

.oa-modal .oa-chip:hover {
    border: none;
    background: rgba(5, 42, 97, 0.13);
    transform: translateY(-1px);
}

.oa-modal .oa-chip.is-on,
.oa-modal .oa-chip.is-on:hover {
    border: none;
    background: var(--primary-color);
    color: var(--text-light);
}

.oa-modal .oa-chip .oa-chip-count {
    background: rgba(5, 42, 97, 0.12);
    color: var(--primary-color);
}

.oa-modal .oa-chip.is-on .oa-chip-count {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* Ülke seçici: arama kutusu ve liste de kenarlıksız */
.oa-cpick-search {
    border: none;
    background: rgba(5, 42, 97, 0.07);
}

.oa-cpick-list {
    border: none;
    background: rgba(5, 42, 97, 0.05);
}

.oa-cpick-row { border-bottom: 1px solid rgba(5, 42, 97, 0.07); }
.oa-cpick-row:last-child { border-bottom: none; }
.oa-cpick-row:hover { background: rgba(5, 42, 97, 0.1); }

.oa-cpick-row.is-on {
    background: rgba(5, 42, 97, 0.16);
    box-shadow: inset 3px 0 0 var(--secondary-color);
}

.oa-cpick-list::-webkit-scrollbar-thumb { border-color: transparent; }

/* Segment seçicinin çerçevesi de kalksın */
.oa-modal .oa-segmented {
    border: none;
    background: rgba(5, 42, 97, 0.07);
}

/* ---------------------------------------------------------------------------
 * Hızlı kısayol çipleri — dar ekranda 2×2 eşit ızgara
 *
 * `flex-wrap` ile çipler kendi metin genişliklerini alıyordu: "Sınav
 * hazırlığı" ile "Genel dil" yan yana, "Akademik hazırlık" ile "İş dili"
 * altta — dördü de farklı genişlikte ve satır sonları düzensiz kalıyordu.
 * Izgara ile iki eşit sütun; satırlar da `stretch` sayesinde aynı yükseklikte.
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .oa-quick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Bir etiket iki satira sarsa bile dort cip ayni yukseklikte kalir */
        grid-auto-rows: 1fr;
        gap: 8px;
    }

    /* Kutular esit genislikte ama icerik sola yaslı — ikon + metin soldan
     * baslar, iki sutunun basliklari birbiriyle hizali okunur. */
    .oa-quick-chip {
        justify-content: flex-start;
        min-width: 0;
        padding: 10px 14px;
        text-align: left;
    }
}

/* Cok dar ekranda "Akademik hazirlik" tek satirda kalsin diye punto ve
 * yatay dolgu bir tik kisiliyor. */
@media (max-width: 480px) {
    .oa-quick-chip {
        padding: 10px 8px;
        gap: 6px;
        font-size: 12px;
    }
}