/* =============================================================================
 * Referanslar sayfası — /referanslar
 *
 * NEDEN AYRI DOSYA: Ana sayfadaki `partners-sec` bölümü (index.css) referansları
 * DİKEY MARQUEE şeritleri halinde, vitrin amaçlı gösterir; orada logolar akıp
 * gider, tek tek okunmaz. Bu sayfanın işi tam tersi: 61 logonun hepsi dursun,
 * adıyla okunsun, aranabilsin (Ctrl+F) ve arama motoru metnini görsün. Bu
 * yüzden burada marquee YOK — sabit logo duvarı var.
 *
 * TASARIM DİLİ sitenin geri kalanıyla aynı: `--bg-color` zemin, beyaz kartlar,
 * 1340 px kap, Sora başlık / Montserrat gövde, lacivert blok + sarı vurgu +
 * bordo CTA (marka kiti). Afiş `components.css`teki `headerBanner`dan gelir.
 *
 * Ad alanı: TÜM sınıflar `.ref-` önekli. Sayfaya özel stylesheet React
 * tarafından <head>'e taşınıp diğer sayfalarda da yüklü kalabildiği için
 * gövde/etiket seçicisi (örn. `main > section`) KULLANILMAZ — kurallar
 * yalnızca bu sayfada bulunan sınıflara bağlıdır.
 * ========================================================================== */

/* --- Afiş görseli ---------------------------------------------------------
 * Seçici iki sınıfı birlikte alıyor (0,3,0) — components.css'teki
 * `.headerBanner .headerBanner-inner` (0,2,0) kuralını dosya yükleme
 * sırasından bağımsız olarak ezsin. */
.headerBanner.headerBanner--referanslar .headerBanner-inner {
    background-image: linear-gradient(
            180deg,
            rgba(3, 20, 45, 0.62) 0%,
            rgba(3, 20, 45, 0.5) 40%,
            rgba(3, 20, 45, 0.82) 100%
        ),
        url('/uploads/photos/nyla-referanslar-2026.webp');
    background-position: 76% 28%;
}

/* --- Bölüm iskeleti -------------------------------------------------------- */

.ref-sec {
    width: 100%;
    background: var(--bg-color);
    padding: 100px 20px;
    box-sizing: border-box;
}

/* Arka arkaya gelen bölümlerde iki 100 px'lik dolgu üst üste binmesin:
 * ikinciden itibaren üst dolgu kısalır. */
.ref-sec.ref-sec--tight {
    padding-top: 40px;
}

.ref-inner {
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
}

/* Asimetrik başlık — solda etiket + başlık, sağda açıklama.
 * Ana sayfadaki `visa-header` ile aynı ritim. */
.ref-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 50px;
    margin-bottom: 40px;
}

.ref-head-left {
    min-width: 0;
}

.ref-tag {
    display: inline-flex;
    margin-bottom: 18px;
}

.ref-tag .tag-label {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 14px;
    background: var(--card-bg);
    border-radius: 6px;
}

.ref-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.95rem, 3.6vw, 3rem);
    font-weight: 700;
    color: var(--text-dark-dark);
    letter-spacing: -0.7px;
    line-height: 1.14;
    margin: 0;
}

.ref-headline .title-highlight {
    color: var(--primary-color);
}

.ref-head-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 6px;
}

.ref-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--text-dark-low);
    line-height: 1.75;
    margin: 0;
    max-width: 480px;
}

.ref-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ref-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--card-bg);
    border-radius: 10px;
    padding: 8px 14px;
}

.ref-meta-item i {
    color: var(--primary-color);
}

/* --- Sayı şeridi (lacivert blok, sarı rakam) -------------------------------
 * Ana sayfadaki küçük açık renkli sayaç hapının aksine burada tam genişlikte
 * lacivert bir blok var: sayfanın ilk ekranında iş birliğinin ölçeği tek
 * bakışta okunsun. */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--primary-color);
    border-radius: 24px;
    padding: 38px 20px;
    margin-top: 44px;
    box-shadow: 0 10px 30px rgba(5, 42, 97, 0.16);
}

.ref-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 4px 22px;
}

