/* =====================================================
   CRYPTOGRAPHY SIMULATOR
   GLOBAL STYLE
===================================================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

}



html{

    scroll-behavior:smooth;

}



body{


    background:
    linear-gradient(
        135deg,
        #08001f,
        #120033,
        #00152e
    );


    color:white;

    min-height:100vh;


}






/* =====================================================
   NAVBAR
===================================================== */


.navbar{


    width:100%;

    position:sticky;

    top:0;

    z-index:1000;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:
    20px 8%;


    background:

    rgba(
        10,
        10,
        30,
        0.75
    );


    backdrop-filter:
    blur(15px);



    border-bottom:

    1px solid

    rgba(
        255,
        255,
        255,
        0.15
    );


}





.logo{


    font-size:24px;

    font-weight:700;


    color:#00eaff;


    letter-spacing:1px;


}






.navbar nav{


    display:flex;

    gap:30px;


}



.navbar a{


    color:white;

    text-decoration:none;


    font-size:16px;


    transition:.3s;


}



.navbar a:hover{


    color:#00eaff;


}







/* =====================================================
   HERO SECTION
===================================================== */


.hero{


    min-height:90vh;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    padding:40px 10%;



}




.hero h1 {

    font-size: clamp(
        35px,
        5vw,
        65px
    );

    background: linear-gradient(
        90deg,
        #00eaff,
        #b56cff
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    margin-bottom: 25px;

}



.hero p{


    max-width:750px;


    font-size:20px;


    line-height:1.7;


    color:#d8d8ff;


    margin-bottom:40px;



}







button{


    padding:

    14px 35px;



    border:none;


    border-radius:30px;


    cursor:pointer;


    font-size:16px;


    font-weight:600;



    background:

    linear-gradient(
        135deg,
        #00eaff,
        #8b5cff
    );



    color:white;


    transition:.3s;


    box-shadow:

    0 0 20px

    rgba(
        0,
        234,
        255,
        .5
    );


}





button:hover{


    transform:

    translateY(-4px);


    box-shadow:

    0 0 35px

    rgba(
        181,
        108,
        255,
        .8
    );


}






/* =====================================================
   MODULE SECTION
===================================================== */



.modules{


    padding:

    80px 8%;



}



.modules h2,


.about h2{


    text-align:center;


    font-size:35px;


    margin-bottom:50px;



}





.module-grid{


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            230px,
            1fr
        )
    );



    gap:30px;



}





.module-card{


    padding:35px;


    border-radius:25px;



    background:

    rgba(
        255,
        255,
        255,
        .08
    );


    backdrop-filter:

    blur(12px);



    border:

    1px solid

    rgba(
        255,
        255,
        255,
        .15
    );



    cursor:pointer;


    transition:.35s;


}




.module-card:hover{


    transform:

    translateY(-10px);



    border-color:#00eaff;



    box-shadow:


    0 0 35px

    rgba(
        0,
        234,
        255,
        .3
    );


}






.module-card h3{


    font-size:28px;


    margin-bottom:15px;


    color:#00eaff;



}





.module-card p{


    color:#ddd;


    line-height:1.6;



}

/* =====================================================
   ALGORITHM SECTION
===================================================== */


#simulation{


    padding:

    50px 8%;


}




.algorithm-section{


    display:none;


    margin-bottom:80px;



    padding:

    40px;



    border-radius:30px;



    background:


    rgba(
        255,
        255,
        255,
        .06
    );



    backdrop-filter:

    blur(15px);



    border:

    1px solid

    rgba(
        255,
        255,
        255,
        .15
    );



}





.algorithm-section.active{


    display:block;


}





.algorithm-section h2{


    font-size:36px;


    color:#00eaff;


    margin-bottom:35px;


}








/* =====================================================
   FORM BOX
===================================================== */


.form-box{


    background:


    rgba(
        0,
        0,
        0,
        .25
    );


    padding:35px;


    border-radius:25px;


    margin-bottom:30px;



}





.form-box label{


    display:block;


    margin-bottom:10px;


    margin-top:20px;


    color:#dcdcff;


    font-weight:600;



}





