/* ==========================================================================
   Pemutar "Dengarkan artikel ini".
   Memakai token warna tema agar menyatu dengan kartu artikel, termasuk
   dark mode. Tidak ada ketergantungan pustaka pemutar pihak ketiga.
   ========================================================================== */

.atts-player {
    --atts-aksen: var(--pn-red-darker, #7a1113);
    --atts-teks: var(--theme-text, #1f2937);
    --atts-lembut: rgba(0, 0, 0, 0.55);
    --atts-garis: rgba(0, 0, 0, 0.12);
    --atts-bg: rgba(0, 0, 0, 0.02);
    --atts-isi: #0f172a;
    --atts-kosong: #e8e9ee;

    border: 1px solid var(--atts-garis);
    border-radius: 12px;
    background: var(--atts-bg);
    padding: 14px 16px;
    margin: 0 0 1.25rem;
    color: var(--atts-teks);
}

/* --- Kepala --------------------------------------------------------------- */

.atts-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.atts-head-icon {
    display: inline-flex;
    color: var(--atts-aksen);
}

.atts-head-text {
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Satu baris kendali --------------------------------------------------- */
/* Urutan: putar, waktu, bar, durasi, mundur 10, maju 10, kecepatan. */

.atts-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.atts-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 40px: masih nyaman disentuh di layar kecil tanpa mendesak bar. */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--atts-garis);
    border-radius: 50%;
    background: #fff;
    color: var(--atts-teks);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.atts-play {
    width: 46px;
    height: 46px;
    border-color: transparent;
    background: var(--atts-aksen);
    color: #fff;
}

.atts-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.atts-play:hover:not(:disabled) { background: var(--atts-aksen); opacity: 0.9; }
.atts-btn:active:not(:disabled) { transform: translateY(1px); }

.atts-btn:focus-visible {
    outline: 2px solid var(--atts-aksen);
    outline-offset: 2px;
}

.atts-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pergantian ikon putar/jeda. Memakai kelas pada root, bukan atribut [hidden]
   pada <svg> yang kalah oleh aturan display dari kerangka kerja CSS. */
.atts-ico-pause { display: none; }
.atts-player.is-playing .atts-ico-play { display: none; }
.atts-player.is-playing .atts-ico-pause { display: inline-block; }

.atts-btn svg text {
    font-family: inherit;
    letter-spacing: -0.3px;
}

/* Lebar dikunci: tanpa ini panjang bar berubah-ubah setiap angka waktu
   berganti jumlah digit. */
.atts-time {
    flex: 0 0 44px;
    width: 44px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--atts-lembut);
    text-align: center;
}

/* Bar mengambil seluruh sisa ruang; min-width 0 mencegahnya mendorong
   elemen lain keluar baris saat layar sempit.

   Bagian yang sudah diputar diwarnai lewat --atts-persen yang diperbarui JS.
   accent-color tidak dipakai karena hasilnya berbeda-beda antar peramban dan
   tidak bisa dibuat membulat. */
.atts-seek {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;

    /* Gradien dipasang pada elemen input, bukan pada pseudo-track: cara ini
       yang konsisten di Chrome, Safari, dan Firefox sekaligus. Titik potongnya
       dikirim JS lewat --atts-persen. */
    background: linear-gradient(
        to right,
        var(--atts-isi) 0%,
        var(--atts-isi) var(--atts-persen, 0%),
        var(--atts-kosong) var(--atts-persen, 0%),
        var(--atts-kosong) 100%
    );
}

.atts-seek:focus-visible {
    outline: 2px solid var(--atts-aksen);
    outline-offset: 4px;
}

/* Track bawaan dikosongkan agar gradien di atas yang terlihat. */
.atts-seek::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: transparent;
    border: none;
}

.atts-seek::-moz-range-track,
.atts-seek::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: transparent;
    border: none;
}

/* Thumb tak terlihat mengikuti acuan desain, tetapi ukurannya dipertahankan
   agar tetap nyaman diseret; dimunculkan lagi saat fokus papan ketik. */
.atts-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -3px;
    border: none;
    border-radius: 50%;
    background: transparent;
}

.atts-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: transparent;
}

.atts-seek:focus-visible::-webkit-slider-thumb,
.atts-seek:focus-visible::-moz-range-thumb {
    background: var(--atts-isi);
    box-shadow: 0 0 0 2px #fff;
}

