.blog-frame-container{
    display:flex;
    align-items:stretch;
    gap:30px;
    background:rgba(15,23,42,.4);
    backdrop-filter:blur(12px);
    padding:24px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    max-width:950px;
    margin:30px auto;
    box-sizing:border-box;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    transition:transform .3s ease,border-color .3s ease;
}

.blog-frame-container:hover{
    transform:translateY(-4px);
    border-color:rgba(77,91,247,.3);
}

.blog-image-wrapper{
    flex:1;
    min-width:280px;
    max-width:400px;
    height:240px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

.blog-frame-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.blog-content-wrapper{
    flex:1.5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
}

.blog-meta-tag{
    align-self:flex-start;
    background:rgba(77,91,247,.15);
    color:#818cf8;
    padding:4px 10px;
    border-radius:6px;
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:12px;
}

.blog-frame-title{
    color:#fff;
    font-size:1.5rem;
    margin:0 0 10px;
    font-weight:700;
    line-height:1.3;
}

.blog-frame-text{
    color:#94a3b8;
    font-size:.95rem;
    line-height:1.6;
    margin:0 0 16px;
}


.acm-frame-link-wrapper{
    margin-top:20px;
    display:block;
}

.acm-frame-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#4d5bf7;
    color:#fff;
    text-decoration:none;
    padding:10px 22px;
    border-radius:8px;
    font-size:.9rem;
    font-weight:600;
}

.acm-frame-btn:hover{
    background:#ff6b35;
    transform:translateY(-2px);
}

.btn-arrow{
    transition:transform .2s ease;
}

.acm-frame-btn:hover .btn-arrow{
    transform:translateX(4px);
}

.acm-album-section{
    width:100%;
    padding:60px 0;
    overflow:hidden;
}

.album-title-container{
    text-align:center;
    margin-bottom:35px;
}

.marquee-wrapper{
    width:100%;
    overflow:hidden;
    display:flex;
    position:relative;
    padding:20px 0;
}

.marquee-track{
    display:flex;
    width:max-content;
    gap:20px;
    animation:scrollMarquee 25s linear infinite;
}

.marquee-item{
    overflow:hidden;
    border-radius:12px;
}


.album-title-container p{
    color:#94a3b8;
    font-size:1rem;
}


.marquee-item.landscape{
    width:320px;
    height:220px;
}

.marquee-item.portrait{
    width:220px;
    height:320px;
}

.marquee-item.square{
    width:260px;
    height:260px;
}

.marquee-item:hover{
    transform:translateY(-6px);
    transition:.3s;
}

.past-events-gallery{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2.7rem;
    color:#fff;
    margin-bottom:10px;
}

.section-title p{
    color:#94a3b8;
}

.title-underline{
    width:90px;
    height:4px;
    background:#4d5bf7;
    margin:15px auto 0;
    border-radius:10px;
}

.project-action-link{
    margin-top:15px;
}

/* ==========================================================================
   INFINITE GALERİ ALBÜMÜ CSS TASARIMI (Sonsuz Kayma Efekti)
   ========================================================================== */

.acm-album-section {
    width: 100%;
    padding: 60px 0;
    background: transparent;
    overflow: hidden; /* Taşmaları gizlemesi kritik kanka */
}

.album-title-container {
    text-align: center;
    margin-bottom: 35px;
    padding: 0 20px;
}

.album-title-container h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.album-title-container p {
    color: #64748b;
    font-size: 0.95rem;
}

/* Kaydırma Sahnesi Kapsayıcısı */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
    padding: 20px 0;
}

/* Fotoğrafların Dizildiği Ray */
.marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: scrollMarquee 25s linear infinite; /* 25 saniyede bir tam tur döner */
}

/* 🎯 MOUSE ÜZERİNE GELDİĞİNDE AKIŞI DURDURMA */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* Her Bir Fotoğraf Çerçevesi */
.marquee-item {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    background: #1e293b;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease;
    cursor: pointer;
}

/* 🎯 MOUSE ÜZERİNE GELDİĞİNDE BÜYÜME VE PARLAMA EFECTİ */
.marquee-item:hover {
    transform: scale(1.12) translateY(-5px) !important; /* Fotoğrafı öne doğru büyütür */
    z-index: 10;
    border-color: #4d5bf7; /* Kulüp mavisi çerçeve parlaması */
    box-shadow: 0 15px 35px rgba(77, 91, 247, 0.35);
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease;
}

/* İSTEDİĞİN FARKLI BOYUTLANDIRMA SEÇENEKLERİ (Kombinasyon) */
.marquee-item.landscape {
    width: 280px;
    height: 180px;
}

.marquee-item.portrait {
    width: 150px;
    height: 200px;
}

