* {
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* ===== BODY ===== */
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, #54f0d6, transparent 60%),
    radial-gradient(circle at bottom right, #06c5fa, transparent 55%),
    linear-gradient(180deg, #8ce7ed, #06f9b4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.survey-container-index {
  width: 100%;
  max-width: 450px;
  min-height: 50vh;

  background: rgba(255,255,255,.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 40px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);

  padding: 50px 60px 42px;
  display: flex;
  flex-direction: column;
}

/* ===== CONTAINER (CARD UTAMA) ===== */
.survey-container {
  width: 100%;
  max-width: 700px;
  min-height: auto;

  background: rgba(255,255,255,.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 40px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);

  padding: 50px 60px 42px;
  display: flex;
  flex-direction: column;
}


/* ===== HEADER ===== */
.survey-header {
  text-align: center;
  margin-bottom: 14px;
}

.survey-header h2{
  margin: 0 0 6px;      /* 🔥 hapus margin atas */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #101090;
}

.survey-header p{
  margin-top: 4px;
  font-size: 15px;
  color: #475569;
}

.logo {
  width: 64px;
  margin-bottom: 12px;
}



/* ===== PROGRESS BAR ===== */
#progress {
  height: 4px;
  background: rgba(255,255,255,.5);
  border-radius: 999px;
  margin: 26px 0 15px;
  overflow: hidden;
}

#bar {
  height: 100%;
  background: linear-gradient(90deg,#3b82f6,#60a5fa);
  box-shadow: 0 0 10px rgba(59,130,246,.6);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ===== QUESTION ===== */
.question {
  margin-top: 30px;
  display: none;
  flex: 1;
  animation: fadeUp .3s ease;
}

.question.active {
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question h3 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 28px;
  color: #0f172a;
}



/* ===== EMOJI GRID ===== */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 520px;     /* 🔥 ini kunci agar tidak terlalu lebar */
  margin: 0 auto;
}
.emoji-grid input[type=radio] {
  display: none;
}


.emoji-grid label {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 16px;
  padding: 18px 8px 14px;

  border: 1px solid rgba(255,255,255,.55);

  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.7);

  text-align: center;
  cursor: pointer;

  transition: all .25s cubic-bezier(.4,0,.2,1);
}



.emoji-grid label:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.emoji-grid label:has(input:checked) {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.6);

  box-shadow:
    0 25px 50px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.85);

  transform: scale(1.06);
}

.emoji {
  font-size: 38px;     /* 🔥 lebih kecil */
  display: block;
  margin-bottom: 8px;
}

.emoji-grid small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}




/* ===== SELECTED STATE ===== */
.emoji-grid label:has(input:checked) {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.6);

  box-shadow:
    0 18px 40px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.85);

  transform: scale(1.06);
}
.emoji-grid label:hover {
  transform: translateY(-4px);
}


/* ===== HIDDEN SUBMIT ===== */
.hidden {
  display: none;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .survey-container{
    border-radius: 0;
    height: auto;
    padding: 30px 22px;
  }

  .question h3 {
    font-size: 20px;
    margin-bottom: 35px;
  }

  .emoji-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
  }

  .emoji{
    font-size: 48px;
  }
}
@media(max-width:768px){

  .survey-header{
    margin-bottom: 8px;
  }

  .survey-header h2{
    font-size: 20px;
    letter-spacing: .12em;
  }

  .survey-header p{
    font-size: 14px;
  }

  #progress{
    margin: 14px 0 10px;
  }

}

/* ===============================
   LANDING PAGE (INDEX.PHP)
   =============================== */

.card {
  background: #ffffff;
  max-width: 520px;
  width: 100%;
  padding: 50px 45px;
  border-radius: 22px;
  box-shadow: 0 15px 35px rgba(0,0,0,.15);
  text-align: center;
}

.card h2 {
  margin: 0 0 12px;
  color: #0d6efd;
  font-size: 24px;
  font-weight: 700;
}

.card p {
  color: #6c757d;
  font-size: 15px;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 50px;
  background: #0d6efd;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all .25s ease;
}

