/* ==========================================================================
   1. Konfigurasi Root & Skema Warna Dark Mode
   ========================================================================== */
:root {
    /* Font Pairing */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lora', serif;

    /* Skema Warna Elegan (Off-Black & Off-White) */
    --color-background: #121212; /* Latar belakang utama, hitam pekat tapi tidak murni */
    --color-surface: #1E1E1E;    /* Warna permukaan seperti kartu, sedikit lebih terang */
    --color-primary: #BB86FC;    /* Warna aksen utama (ungu lembut) */
    --color-primary-variant: #3700B3; /* Varian warna aksen */
    --color-secondary: #03DAC6;  /* Warna aksen sekunder (teal) */
    --color-highlight-bg: rgba(187, 134, 252, 0.1); /* Latar belakang highlight (ungu transparan) */
    --color-highlight-border: rgba(187, 134, 252, 0.5);

    /* Warna Teks (Tidak terlalu kontras) */
    --color-text-high-emphasis: rgba(255, 255, 255, 0.87); /* Untuk judul dan teks penting */
    --color-text-medium-emphasis: rgba(255, 255, 255, 0.60);/* Untuk teks sekunder dan label */
    --color-text-disabled: rgba(255, 255, 255, 0.38); /* Untuk teks nonaktif */

    /* Warna Status */
    --color-error: #CF6679;
    --color-info-bg: rgba(3, 218, 198, 0.1);
    --color-info-text: #03DAC6;
    --color-warn-bg: rgba(251, 189, 5, 0.15);
    --color-warn-text: #fbbd05;

    /* Lainnya */
    --color-border: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   2. Reset Dasar & Tampilan Body
   ========================================================================== */
body {
    font-family: var(--font-body);
    font-weight: 400; /* Bobot font normal untuk Lora */
    line-height: 1.7; /* Sedikit lebih renggang untuk keterbacaan */
    background-color: var(--color-background);
    color: var(--color-text-medium-emphasis);
    margin: 0;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: 30px 40px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

/* ==========================================================================
   3. Tipografi
   ========================================================================== */
header h1, .markdown-part h1, .markdown-part h2, .markdown-part h3 {
    font-family: var(--font-heading);
    color: var(--color-text-high-emphasis);
    font-weight: 700;
}

header h1 {
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    font-style: italic;
}

.markdown-part {
    color: var(--color-text-high-emphasis);
}

.markdown-part p {
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}

.markdown-part a {
    color: var(--color-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-secondary);
    transition: color 0.3s, border-bottom 0.3s;
}

.markdown-part a:hover {
    color: var(--color-text-high-emphasis);
    border-bottom: 1px solid var(--color-text-high-emphasis);
}


/* ==========================================================================
   4. Kontrol & Tombol
   ========================================================================== */
header {
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.control-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--color-text-medium-emphasis);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pisahkan aturan untuk select agar lebih jelas */
select {
    padding: 12px 15px;
    font-size: 1rem;
    background-color: var(--color-surface); /* Gunakan warna permukaan yang konsisten */
    color: var(--color-text-high-emphasis);  /* Warna teks terang */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    /* Menambahkan beberapa properti untuk tampilan yang lebih baik di beberapa browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Tambahkan ikon panah kustom sebagai latar belakang */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BB86FC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* Kita tetap coba menata <option>, meskipun hasilnya bervariasi */
select option {
    background: var(--color-surface);
    color: var(--color-text-high-emphasis);
}


/* Aturan untuk tombol sekarang terpisah */
button#view-story-button {
    padding: 12px 15px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    background-color: var(--color-primary);
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

button#view-story-button {
    background-color: var(--color-primary);
    color: #000;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

button#view-story-button:not(:disabled):hover {
    background-color: var(--color-secondary);
}

button#view-story-button:disabled {
    background-color: rgba(187, 134, 252, 0.3);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

button#view-story-button:active {
    transform: scale(0.98);
}


/* ==========================================================================
   5. Player Audio & Status
   ========================================================================== */
#player-section {
    position: sticky;
    top: 0;
    background-color: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 30px;
    z-index: 10;
}

.audio-controls {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#now-playing-info {
    font-weight: bold;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-high-emphasis);
}

.audio-controls .buttons button {
    background: none;
    border: none;
    color: var(--color-text-medium-emphasis);
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.3s, transform 0.2s;
}

.audio-controls .buttons button:not(:disabled):hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

.audio-controls .buttons button:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

#status-message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid transparent;
}
#status-message.error { background-color: rgba(207, 102, 121, 0.15); color: var(--color-error); border-color: var(--color-error); }
#status-message.info { background-color: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-text); }


/* ==========================================================================
   6. Tampilan Cerita & Highlight
   ========================================================================== */
#story-display-container .placeholder {
    color: var(--color-text-medium-emphasis);
    text-align: center;
    padding: 50px 20px;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
}

.markdown-part {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color 0.5s, border-color 0.5s;
    scroll-margin-top: 150px; /* Offset agar tidak tertutup sticky player */
}

.markdown-part.now-playing-section {
    background-color: var(--color-highlight-bg);
    border-left: 4px solid var(--color-primary);
    padding-left: 11px; /* (15px - 4px) untuk menjaga alignment */
}

/* ==========================================================================
   7. Loading Indicator
   ========================================================================== */
#loading-indicator {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-text-medium-emphasis);
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--color-secondary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   8. Responsivitas untuk Mobile
   ========================================================================== */
@media (max-width: 600px) {
    body {
        padding: 0; /* Hapus padding body di mobile */
    }

    .container {
        padding-left: 15px;  /* Kurangi padding kiri */
        padding-right: 15px; /* Kurangi padding kanan */
        border-radius: 0;      /* Hapus radius agar menempel ke tepi */
        border-left: none;
        border-right: none;
    }

    header h1 {
        font-size: 2rem; /* Kecilkan sedikit font judul utama */
    }

    .markdown-part p {
        font-size: 1rem; /* Sedikit sesuaikan font isi */
    }

    #player-section {
        border-radius: 0; /* Hapus radius player juga */
    }
}


.story-illustration {
    display: block;        /* Agar bisa diatur margin-nya */
    width: 100%;           /* Lebar penuh sesuai kontainer */
    max-width: 100%;       /* Pastikan tidak meluber */
    height: auto;          /* Menjaga rasio aspek gambar */
    border-radius: 5px;   /* Sudut melengkung yang elegan */
    margin-bottom: 1.5rem; /* Jarak yang cukup ke judul utama di bawahnya */
    border: 1px solid var(--color-border); /* Border tipis agar terlihat menyatu */
}