/**
* Theme Name: Alquran Child
* Description: This is a child theme of Alquran, generated by Merlin WP.
* Author: <a href="http://themeforest.net/user/themazine">TheMazine</a>
* Template: alquran
* Version: 2.2
*/

.main-header.fixed-header .header-upper {display: none;}

.kelas-header {
    background:#f8f9fa;
    padding:25px;
    border-radius:8px;
    margin-bottom:30px;
}

.wali-kelas-box {
    background:white;
    padding:20px;
    border-radius:8px;
    margin-top:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.wali-flex {
    display:flex;
    align-items:center;
    gap:20px;
}

.wali-foto img {
    border-radius:50%;
}

.kelas-header ul {
    columns:2;
    margin-top:10px;
}

/* CSS Modern */
.kelas-profile-wrapper {
    background:#f9fafb;
    padding:30px;
    border-radius:12px;
    margin-bottom:40px;
}

.kelas-profile-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px;
    align-items:start;
}

.kelas-foto {
    width:100%;
    border-radius:12px;
}

.wali-card {
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.wali-card img {
    border-radius:50%;
}

.daftar-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-top:10px;
}

.daftar-grid span {
    background:white;
    padding:6px 10px;
    border-radius:6px;
    font-size:14px;
}

/* Grid Post */
.kelas-berita-section {
    margin-top:60px;
    /* padding:0 50px; */
}

.kelas-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:0.3s ease;
}

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

.kelas-card img {
    width:100%;
    height:200px;
    object-fit:cover;
}

.kelas-card-body {
    padding:15px;
}

.kelas-card-body h4 {
    font-size:16px;
    margin-bottom:8px;
}

/* CSS Hidden + Button */
.hidden-siswa {
    display:none;
}

.btn-lihat {
    margin-top:15px;
    padding:8px 14px;
    background:#1d8f5a;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* CSS Lightbox */
#lightboxOverlay {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

#lightboxOverlay img {
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

#closeLightbox {
    position:absolute;
    top:30px;
    right:40px;
    font-size:40px;
    color:white;
    cursor:pointer;
}

/* CSS Badge Kelas Modern */
.kelas-meta-bar {
    margin:15px 0 25px 0;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.badge-aktif {
    background:#1d8f5a;
    color:white;
    padding:6px 12px;
    border-radius:50px;
    font-size:14px;
}

.badge-stat {
    background:#eef2f7;
    padding:6px 12px;
    border-radius:50px;
    font-size:14px;
}

/* CSS Smooth Animation */
.daftar-wrapper {
    overflow:hidden;
    transition:max-height 0.5s ease;
}

.daftar-wrapper.collapsed {
    /* max-height:190px; */
    overflow:hidden;
    transition:max-height 0.5s ease;
}

.daftar-wrapper.expanded {
    max-height:1000px;
}

.daftar-grid span {
    background:white;
    padding:8px 12px;
    border-radius:8px;
    transition:0.3s;
    cursor:default;
}

/* Hover Effect Nama Siswa */
.daftar-grid span:hover {
    background:#1d8f5a;
    color:white;
    transform:translateY(-2px);
}

/* daftar kelas */
.kelas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    margin-top: 30px;
}

.span-kelas {
    text-align: center;
    color: #1E7F3F;
    line-height: 56px;
    font-weight: 600;
    font-size: var(--font-50);
    margin-bottom: 20px;
    margin-top: 40px;
}

/* .kelas-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
} */

.kelas-card {
    text-decoration: none;
    position: relative;
}

.kelas-image {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.kelas-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kelas-card:hover img {
    transform: scale(1.08);
}

.kelas-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.kelas-overlay h3 {
    color: #fff;
    margin: 0;
    font-size: 18px;
}

.kelas-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
}

.badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.badge.siswa {
    /* background: rgba(255,255,255,0.9); */
    background: #1E7F3F;
    color: #fff;
}

.badge.berita {
    background: #0f1f17;
    color: #fff;
}

/* Service Grid */
.service-text-wrapper {
    position:relative;
}

