:root {
    --primary: #008F7A;
    --primary-dark: #006F60;
    --primary-light: #E7F5F2;

    --gold: #D6AD45;
    --gold-light: #F7EBCB;

    --background: #F7FAF9;
    --surface: #FFFFFF;

    --text: #175F58;
    --text-dark: #174B46;
    --text-muted: #718A86;

    --border: #DCE9E6;

    --audio-green: #238B68;

    --radius: 16px;

    --shadow:
        0 8px 24px rgba(22, 91, 83, 0.08);
}


/* =========================================================
   DASAR
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    line-height: 1.5;
}


button {
    font: inherit;
}


button:focus-visible {
    outline:
        3px solid
        rgba(214, 173, 69, 0.75);

    outline-offset: 3px;
}


/* =========================================================
   HEADER
========================================================= */

.app-header {
    background:
        var(--primary);

    color:
        #FFFFFF;

    border-bottom:
        4px solid
        var(--gold);

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.08);
}


.header-inner {
    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding:
        20px
        18px;
}


.brand {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


.brand-name {
    font-size:
        clamp(28px, 7vw, 42px);

    font-weight: 800;

    line-height: 1.1;
}


.brand-subtitle {
    margin-top: 5px;

    font-size:
        clamp(13px, 3vw, 17px);

    color:
        #E4F6F2;
}


.level-label {
    white-space: nowrap;

    font-size:
        clamp(18px, 4vw, 25px);

    font-weight: 700;
}


.level-label strong {
    color:
        #F3D77A;
}


/* =========================================================
   KONTEN
========================================================= */

.app-main {
    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding:
        24px
        18px
        40px;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-card {
    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-left:
        6px solid
        var(--gold);

    border-radius:
        var(--radius);

    padding:
        22px
        24px;

    box-shadow:
        var(--shadow);

    margin-bottom:
        28px;
}


.welcome-label {
    margin:
        0
        0
        4px;

    color:
        var(--primary);

    font-size:
        clamp(18px, 4vw, 24px);

    font-weight:
        600;
}


.welcome-card h1 {
    margin:
        0;

    color:
        var(--primary-dark);

    font-size:
        clamp(25px, 6vw, 34px);

    line-height:
        1.25;
}


.welcome-message {
    margin:
        12px
        0
        2px;

    color:
        var(--text-muted);

    font-size:
        clamp(16px, 3.5vw, 19px);
}


.welcome-focus {
    margin:
        4px
        0
        0;

    color:
        var(--text);

    font-size:
        14px;
}


/* =========================================================
   JUDUL BAGIAN
========================================================= */

.section-heading {
    margin-bottom:
        16px;
}


.section-heading h2 {
    margin:
        0;

    color:
        var(--text-dark);

    font-size:
        clamp(23px, 5vw, 30px);
}


.section-heading p {
    margin:
        5px
        0
        0;

    color:
        var(--text-muted);

    font-size:
        15px;
}


/* =========================================================
   DAFTAR TEMA
========================================================= */

.theme-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.theme-card {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        18px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    padding:
        16px
        18px;

    box-shadow:
        0 4px 14px
        rgba(22, 91, 83, 0.045);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.theme-card:hover {
    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow);
}


.theme-card.download-complete {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 2px
        rgba(0, 143, 122, 0.10),
        var(--shadow);
}


.theme-info {
    min-width:
        0;
}


.theme-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        28px;

    margin-bottom:
        4px;

    border-radius:
        8px;

    background:
        var(--primary-light);

    color:
        var(--primary-dark);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.04em;
}


.theme-title {
    margin:
        0;

    color:
        var(--text-dark);

    font-size:
        clamp(20px, 5vw, 27px);

    font-weight:
        700;
}


.theme-count {
    margin:
        3px
        0
        0;

    color:
        var(--text-muted);

    font-size:
        14px;
}


/* =========================================================
   AKSI TEMA
========================================================= */

.theme-action {
    min-width:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    justify-content:
        center;

    gap:
        7px;

    text-align:
        center;
}


.status-text {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.3;
}


.ready-status {
    color:
        var(--primary-dark);

    font-weight:
        700;
}


.not-available-status {
    color:
        var(--text-muted);
}


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

.action-button {
    width:
        58px;

    height:
        50px;

    align-self:
        center;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--primary);

    color:
        #FFFFFF;

    font-size:
        26px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.action-button:hover:not(:disabled) {
    background:
        var(--primary-dark);

    transform:
        translateY(-1px);
}


.action-button:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;
}


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

