/* =========================================================
   TOMBOL BACA SUARA MENGAMBANG
   ========================================================= */

.baca-suara-kontrol {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 99999;

    display: flex;
    align-items: center;
    gap: 6px;
}


/* =========================================================
   TOMBOL
   ========================================================= */

.baca-suara-tombol {
    border: none;
    outline: none;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 9px 13px;

    border-radius: 20px;

    font-size: 13px;
    line-height: 1;

    background: #f1f1f1;
    color: #333;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;
}


/* =========================================================
   AKTIF
   ========================================================= */

.baca-suara-tombol.aktif {
    background: #007bff;
    color: #fff;
}


/* Hover */

.baca-suara-tombol:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   STATUS
   ========================================================= */

.status-baca-suara {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 10px;

    border-radius: 20px;

    font-size: 11px;
    line-height: 1;

    background: #e8f5e9;
    color: #2e7d32;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);

    white-space: nowrap;
}


/* Titik */

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    display: inline-block;

    background: #43a047;
}


/* =========================================================
   SEDANG MEMBACA
   ========================================================= */

.status-membaca {
    background: #e3f2fd;
    color: #1565c0;
}

.status-membaca .status-dot {
    background: #2196f3;

    animation: indikator-suara 0.8s infinite alternate;
}


/* =========================================================
   BERHENTI / OFF
   ========================================================= */

.status-berhenti {
    background: #f1f1f1;
    color: #666;
}

.status-berhenti .status-dot {
    background: #999;
}


/* Animasi indikator */

@keyframes indikator-suara {

    from {
        opacity: 0.4;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1.2);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .baca-suara-kontrol {
        top: 10px;
        right: 10px;
    }

    .baca-suara-tombol {
        padding: 8px 10px;
    }

    .baca-suara-tombol span {
        display: none;
    }

    .status-baca-suara {
        padding: 7px 8px;
    }

}