/* =========================================
   TEMA SOFT UI / NEUMORPHISM (Animasi Melayang & Bouncy)
   ========================================= */
:root {
  --bg-body: #fdf8f1;       /* Cream lembut */
  --header-grad: linear-gradient(135deg, #ffb703, #fb8500); /* Oranye hangat */
  --card-bg: #ffffff;
  --text-dark: #2d3436;
  --text-muted: #636e72;
  --font-main: 'Plus Jakarta Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { height: 100%; margin: 0; overflow: hidden; font-family: var(--font-main); background-color: var(--bg-body); }

/* --- Splash Screen --- */
.splash-bg { background: var(--header-grad); }
.fade-in { animation: fadeIn 0.8s ease forwards; }
.fade-out { animation: fadeOut 0.5s ease forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

/* --- Background Utama (Lengkungan Header) --- */
.main-bg-curve {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45vh;
  background: var(--header-grad);
  border-bottom-left-radius: 50% 15%;
  border-bottom-right-radius: 50% 15%;
  z-index: 0;
}

/* --- Layout Konten --- */
.content-wrapper { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; }
.scrollbar-hide::-webkit-scrollbar { display:none; }
.tools-grid { padding-bottom: 5rem; max-width: 1000px; margin: 0 auto; }

/* --- Desain Kartu (Soft UI) --- */
.card-neo {
  background: var(--card-bg);
  border-radius: 30px;
  padding: 2rem 1.5rem;
  box-shadow: 0 15px 35px rgba(251, 133, 0, 0.08); /* Shadow glow lembut */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Animasi Hover Kartu */
.card-neo:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(251, 133, 0, 0.2);
}

/* Background Pill di dalam kartu */
.pill-icon {
  width: 100%;
  height: 90px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.5s ease;
  position: relative;
  overflow: hidden;
}

/* Efek Icon membesar saat kartu dihover */
.card-neo:hover .pill-icon { transform: scale(1.05); }
.card-neo:hover .icon-svg { transform: scale(1.15) rotate(5deg); transition: all 0.4s ease; }

/* Teks di dalam kartu */
.card-title { color: var(--text-dark); font-weight: 800; font-size: 1.25rem; margin-bottom: 0.5rem; }
.card-desc { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }

/* Teks action muncul saat hover */
.card-action {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.card-neo:hover .card-action { opacity: 1; transform: translateY(0); }

/* --- Warna-warni Pill Icon --- */
.grad-blue { background: linear-gradient(135deg, #0b5ed7, #00346c); box-shadow: 0 10px 20px rgba(11, 94, 215, 0.2); }
.grad-orange { background: linear-gradient(135deg, #ff8c00, #e65a00); box-shadow: 0 10px 20px rgba(255, 140, 0, 0.2); }
.grad-green { background: linear-gradient(135deg, #00b09b, #96c93d); box-shadow: 0 10px 20px rgba(0, 176, 155, 0.2); }

/* Animasi Muncul Konten Awal */
.card-enter { animation: cardPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
@keyframes cardPop { from { opacity:0; transform:scale(0.8) translateY(40px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* =========================================
   ANIMASI PANEL POPUP (BOUNCY & CIAMIK)
   ========================================= */
.panel-overlay-show { animation: overlayIn 0.4s ease forwards; }
.panel-overlay-hide { animation: overlayOut 0.4s ease forwards; }

.panel-content-show { animation: panelPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.panel-content-hide { animation: panelPopOut 0.4s cubic-bezier(0.36, 0, 0.66, -0.56) forwards; }

@keyframes overlayIn { 
  from { opacity: 0; backdrop-filter: blur(0px); } 
  to { opacity: 1; backdrop-filter: blur(10px); } 
}
@keyframes overlayOut { 
  from { opacity: 1; backdrop-filter: blur(10px); } 
  to { opacity: 0; backdrop-filter: blur(0px); } 
}

@keyframes panelPopIn { 
  0% { opacity: 0; transform: scale(0.8) translateY(60px) rotateX(-10deg); } 
  100% { opacity: 1; transform: scale(1) translateY(0) rotateX(0); } 
}
@keyframes panelPopOut { 
  0% { opacity: 1; transform: scale(1) translateY(0); } 
  100% { opacity: 0; transform: scale(0.85) translateY(40px); } 
}