.service-text-wrapper .alquran-text{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.service-text-wrapper.expanded .alquran-text{
    -webkit-line-clamp:unset;
}

.service-text-wrapper .alquran-text{
    transition:all .3s ease;
}
/* .service-text-wrapper .alquran-text{
    max-height:90px;
    overflow:hidden;
    transition:max-height .3s ease;
}

.service-text-wrapper.expanded .alquran-text{
    max-height:500px;
} */

/* @media (max-width: 768px) {
    .kelas-grid {
        padding-inline: clamp(16px, 4vw, 0px);
    }
} */

@media (max-width: 768px) {
    .alquran-blog .row {
        padding-inline: clamp(16px, 4vw, 0px);
    }
}


// woo
.course-block_one {
    position: relative;
    margin-bottom: var(--margin-bottom-30);
}

.alquran-btn-woo {
    width:100%;
    text-align:center;
}

.course-block_one-inner .news-block_one-inner{
    height:100%;
    display:flex;
    flex-direction:column;
}

.course-block_one-content{
    flex:1;
}

.course-block_one-inner{
    transition: all .3s ease;
}

.course-block_one-inner:hover{
    transform: translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/*** 
====================================================================
	Prayer Time
====================================================================
***/
.prayer-time{
	position: relative;
	padding: 100px 0px 100px;
}

.prayer-time_title{
	position: relative;
	text-align: center;
	font-weight: 500;
	color: var(--color-three);
	margin-bottom: var(--margin-bottom-50);
}

.prayer-time_content{
	position: relative;
	font-weight: 500;
	line-height: 30px;
	text-align: center;
	font-size: var(--font-20);
	padding: 50px 175px 140px;
	color: var(--main-color);
	background-color: var(--color-fourtyseven);
}

.prayer-time_timing{
	position: relative;
	padding: 40px 30px;
	border-radius: 5px;
	margin-top: -90px;
	margin-left: var(--margin-left-100);
	margin-right: var(--margin-right-100);
	margin-bottom: var(--margin-bottom-45);
	background: #f7d781;
    background: linear-gradient(to left, #50bc84 0%, #f7d781 100%);
}

.prayer-time_time{
	position: relative;
	display: inline-block;
	text-align: center;
}

.prayer-time_time .title{
	position: relative;
	font-weight: 500;
	display: inline-block;
	font-size: var(--font-36);
	color: var(--white-color);
	margin-bottom: var(--margin-bottom-25);
    text-align: center !important;
}

.prayer-time_time .title::before{
	position: absolute;
	content: '';
	left: -45px;
	top: 10px;
	width: 36px;
	height: 7px;
	background-color: var(--color-two);
}

.prayer-time_time .title::after{
	position: absolute;
	content: '';
	right: -45px;
	top: 10px;
	width: 36px;
	height: 7px;
	background-color: var(--color-two);
}


.time-countdown{
	position:relative;
}

.time-countdown .counter-column{
	position:relative;
	display: inline-block;
	line-height: 1em;
	color:var(--white-color);
	text-transform:uppercase;
	font-size:var(--font-20);
	font-weight:600;
	text-align: center;
	margin:0px 12px 20px;
}

.time-countdown .counter-column .count{
	position:relative;
	display:block;
	font-size:var(--font-30);
	line-height:30px;
	padding:0px 0px 0px;
	color:var(--white-color);
	font-weight:600;
}

.time-countdown .counter-column::before{
	position:absolute;
	content: ':';
	right: -18px;
	top: 4px;
	color:var(--white-color);
	font-size:var(--font-26);
}

.time-countdown .counter-column:last-child::before{
	display: none;
}

.time-countdown_subtitle{
	position: relative;
	color:var(--white-color);
	font-size:var(--font-24);
	text-transform: capitalize;
}

.prayer-time_list{
	position: relative;
	text-align: center;
}

.prayer-daytime{
	position: relative;
	width: 170px;
	height: 137px;
	font-weight: 500;
	padding: 30px 25px;
	text-align: center;
	border-radius: 5px;
	display: inline-block;
	font-size: var(--font-18);
	margin: 0px 12px 25px;
	color: var(--color-fourtyeight);
	background-color: #F1FFE3;
}

.prayer-daytime span{
	position: relative;
	display: block;
	font-weight: 500;
	font-size: var(--font-24);
	color: var(--black-color);
	margin-top: var(--margin-top-15);
	padding-top: var(--padding-top-15);
	border-top: 2px solid var(--color-fourtynine);
}

.prayer-daytime:nth-child(2){
	background-color: #fefaec;
}

.prayer-daytime:nth-child(3){
	background-color: #ecfaf4;
}

.prayer-daytime:nth-child(4){
	background-color: #f0eee9;
}

.prayer-daytime:nth-child(5){
	background-color: #fff5f5;
}

.prayer-daytime:nth-child(6){
	background-color: #fbf2e5;
}

.makkah-timezone{
	position: relative;
	text-align: center;
	font-size: var(--font-18);
	color: var(--main-color);
	margin-top: var(--margin-top-20);
}

/*** 
====================================================================
	Daftar Guru
====================================================================
***/
/* .scholar-block_one-content {
    position: relative;
    text-align: center;
    padding: 30px 15px;

    margin: -120px auto 0;

    height: auto !important;
    width: 100% !important;

    margin: -120px auto 0 !important;

    background-size: 100% 100% !important;

    background-image: url('../images/background/scholar-bg.png');

    background-size: 100% 100%; 
    background-repeat: no-repeat;
    background-position: center;

    max-width: 100%;
} */
.scholar-block_one-content {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: 85%;
    padding: 20px;

    text-align: center;

    background: linear-gradient(135deg, #f5e6c8, #b7d3c1);
    border-radius: 20px;

    margin: 0 !important; /* ❌ buang margin negatif lama */
}

.scholar-block_one-inner {
    position: relative;
    height: 100%;
    min-height: 420px; /* 🔥 kunci tinggi */
}

.scholar-block_one-content {
    flex-grow: 1;
}

.scholar-block_one-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
}

.scholar-block_one-heading {
    font-size: 16px;
    min-height: 40px; /* 🔥 biar nama panjang tetap rata */
}

.scholar-block_one-designation {
    font-size: 13px;
    min-height: 20px;
}