/* ==========================
   ASUPAN HIJAB
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#ffffff;
color:#111111;
overflow-x:hidden;
}

/* Overlay */

#overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:none;
z-index:998;
}

#overlay.active{
display:block;
}

/* Sidebar */

#sidebar{
position:fixed;
top:0;
left:-260px;
width:260px;
height:100%;
background:#ffffff;
box-shadow:2px 0 15px rgba(0,0,0,.12);
transition:.3s;
z-index:999;
overflow-y:auto;
}

#sidebar.active{
left:0;
}

.sidebar-header{
padding:25px 20px;
font-size:22px;
font-weight:600;
border-bottom:1px solid #e5e5e5;
}

#sidebar a{
display:block;
padding:16px 20px;
text-decoration:none;
font-size:16px;
color:#222;
transition:.3s;
}

#sidebar a:hover{
background:#f5f5f5;
padding-left:28px;
}

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

header{
position:sticky;
top:0;
left:0;
width:100%;
height:90px;
background:#ffffff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
z-index:1000;
}

#menuBtn{
background:none;
border:none;
font-size:34px;
cursor:pointer;
color:#111;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
}

.logo{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.logo img{
height:80px;
width:auto;
max-width:100%;
display:block;
object-fit:contain;
}

.blank{
width:50px;
height:50px;
}

/* Hero */

.hero{
padding:35px 20px;
text-align:center;
}

.hero h1{
font-size:30px;
font-weight:700;
margin-bottom:12px;
}

.hero p{
font-size:15px;
line-height:1.8;
color:#555;
max-width:700px;
margin:auto;
}

/* Search */

.search-area{
padding:0 20px 30px;
}

.search-box{
display:flex;
align-items:center;
background:#f4f4f4;
border-radius:50px;
padding:0 18px;
box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.search-box i{
font-size:18px;
color:#666;
}

.search-box input{
flex:1;
border:none;
outline:none;
background:none;
padding:15px;
font-size:15px;
}

/* Video */

main{
max-width:1200px;
margin:auto;
padding:0 15px;
}

.video-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.video-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:.3s;
}

.video-card:hover{
transform:translateY(-5px);
}

.video-card iframe{
width:100%;
height:220px;
border:none;
display:block;
}

.video-info{
padding:14px;
}

.video-title{
font-size:16px;
font-weight:600;
margin-bottom:6px;
color:#111;
}

.video-desc{
font-size:13px;
line-height:1.6;
color:#666;
}

/* Pagination */

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
padding:35px 20px;
flex-wrap:wrap;
}

.pagination button{
background:#111;
color:#fff;
border:none;
padding:10px 18px;
border-radius:30px;
cursor:pointer;
font-size:14px;
transition:.3s;
}

.pagination button:hover{
background:#333;
}

#pageInfo{
font-weight:600;
font-size:15px;
  }
/* ==========================
   FOOTER
========================== */

footer{
background:#fafafa;
padding:40px 20px;
text-align:center;
margin-top:40px;
border-top:1px solid #e5e5e5;
}

.footer-logo{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:15px;
}

.footer-logo img{
height:70px;
width:auto;
object-fit:contain;
}

footer p{
font-size:14px;
color:#666;
line-height:1.8;
}

/* Scrollbar */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#f2f2f2;
}

::-webkit-scrollbar-thumb{
background:#bdbdbd;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#888;
}

/* Animasi */

.video-card,
.search-box,
.pagination button,
#sidebar a{
transition:.3s ease;
}

/* Responsive HP */

@media(max-width:768px){

header{
height:90px;
padding:0 15px;
}

#menuBtn{
font-size:32px;
}

.logo img{
height:80px;
}

.blank{
width:50px;
}

.hero{
padding:25px 15px;
}

.hero h1{
font-size:24px;
}

.hero p{
font-size:14px;
}

.search-area{
padding:0 15px 25px;
}

.video-grid{
grid-template-columns:1fr;
gap:16px;
}

.video-card iframe{
height:220px;
}

.video-title{
font-size:15px;
}

.video-desc{
font-size:13px;
}

.pagination{
gap:8px;
}

.pagination button{
padding:10px 16px;
font-size:13px;
}

.footer-logo img{
height:60px;
}

}

/* Tablet */

@media(min-width:769px) and (max-width:999px){

main{
max-width:900px;
}

.video-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.video-card iframe{
height:210px;
}

}

/* Desktop */

@media(min-width:1000px){

main{
max-width:1250px;
}

.video-grid{
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.video-card iframe{
height:260px;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

.footer-logo img{
height:75px;
}

}

/* Efek Fokus */

input:focus{
outline:none;
}

button{
font-family:'Poppins',sans-serif;
}

img{
max-width:100%;
display:block;
}

iframe{
border:0;
  }