.open-theme-button {
    width:
        100%;

    border:
        0;

    border-radius:
        12px;

    padding:
        11px
        13px;

    background:
        var(--gold);

    color:
        #FFFFFF;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 3px 8px
        rgba(166, 125, 32, 0.18);

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.open-theme-button:hover:not(:disabled) {
    background:
        #B9912F;

    transform:
        translateY(-1px);
}


/* =========================================================
   HALAMAN DETAIL
========================================================= */

.back-button {
    border:
        0;

    background:
        transparent;

    color:
        var(--primary-dark);

    padding:
        4px
        0
        18px;

    font-weight:
        700;

    cursor:
        pointer;
}


.back-button:hover {
    color:
        var(--primary);
}


#detail-page .section-heading {
    background:
        var(--primary);

    color:
        #FFFFFF;

    border-radius:
        var(--radius);

    padding:
        17px
        18px;

    text-align:
        center;
}


#detail-page .section-heading h2 {
    color:
        #FFFFFF;
}


#detail-page .section-heading p {
    color:
        #E5F5F1;
}


/* =========================================================
   GRID AUDIO
========================================================= */

.audio-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        18px;

    padding:
        10px
        4px
        24px;
}


.audio-item {
    display:
        flex;

    justify-content:
        center;
}


.audio-button {
    width:
        100%;

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        0;

    border-radius:
        14px;

    background:
        transparent;

    cursor:
        pointer;

    transition:
        transform 0.16s ease,
        background 0.16s ease;
}


.audio-button:hover:not(:disabled) {
    background:
        var(--primary-light);

    transform:
        translateY(-2px);
}


.audio-button:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;
}


.audio-number {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--audio-green);

    color:
        #FFFFFF;

    font-size:
        23px;

    font-weight:
        800;
}


.audio-play-icon {
    width:
        0;

    height:
        0;

    border-top:
        12px solid
        transparent;

    border-bottom:
        12px solid
        transparent;

    border-left:
        20px solid
        var(--gold);
}


.audio-button.is-playing {
    background:
        var(--gold-light);
}


.audio-button.is-playing .audio-number {
    background:
        var(--primary);
}


/* =========================================================
   NOTIFIKASI AUDIO
========================================================= */

.audio-notice {
    background:
        var(--primary-light);

    border:
        1px solid
        #CBE7E1;

    border-radius:
        var(--radius);

    padding:
        15px
        17px;

    text-align:
        center;

    color:
        var(--primary-dark);

    font-size:
        14px;
}


/* =========================================================
   LOADING
========================================================= */

.loading-message {
    color:
        var(--text-muted);

    text-align:
        center;

    padding:
        20px;
}


/* =========================================================
   FOOTER
========================================================= */

.app-footer {
    padding:
        22px
        18px
        30px;

    text-align:
        center;

    color:
        var(--text-muted);

    font-size:
        13px;
}


.app-footer p {
    margin:
        0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 680px) {

    .app-main {
        padding:
            20px
            14px
            32px;
    }


    .theme-card {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .theme-action {
        width:
            100%;

        min-width:
            0;
    }


    .action-button {
        width:
            100%;

        height:
            48px;
    }


    .audio-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            12px;
    }

}


@media (max-width: 430px) {

    .header-inner {
        padding:
            17px
            14px;
    }


    .brand {
        align-items:
            flex-start;
    }


    .level-label {
        font-size:
            18px;
    }


    .welcome-card {
        padding:
            19px;
    }


    .audio-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            8px;
    }


    .audio-button {
        min-height:
            66px;
    }


    .audio-number {
        width:
            42px;

        height:
            42px;

        font-size:
            20px;
    }


    .audio-play-icon {
        border-top-width:
            10px;

        border-bottom-width:
            10px;

        border-left-width:
            16px;
    }

}