body{
        margin:0;
        font-family:Arial, sans-serif;
        background:#f8fafc;
        color:#333;
        line-height:1.7;
    }

    .container{
        width:90%;
        max-width:1000px;
        margin:auto;
    }

    .hero{
        background:
            linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
            url('/images/prima-academy.jpg');

        background-size: cover;
        background-position: 50% 25%;
        padding:100px 20px;
        color:white;
        text-align:center;
        scroll-margin-top:100px;
        
    }

    .hero h1{
        font-size:2.2rem;
        margin-bottom:10px;
    }

    .hero p{
        max-width:700px;
        margin:10px auto 20px;
        font-size:1rem;
    }

    /* hero tambahan prima */
    .hero-motto{
        font-size:24px;
        font-weight:700;
        color:#fde047;
        margin:15px 0 10px;
    }

    .hero-subtitle{
        font-size:20px;
        font-weight:600;
        margin-bottom:20px;
    }

    .hero-program{
        font-size:18px;
        line-height:2;
        margin-bottom:30px;
    }
     /* hero tambahan prima */
    .btn{
        display:inline-block;
        background:#16a34a;
        color:white;
        padding:14px 22px;
        border-radius:10px;
        text-decoration:none;
        font-weight:bold;
    }

    section{
        padding:25px 0;
        scroll-margin-top:100px;
        border-top:3px solid #e5e7eb;
    }
    section:nth-of-type(even){
        background:#f8fafc;
    }

    h2{
        text-align:center;
        margin-bottom:25px;
        position:relative;
        padding-bottom:12px;
    }

    h2::after{
        content:"";
        display:block;
        width:70px;
        height:4px;
        background:#16a34a;
        margin:12px auto 0;
        border-radius:5px;
    }

    .card{
        background:white;
        padding:18px;
        border-radius:12px;
        box-shadow:0 2px 10px rgba(0,0,0,0.08);
        margin-bottom:15px;

        transition:all 0.25s ease;
        transform:translateY(0);
    }
    .card:hover{
        transform:translateY(-6px);
        box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }
    .card img{
        width:100%;
        height:220px;
        object-fit:cover;
        border-radius:10px;
        transition:transform 0.3s ease;
    }

    .card:hover img{
        transform:scale(1.05);
    }

    .grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        gap:15px;
    }

    .cta{
        background:#0f172a;
        color:white;
        text-align:center;
        padding:60px 20px;
    }

    footer{
        background:#334155;
        color:white;
        text-align:center;
        padding:20px;
        font-size:14px;
    }

    footer a{
        color:#7dd3fc;
        text-decoration:none;
        font-weight:600;
        transition:.3s;
    }

    footer a:hover{
        color:#ffffff;
    }

    /* FORM */
    .form-box{
        background:white;
        padding:20px;
        border-radius:12px;
        box-shadow:0 2px 10px rgba(0,0,0,0.08);
    }

    input, textarea, select{
        width:100%;
        padding:10px;
        margin-top:5px;
        margin-bottom:15px;
        border-radius:8px;
        border:1px solid #ccc;
    }

    button{
        width:100%;
        padding:12px;
        background:#16a34a;
        color:white;
        border:none;
        border-radius:10px;
        font-weight:bold;
        cursor:pointer;
    }

    /* teu kopi */
    @media print {
        body {
            user-select: text !important;
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
        }
    }
    /* teu kopi */
   
    /* Tambahan header */
    /* =========================
    HEADER
    ========================= */

    .header{
        position:sticky;
        top:0;
        z-index:1000;
        background:#ffffff;
        box-shadow:0 2px 10px rgba(0,0,0,.08);
    }

    .nav-container{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:20px;
        padding:15px 0;
    }

    /* Logo */

    .logo{
        display:flex;
        align-items:center;
        gap:12px;
        text-decoration:none;
        color:#0f172a;
        font-weight:700;
        font-size:22px;
    }

    .logo img{
        height:55px;
        width:auto;
        display:block;
    }

    .logo span{
        white-space:nowrap;
    }

    .nav-menu{
        display:flex;
        gap:22px;
        align-items:center;
    }

    .nav-menu a{
        text-decoration:none;
        color:#334155;
        font-weight:600;
        transition:.3s;
    }

    .nav-menu a:hover{
        color:#16a34a;
    }

    .wa-header{
        background:#16a34a;
        color:#fff;
        padding:10px 18px;
        border-radius:8px;
        text-decoration:none;
        font-weight:bold;
    }

    .wa-header:hover{
        opacity:.9;
    }
    /* ==========================
    HEADER MOBILE
    ========================== */
    @media (max-width:768px){
        .nav-container{
            flex-direction:column;
            gap:15px;
            padding:12px 0;
        }
        .logo{
            justify-content:center;
        }
        .logo img{
            height:45px;
        }
        .logo span{
            font-size:18px;
        }
        .nav-menu{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:10px 18px;
        }
        .nav-menu a{
            font-size:15px;
        }
        .wa-header{
            width:90%;
            text-align:center;
        }
        
        .grid-2mobile{
            grid-template-columns:repeat(2,1fr);
        }

        section{
            scroll-margin-top:180px;
        }

        .hero{
            scroll-margin-top:180px;
        }

    }

    /* FAQ */
    /* ===========================
    FAQ
    =========================== */

    .faq-item{
        background:#fff;
        border-radius:12px;
        margin-bottom:14px;
        box-shadow:0 2px 10px rgba(0,0,0,.08);
        transition:.25s;
        overflow:hidden;
        transform:translateY(0);
    }

    .faq-item:hover{
        box-shadow:0 8px 20px rgba(0,0,0,.12);
        transform:translateY(-3px);
    }

    .faq-item summary{
        cursor:pointer;
        list-style:none;
        padding:18px 22px;
        font-weight:bold;
        font-size:16px;
        color:#1e293b;
        position:relative;
        user-select:none;
    }

    .faq-item summary::-webkit-details-marker{
        display:none;
    }

    .faq-item summary::after{
        content:"+";
        position:absolute;
        right:22px;
        top:50%;
        transform:translateY(-50%);
        font-size:24px;
        color:#16a34a;
        font-weight:bold;
        transition:.2s;
    }

    .faq-item[open] summary::after{
        content:"−";
    }

    .faq-item p{
        padding:0 22px 20px;
        margin:0;
        color:#475569;
        line-height:1.8;
        border-top:1px solid #e2e8f0;
    }