/* ===== BATIK THEME ===== */

html, body{
  min-height:100%;
}

body{
  background-color:#f4f7fb !important;
  position:relative;
}

/* subtle elegant overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:var(--batik-opacity, .22);
  background-color:transparent;
}

/* size controls */
body.batik-size-small::before{ background-size: 120px 120px, 120px 120px, 120px 120px !important; }
body.batik-size-medium::before{ background-size: 170px 170px, 170px 170px, 170px 170px !important; }
body.batik-size-large::before{ background-size: 240px 240px, 240px 240px, 240px 240px !important; }

/* Mega Mendung Cirebon */
body.batik-mega_mendung::before{
  background-image:
    radial-gradient(circle at 20% 55%, var(--batik-color) 0 10%, transparent 10% 18%),
    radial-gradient(circle at 35% 50%, var(--batik-color) 0 11%, transparent 11% 20%),
    radial-gradient(circle at 50% 56%, var(--batik-color) 0 12%, transparent 12% 22%),
    radial-gradient(circle at 68% 52%, var(--batik-color) 0 11%, transparent 11% 20%),
    radial-gradient(circle at 82% 56%, var(--batik-color) 0 10%, transparent 10% 18%),
    radial-gradient(circle at 20% 78%, var(--batik-color) 0 8%, transparent 8% 14%),
    radial-gradient(circle at 40% 75%, var(--batik-color) 0 9%, transparent 9% 16%),
    radial-gradient(circle at 60% 80%, var(--batik-color) 0 9%, transparent 9% 16%),
    radial-gradient(circle at 80% 75%, var(--batik-color) 0 8%, transparent 8% 14%);
}

/* Kawung */
body.batik-kawung::before{
  background-image:
    radial-gradient(ellipse at center, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at top, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at bottom, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at left, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at right, transparent 42%, var(--batik-color) 43% 47%, transparent 48%);
}

/* Parang */
body.batik-parang::before{
  background-image:
    repeating-linear-gradient(-35deg,
      transparent 0 14px,
      color-mix(in srgb, var(--batik-color) 100%, transparent) 14px 18px,
      transparent 18px 34px),
    repeating-linear-gradient(-35deg,
      transparent 0 52px,
      color-mix(in srgb, var(--batik-color) 100%, transparent) 52px 56px,
      transparent 56px 72px);
}

/* Ceplok */
body.batik-ceplok::before{
  background-image:
    radial-gradient(circle at 25% 25%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 75% 25%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 25% 75%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 75% 75%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 50% 50%, var(--batik-color) 0 5%, transparent 5% 12%);
}

/* Truntum */
body.batik-truntum::before{
  background-image:
    radial-gradient(circle at 20% 20%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 50% 30%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 80% 20%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 35% 65%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 70% 75%, var(--batik-color) 0 3%, transparent 3% 12%);
}

body.batik-none::before{
  display:none;
}

/* preserve clean reading on cards */
.card,
.portal-card,
.modal-content{
  background:#ffffff;
}

/* admin preview */
.batik-admin-preview{
  height:160px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background-color:#f4f7fb;
  position:relative;
  overflow:hidden;
}
.batik-admin-preview::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:var(--batik-opacity, .22);
}
.batik-admin-preview.size-small::before{ background-size:120px 120px,120px 120px,120px 120px !important; }
.batik-admin-preview.size-medium::before{ background-size:170px 170px,170px 170px,170px 170px !important; }
.batik-admin-preview.size-large::before{ background-size:240px 240px,240px 240px,240px 240px !important; }

.batik-admin-preview.preview-mega_mendung::before{
  background-image:
    radial-gradient(circle at 20% 55%, var(--batik-color) 0 10%, transparent 10% 18%),
    radial-gradient(circle at 35% 50%, var(--batik-color) 0 11%, transparent 11% 20%),
    radial-gradient(circle at 50% 56%, var(--batik-color) 0 12%, transparent 12% 22%),
    radial-gradient(circle at 68% 52%, var(--batik-color) 0 11%, transparent 11% 20%),
    radial-gradient(circle at 82% 56%, var(--batik-color) 0 10%, transparent 10% 18%);
}
.batik-admin-preview.preview-kawung::before{
  background-image:
    radial-gradient(ellipse at center, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at top, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at bottom, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at left, transparent 42%, var(--batik-color) 43% 47%, transparent 48%),
    radial-gradient(ellipse at right, transparent 42%, var(--batik-color) 43% 47%, transparent 48%);
}
.batik-admin-preview.preview-parang::before{
  background-image:
    repeating-linear-gradient(-35deg,
      transparent 0 14px,
      color-mix(in srgb, var(--batik-color) 100%, transparent) 14px 18px,
      transparent 18px 34px);
}
.batik-admin-preview.preview-ceplok::before{
  background-image:
    radial-gradient(circle at 25% 25%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 75% 25%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 25% 75%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 75% 75%, var(--batik-color) 0 8%, transparent 8% 20%),
    radial-gradient(circle at 50% 50%, var(--batik-color) 0 5%, transparent 5% 12%);
}
.batik-admin-preview.preview-truntum::before{
  background-image:
    radial-gradient(circle at 20% 20%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 50% 30%, var(--batik-color) 0 3%, transparent 3% 12%),
    radial-gradient(circle at 80% 20%, var(--batik-color) 0 3%, transparent 3% 12%);
}
.batik-admin-preview.preview-none::before{
  display:none;
}