/* =========================================================
   M61 REFERENCES 2026
   ========================================================= */


/* ---------------------------------------------------------
   HOMEPAGE / MODULE 265
   --------------------------------------------------------- */

.module-gallery-265 .m61-reference-card{
    display:block;
    position:relative;
    height:100%;
    overflow:hidden;

    background:#fff;
    border:1px solid rgba(16,43,87,.09);
    border-radius:15px;

    text-decoration:none!important;

    box-shadow:
        0 8px 25px rgba(16,43,87,.055);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.module-gallery-265 .m61-reference-card:hover{
    transform:translateY(-4px);

    border-color:rgba(239,35,60,.16);

    box-shadow:
        0 16px 38px rgba(16,43,87,.11);
}


.module-gallery-265 .m61-reference-image{
    display:block;
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#edf1f5;
}


.module-gallery-265 .m61-reference-image img{
    display:block;

    width:100%!important;
    height:100%!important;

    object-fit:cover;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.module-gallery-265 .m61-reference-card:hover
.m61-reference-image img{
    transform:scale(1.025);
    filter:brightness(.82);
}


/* kategori */

.module-gallery-265 .m61-reference-badge{
    position:absolute;

    top:12px;
    left:12px;

    z-index:3;

    max-width:calc(100% - 24px);

    padding:6px 9px;

    border-radius:7px;

    background:rgba(16,43,87,.88);

    color:#fff!important;

    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;

    backdrop-filter:blur(6px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.10);
}


/* hover canlı site */

.module-gallery-265 .m61-reference-live{
    position:absolute;

    left:50%;
    top:50%;

    z-index:4;

    padding:9px 13px;

    transform:
        translate(-50%,-40%)
        scale(.96);

    opacity:0;

    white-space:nowrap;

    border-radius:9px;

    background:rgba(255,255,255,.94);

    color:#102b57!important;

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 8px 25px rgba(0,0,0,.16);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.module-gallery-265 .m61-reference-live b{
    color:#ef233c;
}


.module-gallery-265 .m61-reference-card:hover
.m61-reference-live{
    opacity:1;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* alt bilgi */

.module-gallery-265 .m61-reference-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:72px;

    padding:14px 15px;

    gap:12px;
}

.module-gallery-265 .m61-reference-copy{
    min-width:0;
}

.module-gallery-265 .m61-reference-copy strong{
    display:block;

    margin-bottom:4px;

    color:#102b57!important;

    font-size:14px;
    line-height:1.25;
    font-weight:800;
}

.module-gallery-265 .m61-reference-copy small{
    display:block;

    color:#7a8799!important;

    font-size:11px;
    line-height:1.2;
}

.module-gallery-265 .m61-reference-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 31px;

    width:31px;
    height:31px;

    border-radius:50%;

    background:#f4f6f9;

    color:#102b57!important;

    font-size:15px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.module-gallery-265 .m61-reference-card:hover
.m61-reference-arrow{
    background:#ef233c;
    color:#fff!important;

    transform:translate(2px,-2px);
}



/* ---------------------------------------------------------
   REFERANSLAR SAYFASI
   --------------------------------------------------------- */

.m61-refpage{
    --m61-blue:#102b57;
    --m61-red:#ef233c;

    padding:
        16px 0
        70px;
}


/* HERO */

.m61-refpage-hero{
    position:relative;

    overflow:hidden;

    padding:
        54px 52px
        38px;

    margin-bottom:30px;

    border:1px solid rgba(16,43,87,.08);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(239,35,60,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f7f9fc
        );

    box-shadow:
        0 15px 45px rgba(16,43,87,.06);
}


.m61-refpage-badge{
    display:inline-flex;

    padding:7px 11px;

    margin-bottom:16px;

    border-radius:999px;

    background:rgba(239,35,60,.08);

    color:#d91f36;

    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}


.m61-refpage-hero h1{
    max-width:760px;

    margin:
        0 0
        13px;

    color:var(--m61-blue);

    font-size:42px;
    line-height:1.06;
    font-weight:850;
}


.m61-refpage-hero > p{
    max-width:760px;

    margin:
        0 0
        22px;

    color:#657287;

    font-size:15px;
    line-height:1.65;
}


.m61-refpage-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;
}


.m61-refpage-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:43px;

    padding:0 17px;

    border-radius:9px;

    font-size:13px;
    font-weight:800;

    text-decoration:none!important;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.m61-refpage-btn:hover{
    transform:translateY(-2px);
}


.m61-refpage-btn-primary{
    background:var(--m61-red);

    color:#fff!important;

    box-shadow:
        0 8px 18px rgba(239,35,60,.17);
}


.m61-refpage-btn-light{
    background:#fff;

    border:1px solid rgba(16,43,87,.10);

    color:var(--m61-blue)!important;
}


/* stats */

.m61-refpage-stats{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;

    max-width:760px;
}


.m61-refpage-stat{
    padding:14px 15px;

    border:1px solid rgba(16,43,87,.07);
    border-radius:11px;

    background:rgba(255,255,255,.78);
}


.m61-refpage-stat strong{
    display:block;

    margin-bottom:2px;

    color:var(--m61-blue);

    font-size:17px;
    font-weight:850;
}


.m61-refpage-stat span{
    color:#7a8799;

    font-size:10px;
    font-weight:700;
}



/* FILTER TOOLBAR */

.m61-refpage-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin:
        0 0
        22px;

    padding:
        0 3px;
}


.m61-refpage-toolbar-copy strong{
    display:block;

    margin-bottom:2px;

    color:var(--m61-blue);

    font-size:17px;
    font-weight:850;
}


.m61-refpage-toolbar-copy span{
    color:#8792a3;

    font-size:11px;
}


.m61-refpage-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;

    gap:7px;
}


