/* ==========================================
           GLOBAL
        ========================================== */

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100%;
        }

        body {

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            background: #e0f7ff;

            min-height: 100dvh;

            color: #0f172a;

            padding:
                env(safe-area-inset-top)
                env(safe-area-inset-right)
                env(safe-area-inset-bottom)
                env(safe-area-inset-left);
        }


        /* ==========================================
           BACKGROUND KIPAS
        ========================================== */

        .background {

            position: fixed;

            inset: 0;

            z-index: -10;

            overflow: hidden;

            background:
                linear-gradient(
                    180deg,
                    #38bdf8 0%,
                    #67d7f5 45%,
                    #e0f7ff 100%
                );
        }


        /* Kipas atas */

        .background::before {

            content: "";

            position: absolute;

            width: 170vw;
            height: 55vh;

            top: -35vh;
            left: -35vw;

            background: #7ddff8;

            border-radius:
                0 0 50% 50%;

            transform: rotate(-6deg);

            box-shadow:
                0 20px 60px
                rgba(0, 100, 160, .15);
        }


        /* Kipas bawah */

        .background::after {

            content: "";

            position: absolute;

            width: 150vw;
            height: 50vh;

            bottom: -38vh;
            left: -25vw;

            background:
                rgba(255,255,255,.78);

            border-radius:
                50% 50% 0 0;

            transform: rotate(5deg);
        }


        /* ==========================================
           HEADER NAVBAR
        ========================================== */

        .main-header {

            position: fixed;

            top: 0;
            left: 0;
            right: 0;

            z-index: 1000;

            background:
                rgba(125, 223, 248, .96);

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            box-shadow:
                0 2px 15px
                rgba(0, 80, 130, .15);

            padding-top:
                env(safe-area-inset-top);
        }


        .navbar {

            min-height: 64px;

            padding:
                8px 16px;
        }


        /* ==========================================
           LOGO / LABEL
        ========================================== */

        .brand {

            display: flex;

            align-items: center;

            gap: 10px;

            text-decoration: none;

            color: #075985;

            font-size: 20px;

            font-weight: 700;
        }


        .brand-icon {

            width: 40px;
            height: 40px;

            border-radius: 12px;

            display: flex;

            align-items: center;
            justify-content: center;

            background:
                linear-gradient(
                    135deg,
                    transparent,
                    #fff
                );

            color: #000080;

            font-size: 21px;

            box-shadow:
                0 5px 12px
                rgba(2,132,199,.25);
        }


        /* ==========================================
           NAV MENU
        ========================================== */

        .nav-menu {

            display: flex;

            align-items: center;

            gap: 5px;

            margin: 0;

            padding: 0;

            list-style: none;
        }


        .nav-menu a {

            display: flex;

            align-items: center;

            gap: 6px;

            padding:
                9px 12px;

            border-radius: 12px;

            text-decoration: none;

            color: #075985;

            font-size: 14px;

            font-weight: 600;
        }


        .nav-menu a:active {

            background:
                rgba(255,255,255,.55);

            transform: scale(.96);
        }


        .nav-menu i {

            font-size: 18px;
        }


        /* ==========================================
           MOBILE NAV TOGGLE
        ========================================== */

        .mobile-nav-toggle {

            display: none;

            border: none;

            background: transparent;

            color: #075985;

            font-size: 27px;

            width: 44px;
            height: 44px;

            border-radius: 12px;
        }


        /* ==========================================
           CONTENT
        ========================================== */

        .page-content {

            width: 100%;

            padding-top:
                calc(
                    64px +
                    env(safe-area-inset-top)
                );

            padding-bottom:
                calc(
                    30px +
                    env(safe-area-inset-bottom)
                );
        }


        /* ==========================================
           HERO KANTOR
        ========================================== */

        .hero {

            width: 100%;

            min-height: 220px;

            background-image:
                linear-gradient(
                    rgba(0,60,100,.25),
                    rgba(0,60,100,.55)
                ),
                url("img/banner-tsg.png");

            background-size: cover;

            background-position: center;

            display: flex;

            align-items: flex-end;

            padding: 25px;

            border-radius:
                0 0 45% 45%;

            box-shadow:
                0 10px 30px
                rgba(0,80,130,.18);
        }


        .hero-content {

            color: white;

            text-shadow:
                0 2px 6px
                rgba(0,0,0,.35);
        }


        .hero-content h1 {

            font-size: 28px;

            font-weight: 700;

            margin: 0;
        }


        .hero-content p {

            margin: 5px 0 0;

            font-size: 14px;
        }


        /* =====================================
           LOGIN BUTTON
        ====================================== */

        .btn-primer {
            width: 100%;

            height: 55px;

            border: none;

            border-radius: 16px;

            background:
                linear-gradient(
                    135deg,
                    #0284c7,
                    #38bdf8
                );

            color: white;

            font-size: 17px;

            font-weight: 600;

            letter-spacing: .3px;

            box-shadow:
                0 10px 20px rgba(2,132,199,.25);

            transition: .2s;
        }


        .btn-primer:hover {
            transform: translateY(-1px);

            box-shadow:
                0 13px 25px rgba(2,132,199,.30);
        }


        .btn-primer:active {
            transform: scale(.98);
        }


        .btn-primer i {
            margin-right: 7px;
        }


        /* =====================================
           INSTALL BUTTON ANDROID
        ====================================== */

        .btn-alert {

            width: 100%;

            height: 55px;

            border: none;

            border-radius: 16px;

            background:
                linear-gradient(
                    135deg,
                    #a80904,
                    #e25644
                );

            color: white;

            font-size: 17px;

            font-weight: 600;

            letter-spacing: .3px;

            box-shadow:
                0 10px 20px rgba(2,132,199,.25);

            transition: .2s;
        }


        .btn-alert:hover {
            transform: translateY(-1px);

            box-shadow:
                0 13px 25px rgba(2,132,199,.30);
        }


        .btn-alert:active {
            transform: scale(.98);
        }


        .btn-alert i {
            margin-right: 7px;
        }


        /* =====================================
           INSTALL BUTTON IOS
        ====================================== */

        .btn-fine {

            width: 100%;

            height: 55px;

            border: none;

            border-radius: 16px;

            background:
                linear-gradient(
                    135deg,
                    #7e860c,
                    #5ee264
                );

            color: white;

            font-size: 17px;

            font-weight: 600;

            letter-spacing: .3px;

            box-shadow:
                0 10px 20px rgba(2,132,199,.25);

            transition: .2s;
        }


        .btn-fine:hover {
            transform: translateY(-1px);

            box-shadow:
                0 13px 25px rgba(2,132,199,.30);
        }


        .btn-fine:active {
            transform: scale(.98);
        }


        .btn-fine i {
            margin-right: 7px;
        }


        /* ==========================================
           CARD CONTENT
        ========================================== */

        .content-container {

            width: 100%;

            padding:
                20px 15px;
        }


