/* =========================
   BASE STYLE (Mobile First)
========================= */

.announcement-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    margin-bottom:16px;
    border-radius:8px;
    font-weight:600;
    font-size:13px;
    max-width:fit-content;
    transition:transform .25s ease;
}

.announcement-icon{
    font-size:1.2em;
    line-height:1;
    min-width:22px;
    text-align:center;
}

.announcement-text{
    font-size:1em;
}

/* COLOR VARIANTS */
.agenda-badge{
    background:#e3f2fd;
    color:#1565c0;
    border-left:4px solid #2196f3;
}

.berita-badge{
    background:#e8f5e9;
    color:#2e7d32;
    border-left:4px solid #4caf50;
}

.pengumuman-badge{
    background:#fff3e0;
    color:#ef6c00;
    border-left:4px solid #ff9800;
}

.announcement-badge:hover{
    transform:translateY(-2px);
}

/* =========================
   SMALL PHONE ≤360px
========================= */
@media (max-width:360px){

.announcement-badge{
    font-size:12px;
    padding:7px 10px;
    gap:6px;
}

.announcement-icon{
    font-size:1.15em;
}

}

/* =========================
   PHONE ≤480px
========================= */
@media (min-width:361px) and (max-width:480px){

.announcement-badge{
    font-size:13px;
}

}

/* =========================
   LARGE PHONE ≤600px
========================= */
@media (min-width:481px) and (max-width:600px){

.announcement-badge{
    font-size:14px;
    padding:9px 14px;
}

}

/* =========================
   TABLET PORTRAIT ≤768px
========================= */
@media (min-width:601px) and (max-width:768px){

.announcement-badge{
    font-size:14.5px;
    padding:10px 15px;
}

.announcement-icon{
    font-size:1.25em;
}

}

/* =========================
   TABLET LANDSCAPE ≤1024px
========================= */
@media (min-width:769px) and (max-width:1024px){

.announcement-badge{
    font-size:15px;
}

}

/* =========================
   LAPTOP ≤1280px
========================= */
@media (min-width:1025px) and (max-width:1280px){

.announcement-badge{
    font-size:15.5px;
    padding:10px 16px;
}

}

/* =========================
   DESKTOP ≤1440px
========================= */
@media (min-width:1281px) and (max-width:1440px){

.announcement-badge{
    font-size:16px;
}

}

/* =========================
   LARGE DESKTOP ≤1920px
========================= */
@media (min-width:1441px) and (max-width:1920px){

.announcement-badge{
    font-size:17px;
}

}

/* =========================
   ULTRA WIDE ≥1921px
========================= */
@media (min-width:1921px){

.announcement-badge{
    font-size:18px;
    padding:12px 20px;
}

.announcement-icon{
    font-size:1.4em;
}

}