/* Tambahan kecil di luar Tailwind */

.step-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all .15s ease;
}
.step-pill .num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.step-pill .label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.1;
}
.step-pill .sub {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1;
  margin-top: 2px;
}

.step-pill[data-state="active"] {
  border-color: #3b6cf6;
  box-shadow: 0 0 0 3px rgba(59,108,246,.1);
}
.step-pill[data-state="active"] .num { background: #3b6cf6; color: #fff; }
.step-pill[data-state="active"] .label { color: #1f43c4; }

.step-pill[data-state="done"] { border-color: #cbd5e1; }
.step-pill[data-state="done"] .num { background: #16a34a; color: #fff; }

.field-label { font-size: .85rem; font-weight: 500; color: #334155; margin-bottom: .35rem; display: block; }
.field-input,
.field-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  padding: .65rem .85rem;
  font-size: .9rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: #3b6cf6;
  box-shadow: 0 0 0 3px rgba(59,108,246,.15);
}
.field-help { font-size: .75rem; color: #94a3b8; margin-top: .3rem; }

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: .5rem;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   LANDING / BERANDA — overlay bernuansa akademik + animasi
   ============================================================ */

.landing-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(59,108,246,.45), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(139,92,246,.35), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(16,185,129,.25), transparent 60%),
    linear-gradient(135deg, #0b1437 0%, #1e2a78 45%, #312e81 100%);
  background-size: 200% 200%;
  animation: bg-shift 18s ease-in-out infinite;
}
@keyframes bg-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Pola akademik (titik halus + ikon SVG sebagai data URI) */
.landing-pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='white' stroke-width='1.2'><path d='M30 60 L60 50 L90 60 L60 70 Z M60 70 V90'/><circle cx='160' cy='40' r='10'/><path d='M150 130 h40 v30 h-40z M150 130 v-8 h40 v8'/><path d='M40 170 q15 -20 30 0 q15 20 30 0'/></svg>");
  background-size: 28px 28px, 220px 220px;
  background-position: 0 0, 0 0;
}

.landing-orb {
  position: absolute; border-radius: 9999px; filter: blur(60px);
  pointer-events: none; opacity: .55;
}
.landing-orb-1 { width: 380px; height: 380px; background: #3b6cf6; top: -100px; left: -100px; animation: float 12s ease-in-out infinite; }
.landing-orb-2 { width: 320px; height: 320px; background: #8b5cf6; bottom: -120px; right: -80px; animation: float 14s ease-in-out infinite reverse; }
.landing-orb-3 { width: 240px; height: 240px; background: #10b981; top: 40%; right: 30%; opacity: .35; animation: float 16s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

/* Logo e-Dosen */
.logo-wrap {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.logo-ring {
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.35);
  animation: ring-pulse 3s ease-out infinite;
}
.logo-ring-2 { animation-delay: 1.5s; }
@keyframes ring-pulse {
  0%   { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.4);  opacity: 0;  }
}
.logo-core {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 9999px;
  background: linear-gradient(145deg, #ffffff 0%, #dbeafe 100%);
  box-shadow: 0 10px 40px rgba(59,108,246,.5), inset 0 1px 0 rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: -.02em;
  animation: logo-pop 1s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes logo-pop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0);     opacity: 1; }
}
.logo-core .logo-e    { color: #1f43c4; font-size: 1.6rem; }
.logo-core .logo-dash { color: #94a3b8; font-size: 1.5rem; margin: 0 1px; }
.logo-core .logo-d    { color: #0f172a; font-size: 1.2rem; }

.landing-tagline {
  animation: fade-up .9s ease .25s both;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.landing-sub { animation: fade-up .9s ease .45s both; }
@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Kartu fitur */
.feature-card {
  position: relative;
  text-align: left;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  color: #fff;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  opacity: 0;
  animation: fade-up .7s ease both;
}
.feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.feature-card-active {
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 10px 30px rgba(59,108,246,.35);
}
.feature-delay-1 { animation-delay: .4s; }
.feature-delay-2 { animation-delay: .55s; }
.feature-delay-3 { animation-delay: .7s; }
.feature-delay-4 { animation-delay: .85s; }

.feature-icon {
  width: 52px; height: 52px;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin-bottom: .9rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.feature-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.feature-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
  margin-bottom: .9rem;
}
.feature-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .55rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);
}
.feature-badge-on {
  background: rgba(16,185,129,.18);
  color: #6ee7b7;
  border-color: rgba(16,185,129,.4);
}

/* Transisi keluar landing */
.landing-leaving {
  animation: landing-out .5s ease forwards;
}
@keyframes landing-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}

/* ============================================================
   SUB-MODULE CARDS (halaman hub seperti /pengajaran)
   ============================================================ */
.submodule-card {
  display: block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.submodule-card:hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .15);
}
.submodule-icon {
  width: 52px; height: 52px;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .15);
}
.submodule-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: .35rem;
}
.submodule-desc {
  font-size: .85rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.submodule-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border-radius: 9999px;
  border: 1px solid;
}
.submodule-card.is-disabled {
  cursor: not-allowed;
  opacity: .65;
  filter: grayscale(.4);
  pointer-events: none;
}
.submodule-card.is-disabled:hover {
  transform: none;
  border-color: #e2e8f0;
  box-shadow: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .landing-bg, .landing-orb, .logo-ring, .logo-core, .landing-tagline, .landing-sub, .feature-card { animation: none !important; opacity: 1 !important; }
}