/*        
        .content-card {

            width: 100%;

            height: auto;

            min-height: 130px;

            background:
                rgba(255,255,255,.97);

            border-radius: 22px;

            margin-bottom: 16px;

            padding: 20px;

            box-shadow:
                0 8px 25px
                rgba(0,80,130,.12);

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }


        .content-card:active {

            transform: scale(.99);
        }

*/

/* ==========================================
   PAPER FOLD EFFECT
========================================== */

.content-card {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 130px;

    background: #ffffff;

    border-radius: 22px;

    margin-bottom: 16px;

    padding: 20px;

    box-shadow:
        0 8px 25px rgba(0, 80, 130, .12);
}


/* Lipatan sudut kanan atas */

.content-card::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 48px;
    height: 48px;

    background:
        linear-gradient(
            135deg,
            #3594BD 0%,
            #3594BD 48%,
            #3594BD 49%,
            #3594BD 70%,
            #3594BD 71%
        );

    border-bottom-left-radius: 18px;

    box-shadow:
        -4px 4px 8px rgba(0, 80, 130, .08);

    pointer-events: none;
}


/* Bayangan bagian dalam lipatan */

.content-card::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 48px;
    height: 48px;

    background:
        linear-gradient(
            135deg,
            #67d7f5 0%,
            #67d7f5 46%,
            #67d7f5 47%,
            #67d7f5 49%,
            #67d7f5 70%
        );
    
                    /*     
                    #38bdf8 0%,
                    #67d7f5 45%,
                    */
    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 0
        );

    pointer-events: none;
}


/* ==========================================
   EFEK SAAT CARD DISENTUH
========================================== */

.content-card:active {

    transform:
        translateY(1px)
        scale(.995);

    box-shadow:
        0 5px 15px rgba(0, 80, 130, .10);
}


/* ==========================================
   OPTIONAL:
   FOLD LEBIH TERLIHAT
========================================== */

.content-card.fold-large::before,
.content-card.fold-large::after {

    width: 58px;
    height: 58px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .content-card::before,
    .content-card::after {

        width: 42px;
        height: 42px;
    }

}


        /* ==========================================
           MOBILE
        ========================================== */

        @media (max-width: 768px) {

            .mobile-nav-toggle {

                display: flex;

                align-items: center;

                justify-content: center;
            }


            .nav-menu {

                position: absolute;

                top: calc(
                    64px +
                    env(safe-area-inset-top)
                );

                left: 12px;
                right: 12px;

                display: none;

                flex-direction: column;

                align-items: stretch;

                background:
                    rgba(255,255,255,.97);

                border-radius: 18px;

                padding: 10px;

                box-shadow:
                    0 12px 30px
                    rgba(0,80,130,.18);
            }


            .nav-menu.show {

                display: flex;
            }


            .nav-menu a {

                padding: 13px 15px;

                border-radius: 12px;
            }


            .hero {

                min-height: 210px;

                padding: 22px;

                border-radius:
                    0 0 38% 38%;
            }


            .hero-content h1 {

                font-size: 24px;
            }
        }


        /* ==========================================
           iPHONE SAFE AREA
        ========================================== */

        @supports (-webkit-touch-callout: none) {

            body {

                min-height:
                    -webkit-fill-available;
            }
        }

        /* ==========================================
           TABLE QUIZ
        ========================================== */

        th { font-size:11px; color:#091369;}
        td { font-size:11px; color:#091369;}
        th,td{padding:5px 8px;}
        th{ text-transform: uppercase; color:#091369; }
        /*table tr:nth-child(odd){color:#E7EBCE; }
        table tr:nth-child(even){color:#00FFFF; }*/

        /* ==========================================
           RADIO QUIZ
        ========================================== */

.pilihan ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #EDF0A3;
}

.pilihan li {
  float: left;
}

.pilihan li {
  display: block;
  color: #000;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

.pilihan li a:hover {
  background-color: #none;
}