/* ==========================================================================
   MAX [MAXIMOS] — EFFECTS
   Glassmorphism, red-deep surface, soft gradients, shadow/glow.
   LARANGAN KERAS: tidak ada efek drip/splatter/tekstur organik.
   Keputusan user (Fase 1): lacquer/bevel timbul dilarang — depth merah
   selalu KE DALAM (inset). Specular linear/radial halus saja.
   ========================================================================== */

/* ------------------------------------------------------------------
   GLASS — panel semi-transparan (DIGITAL).
   Butuh bg gradient/foto di belakangnya supaya blur terlihat.
   ------------------------------------------------------------------ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),      /* inner glow atas */
    inset 0 0 32px color-mix(in srgb, var(--text-primary) 2%, transparent),  /* inner glow halus */
    var(--shadow-md);
}

.glass--strong {
  background: var(--glass-bg-strong);
}

/* ------------------------------------------------------------------
   GLASS — PRINT ADAPTATION.
   Aturan konversi (WAJIB untuk invoice/kartu nama/brosur):
   1. backdrop-filter DIBUANG — printer tidak bisa blur.
   2. Transparansi diganti gradient statis yang meniru kaca:
      diagonal terang-gelap + sheen di-bake.
   3. Border & inner highlight dipertahankan (aman dicetak).
   4. Pastikan bg di bawahnya tetap dari bg-scale (kontras teks tidak berubah).
   ------------------------------------------------------------------ */
.glass--print {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--text-primary) 10%, transparent) 0%,
      color-mix(in srgb, var(--text-primary) 4%, transparent) 35%,
      color-mix(in srgb, var(--text-primary) 2%, transparent) 60%,
      color-mix(in srgb, var(--text-primary) 7%, transparent) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  /* tanpa drop shadow besar — hemat tinta, tepi bersih saat cetak */
}

/* Auto-fallback: kalau media di-print langsung dari browser,
   .glass berubah perilaku jadi .glass--print */
@media print {
  .glass,
  .glass--strong {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(160deg,
        color-mix(in srgb, var(--text-primary) 10%, transparent) 0%,
        color-mix(in srgb, var(--text-primary) 4%, transparent) 35%,
        color-mix(in srgb, var(--text-primary) 2%, transparent) 60%,
        color-mix(in srgb, var(--text-primary) 7%, transparent) 100%);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
}

/* ------------------------------------------------------------------
   RED DEEP — permukaan merah maroon dengan DIMENSI KE DALAM.
   Keputusan user (Fase 1): lacquer/bevel timbul DIHAPUS. Depth dibangun
   lewat inset shadow + vignette gelap di tepi — seperti panel kaca merah
   yang tenggelam ke dalam bidang, bukan tombol menonjol keluar.
   Murni geometris — TANPA noise, TANPA bentuk organik.
   ------------------------------------------------------------------ */
.red-deep {
  background:
    /* vignette tepi gelap — pusat sedikit lebih hidup, tepi tenggelam */
    radial-gradient(120% 140% at 50% 20%,
      var(--red-600) 0%,
      var(--red-800) 55%,
      var(--red-900) 100%);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: var(--radius-lg);
  color: var(--text-on-red);
  box-shadow:
    inset 0 2px 14px color-mix(in srgb, var(--bg-0) 55%, transparent),   /* bibir atas gelap — kesan cekung */
    inset 0 0 48px color-mix(in srgb, var(--red-950) 45%, transparent),    /* vignette dalam */
    inset 0 -1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent); /* refleksi tipis bibir bawah */
}

/* Varian lebih gelap — untuk blok sangat besar / cover */
.red-deep--darker {
  background:
    radial-gradient(120% 140% at 50% 20%,
      var(--red-700) 0%,
      var(--red-900) 60%,
      var(--red-950) 100%);
  border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-radius: var(--radius-lg);
  color: var(--text-on-red);
  box-shadow:
    inset 0 2px 18px color-mix(in srgb, var(--bg-0) 60%, transparent),
    inset 0 0 64px color-mix(in srgb, var(--red-950) 50%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* ------------------------------------------------------------------
   BACKGROUND GRADIENTS — gelap lembut, tidak pernah flat hitam.
   ------------------------------------------------------------------ */

/* Preset 1 — halaman standar: hitam → abu gelap netral, tanpa merah */
.bg-soft-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 70% -10%,
      color-mix(in srgb, var(--bg-3) 85%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  background-color: var(--bg-0);
}

/* Preset 2 — hero/cover: dominan tetap hitam/abu, crimson hanya HINT
   di satu sudut (aksen, bukan warna dominan) */
.bg-soft-gradient--hero {
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%,
      color-mix(in srgb, var(--red-700) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 100% 90% at 10% 100%,
      color-mix(in srgb, var(--bg-3) 90%, transparent) 0%, transparent 65%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-3) 100%);
  background-color: var(--bg-0);
}

/* Preset 3 — print-safe: linear sederhana, aman untuk rasterisasi PDF */
.bg-soft-gradient--print {
  background: linear-gradient(170deg,
    var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
  background-color: var(--bg-0);
}

/* ------------------------------------------------------------------
   WATERMARK — logo/motif translusen besar di bg halaman (DNA sample).
   Pakai: <div class="watermark"><img src=".../logo.png"></div>
   ------------------------------------------------------------------ */
.watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.watermark img {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  opacity: 0.05;
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------
   SHADOW / GLOW UTILITIES
   ------------------------------------------------------------------ */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.glow-red  { box-shadow: var(--glow-red); }
.glow-red-md { box-shadow: var(--glow-red), var(--shadow-md); }

/* Garis pemisah tipis */
.rule { border: 0; border-top: 1px solid var(--rule-subtle); }
.rule--strong { border-top-color: var(--rule-strong); }