/* style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

:root {
    /* IMPLEMENTASI FLAT UI PURPLE THEME */
    --purple-bg: #9b59b6;       /* Amethyst (Ungu Utama) */
    --purple-dark: #8e44ad;     /* Wisteria (Ungu Tua) */
    --midnight: #2c3e50;        /* Midnight Blue */
    --wet-asphalt: #34495e;     /* Wet Asphalt */
    --emerald: #2ecc71;         /* Emerald Green */
    --nephritis: #27ae60;       /* Nephritis Green */
    --alizarin: #e74c3c;        /* Alizarin Red */
    --pomegranate: #c0392b;     /* Pomegranate Red */
    --clouds: #ecf0f1;          /* Clouds Putih Lembut */
    --silver: #bdc3c7;          /* Silver */
    --asbestos: #7f8c8d;        /* Asbestos Abu-abu */
    --border-color: #e2e8f0;    /* Warna Batas Garis Ringan */
    --text-dark: #2c3e50;
    --text-light: #ffffff;
    --orange:#FF5E08;
}

body {
    background-color: var(--purple-bg);
}


/* ==================================================================
   GLOBAL BUTTON COMPONENT FOUNDATION (PLUS JAKARTA SANS)
   ================================================================== */

/* Fondasi standar untuk seluruh elemen button di dalam aplikasi */
button, .btn-global {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    padding: 14px 45px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    background-color: #ffffff;
    color: var(--midnight);
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease, 
                box-shadow 0.2s ease, 
                transform 0.1s ease, 
                opacity 0.2s ease;
}

/* Efek feedback taktil/fisik saat tombol ditekan (Click Effect) */
button:active, .btn-global:active {
    transform: scale(0.98) translateY(0) !important;
}

/* Kondisi mati / disabled global */
button:disabled, .btn-global:disabled {
    background-color: var(--silver) !important;
    color: var(--asbestos) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

button:disabled i, .btn-global:disabled i {
    color: var(--asbestos) !important;
}

/* Ukuran standar ikon di dalam tombol global */
button i, .btn-global i {
    font-size: 22px !important;
    display: inline-block;
    vertical-align: middle;
    transition: color 0.2s ease;
}


/* ==================================================================
   MODULAR VARIANT COLOR VIA ATTRIBUTE SELECTORS (3 WARNA UTAMA)
   ================================================================== */

/* 1. VARIANT ORANYE (orange) -> Simpan & Mulai Kembali */
button[orange], .btn-global[orange] {
    background-color: #FF5E08 !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 15px rgba(255, 94, 8, 0.3);
}
button[orange]:hover, .btn-global[orange]:hover {
    background-color: #e04f00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 94, 8, 0.45);
}
button[orange] i, .btn-global[orange] i { color: var(--text-light) !important; }

/* 2. VARIANT BIRU TUA (blue) -> Start / Stop */
button[blue], .btn-global[blue] {
    background-color: #310880 !important;
    color: var(--text-light) !important;
    box-shadow: 0 4px 15px rgba(49, 8, 128, 0.3);
}
button[blue]:hover, .btn-global[blue]:hover {
    background-color: #240561 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(49, 8, 128, 0.4);
}
button[blue] i, .btn-global[blue] i { color: var(--text-light) !important; }

/* 3. VARIANT PUTIH (white) -> Ulangi */
button[white], .btn-global[white] {
    background-color: #ffffff !important;
    color: #310880 !important;
    border: 1px solid rgba(49, 8, 128, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
button[white]:hover, .btn-global[white]:hover {
    background-color: var(--clouds) !important;
    color: #240561 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
button[white] i, .btn-global[white] i { color: #310880 !important; }
button[white]:hover i, .btn-global[white]:hover i { color: #240561 !important; }


/* ==================================================================
   MODAL INTERFACES FOUNDATION
   ================================================================== */
.modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    display: flex; 
    justify-content: center; 
    align-items: center;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease; 
    z-index: 2000;
}

.modal.show { 
    opacity: 1; 
    pointer-events: auto; 
}

.modal-content { 
    background: #ffffff; 
    padding: 30px; 
    border-radius: 16px; 
    width: 380px; 
    text-align: center; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}