/* ===================================================================
   1. FONT IMPORTS (@font-face)
   =================================================================== */

@font-face {
	font-family: "hafs";
	src: url('assets/fonts/hafs/hafs.eot');
	src: url('assets/fonts/hafs/hafs.woff2') format('woff2'),
		url('assets/fonts/hafs/hafs.woff') format('woff'),
		url('assets/fonts/hafs/hafs.otf') format('opentype');
}

@font-face {
	font-family: 'naskh';
	src: url('assets/fonts/naskh/naskh.woff2') format('woff2'),
		url('assets/fonts/naskh/naskh.woff') format('woff'),
		url('assets/fonts/naskh/naskh.otf') format('opentype');
}

@font-face {
	font-family: 'me_quran';
	src: url('assets/fonts/me_quran/me_quran.woff2') format('woff2'),
		url('assets/fonts/me_quran/me_quran.woff') format('woff'),
		url('assets/fonts/me_quran/me_quran.otf') format('opentype');
}

@font-face {
	font-family: 'saleem';
	src: url('assets/fonts/saleem/saleem.woff2') format('woff2'),
		url('assets/fonts/saleem/saleem.woff') format('woff'),
		url('assets/fonts/saleem/saleem.otf') format('opentype');
}

@font-face {
	font-family: 'scheherazade';
	src: url('assets/fonts/scheherazade/scheherazade.woff2') format('woff2'),
		url('assets/fonts/scheherazade/scheherazade.woff') format('woff'),
		url('assets/fonts/scheherazade/scheherazade.otf') format('opentype');
}

@font-face {
	font-family: 'LPMQ';
	src: url('assets/fonts/lpmq/lpmq.eot');
	src: url('assets/fonts/lpmq/lpmq.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/lpmq/lpmq.ttf') format('truetype');
}

@font-face {
	font-family: 'NotoKufi';
	src: url('assets/fonts/noto/NotoKufiArabic-Regular.ttf') format('truetype');
}

/* ===================================================================
   2. GLOBAL & ROOT STYLES
   =================================================================== */

:root {
	--height-image: 30px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: #eee;
}

.container {
 	width: 98%;
  	max-width: 580px;   /* default */	
	/* max-width: 680px; */
	margin: 0 auto;
	padding: 0;
}

/* ===================================================================
   3. FONT UTILITY CLASSES
   =================================================================== */

.font-hafs { font-family: "hafs"; }
.font-naskh { font-family: "naskh"; }
.font-me_quran { font-family: "me_quran"; }
.font-saleem { font-family: "saleem"; }
.font-scheherazade { font-family: "scheherazade"; }
.font-lpmq { font-family: "LPMQ"; }
.font-noto-kufi { font-family: "NotoKufi"; }

/* ===================================================================
   4. MAIN LAYOUT STRUCTURE
   =================================================================== */

.main-container {
	position: relative;
	/* min-height: 100vh; */
	height: auto;
	border: 4px solid #FDE257;
	padding-left: var(--height-image);
	padding-right: var(--height-image);
}

.main-container::before,
.main-container::after {
	content: '';
	position: absolute;
	z-index: 3;
	width: var(--height-image);
	height: 100%;
	top: 0;
	background-image: url('./assets/images2/pattern yassir.png');
	background-repeat: repeat-y;
	background-size: contain;
}
.main-container::before { left: 0; }
.main-container::after { right: 0; }

/* --- Main Header --- */
.main-header-info {
	position: relative;
	height: var(--height-image);
}
.main-header-info::before {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: url('./assets/images2/pattern yassir.png');
	background-repeat: repeat-x;
	background-size: contain;
	background-position: center;
}
.main-header-info-content-wrap {
	position: relative;
	display: flex;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	background: transparent;
}
.main-header-info__left,
.main-header-info__right {
	position: absolute;
	width: 200px;
	height: 60px;
	margin-top: -11px;
	color: #fff;
	background-repeat: no-repeat;
	background-size: contain;
}
.main-header-info__left {
	font-size: 10px;
	left: 0;
	background-image: url('./assets/images2/halaman kiri.png');
	background-position: left;
	line-height: 60px;
	/* padding-left: 65px; */
	padding-left: 26px;
}
.main-header-info__right {
	font-size: 10px;
	right: 0;
	background-image: url('./assets/images2/halaman kanan.png');
	background-position: right;
	text-align: right;
	line-height: 60px;
	padding-right: 65px;
	margin-top: -12px;
}
.icon-makkah-madaniyah {
	padding-right: 15px;
}

