/*
==========================================================
INKRAH Web Design
Stock Profit Calculator
Premium Utility Stylesheet
Version 1.0
==========================================================
*/


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:

        "Segoe UI",

        Arial,

        Helvetica,

        sans-serif;


    background:#f4f6fb;

    color:#222;

    line-height:1.7;

}





.container{

    width:min(1100px,92%);

    margin:auto;

}





a{

    text-decoration:none;

}





/*
==========================================================
HEADER
==========================================================
*/


header{


    background:

    linear-gradient(

        135deg,

        #06162d,

        #0B2545,

        #13315C

    );


    position:sticky;

    top:0;

    z-index:1000;


    box-shadow:

    0 5px 20px

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


}




header .container{


    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;


}





.logo{


    display:flex;

    align-items:center;

    gap:14px;

    color:white;

}





.logo img{


    width:55px;

    height:55px;

    object-fit:contain;


}





.logo span{


    color:white;

    font-size:26px;

    font-weight:700;


}





nav{


    display:flex;

    gap:28px;


}





nav a{


    position:relative;

    color:white;

    font-weight:500;


}





nav a::after{


    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;


    background:#d4af37;

    transition:.3s;


}




nav a:hover{


    color:#d4af37;


}




nav a:hover::after{


    width:100%;


}





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


.hero{


    background:


    linear-gradient(

        135deg,

        #0B2545,

        #1e4d8d

    );


    color:white;

    padding:70px 0;


}





.hero h1{


    font-size:42px;

    margin-bottom:20px;


}





.hero p{


    max-width:900px;

    opacity:.95;

    margin-bottom:35px;


}





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


form{


    background:white;

    padding:30px;

    border-radius:12px;


    box-shadow:


    0 5px 20px

    rgba(0,0,0,.12);


    color:#222;


}





label{


    display:block;

    margin-top:18px;

    margin-bottom:8px;


    font-weight:600;

    color:#0B2545;


}





input,

select{


    width:100%;

    padding:14px;


    border:

    1px solid #cfd8e3;


    border-radius:8px;


    font-size:16px;


}





input:focus,

select:focus{


    outline:none;

    border-color:#0B2545;


}





button{


    margin-top:25px;


    background:#d4af37;


    color:#0B2545;


    border:none;


    padding:14px 28px;


    border-radius:8px;


    cursor:pointer;


    font-weight:700;


    font-size:16px;


    transition:.25s;


}





button:hover{


    background:#f0c84b;


}





/*
==========================================================
MESSAGE
==========================================================
*/


.error{


    margin-top:25px;


    background:#ffe9e9;


    color:#a30000;


    border-left:

    5px solid red;


    padding:18px;


    border-radius:8px;


}







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

.result {
    margin-top: 40px;
    background: white;
    color: #222; /* TAMBAHKAN KODE INI AGAR TEKS TERLIHAT */
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,.10);
}





.result h2{


    color:#0B2545;

    margin-bottom:25px;


}






.summary{


    width:100%;


    border-collapse:collapse;


}





.summary th{


    width:300px;


    background:#0B2545;


    color:white;


    text-align:left;


    padding:14px;


    border:1px solid #d8dee8;


}





.summary td{


    padding:14px;


    border:1px solid #d8dee8;


    background:white;
    
    color: #222;


}





.summary tr:nth-child(even) td{


    background:#f7f9fc;


}





/*
==========================================================
ABOUT & FAQ
==========================================================
*/


.about{


    background:white;

    padding:70px 0;


}





.about h2,

.faq h2{


    color:#0B2545;

    margin-bottom:20px;


}





.about p,

.faq p{


    text-align:justify;


}





.faq{


    background:#f7f9fc;


    padding:70px 0;


}





.faq h3{


    color:#173d73;


    margin-top:25px;


}





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


footer{


    position:relative;


    background:


    linear-gradient(

        135deg,

        #06162d,

        #0B2545

    );


    color:white;


    padding:55px 0 35px;


    text-align:center;


}





footer::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:3px;


    background:


    linear-gradient(

        90deg,

        #d4af37,

        white,

        #d4af37

    );


}





footer p{


    margin:10px 0;


}





footer a{


    color:#d4af37;


}





footer a:hover{


    color:white;


}





/*
==========================================================
UTILITY
==========================================================
*/


.mt-30{


    margin-top:30px;


}





#backTop{


    display:none;


    position:fixed;


    right:20px;


    bottom:20px;


    width:45px;


    height:45px;


    border-radius:50%;


    background:#0B2545;


    color:white;


    z-index:999;


}







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


@media(max-width:768px){



header .container{


    flex-direction:column;

    gap:15px;


}



.logo span{


    font-size:22px;


}




nav{


    flex-wrap:wrap;

    justify-content:center;


}





.hero h1{


    font-size:32px;


}




button{


    width:100%;


}





.summary,

.summary tbody,

.summary tr,

.summary th,

.summary td{


    display:block;

    width:100%;


}




.summary tr{


    margin-bottom:18px;


}



}




/*
==========================================================
PRINT
==========================================================
*/


@media print{


header,

footer,

nav,

button{


    display:none;


}



body{


    background:white;


}



.result{


    box-shadow:none;

    border:1px solid #ccc;


}





#result{

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

}

.hero{

    overflow:visible !important;

}


.result{

    position:relative;

    z-index:50;

}
    
    /* Sembunyikan bagian hasil secara default */
.result-container {
    display: none;
}

/* Tampilkan saat kelas 'show' ditambahkan oleh JS */
.result-container.show {
    display: block;
}