body {
  font-family: 'Poppins', sans-serif;
  /* Your Gradient */
  background: linear-gradient(135deg, #ffd98a, #FF8585);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.login-container {
  text-align: center;
  position: relative;
  /* Centers the container nicely */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin-bottom: -45px; /* Pulls it into the card */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
}

.logo img {
  width: 90%; /* Adjust if your icon needs more space */
  border-radius: 50%;
}

.card-outer {
  background: #e7e7e7;
  border-radius: 17px;
  /* Updated width to fit 425px inputs + padding */
  width: 465px; 
  padding: 55px 20px 20px 20px; /* Top padding allows space for logo */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.card-inner {
  background: #fff;
  border-radius: 17px;
  padding: 30px 20px;
  text-align: left;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  font-size: 18px; /* Adjusted slightly for balance, was 24px */
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

input {
  font-size: 16px;
  height: 42px; /* Fixed Height */
  padding: 0 15px;
  border: 1px solid #828282;
  border-radius: 17px;
  outline: none;
  width: 100%; /* Fills the container */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

input:focus {
  border-color: #f0b400;
  border-width: 2px;
}

.password-field {
  position: relative;
  width: 100%;
}

.password-field input {
  padding-right: 45px; /* Space for the eye icon */
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.forgot {
  font-size: 14px;
  margin: 5px 0;
  color: #0000ee;
  text-decoration: none;
  text-align: right;
  display: block;
}

.forgot:hover {
  text-decoration: underline;
}

/* BUTTONS */

.btn-login {
  background: #ffca00;
  border: 1px solid #C78910;
  font-size: 18px;
  height: 42px;
  border-radius: 17px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  width: 100%;
}

.btn-login:hover {
  background: #e6b800;
}

/* DIVIDER */
.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #828282;
    font-size: 12px;
}

.divider .line {
    flex: 1;
    height: 1px;
    background-color: #828282;
}

.divider span {
    padding: 0 10px;
}

/* GOOGLE BUTTON */
.btn-google {
    background: #FFFFFF;
    border: 1px solid #828282;
    font-size: 16px; /* Slightly smaller text for long "Masuk dengan..." */
    height: 42px;
    border-radius: 17px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-google img {
    width: 18px;
    height: 18px;
}

.btn-google:hover {
    background-color: #f5f5f5;
}

/* Ensure the image fits inside the button */
.toggle-password img {
    width: 24px;  /* Adjusts the size of your eye.png */
    height: auto;
    opacity: 0.6; /* Optional: makes it slightly subtle until hovered */
    transition: opacity 0.2s;
}

.toggle-password:hover img {
    opacity: 1; /* Full brightness when hovered */
}

/* --- RESET PASSWORD PAGE STYLES --- */

/* A smaller card for the reset page, overrides the default width */
.card-outer-reset {
    width: 420px; /* Smaller width as shown in design */
}

/* The "Batalkan" Button */
.btn-cancel {
    background: #FFFFFF;
    border: 1px solid #878787; /* Specified border color */
    font-size: 18px;
    height: 42px;
    border-radius: 17px; /* Specified radius */
    cursor: pointer;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin-top: 15px; /* Space between Lanjutkan and Batalkan */
    color: #333;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background-color: #f5f5f5;
    border-color: #333;
}


/* --- COURSE SELECTION PAGE (Smart Layout) --- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.portal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 40px;
    box-sizing: border-box;
    /* Gradient background remains */
}

/* 1. THE SMART WRAPPER */
.main-wrapper {
    /* "inline-flex" makes the wrapper only as wide as its WIDEST child */
    display: inline-flex; 
    flex-direction: column;
    gap: 24px;
    
    /* Minimum width logic: 
       (294px * 2 cards) + 24px gap + (24px * 2 padding) = 660px 
    */
    min-width: 660px;
    
    /* Max width logic: 4.5 cards */
    max-width: 1480px; 
    
    /* Scale down slightly to fit standard laptop screens better */
    transform: scale(0.85); 
}

/* --- HEADER SECTION --- */
.top-header {
    width: 100%; /* Expands to fill wrapper if selection box is wider */
    display: flex;
}

.welcome-flyer {
    width: 100%;
    background-color: #E7E7E7;
    border-radius: 17px; 
    padding: 20px 40px; /* Horizontal padding for text breathing room */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    box-sizing: border-box; /* Ensures padding doesn't add width */
}

.welcome-flyer h1 {
    font-size: 48px; 
    font-weight: 700;
    margin: 0;
    color: #000;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap; /* Tries to stay one line, stretches box if needed */
}

/* --- SELECTION CONTAINER --- */
.selection-container {
    width: 100%; /* Expands to fill wrapper if header is wider */
    background-color: #E7E7E7;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.section-title {
    font-size: 45px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 24px;
    color: #000;
    padding-left: 5px; 
    text-align: left; /* Title always stays left */
}

/* 2. THE CENTERING MAGIC */
.horizontal-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    
    /* Padding for shadows/scrollbars */
    padding-bottom: 20px; 
    padding-top: 10px;
    padding-left: 5px; 
    padding-right: 5px;

    /* -- The Centering Logic -- */
    width: fit-content;  /* Shrink to fit the cards... */
    max-width: 100%;     /* ...but don't exceed the parent box */
    margin: 0 auto;      /* Center the resulting box horizontally */
}

/* Custom Scrollbar (#ACACAC) */
.horizontal-scroll::-webkit-scrollbar {
    height: 12px;
}
.horizontal-scroll::-webkit-scrollbar-track {
    background: #D2D2D2;
    border-radius: 10px;
    margin: 0 24px;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #ACACAC;
    border-radius: 10px;
}

/* --- THE CARD --- */
.course-card {
    background: #FFFFFF;
    border: 1px solid #D2D2D2;
    border-radius: 21.5px;
    width: 294px;
    height: 381px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: transform 0.2s;
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: #FBC02D;
}

.card-top {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.course-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
    line-height: 1.2;
}

.course-tutor {
    font-size: 23px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #000;
    margin-bottom: 15px;
    font-weight: 500;
}

.btn-card-big {
    width: 239px;
    height: 67px;
    background: #FBC02D;
    border: none;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

}