/* --- Kaki ----------------------------------------------------------------- */

/* --- Kelompok kendali (mundur | maju | kecepatan) ------------------------- */
/* Ketiganya satu kesatuan fungsi, jadi dibungkus sebagai segmented control:
   satu bingkai dengan pemisah tipis, bukan tiga tombol yang berdiri sendiri. */

.atts-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 34px;
    border: 1px solid var(--atts-garis);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

/* Anak-anaknya kehilangan bingkai sendiri agar menyatu dalam satu pil. */
.atts-group .atts-btn,
.atts-group .atts-speed {
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
}

.atts-group .atts-btn {
    flex: 0 0 40px;
    width: 40px;
}

.atts-group .atts-speed {
    flex: 0 0 72px;
    width: 72px;
}

/* Pemisah antar bagian. */
.atts-group > * + * {
    border-left: 1px solid var(--atts-garis);
}

.atts-group .atts-btn:hover:not(:disabled),
.atts-group .atts-speed:hover {
    background: rgba(0, 0, 0, 0.05);
}

.atts-group .atts-btn:focus-visible,
.atts-group .atts-speed:focus-visible {
    outline: 2px solid var(--atts-aksen);
    outline-offset: -2px;
}

/* Kecepatan berupa satu tombol yang berputar antar nilai; lebarnya dipatok
   agar baris tidak bergeser saat labelnya berganti (1x -> 1,25x -> 0,75x). */
.atts-speed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Lebar dipatok, bukan min-width: label "0,75x" lebih lebar daripada "1x",
       sehingga tombol ikut melar dan menggeser bar setiap kali diklik. */
    flex: 0 0 80px;
    width: 80px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--atts-garis);
    border-radius: 999px;
    background: #fff;
    color: var(--atts-teks);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.atts-speed:hover { background: rgba(0, 0, 0, 0.05); }

.atts-speed svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.atts-speed:focus-visible {
    outline: 2px solid var(--atts-aksen);
    outline-offset: 2px;
}

.atts-error {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #b02a37;
}

/* --- Layar kecil ---------------------------------------------------------- */

@media (max-width: 575.98px) {
    .atts-player { padding: 12px; }
    /* Tujuh elemen dalam satu baris membuat bar tergencet di layar sempit.
       Semua kendali dikecilkan dan durasi total dilepas supaya bar tetap
       mendapat ruang yang berarti; waktu berjalan tetap ditampilkan. */
    .atts-row { gap: 4px; }

    .atts-btn { width: 32px; height: 32px; }
    .atts-play { width: 36px; height: 36px; }

    .atts-group { height: 30px; }
    .atts-group .atts-btn { flex: 0 0 34px; width: 34px; height: 100%; }
    .atts-group .atts-speed { flex: 0 0 62px; width: 62px; height: 100%; }

    .atts-btn svg { width: 18px; height: 18px; }
    .atts-play svg { width: 16px; height: 16px; }

    .atts-time { font-size: 0.68rem; }
    .atts-speed { flex: 0 0 68px; width: 68px; height: 28px; padding: 0 5px; gap: 3px; font-size: 0.68rem; }
    .atts-speed svg { width: 13px; height: 13px; }

    /* Jaminan lebar minimum bar, sekaligus tetap boleh melar bila ada ruang. */
    .atts-seek { flex: 1 1 70px; }

    .atts-remain { display: none; }
}

/* --- Dark mode ------------------------------------------------------------ */

body.theme-dark .atts-player {
    --atts-lembut: rgba(255, 255, 255, 0.6);
    --atts-garis: rgba(255, 255, 255, 0.16);
    --atts-bg: rgba(255, 255, 255, 0.04);
    --atts-teks: var(--theme-text, #e5e7eb);
    --atts-isi: #f3f4f6;
    --atts-kosong: rgba(255, 255, 255, 0.18);
}

body.theme-dark .atts-btn,
body.theme-dark .atts-speed {
    background: var(--theme-card-bg, #1f2937);
    color: var(--theme-text, #e5e7eb);
}

body.theme-dark .atts-play {
    background: var(--atts-aksen);
    color: #fff;
}

/* --- Aksesibilitas -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .atts-btn { transition: none; }
}