.marquee-item.square {
    width: 180px;
    height: 180px;
}
.what-is-acm-section{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.acm-isolated-card{
    display:flex;
    align-items:center;
    gap:50px;

    background:rgba(15,23,42,.45);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;

    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.acm-isolated-img-box{
    flex:0 0 280px;
}

.acm-isolated-img-box img{
    width:100%;
    display:block;
    border-radius:16px;
}

.acm-isolated-text-box{
    flex:1;
    text-align:left;
}

.acm-isolated-text-box h2{
    color:white;
    font-size:2.2rem;
    margin-bottom:20px;
}

.acm-isolated-text-box p{
    color:#cbd5e1;
    line-height:1.8;
    font-size:1rem;
}

.acm-isolated-btn-container{
    margin-top:25px;
}

.acm-isolated-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#4d5bf7;
    color:white;
    text-decoration:none;

    padding:12px 24px;
    border-radius:10px;

    font-weight:600;
    transition:.3s;
}

.acm-isolated-btn:hover{
    background:#ff6b35;
    transform:translateY(-2px);
}

.isolated-arrow{
    transition:.3s;
}

.acm-isolated-btn:hover .isolated-arrow{
    transform:translateX(4px);
}

/* --- Proje Aksiyon Butonları --- */

.project-action-link {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Birden fazla buton varsa aralarına boşluk ekler (Sorting Website'daki gibi) */
    margin-top: 15px;
}

.project-action-link a {
    display: inline-block;
    background-color: #4d5bf7; /* Senin belirlediğin mavi tonu */
    color: #ffffff !important; /* Yazı rengini beyaz yapıyoruz */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: 8px; /* Köşeleri hafif yuvarlatır */
    text-align: center;
    transition: all 0.3s ease; /* Yumuşak bir geçiş animasyonu */
    box-shadow: 0 4px 6px rgba(77, 91, 247, 0.2); /* Hafif, şık bir gölge */
    border: 2px solid transparent;
}

/* Fareyle butonun üzerine gelindiğinde (Hover) çalışacak efektler */
.project-action-link a:hover {
    background-color: #3542c8; /* Rengi biraz koyulaştırır */
    box-shadow: 0 6px 12px rgba(77, 91, 247, 0.35); /* Gölgeyi belirginleştirir */
    transform: translateY(-2px); /* Butonu hafifçe yukarı kaldırır */
}

/* Tıklama anındaki efekt */
.project-action-link a:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(77, 91, 247, 0.2);
}
/* Butonları yan yana getiren kapsayıcı */
.event-buttons {
    display: flex;
    flex-direction: row; /* Butonları yan yana dizer */
    gap: 300px;           /* Butonların arasındaki boşluk */
    margin-top: 20px;    /* Üstteki metinle olan mesafe */
    flex-wrap: wrap;     /* Mobil ekranlarda sığmazsa otomatik alt alta geçsinler */
}

/* Butonların genel genişlik ayarı (Opsiyonel) */
.event-buttons a {
    flex: 0 1 auto;      /* Butonların kendi içindeki yazı kadar yer kaplamasını sağlar */
    min-width: 160px;    /* Butonların çok küçük kalmasını önler */
    text-align: center;
}



#kanzi-skater{
    position:fixed;
    bottom:20px;
    left:-200px;
    z-index:9999;

    animation: skateRide 20s linear infinite;
}

#kanzi-skater img{
    width:140px;
    cursor:pointer;
}

@keyframes skateRide{
    from{
        left:110%;
    }

    to{
        left:-200px;
    }
}

.fall{
    animation:
        kanziFall 1.5s forwards !important;
}

@keyframes kanziFall{

    0%{
        transform:rotate(0deg);
    }

    40%{
        transform:rotate(90deg);
    }

    100%{
        transform:
            rotate(180deg)
            translateY(300px);
        opacity:0;
    }
}


/* Kaykaycı maymunun varsayılan hali */
#kanzi-skater img {
    transition: transform 6s ease-in-out; /* Düşüşün yumuşak olmasını sağlar */
    cursor: pointer; /* Tıklanabilir olduğunu belli eder */
}

/* Tıklandıktan sonra eklenecek düşme efekti */
.fall img {
    transform: rotate(90deg) translateY(50px); /* 90 derece yana yatar ve biraz aşağı düşer */
    opacity: 0; /* İstersen düşerken yavaşça görünmez de olabilir */
}



/* 🔄 Sonsuz Döngü Animasyon Tanımı */
@keyframes scrollMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0); /* Yarıya geldiğinde görünmezce başa sarar */
    }
}


@keyframes scrollMarquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@keyframes scrollMarquee{
    0%{transform:translate3d(0,0,0);}
    100%{transform:translate3d(-50%,0,0);}
}