/* ROOT */
#kpr-app {
    display: flex;
    flex-direction: column;
    gap: 25px;
    font-family: 'Segoe UI', sans-serif;
}

/* TOP (HARGA FULL WIDTH) */
.kpr-center {
    width: 48%;
}

.kpr-center input {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    border: 1px solid #ddd;
}

/* ROW */
.kpr-row {
    display: flex;
    gap: 40px;
}

/* LEFT GRID */
.kpr-left {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

/* RIGHT */
.kpr-right {
    width: 50%;
}

/* FIELD */
.field {
    display: flex;
    flex-direction: column;
}

.field.full {
    grid-column: span 2;
}


/* LABEL */
label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
	color:white;
}

/* INPUT */
input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

input:focus {
    border-color: #1e5fa8;
    outline: none;
}

/* BUTTON */
#btn-hitung {
    width: 100%;
    background: #1e5fa8;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

#btn-hitung:hover {
    background: #174c88;
}

/* RESULT */
.result-main {
    background: linear-gradient(135deg, #1e5fa8, #2b7ed7);
    color: white;
    padding: 25px;
    border-radius: 14px;
    margin-bottom: 20px;
}

.result-main h2 {
    font-size: 28px;
    margin-top: 10px;
}

/* MULTI TENOR */
#multi-tenor div {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
	color:white;
}


.hidden {
    display: none;
}
.show {
    display: block;
}

#tenor-label{
        background: black;
    padding: 10px;
    border-radius: 10px;
}
/* MOBILE */
@media (max-width: 768px) {
    .kpr-row {
        flex-direction: column;
    }

    .kpr-left,
    .kpr-right {
        width: 100%;
    }

    .kpr-left {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: span 1;
    }
}