/* Reset CSS untuk memastikan layout konsisten di berbagai browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pengaturan background dan font */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f6f9;
    color: #333;
    padding: 0 20px;
}


/* Header Section */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;
}


/* Card Layout */
.card-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.card {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 22%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    margin-bottom: 30px;
}

.card:hover {
    background-color: #3498db;
    color: rgb(0, 0, 0);
    transform: translateY(-5px);
}

.card i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #3498db;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.card p {
    font-size: 1rem;
    margin-bottom: 15px;
}

header h1 {
    font-size: 3.5rem;
    color: #3498db; /* Warna biru yang sesuai */
    margin-right: 20px;
    font-family: 'Roboto', sans-serif; /* Font modern */
    font-weight: 600;
}

header img {
    width: 150px; /* Ukuran gambar yang pas */
    height: auto;
}

/* Textarea and select for prediction */
textarea {
    width: 100%;
    height: 150px;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 30px;
}

/* Form Styling */
.predict-form {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Button Styling */
button {
    width: 100%;
    padding: 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #2980b9;
}

/* Styling untuk kolom hasil prediksi */
.prediction-result {
    margin-top: 30px;
    text-align: center;
}

.result-box {
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 1.2rem;
    color: #3498db;
    animation: fadeIn 1s ease-in-out;
}

/* Animasi untuk hasil prediksi */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Gambar untuk prediksi */
.predict-image {
    width: 450px; /* Ukuran gambar lebih besar */
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Responsif Design (Mobile-friendly) */
@media (max-width: 768px) {
    .container {
        margin-left: 0;
        width: 100%;
    }

    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%; /* Membuat kartu lebih besar pada perangkat kecil */
    }

    /* Untuk ukuran gambar di perangkat kecil */
    .predict-image {
        width: 60%;
    }
}
/* Atur container untuk prediksi agar tidak mengubah tata letak keseluruhan */
.predict-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Gambar ilustrasi prediksi */
.predict-image {
    width: 100%;
    max-width: 500px; /* Maksimal ukuran gambar */
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Form prediksi */
.predict-form {
    width: 800px;
    max-width: auto; /* Batasi lebar form */
    margin-top: 30px;
}

/* Container untuk prediksi */
.predict-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px; /* Memberikan ruang di bawah form */
    margin-right: 250px;
}

/* Styling untuk hasil prediksi */
.prediction-result {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Memberikan ruang di atas hasil prediksi */
}

.result-box {
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 1.2rem;
    color: #3498db;
    width: 80%; /* Membuat kotak hasil prediksi tidak terlalu besar */
    text-align: center; /* Membuat teks di dalamnya berada di tengah */
}

/* Gambar untuk prediksi */
.predict-image {
    width: 400px; /* Ukuran gambar sesuai */
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Header section */
header {
    text-align: center;
    margin-bottom: 40px;
}

header h1 {
    font-size: 2.5rem;
    color: #3498db;
}

/* Card for accuracy results */
.accuracy-container {
    display: flex;
    justify-content: center;  /* Center cards horizontally */
    gap: 30px;
    margin: 0 auto 50px;  /* Center the container and add bottom margin */
    width: 850px;  /* Fixed width for larger screens */
    flex-wrap: wrap;  /* Allow the cards to wrap on smaller screens */
}

/* Card style */
.accuracy-card {
    background-color: #f4f6f9;
    padding: 15px;  /* Reduced padding */
    border-radius: 10px;
    width: 250px;  /* Reduced card width */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Smaller shadow for a less heavy look */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Card hover effect */
.accuracy-card:hover {
    transform: translateY(-5px);  /* Slightly smaller hover effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);  /* Slightly smaller shadow on hover */
}

/* Title styling inside cards */
.accuracy-card h3 {
    font-size: 1.4rem;  /* Slightly smaller title */
    color: #3498db;
    margin-bottom: 10px;  /* Reduced space between title and content */
}

/* Description styling inside cards */
.accuracy-card p {
    font-size: 1.1rem;  /* Reduced font size for description */
    font-weight: bold;
    color: #2ecc71;  /* Green for positive accuracy */
    margin-bottom: 15px;  /* Add space after the paragraph */
}

/* Adjusting the layout for smaller screens */
@media (max-width: 768px) {
    .accuracy-container {
        flex-direction: column;  /* Stack cards vertically on smaller screens */
        align-items: center;  /* Center align the cards */
    }

    .accuracy-card {
        width: 90%;  /* Take up most of the screen on smaller devices */
    }
}

/* Footer styling */
footer {
    text-align: center;
    margin-top: 50px;
    font-size: 0.9rem;
    color: #777;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f2f6fc;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1100px;
    margin: 50px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

header {
    text-align: center;
    margin-bottom: 40px;
}

header h1 {
    font-size: 2.6rem;
    color: #2c3e50;
    font-weight: 700;
}

.header-container {
    display: flex;                  /* Use flexbox for alignment */
    flex-direction: column;        /* Stack header items vertically */
    margin-bottom: 20px;          /* Space below the header */
}

.back-button {
    font-size: 1.5rem;             /* Font size */
    color: #3498db;                /* Color */
    display: inline-flex;          /* Inline flex for icon and text alignment */
    align-items: center;           /* Center items vertically */
    text-decoration: none;         /* No underline */
    margin: 20px 0;               /* Vertical margin */
    margin-top: auto;
    margin-right: 1450px;
    padding: 8px 16px;            /* Add padding for button effect */
    border: 1px solid #3498db;    /* Border for button */
    border-radius: 5px;           /* Rounded corners */
    background-color: rgba(52, 152, 219, 0.1); /* Light background */
    transition: background-color 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect */
.back-button:hover {
    background-color: rgba(52, 152, 219, 0.2); /* Darker on hover */
}

/* Icon styling */
.back-button i {
    margin-right: 8px;            /* Space between icon and text */
}


/*Akurasi */

.accuracy-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.accuracy-card {
    background: linear-gradient(135deg, #3498db, #8e44ad);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #fff;
    width: 48%;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.accuracy-card:hover {
    transform: translateY(-5px);
}

.accuracy-card h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.accuracy-card p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.accuracy-card .accuracy-value {
    font-size: 2rem;
    font-weight: 700;
}

.footer {
    text-align: center;
    margin-top: 50px;
    font-size: 1rem;
    color: #777;
}