/*
Theme Name: Force Teknologi
Theme URI: https://forceteknologi.com
Author: Wahyu Reza Nuari Prasetyo
Author URI: https://forceteknologi.com
Description: Tema WordPress Force Teknologi 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. Tema ini mengutamakan performa, kemudahan pengelolaan, SEO-friendly, dan pengalaman pengguna yang optimal di berbagai perangkat.
Version: 2.0
Update URI: https://forceteknologi.com/themes/force-teknologi
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: force-teknologi
Tags: custom-logo, custom-menu, featured-images, translation-ready
*/
: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);
            }
        }