/*
====================================================
 RUMAH JURNAL ILMIAH
 STAI HUBBULWATHAN DURI
 LANDING PAGE FINAL
 OJS 2.4.8.5
====================================================
*/


/* ==============================
RESET
============================== */


#rjLanding,
#rjLanding *{

    box-sizing:border-box;

}


body.landing-page{

    margin:0!important;
    padding:0!important;

}


#rjLanding{

    width:100%;

    overflow:hidden;

    font-family:"Segoe UI",Arial,sans-serif;

}






/* ==============================
CONTAINER
============================== */


.rj-container{

    width:90%;

    max-width:1200px;

    margin:auto;

}






/* ==============================
HEADER FULL SCREEN
============================== */


.rj-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    color:white;

    background:#003B1D;

}




.rj-topbar{

    background:#003B1D;

    padding:3px 0;

    border-bottom:none;

}





.rj-user{

    text-align:right;

    font-size:11px;

}


.rj-user a{

    color:white;

    text-decoration:none;

}





.rj-navbar{

    background:#003B1D;

    border:none;

}



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

.rj-nav{

    height:50px;   /* sebelumnya 50px */

    display:flex;

    align-items:center;

    justify-content:space-between;

}




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

.rj-logo{
    display:flex;
    align-items:center;
}

/* -------------------------------
   PENGATURAN LOGO HEADER
-------------------------------- */

.rj-logo img{

    /* Ukuran logo */
    height:95px;
    width:auto;
    max-width:none;
    object-fit:contain;

    /* Geser logo */
    margin-top:-45px;      /* Naik = negatif, Turun = positif */

    /* Alternatif lebih halus */
    /* transform:translateY(0px); */

    display:block;
    transition:all .3s ease;
}

.rj-logo img:hover{
    transform:scale(1.02);
}



.rj-menu{

    display:flex;

    align-items:center;

    gap:18px;

}




.rj-menu a {

    color:white;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    position:relative;

    padding-bottom:8px;

    transition:all .3s ease;

}

.rj-menu a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:#D4AF37;

    transition:width .3s ease;

}



.rj-menu a:hover::after {

    width:100%;

}

.rj-menu a:hover{

    color:#D4AF37;

}





/* SEARCH */


.rj-menu form{

    display:flex;

}



.rj-menu input{

    width:180px;

    height:35px;

    border:none;

    padding:0 15px;

    border-radius:20px 0 0 20px;

}



.rj-menu button{

    width:40px;

    border:none;

    cursor:pointer;

    border-radius:0 20px 20px 0;

}








/* ==============================
HERO FULL SCREEN
============================== */


.rj-hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:700px;

    overflow:hidden;

}






.rj-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    opacity:0;

    visibility:hidden;


    transform:scale(1.08);


    transition:

    opacity 1.2s ease,

    transform 7s ease;


}



.rj-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}





.rj-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.75),

    rgba(0,0,0,.30)

    );

}







/* TEXT */


.rj-hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    z-index:10;

    color:#003B1D;

    max-width:650px;

}


.rj-hero-content h1{

    color:#003B1D;
    text-shadow:
    2px 2px 8px rgba(255,255,255,0.9),
    -2px -2px 8px rgba(255,255,255,0.9),
    0 0 12px rgba(255,255,255,0.8);

}


.rj-hero-content p{

    color:#003B1D;
    text-shadow:
    2px 2px 8px rgba(255,255,255,0.9),
    -2px -2px 8px rgba(255,255,255,0.9),
    0 0 12px rgba(255,255,255,0.8);

}



.rj-hero-content p{


    font-size:21px;

    line-height:1.7;

    margin-bottom:35px;


}





.rj-explore{


    display:inline-block;


    padding:15px 40px;


    background:#004D25;


    color:white;


    border-radius:30px;


    text-decoration:none;


    font-weight:bold;


}



.rj-explore:hover{


    background:#D4AF37;

    color:#003B1D;

}







/* SLIDER BUTTON */


.rj-prev,
.rj-next{


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    z-index:20;


    width:55px;


    height:55px;


    border-radius:50%;


    border:none;


    background:rgba(255,255,255,.25);


    color:white;


    font-size:25px;


    cursor:pointer;


}



.rj-prev{

    left:35px;

}


.rj-next{

    right:35px;

}





/* DOT */


.rj-dots{


    position:absolute;


    bottom:35px;


    left:50%;


    transform:translateX(-50%);


    z-index:20;


}



