/**
 * Gradient Text Styles
 *
 * Setiap class mengikuti konvensi: .has-grad-{nama}-color
 *
 * Daftar class yang tersedia:
 *   .has-grad-emerald-color
 *   .has-grad-deep-ocean-color
 *   .has-grad-neon-aqua-color
 *   .has-grad-royal-cyan-color
 *   .has-grad-vibrant-color
 */

/* -------------------------------------------------------------------------
   Base mixin — diterapkan ke semua gradient class via selector group
   ------------------------------------------------------------------------- */
.has-grad-emerald-color,
.has-grad-deep-ocean-color,
.has-grad-neon-aqua-color,
.has-grad-royal-cyan-color,
.has-grad-vibrant-color {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* -------------------------------------------------------------------------
   Emerald — Hijau emerald → Cyan → Gold
   ------------------------------------------------------------------------- */
.has-grad-emerald-color {
    background-image: linear-gradient(
        135deg,
        #00a86b 0%,
        #0099cc 50%,
        #ffd700 100%
    );
}

/* -------------------------------------------------------------------------
   Deep Ocean — Navy gelap → Turquoise terang
   ------------------------------------------------------------------------- */
.has-grad-deep-ocean-color {
    background-image: linear-gradient(135deg, #001a4d 0%, #00fff5 100%);
}

/* -------------------------------------------------------------------------
   Neon Aqua — Aqua neon → Blue neon
   ------------------------------------------------------------------------- */
.has-grad-neon-aqua-color {
    background-image: linear-gradient(135deg, #00fff5 0%, #0080ff 100%);
}

/* -------------------------------------------------------------------------
   Royal Cyan — Royal Blue → Cyan terang
   ------------------------------------------------------------------------- */
.has-grad-royal-cyan-color {
    background-image: linear-gradient(135deg, #0033cc 0%, #00ffff 100%);
}

/* -------------------------------------------------------------------------
   Vibrant — Ungu → Pink → Kuning
   ------------------------------------------------------------------------- */
.has-grad-vibrant-color {
    background-image: linear-gradient(
        135deg,
        #4b00e0 0%,
        #ff00a8 50%,
        #ffe600 100%
    );
}

/* -------------------------------------------------------------------------
   Selection styling
   Hanya untuk class yang benar-benar didefinisikan di file ini.
   ------------------------------------------------------------------------- */
.has-grad-emerald-color::selection,
.has-grad-deep-ocean-color::selection,
.has-grad-neon-aqua-color::selection,
.has-grad-royal-cyan-color::selection,
.has-grad-vibrant-color::selection {
    -webkit-text-fill-color: #fff;
    background-color: rgba(0, 255, 245, 0.3);
}