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

*{
  font-family:'Open Sans',sans-serif;
  box-sizing:border-box;
}

:root{
  --primary:#1B5E20;
  --primary-light:#2E7D32;
  --gold:#F4B400;
  --gold-soft:#FFD54F;
  --dark:#111827;
}

/* ================= GLOBAL ================= */

html,body{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#222;
  overflow-x:hidden;
}

/* ================= BACKGROUND ================= */

.background{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(135deg, rgba(15,50,20,.92), rgba(30,80,30,.92)),
    url('../img/bg.jpg');
  background-size:cover;
  background-position:center;
}

/* ================= CONTAINER ================= */

.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1rem;
  position:relative;
}

/* ================= LOGO ================= */

.logo{
  width:150px;
  margin-top:3rem;
  margin-bottom:-1rem;

  /* ANIMASI FLOAT HALUS */
  animation:logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.posisilogo{
  position:absolute;
  top:18px;
  left:25px;
}

.posisilogo .logo2{
  width:85px;
}

/* ================= TITLE ================= */

.typing-text{
  font-size:1.2rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.subtext{
  margin:-.5rem 0 1.2rem;
  font-weight:500;
  color:#f5f5f5;
}

/* ================= MENU DESKTOP ================= */

.menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  color:#000000;
  margin-top:1.5rem;
}

a{ text-decoration:none; }

/* ================= CARD DESKTOP ================= */

.menu-item{
  width:130px;
  height:130px;
  border-radius:24px;
  background:#fff;
  color:#000000 !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  box-shadow:0 15px 35px rgba(0,0,0,.2);

  /* ENTRANCE ANIMATION */
  opacity:0;
  transform:translateY(30px);
  animation:cardFadeUp .8s cubic-bezier(.16,1,.3,1) forwards;

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s cubic-bezier(.16,1,.3,1);
}

/* STAGGER EFFECT */
.menu:nth-of-type(1) .menu-item:nth-child(1){ animation-delay:.1s; }
.menu:nth-of-type(1) .menu-item:nth-child(2){ animation-delay:.2s; }
.menu:nth-of-type(1) .menu-item:nth-child(3){ animation-delay:.3s; }
.menu:nth-of-type(1) .menu-item:nth-child(4){ animation-delay:.4s; }
.menu:nth-of-type(1) .menu-item:nth-child(5){ animation-delay:.5s; }
.menu:nth-of-type(1) .menu-item:nth-child(6){ animation-delay:.6s; }

.menu:nth-of-type(2) .menu-item:nth-child(1){ animation-delay:.7s; }
.menu:nth-of-type(2) .menu-item:nth-child(2){ animation-delay:.8s; }
.menu:nth-of-type(2) .menu-item:nth-child(3){ animation-delay:.9s; }
.menu:nth-of-type(2) .menu-item:nth-child(4){ animation-delay:1s; }

@keyframes cardFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.menu-item img{
  width:62px;
  height:62px;
}

.menu-item span{
  color:#000;
  font-size:.72rem;
  font-weight:500;
  margin-top:6px;
  text-align:center;
}


.menu-item:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(0,0,0,.28);
}

/* ================= POLISI ================= */

.polisi-container{
  position:fixed;
  bottom:0;
  right:0;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:9999;
}

.polisi-container2{
  position:fixed;
  bottom:4px;
  left:10px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:9999;
}

.polisi-container img{
  width:220px;
}

.polisi-container2 img{
  width:300px;
  margin-bottom:-5px;
}

.bubble{
  background:#fff;
  border-radius:16px;
  padding:12px 16px;
  max-width:220px;
  font-weight:500;
  border-left:4px solid var(--gold);
}

/* ================= MOBILE FIX 4 KOLOM ================= */

@media screen and (max-width:900px){

  .logo{ width:90px; margin-top:2rem; animation:none; }
  .posisilogo .logo2{ width:50px; }

  .typing-text{ font-size:.9rem; }
  .subtext{ font-size:.8rem; }

  .menu{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    width:100%;
    padding:0 12px;
  }

  .menu-item{
    width:100%;
    height:70px;
    border-radius:16px;

    /* matikan animasi berat di mobile */
    animation:none;
    opacity:1;
    transform:none;
  }

  .menu-item img{
    width:20px;
    height:20px;
  }

  .menu-item span{
    font-size:9px;
    margin-top:4px;
  }

  .polisi-container img{ width:90px; }
  .polisi-container2 img{ width:110px; margin-bottom:-5px }

  .bubble{
    font-size:10px;
    max-width:120px;
  }
}