/*
 * Referanslar sayfasina ozel stiller. Daha once sayfa icinde inline <style> blogu ve
 * style="" attribute'lari olarak duruyordu; CSP'de style-src 'unsafe-inline'
 * ihtiyacini kaldirmak icin tasindi. Kurallar birebir korunmustur.
 * Yalnizca bu sayfada yuklenir (@section Styles) -> cascade kapsami ayni kalir.
 */
    
    .reference-hero-section {
        position: relative;
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
        padding: 125px 0 150px 0;
        overflow: hidden;
        margin-bottom: 0;
    }

    #reference-particles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.6;
    }

    .reference-hero-content {
        position: relative;
        z-index: 2;
    }

    .ref-subtitle {
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--pusula-turuncu);
    }

    .ref-title {
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
    }

    .ref-description {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        max-width: 700px;
        margin: 0 auto;
    }

    
    .hero-filters {
        margin-bottom: 40px;
    }

        .hero-filters .btn-filter {
            background: #fff;
            border: 1px solid #ddd;
            color: #555;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

            .hero-filters .btn-filter:hover, .hero-filters .btn-filter.active {
                background: var(--pusula-turuncu);
                border-color: var(--pusula-turuncu);
                color: #ffffff !important;
                transform: translateY(-3px);
                box-shadow: 0 5px 15px rgba(255, 111, 0, 0.3);
            }

    
    .reference-cards-container {
        position: relative;
        z-index: 5;
        padding-top: 40px;
        padding-bottom: 70px;
    }

    .client-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 40px 20px;
        text-align: center;
        transition: all 0.4s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-top: 4px solid transparent;
    }

        .client-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            border-color: var(--pusula-turuncu);
        }

    .bg-icon {
        position: absolute;
        bottom: -20px;
        right: -20px;
        font-size: 80px;
        opacity: 0.05;
        color: #333;
        transform: rotate(-15deg);
        z-index: 1;
        transition: 0.4s;
    }

    .client-card:hover .bg-icon {
        opacity: 0.1;
        transform: rotate(0deg) scale(1.2);
        color: var(--pusula-turuncu);
    }

    
    .client-logo {
        max-height: 70px;
        margin-bottom: 20px;        
        transition: 0.3s;
        position: relative;
        z-index: 2;
    }
    
    .client-card:hover .client-logo {
        transform: scale(1.05);
    }

    .client-name {
        font-weight: 800;
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 5px;
        text-transform: uppercase;
        position: relative;
        z-index: 2;
    }

    .client-sector {
        font-size: 0.85rem;
        color: #6b6b6b; /* #777 -> 4.24:1 idi; WCAG AA 4.5:1 icin minimal koyulastirma */
        font-weight: 500;
        background: #f8f9fa;
        padding: 5px 15px;
        border-radius: 20px;
        display: inline-block;
        position: relative;
        z-index: 2;
    }

    .client-card:hover .client-sector {
        background: var(--pusula-mavi);
        color: #fff;
    }

   
    .client-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;        
        background: rgba(255, 255, 255, 0.8); 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.4s ease;
        z-index: 10;
        border-radius: 10px;
    }

    .client-card:hover .client-overlay,
    .client-card:focus-within .client-overlay { /* klavye odaginda da gorunur (2.4.7) */
        opacity: 1;
    }

    .btn-visit {
        background: var(--pusula-mavi);
        color: #fff;
        padding: 10px 25px;
        border-radius: 30px;
        font-weight: 700;
        text-decoration: none;
        transform: translateY(20px);
        transition: all 0.4s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .client-card:hover .btn-visit,
    .client-card:focus-within .btn-visit {
        transform: translateY(0);
    }

    .btn-visit:hover {
        background: var(--pusula-turuncu);
        color: #fff;
    }

/* --- Referanslar sayfasinin eski inline style="" degerleri (sinifa tasindi) --- */
.reference-cards-section { background-color: #f8f9fa; }

/* --- Kart ust kenar renk paleti (eskiden Razor ile inline style="border-top: ...").
   Secim her istekte sunucuda rastgele yapilir; burada yalnizca renkler tanimlidir.
   Birlesik secici (.client-card.client-card--x), :hover kuralindaki border-color'i
   eskiden inline style'in yaptigi gibi ust kenarda ezer. --- */
.client-card.client-card--turuncu { border-top: 4px solid #ff6f00; }
.client-card.client-card--mavi { border-top: 4px solid #0d47a1; }
.client-card.client-card--turkuaz { border-top: 4px solid #00b5ad; }
.client-card.client-card--kirmizi { border-top: 4px solid #e74c3c; }
.client-card.client-card--mor { border-top: 4px solid #8e44ad; }
.client-card.client-card--yesil { border-top: 4px solid #27ae60; }
.client-card.client-card--sari { border-top: 4px solid #f1c40f; }
.client-card.client-card--lacivert { border-top: 4px solid #34495e; }