.dot{


    display:inline-block;


    width:12px;


    height:12px;


    background:white;


    border-radius:50%;


    margin:5px;


    cursor:pointer;


}



.dot.active{


    width:35px;


    border-radius:20px;


}







/* ==============================
JOURNAL
============================== */


.rj-journal{

    padding:10px 0 80px;

}



.rj-title{

    text-align:center;

    margin-bottom:45px;

}



.rj-title h2{

    font-size:38px;
    color:#003B1D;
    margin-bottom:8px;

}



.rj-title p{

    color:#000000;

}





.rj-journal-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:35px;

}





.rj-card{


    width:330px;

    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
    0 8px 25px rgba(0,0,0,.15);

    transition:.3s;


}



.rj-card:hover{

    transform:translateY(-8px);

}





.rj-cover{


    height:200px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f5f5;

}



.rj-cover img{

    width:85%;

    height:180px;

    object-fit:contain;

}



.rj-card-body{

    padding:20px;

    text-align:center;

}



.rj-card-body h3 a{


    color:#003B1D;

    text-decoration:none;

}



.rj-button{


    display:inline-block;


    background:#004D25;


    color:white;


    padding:10px 30px;


    border-radius:25px;


    text-decoration:none;


}








/* ==============================
ABOUT
============================== */


.rj-about{


    padding:70px 0;

    text-align:center;

}





.rj-about h2{

    color:#003B1D;

}








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


.rj-footer{


    background:#003B1D;


    color:white;


    padding-top:60px;


}



.rj-footer-grid{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:40px;


}




.rj-footer-logo{


    width:130px;

}



.rj-footer h3{

    color:#D4AF37;

}



.rj-footer a {

    display:block;

    color:white;

    text-decoration:none;

    margin-bottom:10px;

    font-size:14px;


}



.rj-footer a:hover {

    color:#D4AF37;

}




.rj-copyright{


    margin-top:40px;


    padding:20px;


    text-align:center;


    background:#002814;


}








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


@media(max-width:1000px){


.rj-menu{

    flex-wrap:wrap;

}


.rj-footer-grid{

    grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.rj-footer-grid{

    grid-template-columns:1fr;

}


.rj-hero-content h1{

    font-size:35px;

}


.rj-hero-content p{

    font-size:16px;

}


}

/* =====================================
   FORCE FULL WIDTH OJS 2
===================================== */


body.landing-page #container,
body.landing-page #main,
body.landing-page #body,
body.landing-page #content,
body.landing-page #contentWrapper{

    width:100%!important;

    max-width:none!important;

    margin:0!important;

    padding:0!important;

}



body.landing-page #header,
body.landing-page #footer{

    display:none!important;

}





#rjLanding{

    width:100vw!important;

    margin-left:calc(50% - 50vw);

}





.rj-hero{

    width:100vw!important;

    height:100vh!important;

    min-height:100vh!important;

}





.rj-slide{

    width:100vw!important;

    height:100vh!important;

}





.rj-overlay{

    width:100%;

    height:100%;

}
/* ============================
   COVER JURNAL
============================ */

.rj-cover{
    width:100%;
    height:320px;
    overflow:hidden;
    background:#f5f5f5;
    border-radius:12px 12px 0 0;
}

.rj-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.35s;
}

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


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

.rj-contact-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:2px;   /* sebelumnya 15px */

    line-height:1.4;

}

.rj-contact-item i{

    width:20px;

    margin-top:3px;

    color:#fff;

    flex-shrink:0;

}

.rj-contact-item span,
.rj-contact-item a{

    color:#fff;

    text-decoration:none;

    line-height:1.4;

}

.rj-contact-item a:hover{

    color:#D4AF37;

}

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

.rj-footer-brand{
    text-align:center;
    padding-top:32px;
}

.rj-footer-brand .rj-footer-logo{
    width:140px;
    height:auto;
    display:block;
    margin:0 auto 12px; /* sebelumnya 18px */
}

