/* === Theme (Emerald Fresh) — generated from DB === */

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

  --primary:       #10af94;
  --primary-600:   #0fa188;
  --grad1:         #10af94;
  --grad2:         #0f9f86;

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

  /* untuk hero-modern */
  --hero-padding:  15px;
  --hero-radius:   18px;
  --hero-bg:       radial-gradient(900px 420px at -10% -20%, rgba(255,255,255,0.136) 0%, rgba(255,255,255,0) 60%), radial-gradient(700px 360px at 110% 0%, rgba(255,255,255,0.088) 0%, rgba(255,255,255,0) 62%), linear-gradient(150deg, #11bda0 0%, #12c2a4 45%, #17ffd7 100%);
  --hero-border:   1px solid rgba(16,175,148,1);
  --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.136);
  --hero-after-c:  rgba(255,255,255,0.12);
  
    /* bubble icon mengikuti tema */
  --bubble-grad1: #e2f5f2;
  --bubble-grad2: #f3faf9;
  --bubble-border: rgba(16,175,148,0.18);
}

/* 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);
}