/* --- Main Footer --- */
.main-footer {
	position: relative;
	width: 100%;
	height: var(--height-image);
}
.main-footer::before {
	content: '';
	position: absolute;
	bottom: 0;
	margin-bottom: 5px;
	height: 100%;
	width: 100%;
	background-image: url('./assets/images2/pattern yassir.png');
	background-repeat: repeat-x;
	background-size: contain;
	background-position: center;
}
.main-footer .main-footer__page {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -20px;
	width: 50px;
	height: 50px;
	padding: 10px;
	line-height: 30px;
	background-image: url('./assets/images2/nomor halaman.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.main-footer #prevPageFooterBtn,
.main-footer #nextPageFooterBtn {
	position: absolute;
	top: 0;
	margin-top: -10px;
	background-color: transparent;
	border: 1px solid #000;
}
.main-footer #prevPageFooterBtn { left: 0; }
.main-footer #nextPageFooterBtn { right: 0; }

/* ===================================================================
   5. QURAN CONTENT & TEXT STYLING
   =================================================================== */

.quran-content-area {
	/* min-height: calc(100vh - 60px); */
	height: auto;	
	padding: 20px;
	background-color: #fff;
	font-size: 1.8rem;
	line-height: 1.6;
	direction: rtl;
	text-align: justify;
	border: 4px solid #FDE257;
	outline: 1px solid #015D2D;
	outline-offset: -10px;
}

.quran-line {
	position: relative;
	text-align: justify;
	text-align-last: justify;
	white-space: nowrap;
	margin-bottom: 5px;
	border-bottom: 1px solid #CCC;
	padding: 5px 0;
}

/* --- Surah Header --- */
.sura-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	height: 50px;
	margin-bottom: 20px;
	background-image: url('./assets/images/bg-title.png');
	background-repeat: repeat-x;
	background-size: contain;
	border: 2px solid #015D2D;
	border-radius: 10px;
}
.sura-header-container .sura-header-title {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 50px;
	color: #FFF;
	font-size: 0.55em;
	text-align: center;
	background-image: url('./assets/images2/nama surat.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.sura-header-container .sura-header-aksen-left,
.sura-header-container .sura-header-aksen-right {
	width: 160px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: contain;
}
.sura-header-container .sura-header-aksen-left {
	background-image: url('./assets/images2/surat kiri.png');
	background-position: left;
}
.sura-header-container .sura-header-aksen-right {
	background-image: url('./assets/images2/surat kanan.png');
	background-position: right;
}
.sura-header-right,
.sura-header-left {
	background: #fff;
    font-size: 15px;
    padding: 6px;
    border-radius: 5px;
    border: 1px solid #ccc;
	direction: rtl;
	white-space: nowrap;
	width: auto;
	display: inline-block;
}

.sura-header-right {
	margin-right: 10px;
}

.sura-header-left {
	margin-left: 10px;
}

.bismillah-header {
	font-size: 1.7rem;
	color: #28a745;
	margin-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}

/* --- Ayat & Terjemahan --- */
.ayah-segment {
	display: inline;
	padding: .1em;
	margin: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .3s ease;
}
.ayah-segment:hover { background-color: #e9ecef; }
.ayah-segment.highlighted-ayah {
	background-color: #d1ecdf;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.ayah-number-display {
	color: #28a745;
	font-size: .8em;
	vertical-align: super;
	margin-right: 2px;
	display: inline-block;
	text-align: center;
}
.translation-text-interleaved {
	direction: ltr;
	text-align: left;
	font-size: 1rem;
	line-height: 1.6;
	color: #333;
	margin: 10px 0 20px;
	padding: 8px 15px;
	background-color: #f8f9fa;
	border-right: 3px solid #17a2b8;
	border-radius: 0 4px 4px 0;
}

/* --- Marker Container (ain, waqof, juz, hizb, sajadah) --- */
.marker_container {
    position: absolute;
    right: -55px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.marker_container > div {
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 3px;
    min-width: 40px;
    text-align: center;
    font-size: 0.65em;
	justify-items: center;
}

.marker_container_left {
    position: absolute;
    left: -55px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.marker_container_left > div {
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 3px;
    min-width: 40px;
    text-align: center;
    font-size: 0.65em;
	justify-items: center;
}

/* semua marker ikut gaya flex, bukan absolute */
.yassir-wrap-ain,
.yassir-wrap-waqof-lazim,
.tanda_juz,
.tanda_hijb,
.tanda_rubu_hijb,
.tanda_nifs_hijb,
.tanda_tsalatsa_arba_hijb,
.tanda_sajadah {
    position: static;
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 3px;
    min-width: 40px;
    text-align: center;
    font-size: 0.65em;
    color: #000;
}

.tanda_juz,
.tanda_hijb,
.tanda_rubu_hijb,
.tanda_nifs_hijb,
.tanda_tsalatsa_arba_hijb,
.tanda_sajadah {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* jarak antar baris */
}


/* ===================================================================
   6. COMPONENTS
   =================================================================== */

.brand-logo { height: 40px; margin-right: 15px; }

.sidebar {
	padding: 15px;
	max-height: 90vh;
	background-color: #f0f2f5;
	overflow-y: auto;
}
.sidebar .card { margin-bottom: 15px; border: 1px solid #ddd; }
.sidebar .card-header {
	padding: .5rem 1rem;
	font-weight: 700;
	background-color: #e9ecef;
}

/* --- Badges --- */
.main-header-info .badge {
	padding: 0.5em 1em;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}
.main-header-info .badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.badge-info { background-color: #17a2b8; }

/* --- Off-Canvas --- */
.bs-canvas-overlay { opacity: 0.85; z-index: 1100; }
.bs-canvas {
	top: 0; z-index: 1110; 
	/* width: 400px; */
	overflow-x: hidden; overflow-y: auto;
	transition: margin .4s ease-out;
}
.bs-canvas-left { left: 0; margin-left: -4000px; }
.bs-canvas-right { right: 0; margin-right: -400px; }

.offcanvas-backdrop {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	z-index: 1040;
	background-color: rgba(0, 0, 0, 0.5);
}
.offcanvas-bottom {
	position: fixed;
	left: 0; bottom: -100%;
	width: 100%; height: 50%;
	padding: 1rem;
	z-index: 1045;
	background-color: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	transition: bottom 0.3s ease-in-out;
}
.offcanvas-bottom.show { bottom: 0; }

/* ===================================================================
   7. RESPONSIVE DESIGN
   =================================================================== */

@media (max-width: 375px) {
	:root { --height-image: 20px; }
	.main-header-info__left,
	.main-header-info__right { height: 50px; }
	.main-header-info__left {
		line-height: 50px;
		padding-left: 40px;
	}
	.main-header-info__right {
		line-height: 50px;
		padding-right: 40px;
	}
	.main-footer .main-footer__page {
		width: 40px; height: 40px; line-height: 20px;
	}
}

@media (max-width: 768px) {
	.main-container {
	/* padding-left: 0;
	padding-right: 0; */
	border: none;
	}

	.quran-content-area {
		/* border: none;
		outline: none;; */
	}

	.main-container::before,
	.main-container::after {	
		background-image: none;
	}

	#quranTextArea {
    	touch-action: pan-y;
		touch-action: pan-y pinch-zoom;
		-ms-touch-action: pan-y pinch-zoom; /* untuk kompatibilitas */		
  	}	
}