:root {
    --bg: #fef9f4;
    --border: #d8bfa2;
    --text: #5c4b3b;
    --accent: #a1866f;
    --accent-dark: #6b4e37;
    --gxgy: #fff6ec;
    --mag: #fff1e6;
    --dir: #fcefe0;
    --thresh: #f9e6cf;
    --highlight: #ffcb8e;
}

h4 {
    color: var(--accent-dark);
    margin-top: 30px;
    font-weight: bold;
}

.matrix-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-title {
    font-weight: bold;
    color: var(--accent-dark);
    /* margin-bottom: 1px; */
}

.matrix-table {
    border-collapse: collapse;
}

.matrix-table td {
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    background: white;
    color: var(--text);
    font-weight: bold;
}

.matrix-gxgy .matrix-table td {
    background-color: var(--gxgy);
}

.matrix-mag .matrix-table td {
    background-color: var(--mag);
}

.matrix-dir .matrix-table td {
    background-color: var(--dir);
}

.matrix-thresh .matrix-table td {
    background-color: var(--thresh);
}

.highlight {
    background-color: var(--highlight) !important;
}

.arrow {
    display: inline-block;
    transform-origin: center center;
    font-size: 20px;
}

.control-panel input,
.control-panel button {
    padding: 8px 14px;
    font-size: 14px;
    margin: 5px;
}

.log-box {
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px;
    color: var(--text);
    font-size: 16px;
    margin-top: 10px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* Kotak pembungkus utama */
.kotak {
    margin-bottom: 40px;
    padding: 15px;
    border-radius: 8px;
    background: #fffefc;
    display: flex;
    flex-direction: column;
    /* align-items: center;   */
    text-align: center;
}

/* Baris matrix */
.matrix-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center; /* Tengah-kan semua matrix-section */
}

/* Panel kontrol tombol */
.control-panel {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Tengah-kan tombol */
    gap: 10px; /* Spasi antar tombol */
}

/* CSS untuk Tombol */
.control-panel button {
    padding: 8px 14px;
    font-size: 14px;
    margin: 5px;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
}

/* Tombol Mulai Hitung */
.control-panel button#start {
    background-color: var(--accent);
    color: white;
}

.control-panel button#start:hover {
    background-color: var(--accent-dark);
}

/* Tombol Lanjut */
/* Tombol Next - Biru Soft */
.control-panel button#next {
    background-color: #a3c9f5; /* Soft blue */
    color: black;
}

.control-panel button#next:hover {
    background-color: #8ab8f0; /* Slightly deeper soft blue */
}

/* Tombol Autoplay - Hijau Soft */
.control-panel button#autoplay {
    background-color: #b6e3b6; /* Soft green */
    color: #2d3e2d;
}

.control-panel button#autoplay:hover {
    background-color: #a0d5a0; /* Slightly deeper soft green */
}

/* Tombol Pause - Merah Soft */
.control-panel button#pause {
    background-color: #f5b3b3; /* Soft red */
    color: #3f2d2d;
}

.control-panel button#pause:hover {
    background-color: #e99d9d; /* Slightly deeper soft red */
}

/* Tambahan Tombol Misal: Reset - Kuning Soft */
.control-panel button#reset {
    background-color: #fce8b3; /* Soft yellow */
    color: #4e442d;
}

.control-panel button#reset:hover {
    background-color: #f4d890; /* Slightly deeper soft yellow */
}