/* giscus.css */

/* --- Styling untuk Tombol Scroll ke Atas (Ditingkatkan) --- */
#back-to-top {
    /* Posisi */
    position: fixed;
    bottom: 30px; /* Sedikit lebih tinggi dari sebelumnya */
    right: 30px; /* Sedikit menjauh dari tepi */

    /* Tampilan Tombol DITINGKATKAN */
    background-color: var(--link-color, #0077aa);
    color: white;
    border: none;
    border-radius: 50%;

    /* UKURAN DITINGKATKAN */
    width: 50px; /* Dari 45px menjadi 50px */
    height: 50px; /* Dari 45px menjadi 50px */
    font-size: 24px; /* Dari 20px menjadi 24px (memperbesar ikon) */

    cursor: pointer;

    /* Ikon: Tetap gunakan Flexbox untuk penempatan di tengah */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Efek Visual */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35); /* Shadow yang lebih kuat */
    opacity: 0;
    transition:
        opacity 0.3s,
        transform 0.3s;
    transform: scale(0.9); /* Sedikit lebih kecil saat tidak aktif */
    visibility: hidden;
    z-index: 1000;
}

/* Tampilkan tombol saat class 'show' ditambahkan */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Ukuran normal saat aktif */
}

/* Efek Hover */
#back-to-top:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* Shadow yang lebih dramatis saat hover */
    background-color: var(--link-color-dark, #005580);
}

/* ------------------------------------------------ */
/* PEMBERSIHAN DAN PEMBATASAN LEBAR GISCUS WRAPPER */
/* ------------------------------------------------ */
#giscus-wrapper {
    /* Tetap pertahankan lebar dan posisi */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

    /* Atur jarak atas/bawah agar pemisah memiliki ruang */
    margin-top: 4rem; /* Memberi ruang besar di atas */
    margin-bottom: 2em;

    position: relative;
}

/* ------------------------------------------------ */
/* STYLE PEMISAH BARU (Garis Jelas di Atas Teks) */
/* ------------------------------------------------ */

#giscus-wrapper::before {
    content: "Reaksi dan Diskusi"; /* Label yang jelas */
    display: block;
    text-align: center;

    /* Gaya Teks */
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.1em; /* Jarak antar huruf */
    color: var(--link-color, #0077aa); /* Warna kontras, seperti link mdBook */

    /* Garis Penebal di Atas Teks */
    border-top: 3px solid var(--link-color, #0077aa);
    width: 200px; /* Lebar garis hanya 100px */

    /* Penempatan Garis dan Teks */
    padding-top: 1.5rem; /* Jarak antara garis dan teks */
    padding-bottom: 1rem;
    margin: 0 auto; /* Tengah */
}

/* ------------------------------------------------ */
/* STYLE UNTUK MODE GELAP */
/* ------------------------------------------------ */
/* Penyesuaian warna untuk Mode Gelap */
.coal #back-to-top,
.navy #back-to-top,
.rust #back-to-top,
.dark #back-to-top {
    background-color: var(--link-color-dark, #80cfff);
    color: #333;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.coal #back-to-top:hover,
.navy #back-to-top:hover,
.rust #back-to-top:hover,
.dark #back-to-top:hover {
    background-color: var(--link-color-dark, #a0dfff);
}