/*Personal-Project */

        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');
        :root { --bg: #030712; --accent: #38bdf8; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg); color: #f8fafc; scroll-behavior: smooth; }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 2rem;
        }

        .gradient-text {
            background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .full-section { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; position: relative; }

        .phone-mockup {
            width: 280px;
            height: 580px;
            background: #000;
            border: 8px solid #1e293b;
            border-radius: 3rem;
            overflow: hidden;
            position: relative;

            box-shadow:
                0 35px 80px rgba(0,0,0,.45),
                0 0 40px rgba(56,189,248,.12);

            transition:
                transform 1.25s cubic-bezier(.22,1,.36,1),
                opacity .9s ease,
                filter .9s ease,
                box-shadow 1.1s ease,
                border-color .8s ease;
        }

        .phone-screen { width: 100%; height: 100%; object-fit: cover; }
        
        /* ===========================
        PHONE STACK
        =========================== */

        .phone-stack{
            position:relative;
            width:560px;
            height:620px;
            perspective:1200px;
        }

        /* animasi */

        .phone-stack .phone-mockup{

            position:absolute;

            transition:
                transform 1.15s cubic-bezier(.19,1,.22,1),
                opacity .9s ease,
                box-shadow 1s ease,
                border-color .9s ease;

            cursor:pointer;
        }

        /* --------------------
        DEFAULT
        -------------------- */

        .phone-stack .mockup-1{

            left:20px;
            top:35px;

            transform:
            translateY(18px)
            rotate(-8deg)
            rotateY(-8deg)
            scale(.88);

            opacity:.28;

            filter:brightness(.72);

            z-index:1;

            box-shadow:
            0 20px 40px rgba(0,0,0,.35);

        }

        .phone-stack .mockup-2{

            left:170px;
            top:0;

            transform:
            translateY(0)
            rotate(0)
            scale(1.04);

            opacity:1;

            filter:brightness(1);

            z-index:2;

            border-color:rgba(56,189,248,.35);

            box-shadow:
            0 45px 90px rgba(0,0,0,.45),
            0 0 35px rgba(56,189,248,.18);

        }

        /* --------------------
        HOVER
        -------------------- */

        .phone-stack.swap .mockup-1{

            left:170px;
            top:0;

            transform:
            translateY(0)
            rotate(0)
            rotateY(0)
            scale(1.04);

            opacity:1;

            filter:brightness(1);

            z-index:2;

            border-color:rgba(56,189,248,.35);

            box-shadow:
            0 45px 90px rgba(0,0,0,.45),
            0 0 35px rgba(56,189,248,.18);

        }

        .phone-stack.swap .mockup-2{

            left:20px;
            top:35px;

            transform:
            translateY(18px)
            rotate(-8deg)
            scale(.88);

            opacity:.28;

            filter:brightness(.72);

            z-index:1;

            box-shadow:
            0 20px 40px rgba(0,0,0,.35);

        }

        /* --------------------
        BUTTON
        -------------------- */

        .btn-social {
            background: rgba(56, 189, 248, 0.1);
            border: 1px solid rgba(56, 189, 248, 0.2);
            transition: all 0.3s ease;
        }
        .btn-social:hover { background: var(--accent); color: #000; transform: translateY(-3px); }

        .back-btn {
            transition: all 0.3s ease;
        }
        .back-btn:hover { transform: translateX(-5px); color: var(--accent); }