/* === Theme (Default App Theme) — generated from DB === */

/* Override :root PWA kamu agar konsisten */
:root{
  --bg:        #ffffff;
  --panel:     #ffffff;
  --border:    rgba(0,0,0,0.09);
  --muted:     #6b7280;
  --text:      #111827;

  --primary:       #6366f1;
  --primary-600:   #5b5ede;
  --grad1:         #6366f1;
  --grad2:         #22d3ee;

  --radius:   18px;
  --shadow:   0 8px 24px rgba(0,0,0,.08);

  /* untuk hero-modern */
  --hero-padding:  16px;
  --hero-radius:   18px;
  --hero-bg:       radial-gradient(900px 420px at -10% -20%, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0) 60%), radial-gradient(700px 360px at 110% 0%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 62%), linear-gradient(135deg, #6b6eff 0%, #3986ed 45%, #11c6ff 100%);
  --hero-border:   1px solid rgba(99,102,241,0.18);
  --hero-shadow:   0 10px 30px rgba(2,132,199,.10), 0 2px 8px rgba(0,0,0,.04);

  --hero-before-c: rgba(255,255,255,0.68);
  --hero-after-c:  rgba(255,255,255,0.6);
  
    /* bubble icon mengikuti tema */
  --bubble-grad1: #ecedfd;
  --bubble-grad2: #f4fdfe;
  --bubble-border: rgba(99,102,241,0.18);
  
    /* login page theme */
  --login-bg:
    radial-gradient(circle at top left, rgba(34,211,238,0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14,165,233,0.22), transparent 35%),
    linear-gradient(135deg, #6b6eff 0%, #3986ed 45%, #11c6ff 100%);

  --login-orb-1: rgba(99,102,241,0.32);
  --login-orb-2: rgba(34,211,238,0.28);
  --login-orb-3: rgba(14,165,233,0.22);

  --login-card-bg: rgba(255,255,255,0.92);
  --login-card-border: rgba(255,255,255,0.62);

  --login-brand-bg:
    linear-gradient(
      145deg,
      #eff0fe,
      #e4fafd    );

  --login-brand-text: #6366f1;
  --login-soft: #f3f3fe;
  --login-soft-border: rgba(99,102,241,0.18);
  --login-focus: rgba(99,102,241,0.14);

  --login-card-bubble:
    radial-gradient(
      circle at 35% 35%,
      rgba(255,255,255,0.55) 0%,
      rgba(34,211,238,0.3) 34%,
      rgba(99,102,241,0.18) 62%,
      rgba(99,102,241,0.04) 100%
    );

  --login-card-bubble-border: rgba(99,102,241,0.18);

  --login-button:
    linear-gradient(
      135deg,
      #6366f1 0%,
      #5b5ede 48%,
      #0ea5e9 100%
    );

  --login-button-shadow: 0 16px 34px rgba(99,102,241,0.32);
}

/* Override komponen hero-modern */
.hero-modern{
  background: var(--hero-bg);
  border:     var(--hero-border);
  box-shadow: var(--hero-shadow);
  padding:    var(--hero-padding);
  border-radius: var(--hero-radius);
}
.hero-modern::before{
  content:"";
  position:absolute; left:-50px; bottom:-60px;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(closest-side, var(--hero-before-c), rgba(255,255,255,0));
  filter: blur(6px); pointer-events:none;
}
.hero-modern::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(closest-side, var(--hero-after-c), rgba(255,255,255,0));
  filter: blur(4px); pointer-events:none;
}
/* Ikon bubble – mengikuti warna tema */
.menu-section .menu-float .bubble{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      #ffffff 0%,
      rgba(255,255,255,.6) 50%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      var(--bubble-grad1),
      var(--bubble-grad2)
    );
  border:1px solid var(--bubble-border);
}