/* Ayırıcı çizgiyi sınır olarak veriyoruz: fazladan <span> gerekmesin ve
 * sütunlar sarıldığında kolayca kapatılabilsin. */
.ref-stat + .ref-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ref-stat-value {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--secondary-color);
}

.ref-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-light-low);
    max-width: 200px;
}

/* --- Öne çıkan iş birlikleri (resmi temsilcilikler) ------------------------ */

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

.ref-spot {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ref-spot:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(5, 42, 97, 0.1);
}

.ref-spot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

/* Logo kutusu her zaman BEYAZ: portföydeki dosyaların bir kısmı şeffaf PNG,
 * bir kısmı beyaz zeminli JPG. Ortak zemin beyaz olmazsa jpg'ler kartın
 * içinde kutulanmış gibi duruyor. */
.ref-spot-logo {
    flex: 1;
    min-width: 0;
    height: 58px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ref-spot-logo img {
    max-width: 170px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Rozetler site genelindeki rozet diliyle ayni.
 *
 * ONCEKI HALI: solmus tonlar (`--secondary-color-low` = %24 sari,
 * `--accent-color-low` = %12 kirmizi) ve 999px tam yuvarlak hap. Ikisi de
 * sitede baska hicbir yerde yok; markanin disinda, jenerik duruyordu.
 * Sitedeki tum rozetler 8px yaricapli ve iki secenekten birini kullanir:
 *   - notr  : `--primary-color-low` zemin + lacivert metin
 *             (.visa-step-badge, ana sayfa)
 *   - vurgu : dolu `--secondary-color` + lacivert metin
 *             (.oa-card-promo "Kampanya", marka etiketi, bolum etiketleri)
 * Iki "Resmi temsilci" karti notr, one cikan ApplyBoard karti vurgu alir;
 * hiyerarsi solmus tonlarla degil marka renkleriyle kuruluyor. */
.ref-spot-badge {
    flex-shrink: 0;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--primary-color-dark);
    background: var(--primary-color-low);
    border-radius: 8px;
    padding: 7px 12px;
    white-space: nowrap;
}

.ref-spot--accent .ref-spot-badge {
    color: var(--primary-color-dark);
    background: var(--secondary-color);
}

.ref-spot-title {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark-dark);
    letter-spacing: -0.3px;
    margin: 0 0 10px;
}

.ref-spot-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-dark-low);
    margin: 0 0 18px;
}

.ref-spot-list {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ref-spot-list li {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
}

.ref-spot-list li i {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--primary-color-low);
    color: var(--primary-color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Logo duvarı ----------------------------------------------------------
 * Sabit ızgara. `auto-fill` sayesinde sütun sayısını ekran belirler; 61 logo
 * için elle kırılım tanımlamaya gerek kalmıyor. */
.ref-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
}

.ref-logo {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 22px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 132px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ref-logo:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color-low);
    box-shadow: 0 10px 26px rgba(5, 42, 97, 0.1);
}

.ref-logo-mark {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gri tonlama: 61 farklı markanın kurumsal rengi yan yana gelince duvar
 * dağınık görünüyor. Üzerine gelince logo kendi rengine döner. */
.ref-logo img {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* RENKLİ. Önce gri gösterilip üzerine gelince renklendiriliyordu; müşteri
     * marka logolarının kendi renkleriyle durmasını istedi. Griye alma,
     * farklı renk yoğunluklarındaki logo kalabalığını sakinleştirmek içindi —
     * o kaygıyı artık boyut ve hizalama karşılıyor. */
    opacity: 1;
    transition: opacity 0.25s ease;
}

.ref-logo:hover img {
    opacity: 0.82;
}

.ref-logo-name {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark-low);
    text-align: center;
    line-height: 1.35;
    letter-spacing: -0.1px;
}

/* --- Bölüm altı not şeridi ------------------------------------------------ */

.ref-note {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 22px 26px;
    margin-top: 22px;
}

.ref-note-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--primary-color-low);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-note-text {
    flex: 1;
    min-width: 0;
}

.ref-note-label {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.ref-note-line {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-dark-low);
    margin: 0;
}

