/* ========================================================= */
/* ===== JUDUL: STYLE KUSTOM UNTUK WARNA, FONT, DAN EFEK ===== */
/* ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Chela+One&family=Inconsolata:wght@200..900&family=Indie+Flower&family=Lancelot&family=Reenie+Beanie&family=Slabo+27px&family=Smooch+Sans:wght@100..900&family=Tangerine:wght@400;700&display=swap');

/* --------------------------------------------------------- */
/* --- Subjudul: Goolge Font Custom --- */
/* --------------------------------------------------------- */

.fo-indie {
    font-family: "Indie Flower", cursive;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-sans {
    font-family: "Smooch Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.fo-chela {
    font-family: "Chela One", system-ui;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-tangerine {
    font-family: "Tangerine", cursive;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-reenie {
    font-family: "Reenie Beanie", cursive;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-lancelot {
    font-family: "Lancelot", serif;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-barlow {
    font-family: "Barlow Condensed", sans-serif;
    font-size: medium;
    font-weight: 400;
    font-style: normal;
}

.fo-inco {
    font-family: "Inconsolata", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.fo-slabo {
    font-family: "Slabo 27px", serif;
    font-weight: 400;
    font-style: normal;
}


/* --------------------------------------------------------- */
/* --- Subjudul: Efek Warna Gradasi dan Berkilau (Glowing) --- */
/* --------------------------------------------------------- */

.text-transparent {
    color: transparent;
    -webkit-text-stroke: 1px #000;
}

/* Warna teks default untuk elemen gradasi adalah putih */
.bg-golds,
.bg-jades,
.bg-sages,
.bg-roses,
.bg-sunsets,
.bg-woods,
.bg-seas,
.bg-oceans,
.bg-drets,
.bg-mints,
.bg-navys,
.bg-neons,
.bg-futures {
    color: #ffffff;
}

.bg-golds {
    background: #fab400;
    background: linear-gradient(200deg, rgba(250, 250, 250, 0.8) 0%, rgba(250, 210, 100, 0.8) 10%, rgba(250, 180, 0, 0.8) 50%);
    box-shadow: 0 0 15px rgba(250, 180, 10, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-jades {
    background: #96FA3C;
    background: linear-gradient(200deg,
            rgba(120, 250, 10, 0.8) 0%,
            rgba(200, 250, 120, 0.8) 0%,
            rgba(170, 250, 50, 0.8) 70%);
    box-shadow:
        0 0 15px rgba(0, 150, 0, 0.8),
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-sages {
    background: #14B450;
    background: linear-gradient(200deg,
            rgba(100, 200, 70, 0.8) 0%,
            rgba(50, 250, 120, 0.8) 0%,
            rgba(10, 100, 40, 0.8) 70%);
    box-shadow: 0 0 15px rgba(20, 140, 100, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-roses {
    background: #dd0d0d;
    background: linear-gradient(200deg,
            #dd0d0d 0%,
            #DC143C 50%,
            #B22222 100%);
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-sunsets {
    background: #FA640A;
    background: linear-gradient(200deg,
            rgba(250, 100, 10, 0.8) 0%,
            rgba(250, 180, 50, 0.8) 30%,
            rgba(250, 50, 50, 0.8) 60%);
    box-shadow:
        0 0 15px rgba(250, 100, 70, 0.8),
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-seas {
    background: #14C8DC;
    background: linear-gradient(200deg,
            rgba(50, 170, 150, 0.8) 0%,
            rgba(20, 200, 220, 0.8) 30%,
            rgba(50, 120, 150, 0.8) 60%);
    box-shadow:
        0 0 15px rgba(70, 120, 180, 0.8),
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-oceans {
    background: #325096;
    background: linear-gradient(200deg,
            rgba(10, 10, 120, 0.8) 0%,
            rgba(50, 120, 250, 0.8) 30%,
            rgba(50, 80, 150, 0.8) 60%);
    box-shadow:
        0 0 15px rgba(50, 80, 150, 0.8),
        0 0 0 2px rgba(250, 250, 250, 0.7),
        0 0 20px 5px rgba(250, 250, 250, 0.4);
}

.bg-drets {
    background: linear-gradient(200deg,
            #7b3d0c 0%,
            #b8621d 50%,
            #e0995c 100%);
    box-shadow:
        0 0 15px rgba(255, 160, 122, 0.9),
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(255, 255, 255, 0.5);
}

.bg-mints {
    background: #98FF98;
    background: linear-gradient(200deg, #98FF98 0%, #66CDAA 50%, #3CB371 100%);
    box-shadow:
        0 0 20px rgba(152, 255, 152, 0.9),
        0 0 40px rgba(152, 255, 152, 0.6),
        0 0 60px rgba(152, 255, 152, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.bg-neons {
    background: #DC32DC;
    background: linear-gradient(200deg, #B414C8 0%, #F0C8F0 50%, #0A6496 100%);
    box-shadow:
        0 0 20px rgba(220, 50, 220, 0.9),
        0 0 40px rgba(240, 200, 240, 0.6),
        0 0 60px rgba(10, 100, 150, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.bg-futures {
    background: #149696;
    background: linear-gradient(200deg,
            #0A7878 0%,
            #78FAFA 50%,
            #141464 100%);
    box-shadow:
        0 0 20px rgba(10, 120, 120, 0.9),
        0 0 40px rgba(120, 250, 250, 0.6),
        0 0 60px rgba(20, 20, 100, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.bg-snows {
    background: #F0F0F0;
    background: linear-gradient(200deg,
            rgba(240, 240, 240, 0.9) 0%,
            rgba(250, 250, 250, 0.9) 50%,
            rgba(230, 230, 230, 0.6) 80%,
            rgba(200, 200, 200, 0.8) 100%);
    box-shadow:
        0 0 15px rgba(230, 230, 230, 0.8),
        0 0 0 2px rgba(250, 250, 250, 0.7),
        0 0 20px 5px rgba(200, 200, 200, 0.5);
    color: #000;
}

.bg-deeps {
    background: linear-gradient(200deg, #0a0a0a 0%, #1a1a1a 40%, #2a2a2a 70%, #0d0d0d 100%);
    box-shadow:
        0 0 15px rgba(50, 50, 50, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.15),
        0 0 25px 8px rgba(100, 100, 100, 0.2);
    color: #fff;
}

/* --------------------------------------------------------- */
/* --- Subjudul: Warna Solid (Tanpa Gradasi) --- */
/* --------------------------------------------------------- */

/* Warna teks default untuk elemen solid adalah putih */
.bg-gold,
.bg-jade,
.bg-sage,
.bg-rose,
.bg-dret,
.bg-sunset,
.bg-wood,
.bg-sea,
.bg-ocean,
.bg-mint,
.bg-neon,
.bg-deep {
    color: #ffffff;
}

.bg-gold {
    background-color: #FAF03C;
}


.bg-mint {
    background-color: #32FA96;
}

.bg-jade {
    background-color: #96FA3C;
}

.bg-sage {
    background-color: #14B450;
}

.bg-rose {
    background-color: #C80F0F;
}

.bg-dret {
    background-color: #FAC864;
}

.bg-sunset {
    background-color: #FA640A;
}

.bg-sea {
    background-color: #14C8DC;
}

.bg-ocean {
    background-color: #325096;
}

.bg-snow {
    background-color: #A0A0A0;
    color: #000;
}

.bg-deep {
    background-color: #0a0a0a;
}

/* --------------------------------------------------------- */
/* --- Subjudul: Button Kustom (Solid & Outline) --- */
/* --------------------------------------------------------- */

/* Basis untuk semua tombol kustom */
.btn-gold,
.btn-jade,
.btn-sage,
.btn-rose,
.btn-dret,
.btn-sunset,
.btn-sea,
.btn-ocean,
.btn-snow,
.btn-mint,
.btn-deep,
.btn-outline-gold,
.btn-outline-jade,
.btn-outline-sage,
.btn-outline-rose,
.btn-outline-dret,
.btn-outline-sunset,
.btn-outline-sea,
.btn-outline-ocean,
.btn-outline-snow,
.btn-outline-mint,
.btn-outline-neon,
.btn-outline-deep,
.btn-alt-gold,
.btn-alt-jade,
.btn-alt-sage {
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    /* Diperbarui sesuai permintaan */
    font-family: "Courier Prime", monospace;
    /* Diperbarui sesuai permintaan */
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Tombol Solid --- */
/* Warna teks default untuk tombol solid adalah putih */
.btn-gold,
.btn-jade,
.btn-sage,
.btn-rose,
.btn-dret,
.btn-sunset,
.btn-sea,
.btn-ocean,
.btn-mint,
.btn-neon,
.btn-deep {
    color: #ffffff;
    border: 1px solid transparent;
}

.btn-gold {
    background-color: #FAF03C;
}


.btn-mint {
    background-color: #32FA96;
}

.btn-jade {
    background-color: #96FA3C;
}

.btn-sage {
    background-color: #14B450;
}

.btn-rose {
    background-color: #C80F0F;
}

.btn-dret {
    background-color: #b8621d;
}

.btn-sunset {
    background-color: #FA640A;
}

.btn-sea {
    background-color: #14C8DC;
}

.btn-ocean {
    background-color: #325096;
}

.btn-snow {
    background-color: #A0A0A0;
    color: #000;
}

.btn-deep {
    background-color: #0a0a0a;
    border-color: #1a1a1a;
}

/* Efek Hover untuk Tombol Solid */
/* Menggunakan warna background gradasi untuk hover */
.btn-gold:hover {
    background: linear-gradient(200deg, rgba(250, 250, 250, 0.8) 0%, rgba(250, 210, 100, 0.8) 10%, rgba(250, 180, 0, 0.8) 50%);
    filter: brightness(1.1);
    color: #000;
}

.btn-jade:hover {
    background: linear-gradient(200deg, rgba(250, 250, 250, 0.8) 0%, rgba(100, 200, 20, 0.8) 70%);
    filter: brightness(1.1);
    color: #000;
}

.btn-sage:hover {
    background: linear-gradient(200deg, rgba(250, 250, 250, 0.8) 0%, rgba(20, 140, 100, 0.8) 70%);
    filter: brightness(1.1);
    color: #000;
}

.btn-rose:hover {
    background: linear-gradient(200deg, #dd0d0d 0%, #DC143C 50%, #B22222 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-dret:hover {
    background: linear-gradient(200deg, #7b3d0c 0%, #b8621d 50%, #e0995c 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-sunset:hover {
    background: linear-gradient(200deg, #FF7F50 0%, #FF4500 50%, #DC143C 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-sea:hover {
    background: linear-gradient(200deg, #4682B4 0%, #1E90FF 50%, #00BFFF 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-ocean:hover {
    background: linear-gradient(200deg, rgba(250, 250, 250, 0.8) 0%, rgba(50, 80, 150, 0.8) 70%);
    filter: brightness(1.1);
    color: #000;
}

.btn-mint:hover {
    background: linear-gradient(200deg, #98FF98 0%, #66CDAA 50%, #3CB371 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-neon:hover {
    background: linear-gradient(200deg, #B414C8 0%, #F0C8F0 50%, #0A6496 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-snow:hover {
    background: linear-gradient(200deg, #f0f0f0 0%, #ffffff 50%, #b8b8b8 60%, #e0e0e0 80%, #7a7979 100%);
    filter: brightness(1.1);
    color: #000;
}

.btn-deep:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* --- Tombol Outline --- */
.btn-outline-gold,
.btn-outline-jade,
.btn-outline-sage,
.btn-outline-rose,
.btn-outline-dret,
.btn-outline-sunset,
.btn-outline-sea,
.btn-outline-ocean,
.btn-outline-snow,
.btn-outline-mint,
.btn-outline-neon {
    background: transparent;
}

.btn-outline-gold {
    border: 1px solid #FAB400;
    color: #FAB400;
}

/* Mengatur warna teks kembali ke warna border untuk outline */
.btn-outline-jade {
    border: 1px solid #00B300;
    color: #00B300;
}

.btn-outline-sage {
    border: 1px solid #0d6427;
    color: #0d6427;
}

.btn-outline-rose {
    border: 1px solid #dd0d0d;
    color: #dd0d0d;
}

.btn-outline-dret {
    border: 1px solid #B87333;
    color: #B87333;
}

.btn-outline-sunset {
    border: 1px solid #FF4500;
    color: #FF4500;
}

.btn-outline-sea {
    border: 1px solid #4682B4;
    color: #4682B4;
}

.btn-outline-ocean {
    border: 1px solid #325096;
    color: #325096;
}

.btn-outline-snow {
    border: 1px solid #A0A0A0;
    color: #A0A0A0;
    /* Mengatur warna teks kembali ke warna border untuk outline snow */
}

.btn-outline-mint {
    border: 1px solid #15bb60;
    color: #15bb60;
}

.btn-outline-neon {
    border: 1px solid #b10ba8;
    color: #b10ba8;
}

/* Tombol Outline Deep */
.btn-outline-deep {
    background-color: transparent;
    color: #fff;
    border: 1px solid #2a2a2a;
}

/* Efek Hover untuk Tombol Outline */
.btn-outline-gold:hover {
    background-color: #FAB400;
    color: #fff;
}

.btn-outline-jade:hover {
    background-color: #00B300;
    color: #fff;
}

.btn-outline-sage:hover {
    background-color: #0d6427;
    color: #fff;
}

.btn-outline-rose:hover {
    background-color: #dd0d0d;
    color: #fff;
}

.btn-outline-dret:hover {
    background-color: #B87333;
    color: #fff;
}

.btn-outline-sunset:hover {
    background-color: #FF4500;
    color: #fff;
}

.btn-outline-sea:hover {
    background-color: #4682B4;
    color: #fff;
}

.btn-outline-ocean:hover {
    background-color: #325096;
    color: #fff;
}

.btn-outline-snow:hover {
    background-color: #A0A0A0;
    color: #000;
    /* Warna teks tetap hitam saat hover untuk outline snow */
}

.btn-outline-mint:hover {
    background-color: #15bb60;
    color: #fff;
}

.btn-outline-neon:hover {
    background-color: #b10ba8;
    color: #fff;
}

.btn-outline-deep:hover {
    background-color: #0a0a0a;
    color: #fff;
}

/* --- Tombol Alternatif (warna terang dengan outline terang) --- */
/* Warna teks default untuk tombol alternatif */
.btn-alt-gold,
.btn-alt-rose,
.btn-alt-sage {
    color: #000;
}

.btn-alt-gold {
    background-color: #fff8e1;
    color: #f8d06a;
    /* Mengatur warna teks khusus untuk alt gold */
    border: 1px solid #ffb702;
}

.btn-alt-sage {
    background-color: #f0fff5;
    color: #49ac67;
    /* Mengatur warna teks khusus untuk alt sage */
    border: 1px solid #00c73c;
}

.btn-alt-rose {
    background-color: #f0fff5;
    color: #ff5656;
    /* Mengatur warna teks khusus untuk alt sage */
    border: 1px solid #ff0000;
}

/* --------------------------------------------------------- */
/* --- Subjudul: Gaya Tombol Disabled --- */
/* --------------------------------------------------------- */

.btn-gold:disabled,
.btn-jade:disabled,
.btn-sage:disabled,
.btn-rose:disabled,
.btn-dret:disabled,
.btn-sunset:disabled,
.btn-sea:disabled,
.btn-ocean:disabled,
.btn-snow:disabled,
.btn-mint:disabled,
.btn-neon:disabled,
.btn-deep:disabled,
.btn-outline-gold:disabled,
.btn-outline-jade:disabled,
.btn-outline-sage:disabled,
.btn-outline-rose:disabled,
.btn-outline-dret:disabled,
.btn-outline-sunset:disabled,
.btn-outline-sea:disabled,
.btn-outline-ocean:disabled,
.btn-outline-snow:disabled,
.btn-outline-mint:disabled,
.btn-outline-neon:disabled,
.btn-outline-deep:disabled,
.btn-alt-gold:disabled,
.btn-alt-jade:disabled,
.btn-alt-sage:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    filter: grayscale(100%);
}

.btn-deep:disabled,
.btn-outline-deep:disabled {
    color: #999;
    background-color: #333;
    border-color: #555;
}

.btn-snow:disabled,
.btn-outline-snow:disabled {
    color: #555;
    background-color: #d0d0d0;
    border-color: #c0c0c0;
}

/* --------------------------------------------------------- */
/* --- Subjudul: Sertifikat Responsive --- */
/* --------------------------------------------------------- */

.sertifikat {
    max-width: 100%;
    width: 900px;
    aspect-ratio: 900 / 640;
    /* menjaga proporsi */
    margin: 2rem auto;
    padding: 2rem;
    border: 8px solid transparent;
    border-image: linear-gradient(200deg,
            rgba(250, 250, 250, 0.8) 0%,
            rgba(250, 210, 100, 0.8) 10%,
            rgba(250, 180, 0, 0.8) 50%) 1;
    background: url('../uploads/img/bg_sertifikat.webp') no-repeat center;
    background-size: cover;
    text-align: center;
    position: relative;
    border-radius: 1rem;
    /* opsional biar smooth */
}

/* Judul */
.title {
    font-size: clamp(22px, 2vw, 38px);
    font-family: "Lancelot", serif;
    font-weight: bold;
    color: #2e5a2e;
}

/* Nama */
.nama {
    font-size: clamp(20px, 4vw, 38px);
    font-family: "Chela One", system-ui;
    font-weight: bold;
    text-decoration: underline;
    color: #10608f;
    margin-top: 2rem;
}

/* No ID */
.noid {
    font-size: clamp(16px, 2vw, 20px);
    font-family: "Chela One", system-ui;
    font-style: italic;
    font-weight: 400;
    color: #10608f;
}

/* Ucapan */
.ucapan {
    font-size: clamp(12px, 2.2vw, 22px);
    font-family: "Lancelot", serif;
    margin: 2rem 0;
    font-style: italic;
    color: #7c7c7c;
}

/* Bonus */
.bonus {
    font-size: clamp(24px, 6vw, 52px);
    font-family: "Lancelot", serif;
    font-weight: bold;
    background: linear-gradient(200deg,
            rgb(250, 230, 0) 0%,
            rgba(250, 200, 50, 0.9) 10%,
            rgb(210, 120, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgb(250, 240, 0);
}

/* Logo */
.logo88 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: clamp(60px, 10vw, 100px);
    height: auto;
    max-height: 80px;
}

/* --------------------------------------------------------- */
/* --- Tambahan media query kecil --- */
/* --------------------------------------------------------- */
@media (max-width: 576px) {
    .sertifikat {
        padding: 1rem;
        border-width: 4px;
    }

    .nama {
        margin-top: 0.5rem;
    }
}