/* =====================================================================
   Spanduk pop-up — berkas mandiri
   =====================================================================

   Dipakai DUA layout: dasbor staf dan situs publik. Situs publik tidak
   memuat gelora.css maupun tokens.css, jadi berkas ini sengaja ditulis
   TANPA var() sama sekali — nilainya harfiah.

   Itu bukan kemalasan. var() yang tidak terdefinisi membuat seluruh
   deklarasi yang memakainya gugur tanpa satu pun pesan galat, dan di
   proyek ini kesalahan itu sudah pernah terjadi: penanda pemenang di
   bagan turnamen hilang begitu saja di halaman publik. Warna di bawah
   harus dijaga selaras dengan tokens.css secara manual — itu harga yang
   dibayar, dan lebih murah daripada gaya yang diam-diam mati.
   ===================================================================== */

.gpop-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gpop-rail__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    background-color: #052E29;
    color: #FFFFFF;
    border: none;
    border-radius: 10px 0 0 10px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(11, 19, 15, .12);
}
.gpop-rail__tab:hover { background-color: #125E56; }
.gpop-rail__tab .icon { color: #36C5F0; }

.gpop-panel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1045;
    width: min(340px, calc(100vw - 36px));
    background-color: #FFFFFF;
    border: 1px solid #E3E8F0;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(11, 19, 15, .18);
    overflow: hidden;
    /* Tersembunyi lewat [hidden] di markup; animasi hanya saat tampil. */
    animation: gpop-masuk .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes gpop-masuk {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .gpop-panel { animation: none; }
}

.gpop-panel__media { display: block; width: 100%; height: auto; }
.gpop-panel__body { padding: 16px 18px; }
.gpop-panel__kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1D4ED8;
}
.gpop-panel__title { font-size: .95rem; font-weight: 700; color: #172033; margin: 5px 0 6px; }
.gpop-panel__text  { font-size: .8125rem; line-height: 1.55; color: #5B6475; margin: 0; }
.gpop-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #E3E8F0;
    background-color: #FBFCFC;
}
.gpop-panel__dismiss {
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    color: #5B6475;
    cursor: pointer;
    text-align: left;
}
.gpop-panel__dismiss:hover { color: #172033; text-decoration: underline; }
.gpop-panel__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(16, 29, 53, .55);
    color: #FFFFFF;
    cursor: pointer;
}
.gpop-panel__close:hover { background-color: rgba(16, 29, 53, .8); }