/* noto-naskh-arabic-regular - latin */
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  src: url('font/ZXuke1cDvLCKLDcimxB44_lu.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: Arabic;
    src: url("font/arabic.otf")
         format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "QuranFont";
    src: url("Amiri Regular.ttf")
    format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MasterQuran";
    src: url("font/master_arab.otf")
    format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "ArabicLocal";	
  src: url('font/arabic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */	
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-style: normal;

}

:root {
    --warna_dasar: rgba(255, 220, 99, 1);
    --warna_tombol_lingkar_dasar: rgba(156, 127, 22, 1);
    --warna_tombol_lingkar_over: rgba(122, 62, 0, 1);
	--bg-modalheader: #3E2723;
	--bg-modalheader_1: #3E2723;
	--bg-modalheader_2: #cb4401;
	--warna_footer:  rgba(122, 62, 0, 1);
	
	--color_grd_1: #000000;
    --color_grd_2: rgba(199, 113, 24, 1);
    --color_grd_3: rgba(255, 220, 99, 1);
    --color_grd_4: rgba(255, 220, 99, 0);
}


html, body{
	background:#F7F3E9;
	color:#333;
    width: 100%;
    height: 100%;
	overflow: hidden;
}

/*=====================================================
FONT FAMILY
=====================================================*/
.arabic-utsman {
font-family:
        "MasterQuran",
        "Arabic",
        "ArabicLocal",
        "Amiri",
        "Traditional Arabic",
        serif;
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: center;
    font-size: 48px;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0;
    word-spacing: 5px;
    padding: 0 0px;
    color: #111;
}
.arabic-utsman-besar {
font-family:
        "MasterQuran",
        "Arabic",
        "ArabicLocal",
        "Amiri",
        "Traditional Arabic",
        serif;
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: center;
    font-size: 100px;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0;
    word-spacing: 5px;
    padding: 0 0px;
    color: #111;
}
.arabic-text {
font-family:
        "QuranFont",
        "Arabic",
        "ArabicLocal",
        "Amiri",
        "Traditional Arabic",
        serif;
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: center;
    font-size: 48px;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0;
    word-spacing: 5px;
    padding: 0 0px;
    color: #111;
}
.font-inter{font-family:'Inter',sans-serif;}
.font-roboto{font-family:'Roboto',sans-serif;}
.font-open{font-family:'Open Sans',sans-serif;}
.font-poppins{font-family:'Poppins',sans-serif;}
.font-nunito{font-family:'Nunito',sans-serif;}
.font-montserrat{font-family:'Montserrat',sans-serif;}
.font-lato{font-family:'Lato',sans-serif;}
.font-merriweather{font-family:'Merriweather',serif;}
.font-source{font-family:'Source Sans 3',sans-serif;}
.font-oswald{font-family:'Oswald',sans-serif;}

/*=====================================================
FONT STYLE
=====================================================*/

.bold{font-weight:700;}
.semi-bold{font-weight:600;}
.normal{font-weight:400;}
.light{font-weight:300;}
.italic{font-style:italic;}
.bold-italic{
    font-weight:700;
    font-style:italic;
}

/*=====================================================
COLOR
=====================================================*/

.text-blue{color:#98DBFC;}
.text-green{color:#2E7D32;}
.text-red{color:#B71C1C;}
.text-purple{color:#5E35B1;}
.text-brown{color:#6D4C41;}
.text-yellow{color:#FF0;}
.text-putih{color:#ffffff;}
/*=====================================================
FONT SIZE
=====================================================*/
.fs-coundown{font-size: 10vw;font-weight:800;}
.fs-besar_2{font-size: 15vw;font-weight:800;}
.fs-besar_1{font-size:52px;font-weight:700;}
.fs-agenda{font-size:22px;font-weight:700;}
.fs-tglheader{font-size:32px;font-weight:700;}
.fs-jamdigital{font-size:32px;font-weight:700;}
.fs-waktu{font-size:32px;font-weight:700;}
.outline_text {
  -webkit-text-stroke: 11px #000000;
  paint-order: stroke fill; /* keeps the letterforms crisp */
}

.fs-waktu-arab
{
	font-size:32px;
	font-weight:700;
    font-family: 'ArabicLocal', 'Noto Naskh Arabic', serif;

    direction: rtl;

    unicode-bidi: isolate;

    text-align: center;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.6;

    white-space: nowrap;
	
}


.fs-namasjid{font-size:52px;font-weight:1200;}		
.fs-jadwal{font-size:52px;font-weight:800;}
.fs-jamku{font-size:52px;font-weight:800;}
.fs-runingtext{font-size:52px;font-weight:800;}
.fs-page-title{font-size:32px;font-weight:700;}
.fs-theme-title{font-size:26px;font-weight:700;}
.fs-sub-title{font-size:21px;font-weight:600;}
.fs-description{font-size:16px;line-height:1.7;}
.fs-content{font-size:15px;line-height:1.8;}
.fs-running{font-size:16px;}
.fs-datetime{font-size:13px;}
.fs-caption{font-size:13px;}
.fs-button{font-size:16px;font-weight:600;}
.fs-number{font-size:35px;font-weight:700;}

/*=====================================================
TABLE
=====================================================*/

.table{
    background:white;
    border-radius:10px;
    overflow:hidden;
}

.table thead{
    background:#0F4C81;
    color:white;
}

.fs-table-head{
    font-size:14px;
    font-weight:600;
}

.fs-table{
    font-size:14px;
}

.fs-table-small{
    font-size:13px;
}

.fs-table-mini{
    font-size:12px;
}

.fs-table-date{
    font-size:13px;
    white-space:nowrap;
}

.fs-table-number{
    font-size:14px;
    text-align:right;
    font-weight:600;
}

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

.demo{
    background:white;
    border-radius:12px;
    padding:15px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.marquee{
    overflow:hidden;
    white-space:nowrap;
}

.marquee span{
    display:inline-block;
    padding-left:100%;
    animation:marquee 15s linear infinite;
}

@keyframes marquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}


.button-container {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

}
.button-container.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%);
}
buttonx {
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        outline: none;
        transition: transform 0.2s;
}
buttonx:hover .icon-circle {
        background-color: var(--warna_tombol_lingkar_over); /* Warna lingkaran saat hover */
}

.icon-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: var(warna_tombol_lingkar_dasar);
        color: white;
        border-radius: 50%;
        font-size: 20px;
        margin-bottom: 4px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.header {
        width: 100%;
		background: linear-gradient(to bottom, var(--color_grd_1),var(--color_grd_2), var(--color_grd_2),var(--color_grd_3));
        background-image: url(../../image/header.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        /* Menyesuaikan ukuran gambar agar sesuai dengan div */
        background-position: center;
        /* Memposisikan gambar di tengah */
        height: 80px;
        top: 0;
}
.footer {
        
		/* Memposisikan gambar di tengah 
		background-color: var(--warna_footer);
		*/

}
.tabel-jadwal {
    width: 100%;
    table-layout: fixed;

    /* Jarak antar TD */
    border-spacing: 10px 8px;

    /* Jangan gunakan border-collapse */
    border-collapse: separate;
}

.tabel-jadwal td {
    text-align: center;
    vertical-align: middle;

    border: 6px solid rgba(255,255,255,0.55);
    border-radius: 50px;



 /* Efek timbul */
    box-shadow:

        /* Bayangan utama */
        14px 14px 20px rgba(0,0,0,0.45),

        /* Cahaya kiri atas */
        -7px -7px 15px rgba(255,255,255,0.20),

        /* Highlight bagian dalam */
        inset 4px 4px 8px rgba(255,255,255,0.25),

        /* Shadow bagian dalam */
        inset -6px -6px 10px rgba(0,0,0,0.30);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
 text-shadow:
        2px 2px 0 rgba(0,0,0,0.45),
        4px 4px 5px rgba(0,0,0,0.35),
        -1px -1px 1px rgba(255,255,255,0.40);
}

.td_3d {
	text-align: center;
	vertical-align: middle;
	border: 6px solid rgba(255,255,255,0.55);
	border-radius: 50px;
	box-shadow:
        12px 12px 18px rgba(0,0,0,0.50),
        -8px -8px 16px rgba(255,255,255,0.18),
        inset 5px 5px 10px rgba(255,255,255,0.25),
        inset -7px -7px 12px rgba(0,0,0,0.35);
	text-shadow:
        2px 2px 0 rgba(0,0,0,0.50),
        4px 5px 7px rgba(0,0,0,0.40),
        -1px -1px 1px rgba(255,255,255,0.35);
	background-color: #33C;
}

.box_gambar {
    text-align: center;
    vertical-align: middle;

    border: 6px solid rgba(255,255,255,0.55);
    border-radius: 50px;



 /* Efek timbul */
    box-shadow:

        /* Bayangan utama */
        14px 14px 20px rgba(0,0,0,0.45),

        /* Cahaya kiri atas */
        -7px -7px 15px rgba(255,255,255,0.20),

        /* Highlight bagian dalam */
        inset 4px 4px 8px rgba(255,255,255,0.25),

        /* Shadow bagian dalam */
        inset -6px -6px 10px rgba(0,0,0,0.30);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
 text-shadow:
        2px 2px 0 rgba(0,0,0,0.45),
        4px 4px 5px rgba(0,0,0,0.35),
        -1px -1px 1px rgba(255,255,255,0.40);
}
.gradasi_kanankiri {

    background: linear-gradient(
        to right,
        #000000 0%,
        #000000 20%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.25) 80%,
        transparent 100%
    );
}
.gradasi_kirikanan {

    background: linear-gradient(
        to left,
        #000000 0%,
        #000000 20%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.25) 80%,
        transparent 100%
    );
}
.latar_gambar
{
	background-color: rgba(0, 0, 0, 0.5);
}
.gradasi_bawahatas {

background: linear-gradient(
    to top,
    #000000 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.3) 70%,
    transparent 100%
);
}

.gradasi_tengah {
background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 5%,
    rgba(0,0,0,0.5) 15%,
    rgba(0,0,0,0.5) 85%,
    rgba(0,0,0,0) 95%,
    rgba(0,0,0,0) 100%
);
}

#bg_slider {
    position: relative; /* Wajib ada agar overlay menempel sempurna */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
}

/* Lapisan overlay gelap */
#bg_slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Atur angka 0.6 untuk tingkat kegelapan (0.1 s/d 1.0) */
    z-index: 1;
}

/* Pastikan konten teks/html di dalam slider tetap berada di atas overlay */
#bg_slider > * {
    position: relative;
    z-index: 2;
}


#popupFullscreen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 1100%;
	height: 100%;
	z-index: 999999999;
	align-items: center;
	justify-content: center;
	background-color: #0CC;
}


/* =========================================
   KETIKA POPUP AKTIF
   ========================================= */

#popupFullscreen.active {

    display: flex;

}


/* =========================================
   ISI POPUP
   ========================================= */

.popup-content {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

}


/* =========================================
   KONTEN
   ========================================= */

.popup-body {

    text-align: center;

    color: white;

    padding: 30px;

}

.popup-body h1 {

    font-size: 60px;

    margin-bottom: 20px;

}

.popup-body p {

    font-size: 28px;

}

#popupClock {

    font-size: 80px;

    font-weight: bold;

    margin-top: 30px;

}




   .info-table {
        width: 100%;
        overflow: hidden;
		height:100%;
		
    }
    
    .info-table td {
        border: 0px solid #334155;
        padding: 0;
        text-align: center;
    }
    
    
    /* =========================================================
       BARIS SCROLL
       ========================================================= */
    
    .info-table .scroll-row td {
        position: relative;
        overflow: hidden;
    }
    
    
    /* =========================================================
       VERTICAL SCROLL TRACK
       ========================================================= */
    
    .v-scroll-track {
    
        position: absolute;
    
        left: 0;
        top: 0;
    
        width: 100%;
    
        display: flex;
    
        flex-direction: column;
    
        align-items: center;
    
        will-change: transform;
    
        transform: translate3d(0, 0, 0);
    
        backface-visibility: hidden;
    
        -webkit-backface-visibility: hidden;
    
        contain: layout paint;
    }
    
    
    /* =========================================================
       VERTICAL SCROLL ITEM
       ========================================================= */
    
    .v-scroll-item {
    
        flex-shrink: 0;
    
        display: flex;
    
        flex-direction: column;
    
        align-items: center;
    
        justify-content: center;
    
        width: 100%;
    
        padding: 14px 24px;
    
        line-height: 1.5;
    
        text-align: center;
    
        border-bottom: 1px dashed #CCCCCC;
    }
    
    
    /* =========================================================
       ITEM TERAKHIR
       ========================================================= */
    
    .v-scroll-item:last-child {
    
        border-bottom: none;
    
    }
    
    
    /* =========================================================
       WAKTU
       ========================================================= */
    
    .v-scroll-item .time {
    
        font-size: 12px;
    
        color: #94a3b8;
    
        margin-top: 4px;
    
    }
.latar_layar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647; /* nilai z-index maksimum */
}
	
.layar-hitam {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2147483647; /* nilai z-index maksimum */
}
.layar-hitam > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grad_hitam_hijau{
    background: linear-gradient(
        to bottom,
        #000000 0%,
        #050d08 45%,
        #062b18 75%,
        #064d2a 100%
    );
}
.grad_hijau_hitam {
    background: linear-gradient(
        to bottom,
        #064d2a 0%,
        #062b18 25%,
        #050d08 55%,
        #000000 100%
    );
}
.vscroll-frame {
    position: relative;
    height: 100px;
    overflow: hidden;
    box-sizing: border-box;
}

.vscroll-content {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;

    will-change: transform;
    transform: translate3d(0, 0, 0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    user-select: none;
}

.grad_hitam_hijau{
    background: linear-gradient(
        to bottom,
        #000000 0%,
        #050d08 45%,
        #062b18 75%,
        #064d2a 100%
    );
}
.grad_hijau_hitam {
    background: linear-gradient(
        to bottom,
        #064d2a 0%,
        #062b18 25%,
        #050d08 55%,
        #000000 100%
    );
}
#gagal_ajax {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 999999;
    display: none;
}
.pesanError_ajax {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    text-align: center;
}