/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  min-height:100vh;
  color:#2c3e50;
}

/* ================= CONTAINER ================= */
.container{
  max-width:650px;
  margin:40px auto;
  padding:30px;
  border-radius:20px;

  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);

  box-shadow:
  0 20px 50px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ================= TITLE ================= */
.title-main{
  text-align:center;
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;
  color:#1e3c50;
}

/* ================= LOGO ================= */
.logo-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0;
}

.logo{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;

  border:2px solid #e0e6ed;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* ================= TRIWULAN ================= */
.triwulan{
  text-align:center;
  font-size:13px;
  color:#6b7c8a;
  margin-bottom:15px;
}

/* ================= SECTION ================= */
.section{
  margin-top:20px;
  padding:20px;
  border-radius:15px;

  background:linear-gradient(180deg,#ffffff,#f4f8fb);
  box-shadow:0 8px 18px rgba(0,0,0,0.1);
}

/* ================= FORM ================= */
.form-group{
  margin-bottom:15px;
}

label{
  font-size:13px;
  display:block;
  margin-bottom:6px;
  color:#34495e;
}

input,select,textarea{
  width:100%;
  padding:12px;

  border-radius:10px;
  border:1px solid #d6dee6;

  font-size:14px;
  font-family:'Poppins';

  transition:0.25s;
}

/* FOCUS EFFECT */
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#3a7ca5;
  box-shadow:0 0 0 3px rgba(58,124,165,0.15);
}

/* TEXTAREA */
textarea{
  min-height:110px;
  resize:none;
  line-height:1.6;
}

/* ================= QUESTION ================= */
.question{
  margin-top:15px;
  font-weight:500;
  font-size:14.5px;
  color:#2c3e50;
}

/* ================= STAR RATING ================= */
.rating{
  display:flex;
  flex-direction:row-reverse;
  gap:6px;
  margin:10px 0 22px;
}

.rating input{
  display:none;
}

.rating label{
  font-size:26px;
  color:#b0bec5; /* lebih jelas dari sebelumnya */
  cursor:pointer;
  transition:0.2s;
  user-select:none;
}

/* HOVER & ACTIVE */
.rating label:hover,
.rating label:hover ~ label{
  color:#f1c40f;
  transform:scale(1.1);
}

/* SELECTED */
.rating input:checked ~ label{
  color:#f1c40f;
}

/* ================= BUTTON ================= */
button{
  width:100%;
  padding:14px;

  border:none;
  border-radius:35px;

  background:linear-gradient(135deg,#3a7ca5,#2c5364);
  color:#fff;

  font-size:15px;
  font-weight:600;

  cursor:pointer;
  transition:0.3s;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(0,0,0,0.35);
}

/* ================= HR ================= */
hr{
  border:none;
  height:1px;
  margin:25px 0;

  background:linear-gradient(
    to right,
    transparent,
    #d0d9e0,
    transparent
  );
}

/* ================= MOBILE ================= */
@media(max-width:600px){

  .container{
    margin:15px;
    padding:20px;
  }

  .logo{
    width:50px;
    height:50px;
  }

  .title-main{
    font-size:20px;
  }

  .rating label{
    font-size:24px;
  }
}