/* =====================================================
   ELBIS HOTEL - 30. YIL PREMIUM GLASS BADGE
   ===================================================== */

.anniversary-badge {
    position: absolute;
  

width:260px;
height:260px;
right:70px;
top:120px;

    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 30px;

    /* Premium cam efekti */
   background: rgba(255,255,255,.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);

    border:1px solid rgba(201,170,89,.55);

    box-shadow:
        0 20px 45px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.35);

    overflow: hidden;

    animation: anniversaryDrop 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}


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

.anniversary-title{

    position:absolute;

    top:28px;
    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    margin:0;
    padding:0;

    background:none;
    border:none;
    box-shadow:none;

    font-size:15px;
    font-weight:600;

    letter-spacing:3px;
    text-transform:uppercase;

    color:#D8C48B;
    

    text-shadow:
        0 1px 2px rgba(0,0,0,.35),
        0 0 12px rgba(216,196,139,.18);

    z-index:2;
}



/* -----------------------------------------------------
   LOGO
------------------------------------------------------ */

.anniversary-badge img{

    width:195px;

    height:auto;

    position:relative;

    z-index:2;

    display:block;

    background:none;

    filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));

}





/* -----------------------------------------------------
   ANIMASYON
------------------------------------------------------ */

@keyframes anniversaryDrop{

    0%{

        opacity:0;

        transform:translateY(-180px) scale(.82);

    }

    65%{

        opacity:1;

        transform:translateY(18px) scale(1.02);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


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

@media (max-width:768px){

.anniversary-badge{

    position:absolute;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:115px;

    height:115px;

    padding:12px;

    border-radius:22px;

    z-index:9999;

}

.anniversary-badge img{

    width:100%;
    height:auto;

}

}

@media (max-width:576px){

    .anniversary-badge{

        width:115px;
        height:115px;

        top:105px;
        right:10px;

        border-radius:18px;

    }

    .anniversary-badge img{

        width:86px;

    }

}


/* ==========================================================
   MOBILE 30. YIL BADGE
   ========================================================== */

.mobile-anniversary{
    display:none;
}

@media only screen and (max-width:991px){

.mobile-anniversary{

    display:block;

    position:absolute;

    left:50%;
    top:10px;              /* Header'ın hemen altı */

    transform:translateX(-50%);

    width:92px;
    padding:10px;

    border-radius:20px;

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,215,120,.45);

    box-shadow:
        0 10px 28px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.35);

    z-index:9999;
    
     animation:mobileBadge .6s ease .2s both;
}

.mobile-anniversary img{

    width:100%;
    display:block;
}

}

@keyframes mobileBadge{

    from{
        opacity:0;
        transform:translateX(-50%) scale(.88);
    }

    to{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

/* ============================
   MOBİLDE DESKTOP BADGE'İ GİZLE
   ============================ */

@media only screen and (max-width: 991px){

    .anniversary-badge{
        display:none !important;
    }

}

@keyframes fadeBadge{

    from{
        opacity:0;
        transform:translate(-50%,-20px);
    }

    to{
        opacity:1;
        transform:translate(-50%,0);
    }

}