.btn:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}

/* ===== LOGO ===== */
.logo {
  width: 120px;
  margin-bottom: 20px;
}

/* ===== LANDING PAGE ===== */
.landing {
  animation: fadeScale .6s ease;
}

@keyframes fadeScale {
  from { opacity:0; transform: scale(.95); }
  to   { opacity:1; transform: scale(1); }
}

/* ===== BUTTON EFFECT ===== */
.btn-start {
  position: relative;
  overflow: hidden;
}

.btn-start::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.3);
  transform: scaleX(0);
  transform-origin: left;
  transition: .4s;
}

.btn-start:hover::after {
  transform: scaleX(1);
}

.btn-start:hover {
  transform: translateY(-3px);
}

/* ===== SUCCESS PAGE ===== */
.sukses {
  text-align: center;
  animation: fadeUp .6s ease;
}

.check {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  font-size: 48px;
  line-height: 90px;
  margin: 25px auto;
  animation: pop .4s ease;
}

@keyframes pop {
  0% {transform: scale(.5);}
  100% {transform: scale(1);}
}

.sukses small {
  display: block;
  margin-top: 15px;
  color: #6c757d;
}

.pesan-textarea {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;

  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;

  border-radius: 16px;
  border: 1px solid #e5e7eb;
  outline: none;

  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);

  transition: all .25s ease;
}

.pesan-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* ===== GLASS EFFECT ===== */
.survey-container {
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.72);
}

/* ===== TEXTAREA PESAN ===== */
.pesan-textarea {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: block;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1.5px solid rgba(0,0,0,.08);
  font-size: 16px;
  resize: none;
  background: rgba(255,255,255,.9);
  transition: all .25s ease;
}

.pesan-textarea:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 10px 30px rgba(13,110,253,.2);
}

.pesan-textarea.error {
  border-color: #dc3545;
  box-shadow: 0 8px 22px rgba(220,53,69,.25);
}

/* ===== SUBMIT BUTTON ===== */
#submitBtn {
  margin: 40px auto 0;
  padding: 15px 46px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg,#0d6efd,#4dabf7);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 16px 32px rgba(13,110,253,.35);
}

#submitBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(13,110,253,.45);
}

#submitBtn:active {
  transform: scale(.96);
}

/* ===== iOS SMOOTH TRANSITION ===== */
.question {
  animation: iosSlide .35s ease;
}

@keyframes iosSlide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===============================
   iOS GLASS LANDING (MOBILE FIRST)
   =============================== */

.card.landing {
  width: calc(100% - 56px);
  max-width: 560px;
  padding: 36px 28px 34px;

  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 30px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);

  text-align: center;
  animation: iosFadeUp .6s cubic-bezier(.4,0,.2,1);
}

/* LOGO */
.card.landing .logo {
  width: 58px;
  margin-bottom: 14px;
}

/* TITLE */
.card.landing h2 {
  font-weight: 700;
  letter-spacing: .12em;
  color: #0f172a;
  margin-bottom: 10px;
}

/* DESCRIPTION */
.card.landing p {
  line-height: 1.55;
  color: #334155;
  margin-bottom: 26px;
}