.form-box input{


    width:100%;


    padding:15px 20px;


    border-radius:15px;


    border:none;



    background:


    rgba(
        255,
        255,
        255,
        .12
    );



    color:white;


    font-size:16px;



    outline:none;



    border:

    1px solid

    rgba(
        255,
        255,
        255,
        .2
    );



}





.form-box input:focus{


    border-color:#00eaff;


    box-shadow:


    0 0 15px

    rgba(
        0,
        234,
        255,
        .4
    );


}






.form-box input::placeholder{


    color:#aaa;


}








/* =====================================================
   MODE RADIO
===================================================== */



.mode{


    display:flex;


    gap:30px;


    margin:25px 0;



}





.mode label{


    margin:0;


    display:flex;


    align-items:center;


    gap:10px;



}





.mode input{


    width:auto;


}









/* =====================================================
   BUTTON AREA
===================================================== */



.form-box button{


    margin-top:25px;


    margin-right:15px;


}





.form-box button:last-child{


    background:


    linear-gradient(

    135deg,

    #ff4b7d,

    #ff8a00

    );



}







/* =====================================================
   RESULT BOX
===================================================== */



.result-box{


    margin-top:30px;


    padding:30px;


    border-radius:25px;


    background:


    rgba(
        0,
        0,
        0,
        .35
    );



    border:

    1px solid

    rgba(
        0,
        234,
        255,
        .3
    );


}




.result-box h3{


    color:#00eaff;


    margin-bottom:20px;


}





#desResult,
#sdesResult,
#aesResult,
#saesResult{


    min-height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:25px;


    font-weight:700;



    letter-spacing:2px;



    background:


    rgba(
        255,
        255,
        255,
        .08
    );



    padding:20px;


    border-radius:15px;



}









/* =====================================================
   SOLUTION ACCORDION
===================================================== */

details{

    margin-top:20px;

    border-radius:15px;

    background:#1d1835;

    border:1px solid rgba(255,255,255,.12);

    overflow:hidden;

}

details summary{

    padding:15px 20px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#00eaff;

    list-style:none;

    user-select:none;

    background:#2b2545;

}

details summary::-webkit-details-marker{

    display:none;

}

#desSteps,
#sdesSteps,
#aesSteps,
#saesSteps{

    padding:15px;

}
/* =====================================================
   ABOUT SECTION
===================================================== */



.about{


    padding:

    80px 12%;


    text-align:center;


}





.about p{


    max-width:900px;


    margin:20px auto;


    color:#ddd;


    line-height:1.8;


    font-size:18px;


}




.about ul{


    margin-top:30px;


    list-style:none;


}




.about li{


    margin:15px;


    color:#00eaff;


    font-size:18px;


}

/* =====================================================
   FOOTER
===================================================== */


footer{


    padding:

    35px;


    text-align:center;


    background:


    rgba(
        0,
        0,
        0,
        .35
    );


    border-top:


    1px solid

    rgba(
        255,
        255,
        255,
        .15
    );



    color:#aaa;


    margin-top:50px;


}



footer p{


    margin:8px;


}





/* =====================================================
   SCROLL ANIMATION
===================================================== */


.algorithm-section,
.module-card,
.about{


    animation:


    fadeUp .7s ease;



}





@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(40px);



    }



    to{


        opacity:1;


        transform:

        translateY(0);



    }


}







/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */


::-webkit-scrollbar{


    width:10px;


}




::-webkit-scrollbar-track{


    background:#08001f;


}




::-webkit-scrollbar-thumb{


    background:


    linear-gradient(
        #00eaff,
        #8b5cff
    );


    border-radius:20px;


}








/* =====================================================
   TABLET RESPONSIVE
===================================================== */



@media(max-width:900px){



.navbar{


    padding:

    20px 5%;


}




.logo{


    font-size:20px;


}





.hero{


    padding:

    30px 5%;


}





.hero p{


    font-size:17px;


}





.algorithm-section{


    padding:25px;


}





.matrix-4{


    grid-template-columns:

    repeat(
        4,
        55px
    );


}





.matrix div{


    width:55px;


    height:55px;


    font-size:16px;


}



}









/* =====================================================
   MOBILE RESPONSIVE
===================================================== */


