@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #00ffc3 0%, #0099ff 100%);
        }

        .form-step {
            display: none;
        }

        .form-step.active {
            display: block;
        }

        .islamic-pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle, #d1fae5 1px, transparent 1px), radial-gradient(circle, #d1fae5 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: 0 0, 25px 25px;
            opacity: 0.1;
            z-index: -1;
        }

        .form-container {
            box-shadow: 0 10px 30px rgba(5, 46, 46, 0.1);
            border: 1px solid #ccfbf1;
            border-radius: 16px;
            overflow: hidden;
        }

        .step-indicator-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            /* 💡 ini kunci agar bisa jadi dua baris */
            gap: 4rem;
            /* Tambahkan jarak antar item */
            margin-bottom: 4rem;
            position: relative;
        }

        .step-indicator-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #0d9488;
            transform: translateY(-50%);
            z-index: 0;
            display: none;
            /* Sembunyikan garis horizontal karena tidak relevan saat wrap */
        }

        @media (min-width: 640px) {
            .step-indicator-container {
                flex-wrap: nowrap;
                /* Untuk layar lebar tetap 1 baris */
            }

            .step-indicator-container::before {
                display: block;
                /* Munculkan garis penghubung */
            }
        }

        .step-indicator {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #64748b;
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .step-indicator.active {
            background: #0d9488;
            color: white;
            box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);
        }

        .step-label {
            display: block;
            font-size: 0.75rem;
            color: #64748b;
            margin-top: 4px;
            text-align: center;
            position: absolute;
            bottom: -24px;
            font-size: 0.75rem;
            color: #64748b;
            white-space: nowrap;
        }

        .step-indicator.active .step-label {
            color: #0d9488;
            font-weight: 500;
        }

        .input-field {
            transition: all 0.3s ease;
            border: 1px solid #0d9488;
        }

        .input-field:focus {
            border-color: #0d9488;
            box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
        }

        .btn-primary {
            background: linear-gradient(to right, #0d9488, #0f766e);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(13, 148, 136, 0.2);
        }

        .btn-primary:hover {
            background: linear-gradient(to right, #0f766e, #0d9488);
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(13, 148, 136, 0.3);
        }

        .btn-secondary {
            background: #9ea5ad;
            color: #334155;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: #757c85;
            color: white;
        }

        .form-title {
            font-family: 'Amiri', serif;
            color: #134e4a;
            position: relative;
            display: inline-block;
        }

        .form-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(to right, #0d9488, #0f766e);
            border-radius: 3px;
        }

        label.error {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: block;
        }

        input.error,
        select.error {
            border-color: #ef4444;
        }