/* =========================================================
   CSS hasil ekstraksi dari blok <style> #12
   Nama file: 12-quiz-card.css
   ========================================================= */

* {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box
                            }

                            .quiz-container {
                                background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
                                margin-top: 50px !important;
                                color: #fff;
                                border: 1px solid #FFC107;
                                border-radius: 24px;
                                padding: 30px 25px;
                                max-width: 640px;
                                width: 100%;
                                margin: 0 auto;
                                box-shadow: 0 20px 60px rgb(0 0 0 / .8), 0 0 0 1px rgb(233 69 96 / .1) inset;
                                backdrop-filter: blur(2px);
                                transition: box-shadow 0.3s
                            }

                            .quiz-container:hover {
                                box-shadow: 0 25px 70px rgb(233 69 96 / .15), 0 0 0 1px rgb(233 69 96 / .3) inset
                            }

                            .quiz-header {
                                text-align: center;
                                border-bottom: 1px solid rgb(255 255 255 / .08);
                                padding-bottom: 18px;
                                margin-bottom: 25px
                            }

                            .quiz-header h3 {
                                margin: 0 0 6px 0;
                                font-size: 1.6rem;
                                font-weight: 700;
                                background: linear-gradient(135deg, #FFEB3B, #f39c12);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: #fff0;
                                background-clip: text;
                                letter-spacing: .5px
                            }

                            .quiz-header p {
                                margin: 0;
                                font-size: .9rem;
                                color: #a0aec0;
                                font-weight: 300;
                                letter-spacing: .3px
                            }

                            .step-indicator {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 8px;
                                margin-bottom: 28px
                            }

                            .step-dot {
                                width: 12px;
                                height: 12px;
                                border-radius: 50%;
                                background: #2d3748;
                                transition: all 0.4s cubic-bezier(.175, .885, .32, 1.275);
                                box-shadow: 0 0 0 0 #fff0
                            }

                            .step-dot.active {
                                background: #FFEB3B;
                                transform: scale(1.25);
                                box-shadow: 0 0 16px rgb(233 69 96 / .6)
                            }

                            .step-dot.done {
                                background: #f1c40f;
                                transform: scale(1.1);
                                box-shadow: 0 0 8px rgb(241 196 15 / .4)
                            }

                            .step-dot-line {
                                flex: 0 0 24px;
                                height: 2px;
                                background: #2d3748;
                                border-radius: 4px;
                                transition: background 0.4s
                            }

                            .step-dot-line.done {
                                background: #f1c40f
                            }

                            .quiz-step {
                                display: none;
                                animation: fadeSlide 0.5s cubic-bezier(.23, 1, .32, 1)
                            }

                            .quiz-step.active {
                                display: block
                            }

                            @keyframes fadeSlide {
                                0% {
                                    opacity: 0;
                                    transform: translateY(20px)
                                }

                                100% {
                                    opacity: 1;
                                    transform: translateY(0)
                                }
                            }

                            .step-title {
                                display: block;
                                font-size: 1.15rem;
                                font-weight: 600;
                                margin-bottom: 18px;
                                color: #f1c40f;
                                letter-spacing: .3px;
                                text-shadow: 0 0 12px rgb(241 196 15 / .15)
                            }

                            .quiz-options-grid {
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap: 14px;
                                margin-bottom: 20px
                            }

                            .quiz-card {
                                background: rgb(255 255 255 / .04);
                                backdrop-filter: blur(4px);
                                border: 1px solid rgb(255 255 255 / .06);
                                border-radius: 16px;
                                padding: 18px 12px;
                                text-align: center;
                                cursor: pointer;
                                transition: all 0.25s cubic-bezier(.23, 1, .32, 1);
                                position: relative;
                                overflow: hidden;
                                box-shadow: 0 4px 12px rgb(0 0 0 / .2)
                            }

                            .quiz-card::before {
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                background: linear-gradient(135deg, rgb(233 69 96 / .1), rgb(241 196 15 / .05));
                                opacity: 0;
                                transition: opacity 0.3s
                            }

                            .quiz-card:hover {
                                transform: translateY(-4px) scale(1.02);
                                border-color: rgb(233 69 96 / .4);
                                background: rgb(255 255 255 / .07);
                                box-shadow: 0 8px 25px rgb(233 69 96 / .15)
                            }

                            .quiz-card:hover::before {
                                opacity: 1
                            }

                            .quiz-card:active {
                                transform: scale(.96)
                            }

                            .quiz-card.selected {
                                background: rgb(233 69 96 / .2);
                                border-color: #FFEB3B;
                                box-shadow: 0 0 30px rgb(233 69 96 / .2), inset 0 0 20px rgb(233 69 96 / .05);
                                transform: translateY(-2px)
                            }

                            .quiz-card.selected::after {
                                content: '✓';
                                position: absolute;
                                top: 8px;
                                right: 12px;
                                color: #2ecc71;
                                font-weight: 700;
                                font-size: 1.2rem
                            }

                            .quiz-icon {
                                font-size: 2.2rem;
                                margin-bottom: 6px;
                                display: block;
                                filter: drop-shadow(0 4px 8px rgb(0 0 0 / .3))
                            }

                            .quiz-card h4 {
                                margin: 0 0 4px 0;
                                font-size: .95rem;
                                font-weight: 600;
                                color: #fff;
                                letter-spacing: .3px
                            }

                            .quiz-card small {
                                color: #a0aec0;
                                font-size: .7rem;
                                display: block;
                                margin-top: 4px
                            }

                            .quiz-nav-buttons {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 20px;
                                padding-top: 16px;
                                border-top: 1px solid rgb(255 255 255 / .06)
                            }

                            .btn-back,
                            .btn-next {
                                background: rgb(255 255 255 / .06);
                                border: 1px solid rgb(255 255 255 / .1);
                                color: #fff;
                                padding: 10px 22px;
                                border-radius: 30px;
                                font-size: .9rem;
                                font-weight: 500;
                                cursor: pointer;
                                transition: all 0.25s ease;
                                backdrop-filter: blur(4px);
                                display: inline-flex;
                                align-items: center;
                                gap: 8px
                            }

                            .btn-back:hover,
                            .btn-next:hover {
                                background: rgb(255 255 255 / .12);
                                border-color: rgb(233 69 96 / .4);
                                transform: translateX(-2px)
                            }

                            .btn-next {
                                background: linear-gradient(135deg, #FFEB3B, #c0392b);
                                border: none;
                                font-weight: 600;
                                box-shadow: 0 4px 15px rgb(233 69 96 / .3)
                            }

                            .btn-next:hover {
                                transform: translateX(2px) scale(1.02);
                                box-shadow: 0 6px 25px rgb(233 69 96 / .5);
                                background: linear-gradient(135deg, #ff5270, #FFEB3B)
                            }

                            .btn-next:disabled {
                                opacity: .4;
                                cursor: not-allowed;
                                transform: none !important;
                                box-shadow: none !important
                            }

                            .quiz-loading-box {
                                text-align: center;
                                padding: 30px 0 20px
                            }

                            .spinner {
                                width: 60px;
                                height: 60px;
                                border-radius: 50%;
                                border: 5px solid rgb(255 255 255 / .06);
                                border-top: 5px solid #FFEB3B;
                                border-bottom: 5px solid #f1c40f;
                                animation: spin 0.9s cubic-bezier(.68, -.55, .27, 1.55) infinite;
                                margin: 0 auto 20px;
                                box-shadow: 0 0 30px rgb(233 69 96 / .2)
                            }

                            @keyframes spin {
                                0% {
                                    transform: rotate(0deg) scale(1)
                                }

                                50% {
                                    transform: rotate(180deg) scale(1.1)
                                }

                                100% {
                                    transform: rotate(360deg) scale(1)
                                }
                            }

                            .shuffling-numbers {
                                font-size: 3.2rem;
                                font-weight: 800;
                                background: linear-gradient(135deg, #f1c40f, #FFEB3B);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: #fff0;
                                background-clip: text;
                                letter-spacing: 8px;
                                text-shadow: 0 0 40px rgb(241 196 15 / .2);
                                margin-top: 12px;
                                font-variant-numeric: tabular-nums
                            }

                            .quiz-loading-box p {
                                color: #a0aec0;
                                font-size: .95rem;
                                margin-bottom: 6px;
                                font-weight: 300
                            }

                            .quiz-result-box {
                                text-align: center;
                                padding: 10px 0 5px;
                                animation: fadeSlide 0.6s ease
                            }

                            .quiz-result-box h4 {
                                margin: 0 0 4px 0;
                                font-size: 1.5rem;
                                font-weight: 700;
                                background: linear-gradient(135deg, #2ecc71, #27ae60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: #fff0;
                                background-clip: text
                            }

                            .result-meta {
                                font-size: .9rem;
                                color: #a0aec0;
                                margin: 4px 0 18px;
                                font-style: italic;
                                border-bottom: 1px dashed rgb(255 255 255 / .06);
                                padding-bottom: 14px
                            }

                            .numbers-display {
                                display: flex;
                                justify-content: space-around;
                                background: rgb(0 0 0 / .3);
                                backdrop-filter: blur(8px);
                                padding: 20px 15px;
                                border-radius: 16px;
                                border: 1px solid rgb(255 255 255 / .06);
                                margin-bottom: 20px;
                                box-shadow: 0 8px 32px rgb(0 0 0 / .3)
                            }

                            .num-block {
                                display: flex;
                                flex-direction: column;
                                align-items: center
                            }

                            .num-block span {
                                font-size: .7rem;
                                color: #94a3b8;
                                text-transform: uppercase;
                                letter-spacing: 1px;
                                font-weight: 600;
                                margin-bottom: 4px
                            }

                            .num-block strong {
                                font-size: 2.4rem;
                                font-weight: 800;
                                background: linear-gradient(135deg, #f1c40f, #f39c12);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: #fff0;
                                background-clip: text;
                                letter-spacing: 3px;
                                font-variant-numeric: tabular-nums
                            }

                            .meta-output-grid {
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap: 12px;
                                background: rgb(0 0 0 / .2);
                                padding: 16px;
                                border-radius: 14px;
                                margin-bottom: 22px;
                                border: 1px solid rgb(255 255 255 / .04)
                            }

                            .meta-item {
                                text-align: left
                            }

                            .meta-item span {
                                display: block;
                                font-size: .7rem;
                                color: #94a3b8;
                                text-transform: uppercase;
                                letter-spacing: .5px;
                                font-weight: 600
                            }

                            .meta-item strong {
                                font-size: 1rem;
                                color: #FFEB3B;
                                font-weight: 600
                            }

                            .meta-item:last-child strong {
                                color: #f1c40f
                            }

                            .quiz-action-area {
                                display: flex;
                                gap: 12px;
                                justify-content: center;
                                flex-wrap: wrap
                            }

                            .btn-action {
                                border: none;
                                padding: 12px 24px;
                                border-radius: 40px;
                                font-weight: 600;
                                font-size: .95rem;
                                cursor: pointer;
                                transition: all 0.25s ease;
                                display: inline-flex;
                                align-items: center;
                                gap: 8px;
                                backdrop-filter: blur(4px)
                            }

                            .btn-copy {
                                background: linear-gradient(135deg, #2ecc71, #27ae60);
                                color: #fff;
                                box-shadow: 0 4px 20px rgb(46 204 113 / .3);
                                flex: 2
                            }

                            .btn-copy:hover {
                                transform: translateY(-2px) scale(1.02);
                                box-shadow: 0 8px 30px rgb(46 204 113 / .5)
                            }

                            .btn-play {
                                background: rgb(255 255 255 / .08);
                                color: #fff;
                                border: 1px solid rgb(255 255 255 / .1);
                                flex: 1
                            }

                            .btn-play:hover {
                                background: rgb(255 255 255 / .15);
                                transform: translateY(-2px);
                                border-color: rgb(233 69 96 / .3)
                            }

                            @media (max-width:520px) {
                                .quiz-container {
                                    padding: 20px 16px;
                                    border-radius: 18px
                                }

                                .quiz-header h3 {
                                    font-size: 1.3rem
                                }

                                .quiz-options-grid {
                                    grid-template-columns: 1fr 1fr;
                                    gap: 10px
                                }

                                .quiz-card {
                                    padding: 14px 8px
                                }

                                .quiz-icon {
                                    font-size: 1.8rem
                                }

                                .quiz-card h4 {
                                    font-size: .85rem
                                }

                                .numbers-display {
                                    padding: 14px 10px
                                }

                                .num-block strong {
                                    font-size: 1.8rem
                                }

                                .meta-output-grid {
                                    grid-template-columns: 1fr;
                                    gap: 8px
                                }

                                .btn-action {
                                    padding: 10px 16px;
                                    font-size: .85rem
                                }

                                .step-dot {
                                    width: 10px;
                                    height: 10px
                                }

                                .step-dot-line {
                                    flex: 0 0 16px
                                }
                            }

                            @media (max-width:400px) {
                                .quiz-options-grid {
                                    grid-template-columns: 1fr
                                }

                                .quiz-nav-buttons {
                                    flex-direction: column;
                                    gap: 10px
                                }

                                .btn-back,
                                .btn-next {
                                    width: 100%;
                                    justify-content: center
                                }
                            }