.m61-refpage-filters button{
    appearance:none;

    padding:8px 12px;

    border:1px solid rgba(16,43,87,.10);
    border-radius:999px;

    background:#fff;

    color:#617087;

    cursor:pointer;

    font-family:inherit;
    font-size:11px;
    font-weight:800;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}


.m61-refpage-filters button:hover{
    transform:translateY(-1px);

    border-color:rgba(239,35,60,.20);

    color:var(--m61-blue);
}


.m61-refpage-filters button.is-active{
    border-color:var(--m61-blue);

    background:var(--m61-blue);

    color:#fff;
}



/* GRID */

.m61-refpage-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;
}


.m61-refpage-card{
    display:flex;
    flex-direction:column;

    min-width:0;

    overflow:hidden;

    border:1px solid rgba(16,43,87,.08);
    border-radius:16px;

    background:#fff;

    text-decoration:none!important;

    box-shadow:
        0 8px 28px rgba(16,43,87,.055);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.m61-refpage-card:hover{
    transform:translateY(-5px);

    border-color:rgba(239,35,60,.15);

    box-shadow:
        0 18px 42px rgba(16,43,87,.11);
}


.m61-refpage-card.is-hidden{
    display:none!important;
}


/* görsel */

.m61-refpage-thumb{
    display:block;
    position:relative;

    overflow:hidden;

    width:100%;
    aspect-ratio:16 / 9;

    background:#edf1f5;
}


.m61-refpage-thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.m61-refpage-card:hover
.m61-refpage-thumb img{
    transform:scale(1.025);
    filter:brightness(.80);
}


/* image badge */

.m61-refpage-thumb
.m61-refpage-badge{
    position:absolute;

    top:12px;
    left:12px;

    z-index:3;

    margin:0;

    background:rgba(16,43,87,.88);

    color:#fff;

    backdrop-filter:blur(6px);
}


/* hover live */

.m61-refpage-live{
    position:absolute;

    top:50%;
    left:50%;

    z-index:4;

    padding:10px 14px;

    transform:
        translate(-50%,-40%)
        scale(.96);

    opacity:0;

    white-space:nowrap;

    border-radius:9px;

    background:rgba(255,255,255,.95);

    color:var(--m61-blue);

    font-size:12px;
    font-weight:850;

    box-shadow:
        0 8px 24px rgba(0,0,0,.16);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.m61-refpage-live b{
    color:var(--m61-red);
}


.m61-refpage-card:hover
.m61-refpage-live{
    opacity:1;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* body */

.m61-refpage-body{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:16px 17px 17px;
}


.m61-refpage-type{
    margin-bottom:5px;

    color:#8b96a6;

    font-size:10px;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}


.m61-refpage-body strong{
    margin-bottom:14px;

    color:var(--m61-blue);

    font-size:15px;
    line-height:1.3;
    font-weight:850;
}


.m61-refpage-link{
    display:flex;
    align-items:center;

    margin-top:auto;

    color:#66758a;

    font-size:11px;
    font-weight:800;
}


.m61-refpage-link b{
    margin-left:5px;

    color:var(--m61-red);

    font-size:14px;

    transition:
        transform .18s ease;
}


.m61-refpage-card:hover
.m61-refpage-link b{
    transform:translate(2px,-2px);
}



/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width:1023px){

    .m61-refpage-hero{
        padding:
            42px 34px
            32px;
    }

    .m61-refpage-hero h1{
        font-size:35px;
    }

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

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:767px){

    .m61-refpage{
        padding-top:6px;
    }

    .m61-refpage-hero{
        padding:
            30px 20px
            24px;

        border-radius:16px;
    }

    .m61-refpage-hero h1{
        font-size:29px;
    }

    .m61-refpage-stats{
        grid-template-columns:1fr;
    }

    .m61-refpage-toolbar{
        display:block;
    }

    .m61-refpage-toolbar-copy{
        margin-bottom:13px;
    }

    .m61-refpage-filters{
        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:4px;
    }

    .m61-refpage-filters button{
        flex:0 0 auto;
    }

    .m61-refpage-grid{
        grid-template-columns:1fr;

        gap:15px;
    }

    /*
     * Mobilde hover yok.
     * Overlay'i zorla göstermiyoruz;
     * alt kısımda canlı site bağlantısı zaten belli.
     */
    .m61-reference-live,
    .m61-refpage-live{
        display:none;
    }

}
/* M61 REF IMAGE BADGE OFF */
.m61-refpage-thumb > .m61-refpage-badge{
    display:none !important;
}

/* =========================================================
   M61 HOMEPAGE REFERENCES CLEAN
   Kapak üstü badge + hover overlay kapalı
   ========================================================= */

.module-gallery-265 .m61-reference-badge,
.module-gallery-265 .m61-reference-live{
    display:none !important;
}

.module-gallery-265 .m61-reference-card:hover
.m61-reference-image img{
    filter:none !important;
}

/* =========================================================
   M61 REFERENCES HERO COMPACT
   ========================================================= */

/* 69 / Canlı / 61Medya istatistiklerini kaldır */
.m61-refpage-stats{
    display:none !important;
}

/* Hero'yu daha naif yap */
.m61-refpage-hero{
    min-height:0 !important;
    padding-top:38px !important;
    padding-bottom:38px !important;
}

/* Başlık biraz daha kompakt */
.m61-refpage-hero h1{
    margin-bottom:12px !important;
    max-width:760px !important;
}

/* Açıklama fazla yayılmasın */
.m61-refpage-hero p{
    max-width:760px !important;
    margin-bottom:20px !important;
}

/* Butonlarla alt taraf arasında gereksiz boşluk kalmasın */
.m61-refpage-actions{
    margin-bottom:0 !important;
}

/* Mobil */
@media (max-width:767px){

    .m61-refpage-hero{
        padding-top:26px !important;
        padding-bottom:26px !important;
    }

}