.rj-footer-brand h3{
    color:#ffffff;
    margin:0 0 2px 0;
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.rj-footer-brand p{
    margin:0;
    color:#dddddd;
    font-size:15px;
    line-height:1.2;
}
/* =====================================================
   DESKTOP LARGE (>=1200px)
===================================================== */

@media (min-width:1200px){

    .rj-container{
        max-width:1280px;
    }
    
    .rj-logo img{
        height:95px;
    }
    
    .rj-card{
        width:330px;
    }
    
    }
    /* =====================================================
   LAPTOP
===================================================== */

@media (max-width:1199px){

    .rj-container{
        width:95%;
    }
    
    .rj-nav{
        height:90px;
    }
    
    .rj-logo img{
        height:80px;
    }
    
    .rj-menu{
        gap:14px;
    }
    
    .rj-menu input{
        width:170px;
    }
    
    .rj-card{
        width:300px;
    }
    
    .rj-hero-content h1{
        font-size:48px;
    }
    
    .rj-hero-content p{
        font-size:18px;
    }
    
    }
    /* =====================================================
   TABLET
===================================================== */

@media (max-width:991px){

    .rj-nav{
    
        flex-direction:column;
    
        justify-content:center;
    
        height:auto;
    
        padding:15px 0;
    
    }
    
    .rj-logo{
    
        margin-bottom:15px;
    
    }
    
    .rj-logo img{
    
        height:70px;
    
    }
    
    .rj-menu{
    
        flex-wrap:wrap;
    
        justify-content:center;
    
        gap:12px;
    
    }
    
    .rj-menu input{
    
        width:170px;
    
    }
    
    .rj-hero{
    
        min-height:650px;
    
    }
    
    .rj-hero-content{
    
        left:5%;
        right:5%;
        max-width:100%;
        text-align:center;
    
    }
    
    .rj-hero-content h1{
    
        font-size:42px;
    
    }
    
    .rj-hero-content p{
    
        font-size:18px;
    
    }
    
    .rj-prev,
    .rj-next{
    
        width:45px;
        height:45px;
        font-size:20px;
    
    }
    
    .rj-journal-grid{
    
        justify-content:center;
    
    }
    
    .rj-card{
    
        width:320px;
    
    }
    
    .rj-footer-grid{
    
        grid-template-columns:repeat(2,1fr);
    
        gap:30px;
    
    }
    
    }
    /* =====================================================
   MOBILE
===================================================== */

@media (max-width:767px){

    .rj-container{
    
        width:94%;
    
    }
    
    /* HEADER */
    
    .rj-topbar{
    
        display:none;
    
    }
    
    .rj-nav{
    
        flex-direction:column;
    
        height:auto;
    
        padding:15px 0;
    
    }
    
    .rj-logo{
    
        margin-bottom:15px;
    
    }
    
    .rj-logo img{
    
        height:60px;
    
        max-width:100%;
    
    }
    
    /* MENU */
    
    .rj-menu{
    
        width:100%;
    
        display:flex;
    
        flex-wrap:wrap;
    
        justify-content:center;
    
        gap:10px;
    
    }
    
    .rj-menu a{
    
        font-size:13px;
    
    }
    
    .rj-menu form{
    
        width:100%;
    
        justify-content:center;
    
        margin-top:10px;
    
    }
    
    .rj-menu input{
    
        width:75%;
    
        max-width:240px;
    
    }
    
    .rj-menu button{
    
        height:38px;
    
    }
    
    /* HERO */
    
    .rj-hero{
    
        min-height:100vh;
    
    }
    
    .rj-hero-content{
    
        left:5%;
        right:5%;
    
        max-width:100%;
    
        text-align:center;
    
    }
    
    .rj-hero-content h1{
    
        font-size:32px;
    
        line-height:1.3;
    
    }
    
    .rj-hero-content p{
    
        font-size:16px;
    
        line-height:1.6;
    
    }
    
    .rj-explore{
    
        padding:12px 28px;
    
        font-size:14px;
    
    }
    
    /* BUTTON SLIDER */
    
    .rj-prev,
    .rj-next{
    
        width:40px;
        height:40px;
        font-size:18px;
    
    }
    
    /* JOURNAL */
    
    .rj-title h2{
    
        font-size:30px;
    
    }
    
    .rj-card{
    
        width:100%;
        max-width:340px;
    
    }
    
    .rj-cover{
    
        height:280px;
    
    }
    
    /* FOOTER */
    
    .rj-footer{
    
        text-align:center;
    
    }
    
    .rj-footer-grid{
    
        grid-template-columns:1fr;
    
        gap:35px;
    
    }
    
    .rj-footer-brand{
    
        order:-1;
    
    }
    
    .rj-contact-item{
    
        justify-content:center;
    
        text-align:left;
    
    }
    
    .rj-footer a{
    
        display:inline-block;
    
    }
    
    }