/* ===================== ROOT ===================== */
:root{
  --gradient-1: #fdeaff;
  --gradient-2: #e8eafe;
  --card-radius: 22px;
  --shadow-soft: 0 18px 45px rgba(20,25,70,0.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Plus Jakarta Sans", sans-serif;
background: url("../../uploads/mood/background.png") no-repeat center center fixed;
  background-size: cover;
  background-color: #fff;  /* fallback */
  position: relative;      /* penting */
  z-index: -2;             /* letakkan di paling belakang */
}

/* turunkan clouds agar tidak menutupi background image */
.bg-clouds{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;   /* ← PERBAIKAN UTAMA */
  overflow:hidden;
}



/* NAVBAR SIMPLE */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 50px;
  font-weight:600;
  color:#222;
  font-size:15px;
}
.nav-right{ display:flex; gap:10px; align-items:center; }

/* TITLE */
.title{
  text-align:center;
  font-size:36px;
  font-weight:700;
  margin-top:5px;
  margin-bottom:20px;
}

/* BACKGROUND CLOUDS */
.bg-clouds{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.bg-cloud{
  position:absolute;
  background: radial-gradient(circle, #ffffff, #ffffffcc 60%, #ffffff99 80%, transparent);
  border-radius:140px;
  filter: blur(22px);
  opacity:0.5;
}

.c1{ width:500px; height:220px; left:-120px; top:60px; animation: drift1 20s linear infinite; }
.c2{ width:420px; height:180px; right:-100px; top:150px; animation: drift2 26s linear infinite; opacity:0.45; }
.c3{ width:900px; height:300px; left:50%; bottom:40px; transform:translateX(-50%); opacity:0.32; animation: drift3 22s linear infinite; }

@keyframes drift1 {
  0% { transform:translateX(0px) translateY(0); }
  50% { transform:translateX(50px) translateY(-12px); }
  100% { transform:translateX(0px) translateY(0); }
}
@keyframes drift2 {
  0% { transform:translateX(0px) translateY(0); }
  50% { transform:translateX(-40px) translateY(-20px); }
  100% { transform:translateX(0px) translateY(0); }
}
@keyframes drift3 {
  0% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-54%) translateY(-22px); }
  100% { transform:translateX(-50%) translateY(0); }
}

/* PAGE WRAPPER */
.wrap{
  position:relative;
  z-index:5;
  padding:20px 60px 80px;
  max-width:1300px;
  margin:0 auto;
}

/* CARDS ROW */
.emotion-wrapper{
  display:flex;
  gap:28px;
  padding:12px 20px 60px;

  justify-content:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  margin-top:100px;
}
.emotion-wrapper::-webkit-scrollbar{ display:none; }

/* CARD */
.card{
  width:220px;
  min-height:280px;
  padding:22px;
  border-radius:var(--card-radius);
  position:relative;
  overflow:visible;
  color:white;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:.3s;
}

.card:hover .icon {
    transform: scale(1.18);     /* Besar proporsional */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.20));
}

.icon{
  position:absolute;
  top:10px;
  left:18px;
  width:120px;
  height:120px;
  pointer-events:none;
  transition:.18s;
}

.label{ margin-top:auto; }
.label h3{ margin:0; font-size:22px; font-weight:700; }
.label p{ margin-top:6px; }

/* GRADIENTS */
.sunny{ background:linear-gradient(135deg,#C8F1FF 0%,#61B8FF 100%); }
.cloudy{ background:linear-gradient(135deg,#BFEAFF 0%,#4FC1FF 100%); }
.gloomy{ background:linear-gradient(135deg,#9FB2FF 0%,#5A70E8 100%); }
.rainy{  background:linear-gradient(135deg,#8DA8FF 0%,#576FE7 100%); }
.stormy{ background:linear-gradient(135deg,#6E63D1 0%,#2F38A4 100%); }

/* ICON SHAPES */
.sun{ width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,#fffee0,#ffd24a 50%,#ff9500); }
.cloud{
  position:absolute;
  background:white;
  width:78px; height:42px; border-radius:30px;
  top:40px; left:16px;
}
.cloud:before{
  content:""; position:absolute;
  width:40px; height:36px; background:white;
  top:-16px; left:10px;
  border-radius:50%;
}

.drop{ width:14px; height:18px; background:#1e7aff; border-radius:8px; position:absolute; top:78px; left:62px; }
.drop.b{ top:92px; left:48px; }
.drop.c{ top:92px; left:78px; }

.lightning{
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:26px solid #ffe066;
  position:absolute; left:60px; top:56px;
  transform:skewX(-14deg);
}


/* ===================== RESPONSIVE CSS (REVISI FINAL) ===================== */

/* Laptop Kecil */
@media (max-width:1024px) {
  .wrap { padding: 10px 30px 50px; }
  .title { font-size: 32px; }
  .card { width: 200px; }
}

/* Tablet portrait */
@media (max-width:768px) {
  .navbar{
    padding:18px 20px;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .title{
    font-size:28px;
    margin-top:10px;
    margin-bottom:30px;
  }

  .emotion-wrapper{
    gap:20px;
    padding-bottom:50px;
    margin-top:60px;
  }

  /* Hapus ini:
  .card { ... }
  .icon { ... }
  */
}

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

  body {
    overflow-x: hidden;
  }

  .navbar {
    padding: 14px;
    font-size: 14px;
    flex-wrap: wrap;
    text-align: center;
  }

  .wrap {
    padding: 10px 16px 20px;
  }

  .title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 25px;
    text-align: center;
  }

 .emotion-wrapper {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
    margin-top: 20px !important;
    width: 100% !important;
  }

  /* Card horizontal (benar-benar memaksa override) */
  .emotion-wrapper .card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 110px !important;
    padding: 18px 20px !important;
  }

  /* ICON fix: hilangkan absolute di mobile */
  .emotion-wrapper .card .icon {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;

    width: 70px !important;
    height: 70px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
  }

  .emotion-wrapper .card .icon img {
    width: 70px !important;
    height: auto !important;
  }

  /* TEXT selalu di kanan */
  .emotion-wrapper .card .label {
    margin-top: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .emotion-wrapper .card .label h3 {
    font-size: 18px !important;
    margin: 0 !important;
  }

  .emotion-wrapper .card .label p {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

}

/* Extra-small phones */
@media (max-width:410px){
  .card{
    width:82%;
    max-width:250px;
  }
  .title{ font-size:22px; }
  .navbar{ font-size:13px; }
}