/*
Theme Name: Force Teknologi Themes
Author: Force Teknologi
Description: Tema WordPress ForceTeknologi adalah solusi website profesional yang dirancang untuk bisnis, perusahaan, UMKM, startup, lembaga pendidikan, jasa profesional, hingga personal branding yang membutuhkan tampilan modern, cepat, dan berorientasi pada konversi. Dikembangkan oleh ForceTeknologi, tema ini mengutamakan performa, kemudahan pengelolaan, SEO-friendly, dan pengalaman pengguna yang optimal di berbagai perangkat.
Version: 2.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
:root {

            /* PRIMARY COLORS */
            --ft-primary: #0E4674;
            --ft-primary-light: #2563EB;
            --ft-secondary: #8B1CFF;

            /* GRADIENT COLORS */
            --ft-pink: #FF2BB5;
            --ft-purple: #8B1CFF;
            --ft-blue: #5A8DFF;
            --ft-orange: #FF8757;

            /* SEMANTIC COLORS */
            --ft-success: #12B76A;
            --ft-warning: #F79009;
            --ft-error: #F04438;
            --ft-info: #2E90FA;

            /* NEUTRAL */
            --ft-dark: #0B1320;
            --ft-gray-dark: #374151;
            --ft-gray: #6B7280;
            --ft-gray-light: #E5E7EB;
            --ft-bg: #F7F9FC;
            --ft-white: #FFFFFF;

            /* SHADOW */
            --ft-shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
            --ft-shadow-md: 0 10px 30px rgba(0,0,0,0.10);
            --ft-shadow-lg: 0 18px 50px rgba(0,0,0,0.15);

            /* RADIUS */
            --ft-radius-sm: 10px;
            --ft-radius-md: 18px;
            --ft-radius-lg: 28px;

            /* SPACING */
            --ft-space-xs: 8px;
            --ft-space-sm: 12px;
            --ft-space-md: 20px;
            --ft-space-lg: 32px;
            --ft-space-xl: 48px;
            --ft-space-2xl: 72px;

            /* CONTAINER */
            --ft-container: 1280px;

            /* TRANSITION */
            --ft-transition: all .25s ease;
        }

		/*
        ============================================
        BUTTON SYSTEM
        ============================================
        */

		/* BASE BUTTON */

		a.elementor-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 16px 28px;
			border: none;
			border-radius: 999px;
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			transition: var(--ft-transition);
			cursor: pointer;
		}

        /* PRIMARY */

		.btn-primary a.elementor-button {
			color: var(--ft-white);
			background: linear-gradient(
				135deg,
				var(--ft-pink),
				var(--ft-purple),
				var(--ft-blue)
			);
			box-shadow: 0 10px 25px rgba(138,28,255,.25);
		}

		.btn-primary a.elementor-button:hover {
			color: var(--ft-white);
			transform: translateY(-3px);
			box-shadow: 0 18px 40px rgba(138,28,255,.35);
		}

        /* OUTLINE */

		.btn-outline a.elementor-button {
			background: transparent;
			color: var(--ft-primary);
			border: 1px solid var(--ft-primary);
		}

		.btn-outline a.elementor-button:hover {
			background: var(--ft-primary);
			color: var(--ft-white);
			transform: translateY(-3px);
		}

        /* GHOST */

		.btn-ghost a.elementor-button {
			color: var(--ft-primary);
			background: rgba(14,70,116,.08);
		}

		.btn-ghost a.elementor-button:hover {
			background: rgba(14,70,116,.14);
			transform: translateY(-2px);
		}

       /* SUCCESS */

		.btn-success a.elementor-button {
			background: var(--ft-success);
			color: #fff;
		}

        /* DANGER */

		.btn-danger a.elementor-button {
			background: var(--ft-error);
			color: #fff;
		}

        .btn-disabled a.elementor-button,
        .btn a.elementor-button:disabled {
            opacity: .48;
            cursor: not-allowed;
            pointer-events: none;
            box-shadow: none;
        }

        .btn-icon a.elementor-button {
            width: 48px;
            height: 48px;
            padding: 0;
            border-radius: 999px;
        }

        .btn-icon-square a.elementor-button {
            width: 48px;
            height: 48px;
            padding: 0;
            border-radius: var(--ft-radius-sm);
        }

        .btn-sm a.elementor-button{
            min-height: 38px;
            padding: 10px 16px;
            font-size: 14px;
        }

        .btn-lg a.elementor-button{
            min-height: 60px;
            padding: 18px 34px;
            font-size: 17px;
        }

        .btn-ripple a.elementor-button{
            position: relative;
            overflow: hidden;
        }

        .btn-ripple a.elementor-button::after {
            content: "";
            position: absolute;
            width: 86px;
            height: 86px;
            left: 50%;
            top: 50%;
            border-radius: 999px;
            background: rgba(255,255,255,0.35);
            transform: translate(-50%, -50%) scale(0);
            animation: buttonRipple 1.6s ease-out infinite;
        }

        .btn-play a.elementor-button {
            width: 62px;
            height: 62px;
            padding: 0;
            border-radius: 999px;
            position: relative;
            color: #ffffff;
            background: linear-gradient(135deg, var(--ft-pink), var(--ft-purple), var(--ft-blue));
            box-shadow: 0 16px 32px rgba(138,28,255,0.28);
        }

        .btn-play a.elementor-button::before,
        .btn-play a.elementor-button::after {
            content: "";
            position: absolute;
            inset: -9px;
            border-radius: inherit;
            border: 1px solid rgba(139,28,255,0.24);
            animation: ripple 1.8s ease-out infinite;
        }

        .btn-play a.elementor-button::after {
            animation-delay: .55s;
        }

        .btn-play a.elementor-button span {
            position: relative;
            z-index: 2;
        }

        .btn-loading a.elementor-button::before {
            content: "";
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 2px solid rgba(255,255,255,0.42);
            border-top-color: #ffffff;
            animation: spin .8s linear infinite;
        }

        .segmented-buttons a.elementor-button {
            display: inline-flex;
            gap: 4px;
            padding: 4px;
            border-radius: 999px;
            background: rgba(14,70,116,0.08);
        }

        .segmented-buttons a.elementor-button {
            min-height: 38px;
            padding: 9px 16px;
            box-shadow: none;
        }

        @keyframes buttonRipple {
            0% {
                opacity: .75;
                transform: translate(-50%, -50%) scale(0);
            }
            75%, 100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(2.6);
            }
        }