/* ═══════════════════════════════════════════════════════════
   Blend UI — Uiverse accents (vanilla CSS, ~10% UI)
   Pakai hanya: CTA, login, hero, stat/feature highlight
   ═══════════════════════════════════════════════════════════ */

.uiverse-bg {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(hsl(var(--border)) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

.uiverse-bg-glow {
  position: relative;
  isolation: isolate;
}
.uiverse-bg-glow::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 8% 0%, hsl(14 100% 67% / 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 8%, hsl(205 100% 65% / 0.12), transparent 50%),
    radial-gradient(ellipse 45% 40% at 80% 100%, hsl(158 55% 55% / 0.1), transparent 50%);
}

/* Glass login / hero panel */
.uiverse-glass {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  background: hsl(var(--card) / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--border-width) solid hsl(var(--border) / 0.85);
  box-shadow:
    var(--shadow-clay),
    inset 0 1px 0 hsl(0 0% 100% / 0.65);
}
.uiverse-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.22), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease-smooth, ease);
  pointer-events: none;
}
.uiverse-glass:hover::after { left: 120%; }

/* Feature / stat card accent */
.uiverse-card {
  position: relative;
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: var(--border-width) solid hsl(var(--border));
  box-shadow: var(--shadow-clay);
  transition: box-shadow .25s ease, transform .25s var(--ease-smooth, ease);
}
.uiverse-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(
    135deg,
    hsl(14 100% 67% / 0.55),
    hsl(36 100% 67% / 0.25) 40%,
    hsl(205 100% 65% / 0.45)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.uiverse-card:hover {
  transform: translateY(-3px);
  box-shadow:
    8px 10px 0 hsl(28 60% 82% / 0.4),
    0 18px 34px hsl(14 100% 67% / 0.12);
}
.uiverse-card:hover::before { opacity: 1; }

/* Shine CTA */
.uiverse-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
  border-radius: 1.35rem 1.75rem 1.35rem 1.85rem;
  min-height: 48px;
  padding: .8rem 1.4rem;
  font-size: .98rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  user-select: none;
  border: var(--border-width) solid #e85a38;
  background: linear-gradient(145deg, #ff9a78, #ff7a59 50%, #f06545);
  box-shadow:
    4px 5px 0 hsl(14 55% 72% / 0.45),
    0 8px 18px hsl(14 100% 67% / 0.18),
    inset 0 1px 0 hsl(0 0% 100% / 0.35);
  text-decoration: none;
  transition: transform .2s var(--ease-press, ease), box-shadow .2s ease;
}
.uiverse-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: var(--shadow-clay);
}
.uiverse-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--shadow-press);
}
.uiverse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--background)), 0 0 0 6px hsl(var(--ring) / 0.55);
}
.uiverse-btn .uiverse-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    hsl(0 0% 100% / 0.28) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}
.uiverse-btn:hover .uiverse-btn-shine { transform: translateX(100%); }

.uiverse-btn-sky {
  border-color: #2f86d4;
  background: linear-gradient(145deg, #6bb8f5, #3b9aef 55%, #2f86d4);
}

.uiverse-input {
  border: var(--border-width) solid hsl(var(--input)) !important;
  border-radius: 16px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.uiverse-input:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow:
    0 0 0 4px hsl(var(--ring) / 0.2),
    inset 0 2px 6px hsl(215 25% 17% / 0.04) !important;
}

.cta-band {
  background: linear-gradient(125deg, #fff1cc, #ffe1d6 45%, #e7f7ff);
  border-radius: 28px;
  padding: 2rem 1.5rem;
  border: var(--border-width) solid hsl(var(--border));
  box-shadow: var(--shadow-clay);
}

.hero-photo {
  min-height: 320px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(31, 42, 55, .1), rgba(31, 42, 55, .45)),
    url('/assets/img/hero-belajar.jpg') center/cover no-repeat;
  box-shadow: var(--shadow-clay);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  border: var(--border-width) solid #fff;
}

.login-aside {
  display: grid;
  gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .uiverse-glass::after,
  .uiverse-btn .uiverse-btn-shine { transition: none; }
  .uiverse-card:hover,
  .uiverse-btn:hover { transform: none; }
  .uiverse-glass:hover::after { left: -100%; }
  .uiverse-btn:hover .uiverse-btn-shine { transform: translateX(-100%); }
}