/* BUTTON iOS */
.card.landing .btn {
  width: 100%;
  padding: 15px 0;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;

  border-radius: 999px;
  background: linear-gradient(135deg,#3b82f6,#60a5fa);

  box-shadow:
    0 18px 36px rgba(59,130,246,.45),
    inset 0 1px 0 rgba(255,255,255,.5);

  transition: all .3s cubic-bezier(.4,0,.2,1);
}

.card.landing .btn:active {
  transform: scale(.96);
  box-shadow: 0 10px 20px rgba(59,130,246,.35);
}

/* ANIMATION */
@keyframes iosFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================
   LANDING PAGE – MOBILE POLISH
   ================================ */

.landing-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MOBILE FIRST */
@media (max-width: 480px) {

  .landing-body {
    padding: 28px 18px 40px;
  }

  .card.landing {
    width: 100%;
    max-width: 100%;
    padding: 52px 30px 48px;
    border-radius: 34px;
  }

  .card.landing .logo {
    width: 84px;
    margin-bottom: 26px;
  }

  .card.landing h2 {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: .18em;
    margin-bottom: 20px;
  }

  .card.landing .desc {
    font-size: 16.5px;
    line-height: 1.75;
    margin-bottom: 38px;
  }

  .card.landing .btn {
    font-size: 18px;
    padding: 20px 0;
    border-radius: 999px;
  }
}

/* ===============================
   FULL BACKGROUND LIKE IMAGE
   =============================== */
.survey-bg{
  min-height:100vh;
  width:100%;
  background: url("../img/bg-survey.jpg") center / cover no-repeat;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.survey-container{
  background:rgba(255,255,255, 0.92);
  backdrop-filter: blur(6px);
  border-radius:18px;
  padding:28px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}


/* ===============================
   TOP BAR
   =============================== */
.top-bar{
  width:100%;
  max-width:700px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

/* BACK BUTTON */
.btn-back{
  background: rgba(255,255,255,.25);
  color:#fff;
  padding:10px 18px;
  border-radius:none;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  backdrop-filter: blur(8px);
  transition:.25s;
}
.btn-back:hover{
  background: rgba(255,255,255,.35);
}

/* RIGHT INFO */
.top-info{
  text-align:right;
  color:#00000;
  font-size:13px;
}

/* MINI PROGRESS */
.progress-mini{
  width:120px;
  height:6px;
  background: rgba(255,255,255,.3);
  border-radius:99px;
  margin-top:6px;
  overflow:hidden;
}
.progress-mini span{
  display:block;
  height:100%;
  width:<?= (1/$total)*100 ?>%;
  background:#fff;
  border-radius:99px;
  transition:.4s ease;
}

/* ===============================
   CARD FLOAT EFFECT (IMAGE STYLE)
   =============================== */
.survey-container{
  background: rgba(255,255,255,.75);
  border-radius:26px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* ===============================
   QUESTION CARD LOOK
   =============================== */
.question h3{
  font-size:21px;
  font-weight:600;
  line-height:1.5;
}

/* ===============================
   EMOJI LIKE IMAGE STYLE
   =============================== */
.emoji-grid label{
  aspect-ratio:1/1;
  width:100%;
  border-radius:50%;
  background: rgba(255,255,255,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.25s;
}

.emoji{
  font-size:42px;
}

.emoji-grid small{
  margin-top:6px;
  font-size:11px;
}

/* ===============================
   MOBILE LOOK SAME AS IMAGE
   =============================== */
@media(max-width:768px){
  .survey-bg{
    padding:20px 14px;
  }

  .top-bar{
    margin-bottom:18px;
  }

  .survey-container{
    border-radius:22px;
  }
}

/* UT STYLE HEADER */
.ut-survey-header {
  text-align: center;
  margin-bottom: 30px;
}
.logo-ut {
  width: 80px;
  margin-bottom: 12px;
}
.ut-survey-header h1 {
  font-size: 26px;
  font-weight: bold;
  color: #101090;
}

/* BACK BUTTON mirip UT */
.btn-back {
  background: rgba(255, 255, 255, 0.6);
  color: #0f3fa0;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 20px;
  
}

/* PROGRESS MINI UT */
.progress-mini {
  background: rgba(255, 255, 255, 0.5);
}
.progress-mini span {
  background: #0f3fa0;
}

/* CARD UT */
.survey-container {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.15);
  padding: 50px 60px;
}

/* ===============================
   BACK BUTTON – NO OUTLINE
   =============================== */
.btn-back {
  border: none;
  outline: none;
  box-shadow: none;
  background: rgba(255,255,255,.25);
}

.btn-back:focus,
.btn-back:active {
  outline: none;
  box-shadow: none;
}

@media(max-width:768px){

  .emoji-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

  .emoji{
    font-size: 44px;
  }

  .emoji-grid small{
    font-size: 12px;
    margin-top: 6px;
  }

}