.ref-note-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    background: var(--accent-color);
    border-radius: 12px;
    padding: 13px 22px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ref-note-cta:hover {
    background: var(--accent-color-dark);
    transform: translateX(3px);
    color: var(--text-light);
}

/* --- Kapanış çağrısı ------------------------------------------------------ */

.ref-cta-panel {
    background: var(--primary-color);
    border-radius: 26px;
    padding: 52px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    box-shadow: 0 14px 40px rgba(5, 42, 97, 0.18);
}

.ref-cta-label {
    display: inline-block;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 14px;
}

.ref-cta-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: var(--text-light);
    margin: 0 0 12px;
}

.ref-cta-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-light-low);
    margin: 0;
    max-width: 560px;
}

.ref-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.ref-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    padding: 15px 24px;
    background: var(--accent-color);
    color: var(--text-light);
    transition: background 0.25s ease, transform 0.25s ease;
}

.ref-cta-btn:hover {
    background: var(--accent-color-dark);
    transform: translateY(-2px);
    color: var(--text-light);
}

/* Ikincil CTA: saydam zemin + beyaz cerceve kaldirildi. Cerceve sitenin
 * dilinde yok ve lacivert bandin uzerinde butonun sinirlari zor secilıyordu.
 * Site kurali: BORDO = birincil CTA, SARI = ikincil CTA (kampus kunye
 * kartindaki anket butonu ve kampus CTA bandi da boyle). Ayni kurala
 * baglandi; kenarlik yok, buton dolu yuzeyinden belli oluyor. */
.ref-cta-btn--ghost {
    background: var(--secondary-color);
    border: 0;
    color: var(--primary-color-dark);
    box-shadow: 0 8px 22px rgba(255, 222, 89, 0.22);
}

.ref-cta-btn--ghost:hover {
    background: #ffe887;
    color: var(--primary-color-dark);
}

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

@media (max-width: 1100px) {
    .ref-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }

    .ref-desc {
        max-width: 100%;
    }

    .ref-spot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ref-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 34px;
        gap: 26px;
    }

    .ref-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .ref-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 26px 0;
    }

    /* Sütunlar sarılınca soldaki çizgi satır başında asılı kalıyordu. */
    .ref-stat + .ref-stat {
        border-left: none;
    }
}

@media (max-width: 768px) {
    .ref-sec {
        padding: 64px 16px;
    }

    .ref-sec.ref-sec--tight {
        padding-top: 30px;
    }

    .ref-spot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ref-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    .ref-note-cta {
        width: 100%;
        justify-content: center;
    }

    .ref-stats {
        padding: 30px 16px;
        border-radius: 20px;
    }
}

@media (max-width: 560px) {
    .ref-sec {
        padding: 56px 14px;
    }

    .ref-wall {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        gap: 10px;
    }

    .ref-logo {
        min-height: 112px;
        padding: 16px 12px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .ref-logo img {
        max-height: 34px;
    }

    .ref-logo-name {
        font-size: 11px;
    }

    .ref-cta-panel {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .ref-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
 * Logo, rozetin altına kaymasın
 *
 * `.ref-spot-logo img` yalnızca `max-width: 170px` taşıyordu; yüzde sınırı
 * olmadığı için görsel, kabı 170 px'in altına indiğinde DARALMIYOR ve taşıyor,
 * yanındaki `flex-shrink: 0` rozetin altına giriyordu. Ölçüldü: 340 px'de
 * ApplyBoard logosu rozetin 13 px, 320 px'de 33 px altına giriyordu.
 *
 * `min(170px, 100%)` ile görsel kabından asla taşmıyor; geniş ekranda yine
 * 170 px'i geçmiyor.
 * ------------------------------------------------------------------------- */
.ref-spot-logo img {
    max-width: min(170px, 100%);
}

/* Çok dar ekranda logo ile rozet alt alta: 300 px civarında ikisi yan yana
 * anlamlı genişlikte durmuyor. */
@media (max-width: 359px) {
    .ref-spot-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ref-spot-logo {
        width: 100%;
        flex: 0 0 auto;
    }
}