@media(max-width:600px){





.navbar{


    flex-direction:column;


    gap:20px;


}



.navbar nav{


    gap:15px;


}



.navbar a{


    font-size:14px;


}





.hero h1{


    font-size:35px;


}




.hero p{


    font-size:15px;


}




.modules h2,
.about h2{


    font-size:28px;


}





.module-grid{


    grid-template-columns:

    1fr;


}





.algorithm-section h2{


    font-size:28px;


}





.form-box{


    padding:20px;


}




.form-box button{


    width:100%;


    margin-right:0;


}





.mode{


    flex-direction:column;


    gap:15px;


}






.result-box{


    padding:20px;


}





#desResult,
#sdesResult,
#aesResult,
#saesResult{

    min-height:auto;

    display:block;

    font-size:16px;

    letter-spacing:0;

    padding:0;

}




.matrix-4{


    grid-template-columns:

    repeat(
        4,
        45px
    );


    gap:8px;


}




.matrix-2{


    grid-template-columns:

    repeat(
        2,
        70px
    );


}




.matrix div{


    width:45px;


    height:45px;


    font-size:13px;


}




.matrix-2 div{


    width:70px;


    height:70px;


}





details{


    padding:15px;


}




summary{


    font-size:16px;


}



}


.output-row{

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    flex-wrap:wrap;

}

.output-title{

    min-width:150px;

    color:#00eaff;

    font-size:30px;

    font-weight:700;

}

.output-value{

    font-family:Consolas, monospace;

    font-size:28px;

    color:white;

    word-break:break-all;

}


/* =====================================================
   STEP CARD
===================================================== */

.step-item{

    margin-bottom:12px;

    border-radius:10px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.12);

    background:#2a2543;

}

.step-header{

    background:#00c8ff;

    color:#09111f;

    display:inline-block;

    padding:4px 10px;

    border-radius:20px;

    margin:12px 15px 0;

    font-size:11px;

    font-weight:bold;

}

.step-title{

    margin:10px 15px;

    font-size:15px;

    font-weight:700;

    color:#ffffff;

}

.step-value{

    margin:0;

    padding:12px 15px;

    background:#171326;

    border-top:1px solid rgba(255,255,255,.08);

    font-family:Consolas,monospace;

    font-size:13px;

    line-height:1.5;

    color:#00ffb3;

    word-break:break-all;

    overflow-x:auto;

}
.binary-text{

    margin-top:10px;

    padding:15px;

    background:#171326;

    border:1px solid rgba(0,234,255,.3);

    border-radius:10px;

    font-family:Consolas, monospace;

    font-size:16px;

    color:#ffffff;

    word-break:break-all;

}

.hex-text{

    margin-top:10px;

    padding:15px;

    background:#171326;

    border:1px solid rgba(181,108,255,.3);

    border-radius:10px;

    font-family:Consolas, monospace;

    font-size:18px;

    font-weight:bold;

    color:#00eaff;

}
.result-value{

    margin-top:8px;
    padding:12px;
    background:#171326;
    border-radius:10px;
    color:white;
    font-family:Consolas,monospace;
    font-size:14px;
    line-height:1.6;
    word-break:break-all;

}
/* Container utama hasil agar teks Hex Output berada di bawah grid */
.result-box-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Posisikan semua ke tengah */
    gap: 15px; /* Jarak antara grid dan teks hex */
}

/* Grid untuk bit (HARUS 8 KOLOM) */
.binary-grid {
    display: grid;
    /* Ini kuncinya: grid akan memiliki 8 kolom, masing-masing mengambil 1 bagian ruang yang sama */
    grid-template-columns: repeat(8, 1fr); 
    gap: 5px; /* Jarak antar kotak */
    width: 100%;
    max-width: 400px; /* Batasi lebar agar tidak terlalu melebar */
    justify-items: center;
}

/* Kotak untuk setiap bit */
.bit-box {
    width: 100%; /* Mengisi ruang grid-template-columns */
    aspect-ratio: 1 / 1; /* Memastikan kotak selalu persegi */
    background: #1a1a2e;
    border: 1px solid #00d4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: monospace;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Teks Hex yang besar di bawah */
.hex-output-text {
    font-family: monospace;
    font-size: 1.5rem; /* Ukuran lebih besar */
    font-weight: bold;
    color: #00d4ff;
    margin-top: 10px;
}