body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        * {
            box-sizing: border-box;
        }
        
        html, body {
            /*height: 100%;*/
            overflow: visible;
        }
        @font-face {font-family: "LPMQ Isep Misbah";
  src: url("hrf/LPMQIsepMisbah.eot"); /* IE9*/
  src: url("hrf/LPMQIsepMisbah.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("hrf/LPMQIsepMisbah.woff2") format("woff2"), /* chrome、firefox */
  url("hrf/LPMQIsepMisbah.woff") format("woff"), /* chrome、firefox */
  url("hrf/LPMQIsepMisbah.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("hrf/LPMQIsepMisbah.svg#LPMQ Isep Misbah") format("svg"); /* iOS 4.1- */
  font-display:swap;
}
@font-face {font-family: "Bismillah";
  src: url("hrf/bismillah/BismillahScript.eot"); /* IE9*/
  src: url("hrf/bismillah/BismillahScript.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("hrf/bismillah/BismillahScript.woff2") format("woff2"), /* chrome、firefox */
  url("hrf/bismillah/BismillahScript.woff") format("woff"), /* chrome、firefox */
  url("hrf/bismillah/BismillahScript.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("hrf/bismillah/BismillahScript.svg#Bismillah") format("svg"); /* iOS 4.1- */
  font-display:swap;
}
        .preserve-lines {
         /* white-space: pre-wrap; */
        }
        
        .app-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .main-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        #welcomeText {
            font-family: 'LPMQ Isep Misbah', 'Traditional Arabic', 'Arabic Typesetting', 'Scheherazade', serif;
            font-size: 1.4em;
            line-height: 2.2;
            text-align: center;
            direction: rtl;
            font-weight:600;
        }
        .iklan2 {
          width: 100%;
          max-width: 100%;
          min-height: 90px; 
          margin: 20px 0 30px 0 !important; /* Memberi jarak atas dan bawah */
          text-align: center; /* Posisi iklan di tengah */
          display: flex;
          justify-content: start;
          align-items: flex-start;
          overflow: hidden; /* Mencegah scroll horizontal jika iklan melebar */
        }
        @media (min-width: 768px) {
        .iklan2 {
        min-height: 90px; /* Sesuai tinggi Leaderboard standar */
        }
     }
        .iklan2:before {
         content: "ad";
         border: 1px solid #ccc;
         padding: 0 5px;
         border-radius: 5px;
         z-index:2;
         margin-right: 35px;
        }
        .iklan1 {
        padding:0;
        height:100%;
        max-height:250px;
        width:100%;
        min-width:280px !important;
        }
        .iklan1:before {
        content: "ad";
        border: 1px solid blue;
        padding: 0 5px;
        border-radius: 5px;
        }
        .tombol_tombol {
            display:flex;
            justify-content: center;
            gap: 0.5rem;
        }
        .arabic-text {
            font-family: 'LPMQ Isep Misbah', 'Traditional Arabic', 'Arabic Typesetting', 'Scheherazade', serif;
            font-size: 1.4em;
            line-height: 2.2;
            text-align: right;
            direction: rtl;
            font-weight:600;
        }
        
        .surah-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .surah-card:hover {
            transform: translateY(-2px);
        }
		
		button#playFullSurah:hover {
        background: #000000cf !important;
        }
        .surah-card:hover {
         background: #d5d5d5 !important;
         }
         
        .hdtafsir-bg {
            background-color: #3b82f6;
            color:#FFFFFF;
        } 
        
        .dark-mode {
            background-color: #1a1a2e;
            color: #eee;
        }
        
        .dark-mode .card-bg {
            background-color: #16213e;
        }
        
        .dark-mode .text-secondary {
            color: #bbb;
        }
        
        .dark-mode select#qariSelect {
        color: #FFF !important;
        background:#1a1a1a;
        }
        
        .light-mode {
            background-color: #f8f9fa;
            color: #333;
        }
        
        .light-mode .card-bg {
            background-color: white;
        }
        
        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        select#qariSelect {
        color: black !important;
        }
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .bookmark-icon {
            transition: all 0.2s ease;
        }
        
        .bookmark-icon:hover {
            transform: scale(1.1);
        }
        
        .audio-playing {
            animation: pulse 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Animasi untuk audio progress */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); }
  50% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.8); }
}

.audio-playing {
  animation: pulse-glow 1.5s infinite;
}

/* Highlight ayat yang sedang diputar */
.current-playing-ayah {
  animation: highlight-pulse 2s infinite;
  border-left: 4px solid #10b981 !important;
}

@keyframes highlight-pulse {
  0%, 100% { background-color: rgba(16, 185, 129, 0.1); }
  50% { background-color: rgba(16, 185, 129, 0.2); }
}

/* Slider styling */
input[type="range"]::-webkit-slider-thumb {
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}   

i {
  font-style: italic;
}