/* ========================================= */
/* PEMBOLEHUBAH WARNA (COLOR VARIABLES)      */
/* ========================================= */
:root {
  /* --- WARNA TEMA UTAMA (Berdasarkan Rekabentuk Baharu) --- */
  --primary-color: #267370;
  /* Dark Cyan / Ocean Teal - Tajuk Topik, Teks Arab & Aksen Utama */
  --primary-dark: #0C1C2E;
  /* Dark Midnight Navy - Bingkai Utama, Pill Header & Lencana Nombor */
  --accent-gold: #D9A54C;
  /* Warm Ochre Gold - Butang Navigasi (< >), Lightbulb Tip & Butang Tindakan */
  --accent-gold-hover: #C5933A;
  /* Hover state untuk Gold */

  --secondary-color: #0C1C2E;
  /* Dark Navy untuk elemen sekunder */
  --bg-grad-start: #E5ECEF;
  --bg-grad-end: #D8E2E7;

  --btn-grad-start: #D9A54C;
  --btn-grad-end: #C5933A;
  --btn-hover-start: #C5933A;
  --btn-hover-end: #B38128;

  --bg-white: #ffffff;
  --bg-avatar: #ffffff;
  --badge-bg: #E3EFEF;
  --gray-light: #e0e0e0;
  --gray-dark: #cccccc;
  --black: #000000;
  --text-dark: #2D3748;

  /* --- Warna UI Brilliant-Style --- */
  --app-bg: #F2F4F5;
  /* Latar belakang kanvas dalaman (Soft Slate Off-White) */
  --nav-btn-bg: var(--accent-gold);
  /* Butang navigasi atas (Gold) */
  --frame-border: #0C1C2E;
  /* Border bingkai luar tebal Navy Blue */
  --sidebar-bg: #F2F4F5;
  /* Latar menu sisi */
  --sidebar-header: #0C1C2E;
  /* Pengepala menu sisi Navy Blue */
  --card-border-rose: #D4B3A8;
  /* Border kad terjemahan (Terracotta / Rose Gold) */

  /* --- Modul Nota Berhalaman --- */
  --nota-text-main: #2D3748;
  --nota-text-title: #267370;
  --nota-text-muted: #475569;
  --nota-text-light: #64748b;
  --nota-bg-card: #ffffff;
  --nota-bg-info: #F2F4F5;
  --nota-border-light: #D4B3A8;
  --nota-border-dark: #0C1C2E;
  --nota-primary: #267370;
  --nota-primary-dark: #0C1C2E;

  /* Viewport Height Dinamik untuk Pelayar Mudah Alih (Safari iOS) */
  --app-height: 100dvh;

  /* ========================================= */
  /* PENGURUSAN SKALA FON (FONT SCALING)       */
  /* ========================================= */
  --scale-teks: 1;
  --scale-tajuk: 1;

  --fs-dialog: calc(1.2rem * var(--scale-teks));
  --fs-subtitle: calc(1.2rem * var(--scale-teks));
  --fs-badge: calc(1.2rem * var(--scale-teks));
  --fs-btn: calc(1.2rem * var(--scale-teks));
  --fs-card-subj: calc(1.2rem * var(--scale-teks));
  --fs-kitaran-title: calc(1.2rem * var(--scale-teks));
  --fs-kitaran-desc: calc(1.2rem * var(--scale-teks));
  --fs-tab-btn: calc(1.2rem * var(--scale-teks));
  --fs-content: calc(1.2rem * var(--scale-teks));
  --fs-option-btn: calc(1.2rem * var(--scale-teks));
  --fs-main-title: calc(1.2rem * var(--scale-tajuk));
  --fs-video-title: calc(2rem * var(--scale-tajuk));
}

/* ========================================= */
/* TETAPAN ASAS (GLOBAL)                     */
/* ========================================= */
@font-face {
  font-family: "Azim";
  src: url("/assets/font/azim/Azim-Medium.otf");
}

@font-face {
  font-family: "Sakkal-Majalla";
  src: url("assets/font/sakkal-majalla/Sakkal-Majalla-Regular.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  size-adjust: 128%;
}

@font-face {
  font-family: "Amiri-Jawi";
  src: url("assets/font/amiri/Amiri-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "KFGQPC-Uthmani";
  src: url("assets/font/kfgqpc-uthmani/KFGQPC-Uthmani-HAFS-Regular.otf") format("opentype"),
    url("/assets/font/kfgqpc-uthmani/KFGQPC-Uthmani-HAFS-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-Light.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-Regular.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-Medium.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-SemiBold.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-Bold.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-ExtraBold.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/font/nunito/Nunito-Black.ttf") format("truetype"),
    url("/assets/font/nunito/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

body,
html {
  height: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  background-color: transparent;
  overflow: hidden;
}

/* ========================================= */
/* MOD TULISAN JAWI (RIGHT-TO-LEFT & FON)    */
/* ========================================= */
body.jawi-mode {
  --jawi-stroke: 0.4px;
  font-family: "Sakkal-Majalla", "Amiri-Jawi", "Amiri", serif !important;
  --scale-teks: 1;
  --scale-tajuk: 1;
  font-weight: 700;
  -webkit-text-stroke: var(--jawi-stroke) currentColor;
  paint-order: stroke fill;
  line-height: 1.45;
}

body.jawi-mode [data-i18n],
body.jawi-mode .speech-bubble,
body.jawi-mode .subtopic-content-box,
body.jawi-mode .kitaran-desc,
body.jawi-mode .kitaran-title,
body.jawi-mode .video-title,
body.jawi-mode .main-title,
body.jawi-mode .subtitle,
body.jawi-mode .topic-card,
body.jawi-mode .subject-card,
body.jawi-mode .option-btn {
  direction: rtl;
}

body.jawi-mode .speech-bubble,
body.jawi-mode .subtopic-content-box,
body.jawi-mode .option-btn {
  text-align: right !important;
}

body.jawi-mode .main-title,
body.jawi-mode .subtitle,
body.jawi-mode .video-title {
  text-align: center !important;
}

body.jawi-mode .topic-card,
body.jawi-mode .kitaran-card {
  text-align: right !important;
}

/* Ensure all pembelajaran containers & text areas inherit RTL and right text alignment */
body.jawi-mode .sirah-v2-wrapper,
body.jawi-mode .sirah-v2-content,
body.jawi-mode .subtopic-content-box,
body.jawi-mode .aqidah-slide-body-content,
body.jawi-mode .fiqah-slide-body-content,
body.jawi-mode .akhlak-slide-body-content,
body.jawi-mode .hadis-slide-body-content,
body.jawi-mode .sirah-slide-body-content,
body.jawi-mode .jawi-slide-body-content,
body.jawi-mode .quran-slide-body-content,
body.jawi-mode .nota-main-card,
body.jawi-mode .glosari-container,
body.jawi-mode .rumusan-container,
body.jawi-mode .refleksi-container,
body.jawi-mode .tajwid-card,
body.jawi-mode .maksud-box,
body.jawi-mode .tadabbur-box,
body.jawi-mode .asbab-box,
body.jawi-mode .sirah-bullet-text,
body.jawi-mode .sirah-timeline-item,
body.jawi-mode .hadis-terjemahan-box,
body.jawi-mode .hadis-pengajaran-item,
body.jawi-mode .hadis-huraian-card,
body.jawi-mode .aqidah-tab-card-btn,
body.jawi-mode .aqidah-hujah-card,
body.jawi-mode .aqidah-fakta-card,
body.jawi-mode .fiqah-box-text,
body.jawi-mode .fiqah-gold-card-desc,
body.jawi-mode .fiqah-fardhu-tab-btn,
body.jawi-mode .fiqah-bullet-item,
body.jawi-mode .fiqah-hukum-content-side,
body.jawi-mode .fiqah-pengamalan-text,
body.jawi-mode .fiqah-bersuci-hukum-content,
body.jawi-mode .fiqah-water-tab-btn,
body.jawi-mode .fiqah-kaifiat-text,
body.jawi-mode .akhlak-box-text,
body.jawi-mode .akhlak-green-banner,
body.jawi-mode .akhlak-section-title-d,
body.jawi-mode .akhlak-top-bullet,
body.jawi-mode .akhlak-stacked-col-title {
  direction: rtl !important;
  text-align: right !important;
}

/* Number flow & BiDi isolation: preserve LTR order for digits, codes, and badges */
body.jawi-mode .num-font,
body.jawi-mode .number-badge,
body.jawi-mode .verse-num-badge,
body.jawi-mode .hadis-coral-badge-dark,
body.jawi-mode .sirah-bullet-num,
body.jawi-mode .fiqah-circle-badge,
body.jawi-mode .fakta-nombor,
body.jawi-mode .sidebar-sk-code,
body.jawi-mode .badge-sk,
body.jawi-mode .sk-badge,
body.jawi-mode .num-badge,
body.jawi-mode .code-badge,
body.jawi-mode .sk-number,
body.jawi-mode .fakta-num,
body.jawi-mode .header-level-badge,
body.jawi-mode .carousel-card-badge,
body.jawi-mode .kitaran-badge,
body.jawi-mode .topic-badge {
  unicode-bidi: isolate !important;
  direction: ltr !important;
  display: inline-block !important;
}

/* Maintain consistent LTR direction for header bar, navigation icons, and audio popover in Jawi mode */
body.jawi-mode .islamic-header-bar,
body.jawi-mode .top-nav,
body.jawi-mode .header-nav-left-home,
body.jawi-mode .header-nav-left,
body.jawi-mode .header-nav-right,
body.jawi-mode .header-lang-badge,
body.jawi-mode .audio-settings-overlay,
body.jawi-mode .audio-settings-popover,
html[dir="rtl"] .islamic-header-bar,
html[dir="rtl"] .top-nav,
html[dir="rtl"] .header-nav-left-home,
html[dir="rtl"] .header-nav-left,
html[dir="rtl"] .header-nav-right,
html[dir="rtl"] .header-lang-badge,
html[dir="rtl"] .audio-settings-overlay,
html[dir="rtl"] .audio-settings-popover {
  direction: ltr !important;
}

body.jawi-mode i,
body.jawi-mode .fa-solid,
body.jawi-mode .fa-regular,
body.jawi-mode .num-font,
body.jawi-mode .header-level-badge,
body.jawi-mode .carousel-card-badge,
body.jawi-mode .kitaran-badge,
body.jawi-mode .topic-badge {
  -webkit-text-stroke: 0;
  font-weight: 800;
}

/* Teks ayat-ayat al-Quran tidak ditebalkan (preserve natural Hafs Uthmani font weight & fine diacritics) */
body.jawi-mode .arabic-text-teal,
body.jawi-mode .arabic-pill-bar,
body.jawi-mode .quran-opening-line,
body.jawi-mode .quran-closing-arabic,
.arabic-text-teal,
.arabic-pill-bar,
.quran-opening-line,
.quran-closing-arabic {
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  font-family: 'KFGQPC-Uthmani', 'Traditional Arabic', serif !important;
}

body.jawi-mode .header-title-text,
body.jawi-mode .header-sub-text,
body.jawi-mode .footer-text-center,
body.jawi-mode .lang-text,
body.jawi-mode .card-title,
body.jawi-mode .card-desc,
body.jawi-mode .carousel-card-btn,
body.jawi-mode .btn-start,
body.jawi-mode .kitaran-title,
body.jawi-mode .kitaran-desc,
body.jawi-mode .kitaran-card-footer,
body.jawi-mode .topic-card-title,
body.jawi-mode .pengenalan-bidang-name,
body.jawi-mode .pengenalan-desc-text,
body.jawi-mode .pengenalan-subhead,
body.jawi-mode .pengenalan-objektif-list li,
body.jawi-mode .pengenalan-badge,
body.jawi-mode #pengenalanHeaderTitle,
body.jawi-mode .lyrics-track-tag,
body.jawi-mode .lyrics-track-title,
body.jawi-mode .lyrics-viewport-header,
body.jawi-mode .lyrics-hint,
body.jawi-mode #btnTeruskanKeTopik,
body.jawi-mode .lyric-line,
body.jawi-mode .quran-title-pill,
body.jawi-mode .title-pill,
body.jawi-mode .video-title,
body.jawi-mode .speech-bubble,
body.jawi-mode .option-btn,
body.jawi-mode .subtopic-tab-btn,
body.jawi-mode .ibrah-title,
body.jawi-mode .rumusan-term-title,
body.jawi-mode .rumusan-term-maksud,
body.jawi-mode .glosari-card-maksud,
body.jawi-mode .glosari-pembelajaran-title,
body.jawi-mode .interactive-tab-title,
body.jawi-mode .interactive-detail-content,
body.jawi-mode .tajwid-kaedah-title,
body.jawi-mode .tajwid-kaedah-desc,
body.jawi-mode .sidebar-nav-item,
body.jawi-mode .app-tooltip {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-weight: 700;
  -webkit-text-stroke: var(--jawi-stroke) currentColor;
}

/* ========================================= */
/* LATAR BELAKANG SEKSYEN & OVERLAY BLUR     */
/* ========================================= */
.section-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -4;
  transition: background-image 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
  background-image: url('assets/image/laman-utama-bg.png');
}

.section-blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  background-color: rgba(12, 28, 46, 0.42);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  z-index: -2;
  pointer-events: none;
}

.bg-home {
  background-image: url('assets/image/home-bg.jpeg') !important;
}

.bg-menu {
  background-image: url('assets/image/topic-bg.jpg') !important;
}

.bg-video {
  background-image: url('assets/image/laman-utama-background-image.jpeg') !important;
}

.bg-topics {
  background-image: url('assets/image/laman-utama-bg.png') !important;
}

.bg-kitaran {
  background-image: url('assets/image/laman-utama-background-image.jpeg') !important;
}

.bg-subtopics {
  background-image: url('assets/image/laman-utama-bg.png') !important;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  object-fit: cover;
  z-index: -3;
  transition: opacity 0.6s ease;
}

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  background-color: rgba(8, 21, 38, 0.4);
  z-index: -1;
}

/* ========================================= */
/* MENU SISI (SIDEBAR)                       */
/* ========================================= */
.side-menu {
  width: 320px;
  background-color: var(--sidebar-bg);
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  position: fixed;
  left: -320px;
  top: 0;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.05);
}

.side-menu.open {
  left: 0;
}

/* ========================================= */
/* OVERLAY: TUTUP SIDEBAR DENGAN TAP LUAR   */
/* ========================================= */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1049; /* tepat di bawah sidebar (z-index: 1050) */
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================= */
/* BUTANG TUTUP (✕) DALAM HEADER SIDEBAR    */
/* ========================================= */
.side-menu-close-btn {
  position: absolute;
  top: 16px;
  left: 16px; /* kanan (RTL-friendly: kiri dalam layout LTR header kita) */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.side-menu-close-btn:hover,
.side-menu-close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: scale(1.1);
  outline: none;
}

.side-menu-close-btn:active {
  transform: scale(0.93);
}

.side-menu-header {
  background-color: var(--sidebar-header);
  padding: 25px 20px;
  color: white;
  border-radius: 20px 20px 0 0;
  position: relative; /* needed for absolute close btn */
}

.side-menu-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  border-radius: 0 0 20px 20px;
}

.menu-group {
  margin-bottom: 25px;
}

.menu-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.menu-title.active-title {
  color: var(--primary-color);
}

.menu-item {
  font-size: 0.9rem;
  color: #64748b;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  transition: 0.2s;
}

.menu-item i {
  font-size: 6px;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #0f172a;
}

.menu-item.active-menu-item {
  background-color: var(--badge-bg);
  color: var(--primary-dark);
  font-weight: 600;
}

/* ========================================= */
/* KONTENA APLIKASI UTAMA (DINAMIK)          */
/* ========================================= */
.main-app-container {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.main-app-container.sidebar-open {
  padding-left: 320px;
}

.section-container {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  flex-direction: column;
  padding: 0 100px 80px 100px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* ========================================= */
/* GAYA NAVIGASI ATAS (ISLAMIC HEADER BAR)   */
/* ========================================= */
.top-nav,
.islamic-header-bar {
  position: relative;
  width: calc(100% + 200px);
  margin-left: -100px;
  margin-right: -100px;
  max-width: none;
  aspect-ratio: 1920 / 163;
  display: block;
  user-select: none;
  flex-shrink: 0;
}

.islamic-header-bar .header-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

/* Navigasi Kiri (Butang Menu, Home, Back) */
.header-nav-left-home {
  position: absolute;
  top: 36%;
  /* Disesuaikan supaya butang berada di tengah kawasan biru */
  left: max(4%, calc(env(safe-area-inset-left) + 10px));
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  direction: ltr;
}

.header-nav-left {
  position: absolute;
  top: 36%;
  /* Disesuaikan supaya butang berada di tengah kawasan biru */
  left: max(2%, calc(env(safe-area-inset-left) + 10px));
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  direction: ltr;
}

/* Navigasi Kanan (Butang Audio, Settings, Bahasa) */
.header-nav-right {
  position: absolute;
  top: 36%;
  /* Disesuaikan supaya butang berada di tengah kawasan biru */
  right: 0%;
  padding-right: max(2vw, calc(env(safe-area-inset-right) + 10px));
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  direction: ltr;
}

.header-icon-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease;
}

.header-icon-btn img {
  height: clamp(2px, 2.5vw, 40px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.header-icon-btn i {
  font-size: clamp(16px, 1.9vw, 24px);
  color: var(--accent-gold);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease, filter 0.25s ease;
}

.header-icon-btn:hover {
  transform: scale(1.18);
  filter: brightness(1.25);
}

.header-icon-btn:hover i {
  color: var(--accent-gold-hover);
  filter: drop-shadow(0 2px 8px rgba(217, 165, 76, 0.6));
}

.header-icon-btn:active {
  transform: scale(0.92);
}

.header-back-btn {
  color: var(--accent-gold);
  font-size: clamp(16px, 1.9vw, 24px);
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease, filter 0.25s ease;
}

.header-back-btn:hover {
  color: var(--accent-gold-hover);
  filter: drop-shadow(0 2px 8px rgba(217, 165, 76, 0.6));
  transform: scale(1.18);
}

.header-back-btn:active {
  transform: scale(0.92);
}

.header-lang-badge {
  background: rgba(12, 28, 46, 0.75);
  border: 1px solid rgba(217, 165, 76, 0.6);
  color: var(--accent-gold);
  border-radius: 20px;
  padding: 0.3vw 1vw;
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  direction: ltr;
}

.header-lang-badge:hover {
  /* background: var(--accent-gold);
  color: var(--primary-dark); */
  transform: scale(1.1);
}

/* ========================================= */
/* INITIAL APP SPLASH LOADER                 */
/* ========================================= */
.initial-splash-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.initial-splash-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 580px;
  width: 90%;
}

.splash-kpm-logo {
  width: clamp(260px, 45vw, 520px);
  height: auto;
  object-fit: contain;
  margin-bottom: clamp(20px, 4vh, 35px);
  animation: splashLogoScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes splashLogoScale {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.splash-loader-track {
  width: clamp(180px, 30vw, 280px);
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.splash-loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #d9a54c, #267370);
  border-radius: 10px;
  transition: width 0.35s ease;
}

.splash-loading-text {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.3px;
}

/* ========================================= */
/* POPUP VIDEO INTRO (SELEPAS SPLASH LOADER) */
/* ========================================= */
.intro-video-popup {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  direction: ltr !important;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-video-popup.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.intro-video-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 46, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.intro-video-popup-container {
  position: relative;
  width: 100%;
  max-width: min(920px, 94vw);
  max-height: 90vh;
  background: #0c1c2e;
  border: 2px solid rgba(217, 165, 76, 0.55);
  border-radius: clamp(12px, 2vw, 18px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(217, 165, 76, 0.2),
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(38, 115, 112, 0.25);
  transform: scale(0.92);
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
}

.intro-video-popup.is-visible .intro-video-popup-container {
  transform: scale(1);
}

/* Decorative gold corner accents */
.ivp-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 4;
  pointer-events: none;
}

.ivp-corner--tl {
  top: 8px;
  left: 8px;
  border-top: 2px solid var(--accent-gold);
  border-left: 2px solid var(--accent-gold);
  border-radius: 4px 0 0 0;
}

.ivp-corner--tr {
  top: 8px;
  right: 8px;
  border-top: 2px solid var(--accent-gold);
  border-right: 2px solid var(--accent-gold);
  border-radius: 0 4px 0 0;
}

.ivp-corner--bl {
  bottom: 12px;
  left: 8px;
  border-bottom: 2px solid var(--accent-gold);
  border-left: 2px solid var(--accent-gold);
  border-radius: 0 0 0 4px;
}

.ivp-corner--br {
  bottom: 12px;
  right: 8px;
  border-bottom: 2px solid var(--accent-gold);
  border-right: 2px solid var(--accent-gold);
  border-radius: 0 0 4px 0;
}

.intro-video-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1328 / 672;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-video-popup-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Close / Skip button */
.intro-video-popup-close {
  position: absolute;
  top: clamp(8px, 1.3vw, 14px);
  right: clamp(8px, 1.3vw, 14px);
  z-index: 10;
  width: clamp(28px, 2.6vw, 38px);
  height: clamp(28px, 2.6vw, 38px);
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #0c1c2e;
  font-size: clamp(0.78rem, 1.1vw, 1.05rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 10px rgba(217, 165, 76, 0.4);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.intro-video-popup-close:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(217, 165, 76, 0.7);
}

.intro-video-popup-close:active {
  transform: scale(0.95);
}

/* Unmute Button */
.intro-video-unmute-btn {
  position: absolute;
  bottom: clamp(10px, 1.5vw, 16px);
  right: clamp(10px, 1.5vw, 16px);
  z-index: 10;
  background: rgba(12, 28, 46, 0.85);
  border: 1.5px solid var(--accent-gold);
  border-radius: 30px;
  color: var(--accent-gold);
  padding: clamp(4px, 0.6vw, 6px) clamp(10px, 1.2vw, 14px);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.intro-video-unmute-btn:hover {
  background: var(--accent-gold);
  color: #0c1c2e;
  transform: scale(1.04);
}

/* Progress bar at bottom */
.intro-video-popup-bar-wrap {
  height: clamp(3px, 0.5vw, 5px);
  background: rgba(255, 255, 255, 0.12);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.intro-video-popup-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-color));
  transition: none;
  will-change: width;
}

/* Pelarasan responsif untuk popup video intro */
@media (max-width: 768px) {
  .intro-video-popup {
    padding: 10px;
  }

  .intro-video-popup-container {
    max-width: 96vw;
    border-radius: 14px;
    border-width: 1.5px;
  }

  .ivp-corner {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .intro-video-popup {
    padding: 8px;
  }

  .intro-video-popup-container {
    max-width: 98vw;
    border-radius: 12px;
  }

  .ivp-corner {
    width: 10px;
    height: 10px;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .intro-video-popup {
    padding: 6px;
  }

  .intro-video-popup-container {
    max-height: 94vh;
    max-width: min(88vw, 680px);
    border-radius: 12px;
  }

  .intro-video-player-wrap {
    aspect-ratio: 16 / 9;
    max-height: calc(94vh - 5px);
  }

  .ivp-corner {
    width: 12px;
    height: 12px;
  }
}

/* ========================================= */
/* BUTANG TONTON SEMULA VIDEO PENGENALAN     */
/* (BULATAN IKON SAHAJA DI BAWAH HEADER)     */
/* ========================================= */
.btn-reopen-intro-video {
  position: absolute;
  top: clamp(42px, calc(5.4vw + 10px), 116px);
  right: max(clamp(14px, 2.2vw, 32px), calc(env(safe-area-inset-right) + 12px));
  z-index: 15;
  width: clamp(34px, 3.2vw, 44px);
  height: clamp(34px, 3.2vw, 44px);
  border-radius: 50%;
  padding: 0;
  background: rgba(12, 28, 46, 0.92);
  border: 2px solid var(--accent-gold);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(217, 165, 76, 0.3);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
}

.btn-reopen-intro-video:hover {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
  color: #0C1C2E;
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(217, 165, 76, 0.65);
  border-color: #ffffff;
}

.btn-reopen-intro-video i {
  font-size: clamp(0.82rem, 1.05vw, 1.05rem);
  color: inherit;
  margin-left: clamp(1px, 0.2vw, 2px); /* pelarasan optik untuk segitiga butang play */
  transition: transform 0.2s ease;
}

.btn-reopen-intro-video:hover i {
  transform: scale(1.08);
}

.btn-reopen-intro-video:active {
  transform: translateY(0) scale(0.95);
}

/* Penyesuaian skrin kecil butang tonton semula */
@media (max-width: 991px) {
  .btn-reopen-intro-video {
    top: clamp(38px, calc(5.4vw + 8px), 68px);
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
    width: clamp(32px, 3.8vw, 38px);
    height: clamp(32px, 3.8vw, 38px);
  }

  .btn-reopen-intro-video i {
    font-size: clamp(0.78rem, 1vw, 0.92rem);
    margin-left: 1.5px;
  }
}

@media (max-width: 480px) {
  .btn-reopen-intro-video {
    top: clamp(32px, calc(5vw + 8px), 48px);
    right: max(10px, calc(env(safe-area-inset-right) + 6px));
    width: 32px;
    height: 32px;
  }

  .btn-reopen-intro-video i {
    font-size: 0.78rem;
    margin-left: 1.5px;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .btn-reopen-intro-video {
    top: clamp(30px, calc(5.2vw + 6px), 50px);
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
    width: 32px;
    height: 32px;
  }

  .btn-reopen-intro-video i {
    font-size: 0.76rem;
    margin-left: 1.5px;
  }
}

/* ========================================= */
/* KAWALAN AUDIO MODAL / POPOVER             */
/* ========================================= */
.audio-settings-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 13, 26, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: clamp(55px, 7vh, 80px);
  padding-right: clamp(15px, 3.5vw, 50px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  direction: ltr !important;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.audio-settings-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.audio-settings-popover {
  direction: ltr !important;
  width: clamp(280px, 26vw, 360px);
  background: linear-gradient(145deg, rgba(16, 37, 66, 0.96), rgba(8, 20, 36, 0.98));
  border: 1.5px solid rgba(217, 165, 76, 0.55);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(217, 165, 76, 0.2);
  padding: 16px 20px;
  color: #ffffff;
  transform: translateY(-10px) scale(0.95);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.audio-settings-overlay.show .audio-settings-popover {
  transform: translateY(0) scale(1);
}

@media (max-width: 480px) {
  .audio-settings-overlay {
    justify-content: center;
    padding-right: 12px;
    padding-left: 12px;
    padding-top: clamp(45px, 6vh, 60px);
  }

  .audio-settings-popover {
    width: 100%;
    max-width: 330px;
    padding: 14px 16px;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .audio-settings-overlay {
    padding-top: clamp(38px, 9vh, 50px);
    padding-right: clamp(12px, 3vw, 30px);
  }

  .audio-settings-popover {
    width: clamp(260px, 32vw, 310px);
    padding: 10px 14px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .audio-slider-group {
    margin-bottom: 8px;
  }
}

.audio-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(217, 165, 76, 0.25);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.audio-settings-title {
  font-family: 'Poppins', 'Amiri', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  font-weight: 700;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.audio-settings-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.audio-settings-close:hover {
  color: var(--accent-gold);
  transform: scale(1.2);
}

.audio-slider-group {
  margin-bottom: 14px;
}

.audio-slider-group:last-child {
  margin-bottom: 4px;
}

.audio-slider-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.audio-label-left {
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  font-weight: 600;
  color: #e6edf5;
  display: flex;
  align-items: center;
}

.audio-val-badge {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(217, 165, 76, 0.18);
  border: 1px solid rgba(217, 165, 76, 0.4);
  color: var(--accent-gold);
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 42px;
  text-align: center;
}

.audio-slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-icon-min,
.audio-icon-max {
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.audio-icon-min:hover,
.audio-icon-max:hover {
  transform: scale(1.2);
  color: var(--accent-gold-hover) !important;
}

.audio-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.audio-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(217, 165, 76, 0.8);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.audio-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  background: var(--accent-gold-hover);
}

.audio-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(217, 165, 76, 0.8);
  cursor: pointer;
}

.header-nav-center {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: block;
}

.header-logo {
  position: absolute;
  top: 39%;
  left: 22.5%;
  /* Kekalkan koordinat tengah bintang */
  transform: translate(-50%, -50%);

  /* --- GUNA WIDTH SEBAGAI KAWALAN SAIZ --- */
  width: 9.5%;
  /* Cuba 3%, 4%, atau 5% sehingga ia muat cantik */
  height: auto;
  /* Ketinggian akan automatik mengikut kelebaran */

  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.header-title-text {
  position: absolute;
  left: 24%;
  /* Ditolak sedikit ke kanan agar bebas dari bintang kiri */
  top: 41%;
  /* Disesuaikan ke tengah bar emas di bawah */
  transform: translateY(-50%);
  font-family: 'Nunito', 'Cinzel', 'Trajan Pro', 'Georgia', serif;
  font-size: clamp(0.95rem, 1.8vw, 1.85rem);
  font-weight: 900;
  color: #0C1C2E;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.header-sub-text {
  position: absolute;
  right: 25.5%;
  /* Ditolak sedikit ke kiri agar bebas dari bintang kanan */
  top: 41%;
  transform: translateY(-50%);
  font-family: 'Nunito', 'Cinzel', 'Trajan Pro', 'Georgia', serif;
  font-size: clamp(0.8rem, 1.5vw, 1.55rem);
  font-weight: 900;
  color: #0C1C2E;
  letter-spacing: 1.4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.app-tooltip {
  position: fixed;
  z-index: 40000;
  max-width: min(90vw, 18rem);
  padding: 0.28rem 0.6rem;
  border-radius: 8px;
  background: #0C1C2E;
  color: #F2DB95;
  border: 1px solid rgba(217, 165, 76, 0.55);
  box-shadow: 0 6px 16px rgba(12, 28, 46, 0.35);
  font-family: "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px) scale(0.96);
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s ease;
  text-align: center;
}

.app-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 14px) scale(1);
}

body.jawi-mode .app-tooltip {
  direction: rtl;
  letter-spacing: 0;
}

.header-level-badge {
  position: absolute;
  right: 21.8%;
  /* Dikunci tepat pada tengah bintang kanan */
  top: 41%;
  transform: translate(50%, -50%);
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 2vw, 2.2rem);
  /* Saiz dibesarkan sedikit */
  font-weight: 900;
  color: #F2DB95;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  z-index: 20;
  /* Memastikan nombor 1 sentiasa dipapar di hadapan imej */
}

/* ========================================= */
/* GAYA BAR BAWAH (ISLAMIC FOOTER BAR)       */
/* ========================================= */
.islamic-footer-bar {
  position: absolute;
  bottom: 0%;
  /* Jarak terapung dari bawah skrin */
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  /* Lebar responsif skrin */
  max-width: 1279px;
  /* Kunci pada saiz maksimum imej asal */
  aspect-ratio: 1279 / 79;
  /* Skala nisbah bentuk yang tepat berdasarkan imej */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  /* Supaya klik tidak disekat */
}

.islamic-footer-bar .footer-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Memastikan imej muat sempurna tanpa herot */
  z-index: 1;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.4));
}

.footer-text-center {
  position: relative;
  z-index: 5;
  font-family: 'Nunito', 'Cinzel', sans-serif;
  font-size: clamp(0.85rem, 1.4vw, 1.35rem);
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Mod Jawi khas untuk Footer */
body.jawi-mode .footer-text-center {
  font-family: 'Sakkal-Majalla', serif;
}

/* PENTING: Jika ada kod @media (max-width) untuk header di bawah ini, padamkannya
   kerana saiz kini dikawal secara automatik melalui fungsi clamp() dan peratusan */

/* ========================================= */
/* BINGKAI KANDUNGAN UTAMA (CONTENT FRAME)   */
/* ========================================= */
.content-frame {
  flex-grow: 1;
  border: 4px solid var(--frame-border);
  border-radius: 24px;
  background-color: var(--app-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(12, 28, 46, 0.2);

  background: rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* #menuSection .content-frame {
  background: rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
} */

.frame-scroll-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 35px 40px;
  display: flex;
  flex-direction: column;
}

.home-frame {
  flex-grow: 1;
  border: 4px solid var(--frame-border);
  border-radius: 24px;
  background-image: url("/assets/image/laman-utama-bg.png");
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(12, 28, 46, 0.2);
}

.content-wrapper {
  text-align: center;
  z-index: 5;
  margin-top: -30px;
}

.badge-kpm {
  background-color: var(--badge-bg);
  color: var(--primary-color);
  border-radius: 30px;
  padding: 8px 30px;
  font-size: var(--fs-badge);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 25px;
  border: 2px solid var(--primary-color);
}

.main-title {
  font-size: var(--fs-main-title);
  font-weight: 800;
  color: var(--bg-white);
  margin-bottom: 15px;
  letter-spacing: -1.5px;
}

/* ========================================= */
/* PENGENALAN OVERVIEW & LYRICS PLAYER       */
/* ========================================= */
.pengenalan-grid-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  max-width: 1040px;
  margin: 10px auto 10px auto;
  width: 100%;
  align-items: stretch;
}

.pengenalan-overview-card,
.pengenalan-lyrics-card {
  background: #ffffff;
  border: 1.5px solid var(--card-border-rose);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(12, 28, 46, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pengenalan-overview-card::before,
.pengenalan-lyrics-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-color));
}

.pengenalan-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pengenalan-badge {
  background: var(--primary-dark);
  color: var(--accent-gold);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(12, 28, 46, 0.2);
}

.pengenalan-bidang-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0;
}

.pengenalan-desc-text {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 18px;
}

.pengenalan-objektif-section {
  margin-top: auto;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pengenalan-subhead {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.pengenalan-objektif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pengenalan-objektif-list li {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: justify;
}

.pengenalan-objektif-list li::before {
  content: '✦';
  color: var(--accent-gold-hover);
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Lyrics Card & Audio Deck */
.lyrics-audio-deck {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0c1c2e, #1a334d);
  border-radius: 18px;
  color: #ffffff;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(12, 28, 46, 0.25);
  flex-shrink: 0;
}

.lyrics-disc-wrap {
  flex-shrink: 0;
}

.lyrics-disc {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #2d4560 30%, #0c1c2e 70%);
  border: 2px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(217, 165, 76, 0.4);
  transition: transform 0.3s ease;
}

.lyrics-disc.is-spinning {
  animation: spinDisc 4s linear infinite;
}

@keyframes spinDisc {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lyrics-track-info {
  flex-grow: 1;
  min-width: 0;
}

.lyrics-track-tag {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.lyrics-track-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lyrics-player-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lyrics-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), #c48b36);
  border: none;
  color: #ffffff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 165, 76, 0.5);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.lyrics-play-btn:hover {
  transform: scale(1.08);
}

.lyrics-progress-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lyrics-seek-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  accent-color: var(--accent-gold);
  cursor: pointer;
  outline: none;
}

.lyrics-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
}

/* Lyrics Viewport */
.lyrics-viewport-wrapper {
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 220px;
}

.lyrics-viewport-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 750;
  color: #64748b;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.lyrics-hint {
  font-size: 0.72rem;
  color: #94a3b8;
}

.lyrics-scroll-box {
  flex: 1 1 0;
  height: 100%;
  min-height: 180px;
  max-height: none;
  overflow-y: auto;
  padding: 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  text-align: center;
}

.lyrics-scroll-box::-webkit-scrollbar {
  width: 4px;
}

.lyrics-scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.lyric-line {
  font-size: 1rem;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.4;
  user-select: none;
}

.lyric-line:hover {
  color: var(--primary-dark);
  background: rgba(217, 165, 76, 0.1);
}

.lyric-line.active-lyric {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-dark);
  background: linear-gradient(135deg, #fef3e2, #f9dfb6);
  box-shadow: 0 4px 14px rgba(217, 165, 76, 0.25);
  transform: scale(1.03);
  border-left: 3px solid var(--accent-gold);
  border-right: 3px solid var(--accent-gold);
}

body.jawi-mode .pengenalan-overview-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .pengenalan-card-header {
  direction: rtl;
}

body.jawi-mode .pengenalan-badge {
  font-size: 0.95rem;
}

body.jawi-mode .pengenalan-subhead {
  direction: rtl;
  font-size: 1.15rem;
}

body.jawi-mode .pengenalan-objektif-list li {
  direction: rtl;
  text-align: right;
  font-size: 1.05rem;
}

body.jawi-mode .pengenalan-lyrics-card {
  direction: rtl;
}

body.jawi-mode .lyrics-track-info {
  text-align: right;
}

body.jawi-mode .lyrics-track-tag {
  font-size: 0.92rem;
}

body.jawi-mode .lyrics-track-title {
  font-size: 1.15rem;
}

body.jawi-mode .lyrics-viewport-header {
  direction: rtl;
  font-size: 0.95rem;
}

body.jawi-mode .lyrics-hint {
  font-size: 0.88rem;
}

body.jawi-mode .lyric-line {
  direction: rtl;
  font-size: 1.18rem;
}

body.jawi-mode .lyric-line.active-lyric {
  font-size: 1.3rem;
}

body.jawi-mode #btnTeruskanKeTopik {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-size: 1.35rem;
  padding: 6px 36px;
  direction: rtl;
}

body.jawi-mode #btnTeruskanKeTopik i {
  transform: scaleX(-1);
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

@media (max-width: 860px) {
  .pengenalan-grid-container {
    grid-template-columns: 1fr;
  }
}

.subtitle {
  font-size: var(--fs-subtitle);
  color: var(--bg-white);
  letter-spacing: 2px;
  margin-bottom: 40px;
  line-height: 1.6;
  font-weight: 400;
}

.home-title-img {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: min(820px, 68vw);
  max-height: clamp(140px, 32vh, 320px);
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
  transition: all 0.3s ease;
}

@media (max-height: 720px) {
  .home-title-img {
    top: 26%;
    max-height: 25vh;
    max-width: min(580px, 60vw);
  }
}

@media (max-width: 768px) {
  .home-title-img {
    top: 26%;
    max-width: 85vw;
    max-height: 24vh;
  }
}

@media (max-width: 480px) {
  .home-title-img {
    top: 25%;
    max-width: 92vw;
    max-height: 22vh;
  }
}

.btn-start {
  background-color: #0E2340;
  border: 2px solid #F2DB95;
  color: var(--bg-white);
  border-radius: 30px;
  padding: 12px 45px;
  font-size: var(--fs-btn);
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 6px 15px rgba(217, 165, 76, 0.35);
  position: absolute;
  left: 50%;
  bottom: 12.5%;
  transform: translateX(-50%);
  z-index: 5;
  cursor: pointer;
}

.btn-start:hover {
  /* background-image: linear-gradient(to right, var(--btn-hover-start), var(--btn-hover-end)); */
  transform: translateX(-50%) scale(1.08);
}

.character-img {
  position: absolute;
  bottom: 0;
  right: 5%;
  height: 75vh;
  max-height: 700px;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
}

/* ========================================= */
/* KAD GRID & LAIN-LAIN (SEKSYEN 2-5)        */
/* ========================================= */
.cards-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 25px;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 10px auto 40px auto;
  width: 100%;
}

.topic-card {
  background: #ffffff;
  border: 1.5px solid var(--card-border-rose);
  border-radius: 22px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: var(--text-dark);
  box-shadow: 0 4px 16px rgba(12, 28, 46, 0.05);
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 200px;
  text-align: left;
}

.topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-gold);
  box-shadow: 0 12px 28px rgba(217, 165, 76, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
  color: var(--text-dark);
}

.topic-card:hover::before {
  opacity: 1;
}

.topic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.topic-badge {
  background-color: var(--primary-dark);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(12, 28, 46, 0.2);
}

.topic-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e3efef, #c8e3e2);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1.5px solid rgba(38, 115, 112, 0.25);
  transition: transform 0.3s ease;
}

.topic-card:hover .topic-icon-wrap {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, #fef3e2, #f9dfb6);
  color: var(--accent-gold-hover);
  border-color: var(--accent-gold);
}

.topic-card-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 8px;
  line-height: 1.35;
}

.topic-sub-tag {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
}

.topic-card-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.topic-action-label {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.topic-card:hover .topic-action-label {
  color: var(--accent-gold-hover);
}

.topic-action-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(38, 115, 112, 0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.topic-card:hover .topic-action-circle {
  background: var(--accent-gold);
  color: #ffffff;
  transform: translateX(4px);
}

.video-title {
  text-align: center;
  font-size: var(--fs-video-title);
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 30px;
}

.video-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 30px auto;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--primary-dark);
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 3px solid var(--frame-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.play-placeholder {
  position: absolute;
  font-size: 6rem;
  color: var(--accent-gold);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* ========================================= */
/* BUIH DIALOG & ANIMASI                     */
/* ========================================= */
.dialog-section {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0 !important;
  padding-top: 0 !important;
  pointer-events: auto;
}

.avatar-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--accent-gold);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: var(--bg-white);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 105;
  box-shadow: 0 4px 12px rgba(217, 165, 76, 0.3);
}

.avatar-circle img {
  height: 100%;
  object-fit: cover;
}

.avatar-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(217, 165, 76, 0.4);
}

.speech-bubble {
  background-color: var(--bg-white);
  padding: 15px 25px;
  border-radius: 18px;
  font-size: var(--fs-dialog);
  color: var(--text-dark);
  max-width: 600px;
  height: 90px;
  overflow-y: auto;
  font-weight: 500;
  line-height: 1.5;
  border: 2.5px solid var(--primary-dark);
  opacity: 0;
  transform: scale(0.8) translateX(-20px);
  transform-origin: left center;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

body.jawi-mode .speech-bubble {
  transform-origin: right center;
  transform: scale(0.8) translateX(20px);
}

.speech-bubble.show-bubble {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}

.speech-bubble::-webkit-scrollbar {
  width: 6px;
}

.speech-bubble::-webkit-scrollbar-track {
  background: transparent;
  margin: 10px 0;
}

.speech-bubble::-webkit-scrollbar-thumb {
  background-color: var(--primary-dark);
  border-radius: 10px;
}

/* ========================================= */
/* HAB KITARAN PEMBELAJARAN                  */
/* ========================================= */
.kitaran-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 10px auto 40px auto;
  max-width: 860px;
  width: 100%;
}

.kitaran-card {
  background: #ffffff;
  border: 1.5px solid var(--card-border-rose);
  border-radius: 22px;
  padding: 24px 22px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 4px 16px rgba(12, 28, 46, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.kitaran-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kitaran-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-gold);
  box-shadow: 0 12px 28px rgba(217, 165, 76, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}

.kitaran-card:hover::before {
  opacity: 1;
}

.kitaran-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.kitaran-badge {
  background-color: var(--primary-dark);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(12, 28, 46, 0.2);
}

.kitaran-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.kitaran-card:hover .kitaran-icon-wrap {
  transform: scale(1.12) rotate(4deg);
}

.kitaran-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.kitaran-card:hover .kitaran-title {
  color: var(--primary-color);
}

.kitaran-desc {
  font-size: 0.86rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.kitaran-card-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--primary-color);
  font-weight: 750;
  font-size: 0.84rem;
  transition: all 0.2s ease;
}

.kitaran-card:hover .kitaran-card-footer {
  color: var(--accent-gold-hover);
}

body.jawi-mode .kitaran-card-footer {
  font-size: 1.15rem;
}

body.jawi-mode .kitaran-card-footer i {
  transform: scaleX(-1);
}

/* ========================================= */
/* MODUL SUBTOPIK                            */
/* ========================================= */
.subtopic-tab-btn {
  background-color: var(--bg-white);
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  border-radius: 30px !important;
  padding: 8px 24px !important;
  font-size: var(--fs-tab-btn) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(38, 115, 112, 0.1);
}

.subtopic-tab-btn.active,
.subtopic-tab-btn:hover {
  background-color: var(--primary-color) !important;
  color: var(--bg-white) !important;
}

.subtopic-content-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  font-size: var(--fs-content);
  /* border: 2.5px solid var(--primary-dark) !important; */
  background-color: var(--bg-white);
  /* border-radius: 18px !important; */
}

/* Ensure child cards fill the stretched container */
.subtopic-content-box>div,
.subtopic-content-box>.quran-player-card,
.subtopic-content-box>#quranContainer,
.nota-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quran-player-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#quranContainer {
  flex-grow: 1;
  overflow-y: auto;
}

/* Hide default scrollbars for container-level scrolling to keep design clean and app-like */
.frame-scroll-body,
.subtopic-content-box,
.side-menu-body,
#quranContainer,
#quranContainer div {
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE/Edge */
}

.frame-scroll-body::-webkit-scrollbar,
.subtopic-content-box::-webkit-scrollbar,
.side-menu-body::-webkit-scrollbar,
#quranContainer::-webkit-scrollbar,
#quranContainer div::-webkit-scrollbar {
  display: none !important;
  /* Chrome, Safari, Opera */
}

.option-btn {
  border-radius: 12px;
  font-size: var(--fs-option-btn);
  font-weight: 500;
  transition: all 0.2s;
  border: 2px solid var(--primary-dark);
}

.option-btn:hover {
  background-color: var(--primary-color);
  color: var(--bg-white);
  border-color: var(--primary-color);
}

/* ========================================= */
/* MODUL PEMAIN AL-QURAN & BACAAN           */
/* ========================================= */
.quran-tab-wrapper {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 40px 30px 20px;
}

@media (max-width: 768px) {
  .quran-tab-wrapper {
    padding: 10px 12px 20px 12px;
  }
}

.quran-header-nav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 25px;
  gap: 15px;
}

.quran-title-pill {
  background-color: var(--primary-dark);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 25px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(12, 28, 46, 0.2);
  line-height: 1.35;
  white-space: normal;
  max-width: min(72%, 920px);
}

.quran-title-pill-text {
  text-align: center;
}

.quran-opening-block {
  text-align: center;
  margin: 0 auto 28px auto;
  padding: 14px 20px 16px;
  /* max-width: 720px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fafc, #eef4f3);
  border: 1px solid rgba(38, 115, 112, 0.18); */
}

.quran-opening-line {
  font-family: "KFGQPC-Uthmani", "Amiri", serif;
  font-size: 1.85rem;
  color: var(--primary-dark);
  direction: rtl;
  line-height: 1.8;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}

.quran-opening-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.04em;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.quran-opening-label:last-child {
  margin-bottom: 0;
}

.btn-tip-gold {
  background-color: var(--accent-gold);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(217, 165, 76, 0.35);
}

.btn-tip-gold:hover {
  background-color: var(--accent-gold-hover);
  transform: scale(1.05);
}

.nav-btn-gold {
  background-color: var(--accent-gold);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(217, 165, 76, 0.35);
}

.nav-btn-gold:hover {
  background-color: var(--accent-gold-hover);
  transform: scale(1.05);
}

.quran-surah-title {
  color: var(--primary-color);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 12px;
  font-family: "Nunito", sans-serif;
}

body.jawi-mode .quran-surah-title {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
}

.ayat-row-new {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
}

.ayat-row-new.playing-ayat {
  background-color: rgba(217, 165, 76, 0.12) !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 4px 18px rgba(217, 165, 76, 0.22);
}

.ayat-row-new.playing-ayat .arabic-text-teal {
  color: var(--primary-dark) !important;
  text-shadow: 0 0 1px rgba(12, 28, 46, 0.2);
}

.ayat-row-new.playing-ayat .translation-pill-card {
  border-color: var(--accent-gold) !important;
  background-color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(217, 165, 76, 0.18);
}

.ayat-row-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.verse-num-badge {
  width: 36px;
  height: 36px;
  background-color: var(--primary-dark);
  color: #ffffff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 6px;
}

.arabic-text-teal {
  font-family: 'KFGQPC-Uthmani', 'Traditional Arabic', serif;
  font-size: 2.4rem;
  color: var(--primary-color);
  direction: rtl;
  text-align: right;
  line-height: 2.1;
  flex-grow: 1;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}

.translation-pill-card {
  background-color: var(--bg-white);
  border: 1.5px solid var(--card-border-rose);
  border-radius: 18px;
  padding: 14px 24px;
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
  position: relative;
}

.translation-pill-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(38, 115, 112, 0.1);
}

.translation-pill-card.playing-translation,
.ghafir-translation-box.playing-translation {
  background-color: #fff9ed !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 4px 18px rgba(217, 165, 76, 0.28) !important;
  transform: scale(1.01);
}

.translation-pill-card.playing-translation strong {
  color: #a57849 !important;
}

.btn-trans-audio {
  background: rgba(38, 115, 112, 0.08);
  color: var(--primary-color);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.btn-trans-audio:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: scale(1.1);
}

.translation-pill-card.playing-translation .btn-trans-audio,
.ghafir-translation-box.playing-translation .btn-trans-audio {
  background-color: var(--accent-gold);
  color: #ffffff;
  animation: pulse-gold 1.2s infinite;
}

@keyframes pulse-gold {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(217, 165, 76, 0.5);
  }

  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(217, 165, 76, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(217, 165, 76, 0);
  }
}

/* ========================================= */
/* ISI KANDUNGAN & IBRAH STYLES (MATCH DESIGN)*/
/* ========================================= */
.isi-kandungan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  width: 100%;
  padding-bottom: 24px;
}

.isi-kandungan-card {
  background: #ffffff;
  border: 2px solid #144955;
  border-radius: 26px;
  position: relative;
  padding: 22px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 310px;
  box-shadow: 0 4px 16px rgba(20, 73, 85, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.isi-kandungan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(20, 73, 85, 0.12);
}

.isi-kandungan-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 10px;
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}

.isi-kandungan-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
  padding: 10px 0;
}

.isi-kandungan-img-wrap img {
  max-height: 185px;
  max-width: 85%;
  width: auto;
  object-fit: contain;
  /* filter: drop-shadow(0 2px 6px rgba(0,0,0,0.04)); */
}

.isi-kandungan-title {
  width: 100%;
  text-align: center;
  color: #0f2c3d;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  line-height: 1.35;
  margin: 10px 0 0 0;
}

/* IBRAH 4-COLUMN PORTRAIT GRID */
.ibrah-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  padding-bottom: 24px;
}

.ibrah-grid.layout-5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
  padding-bottom: 24px;
}

.ibrah-grid.layout-5 .ibrah-card:nth-child(1),
.ibrah-grid.layout-5 .ibrah-card:nth-child(2),
.ibrah-grid.layout-5 .ibrah-card:nth-child(3) {
  grid-column: span 2;
}

.ibrah-grid.layout-5 .ibrah-card:nth-child(4),
.ibrah-grid.layout-5 .ibrah-card:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 900px) {
  .ibrah-grid.layout-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ibrah-grid.layout-5 .ibrah-card:nth-child(1),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(2),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(3),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(4),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(5) {
    grid-column: span 1;
  }

  .ibrah-grid.layout-5 .ibrah-card:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .ibrah-grid.layout-5 {
    grid-template-columns: 1fr;
  }

  .ibrah-grid.layout-5 .ibrah-card:nth-child(1),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(2),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(3),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(4),
  .ibrah-grid.layout-5 .ibrah-card:nth-child(5) {
    grid-column: span 1;
  }
}

.ibrah-card {
  background: #ffffff;
  border: 2px solid #df6d53;
  border-radius: 28px;
  padding: 24px 22px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 270px;
  box-shadow: 0 4px 14px rgba(223, 109, 83, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ibrah-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(223, 109, 83, 0.15);
}

.ibrah-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 115px;
}

.ibrah-card-img {
  max-height: 120px;
  max-width: 145px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-top: -4px;
}

.ibrah-badge {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 14px;
  width: 58px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ibrah-badge .badge-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

.ibrah-badge .badge-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  margin-top: 3px;
}

.ibrah-title {
  color: #0f2c3d;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  font-family: 'Nunito', sans-serif;
  margin: 0;
  text-align: left;
}

body.jawi-mode .isi-kandungan-badge {
  left: auto;
  right: 18px;
}


body.jawi-mode .ibrah-card-top {
  flex-direction: row-reverse;
}

body.jawi-mode .ibrah-title {
  text-align: right;
  direction: rtl;
}

.isi-kandungan-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* BACAAN GHAFIR STYLES */
.ghafir-arabic-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.arabic-pill-bar {
  background-color: #f7e4ba;
  color: #5a3d1c;
  border-radius: 14px;
  padding: 12px 28px;
  font-family: 'KFGQPC-Uthmani', 'Traditional Arabic', serif;
  font-size: 2.1rem;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  text-align: right;
  direction: rtl;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ghafir-translation-box {
  background: #ffffff;
  border: 1.8px solid #df6d53;
  border-radius: 24px;
  padding: 22px 30px;
  color: #0f2c3d;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.65;
  text-align: center;
  box-shadow: 0 4px 14px rgba(223, 109, 83, 0.06);
}

/* INTERACTIVE TABS COMPONENT */
.interactive-tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 20px;
}

.interactive-tabs-row {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  padding: 6px 4px 10px 4px;
}

.interactive-tab-card {
  background: #ffffff;
  border: 1.8px solid #df6d53;
  border-radius: 22px;
  padding: 16px 18px;
  min-width: 180px;
  flex: 1;
  height: 135px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}

.interactive-tab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(223, 109, 83, 0.12);
}

.interactive-tab-card.active {
  background: #d9a54c;
  border-color: #d9a54c;
  box-shadow: 0 6px 18px rgba(217, 165, 76, 0.35);
  transform: scale(1.02);
}

.interactive-tab-badge {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 10px;
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
}

.interactive-tab-card.active .interactive-tab-badge {
  background: #ffffff;
  color: #0f2c3d;
}

.interactive-tab-title {
  color: #0f2c3d;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: 'Nunito', sans-serif;
  line-height: 1.3;
  margin: 0;
  transition: color 0.2s ease;
}

.interactive-tab-card.active .interactive-tab-title {
  color: #ffffff;
  font-weight: 800;
}

.interactive-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px 0 18px 0;
}

.interactive-dot {
  width: 22px;
  height: 5px;
  border-radius: 4px;
  background: #cbd5e1;
  transition: all 0.25s ease;
  cursor: pointer;
}

.interactive-dot.active {
  width: 32px;
  background: #0f2c3d;
}

.interactive-detail-box {
  background: #ffffff;
  border: 1.8px solid #df6d53;
  border-radius: 26px;
  padding: 24px 28px;
  display: flex;
  gap: 28px;
  align-items: center;
  min-height: 180px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.interactive-detail-img-wrap {
  width: 200px;
  height: 160px;
  border-radius: 18px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.interactive-detail-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.interactive-placeholder-checker {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}

.interactive-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.interactive-detail-pill {
  background: #a57849;
  color: #ffffff;
  border-radius: 14px;
  padding: 6px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: 'Nunito', sans-serif;
  display: inline-block;
  margin-bottom: 12px;
}

.interactive-detail-bullet {
  color: #0f2c3d;
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.interactive-detail-bullet::before {
  content: '•';
  color: #0f2c3d;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1px;
}


body.jawi-mode .interactive-detail-bullet {
  direction: rtl;
  text-align: right;
}

@media (max-width: 992px) {
  .ibrah-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .isi-kandungan-grid,
  .isi-kandungan-grid.cols-3 {
    grid-template-columns: 1fr;
  }

  .interactive-detail-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .interactive-detail-img-wrap {
    width: 100%;
    height: 160px;
  }
}

/* ========================================= */
/* TRANSISI OVERLAY VIDEO                    */
/* ========================================= */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  pointer-events: auto;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.transition-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ========================================= */
/* MENU CAROUSEL 3D COVERFLOW (DEEP PERSPECTIVE) */
/* ========================================= */
.menu-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: pan-y;
}

.menu-carousel-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.menu-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.subject-card.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid var(--card-border-rose);
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(12, 28, 46, 0.12);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    filter 0.4s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  padding: 26px 22px 22px 22px;
  text-decoration: none;
  color: var(--text-dark);
  will-change: transform, opacity;
  box-sizing: border-box;
  overflow: hidden;
}

.subject-card.carousel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-color));
}

.carousel-card-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  background-color: var(--primary-dark);
  color: var(--accent-gold);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(12, 28, 46, 0.2);
}

.subject-card.carousel-card .card-image-box {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e3efef, #c8e3e2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 12px auto;
  box-shadow: 0 4px 14px rgba(38, 115, 112, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.7);
  border: 2.5px solid var(--primary-color);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.subject-card.carousel-card .card-icon {
  font-size: 2.4rem;
  color: var(--primary-color);
  transition: transform 0.3s ease;
}

.subject-card.carousel-card .card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.25;
  margin-bottom: 8px;
}

.subject-card.carousel-card .card-desc {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 0 6px;
}

.carousel-card-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 24px;
  font-size: 0.86rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(38, 115, 112, 0.3);
  margin-top: auto;
  transition: all 0.25s ease;
}

/* State Kad Aktif (Di Tengah) */
.subject-card.carousel-card.is-active {
  z-index: 20;
  opacity: 1;
  border-color: var(--accent-gold);
  box-shadow: 0 16px 40px rgba(217, 165, 76, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
}

.subject-card.carousel-card.is-active .card-image-box {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, #fef3e2, #f9dfb6);
  transform: scale(1.06);
}

.subject-card.carousel-card.is-active .card-icon {
  color: var(--accent-gold-hover);
}

.subject-card.carousel-card.is-active .carousel-card-btn {
  background: linear-gradient(135deg, var(--accent-gold), #c48b36);
  box-shadow: 0 4px 14px rgba(217, 165, 76, 0.45);
}

.subject-card.carousel-card.is-active:hover {
  transform: translate(-50%, -50%) scale(1.08) translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(217, 165, 76, 0.45);
}

/* Navigasi Butang Anak Panah */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: var(--accent-gold);
  border: 2px solid var(--accent-gold);
  box-shadow: 0 6px 18px rgba(12, 28, 46, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-nav-btn:hover {
  background: var(--accent-gold);
  color: var(--primary-dark);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 22px rgba(217, 165, 76, 0.5);
}

display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
transition: all 0.25s ease;
}

.carousel-nav-btn:hover {
  background: var(--accent-gold);
  color: var(--primary-dark);
  transform: translateY(-50%) scale(1.08);
  border-color: var(--accent-gold);
}

.carousel-nav-btn.prev-btn {
  left: 10px;
}

.carousel-nav-btn.next-btn {
  right: 10px;
}

/* Pagination Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--gray-dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  width: 32px;
  border-radius: 12px;
  background-color: var(--accent-gold);
  box-shadow: 0 2px 10px rgba(217, 165, 76, 0.55);
}

/* ========================================= */
/* RESPONSIVITI (MEDIA QUERIES)              */
/* ========================================= */
@media (max-width: 992px) {

  .subject-card,
  .topic-card {
    width: 220px;
    height: 160px;
  }

  .main-app-container.sidebar-open {
    padding-left: 0;
  }

  .side-menu {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .menu-carousel-stage {
    height: 300px;
  }

  .subject-card.carousel-card {
    width: 190px;
    height: 260px;
    padding: 12px;
  }

  .subject-card.carousel-card .card-image-box {
    height: 100px;
    margin-bottom: 8px;
  }

  .subject-card.carousel-card .card-icon {
    font-size: 2.4rem;
  }

  .subject-card.carousel-card .card-title {
    font-size: 1.05rem;
  }

  .subject-card.carousel-card .card-desc {
    display: none;
  }

  .carousel-nav-btn {
    width: 40px;
    height: 44px;
    font-size: 1.1rem;
  }
}

/* --- SIDEBAR ENHANCEMENTS & ACCORDION SYSTEM --- */
.side-menu-body {
  padding: 15px 10px;
  /* Smooth scrolling */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

.side-menu-body::-webkit-scrollbar {
  width: 5px;
}

.side-menu-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px;
}

.menu-group {
  margin-bottom: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 6px;
  border: 1px dashed rgba(38, 115, 112, 0.15);
  transition: all 0.3s ease;
}

.menu-group:hover {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(38, 115, 112, 0.3);
}

.menu-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.menu-title:hover {
  background-color: rgba(38, 115, 112, 0.08);
}

.menu-title.active-title {
  color: var(--primary-color);
  background-color: rgba(38, 115, 112, 0.06);
}

.menu-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-title-chevron {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: #64748b;
}

.menu-group.expanded .menu-title-chevron {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.menu-subgroup {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
  padding-left: 8px;
  padding-right: 4px;
}

.menu-group.expanded .menu-subgroup {
  max-height: 9000px;
  /* high enough to show all items */
  transition: max-height 0.45s ease-in;
}

.menu-sub-item {
  font-size: 0.88rem;
  color: #475569;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.menu-sub-item:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  padding-left: 15px;
  /* micro animation */
}

.menu-sub-item.active-sub-item {
  background-color: var(--badge-bg);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Dropdown Container inside Sidebar */
.menu-dropdown-container {
  display: flex;
  flex-direction: column;
}

.menu-dropdown-container .dropdown-chevron {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  color: #94a3b8;
}

.menu-dropdown-container.open .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.menu-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  border-left: 2px solid rgba(38, 115, 112, 0.15);
  margin-left: 22px;
  margin-top: 2px;
  margin-bottom: 4px;
}

.menu-dropdown-container.open .menu-dropdown-content {
  max-height: 9000px;
  /* large enough to show all sub-bidang & subtopics */
}

/* Subtopic & Sub-bidang links */
.sub-bidang-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  margin-bottom: 4px;
  padding-left: 4px;
}

.subtopic-link {
  font-size: 0.8rem;
  color: #64748b;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: block;
}

.subtopic-link:hover {
  color: var(--primary-dark);
  background-color: rgba(38, 115, 112, 0.08);
  padding-left: 12px;
}

.subtopic-link.active-subtopic {
  color: var(--primary-dark);
  font-weight: 600;
  background-color: rgba(38, 115, 112, 0.12);
}

/* --- REMOVE ALL PADDING & MARGINS TO FILL CONTAINER --- */
#subtopicsSection {
  padding-bottom: 24px !important;
  /* Maximize screen space without footer */
}

/* Main Pembelajaran Container: Thick Navy Border & Rounded Corners (Match Design) */
#subtopicsSection .content-frame {
  margin: 12px 0 14px 0 !important;
  border: 16px solid #0e2340 !important;
  border-radius: 36px !important;
  background: #f2f5f7 !important;
  box-shadow: 0 16px 40px rgba(14, 35, 64, 0.35) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#subtopicsSection .frame-scroll-body {
  padding: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#subtopicsSection .subtopic-content-box,
#subtopicsSection .hadis-subtopic-wrapper {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure quran player card fills the container */
#subtopicsSection .quran-player-card {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  box-shadow: none !important;
}

#subtopicsSection #quranContainer {
  padding: 30px !important;
}

/* Ensure quiz container fills the container */
#subtopicsSection #quiz-container {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 30px !important;
  box-shadow: none !important;
}

/* Ensure nota container fills the container */
#subtopicsSection .nota-container {
  margin: 0 !important;
  padding: 30px !important;
  height: 100% !important;
}

.sirah-v2-content .nota-container {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 10px 15px !important;
  box-sizing: border-box !important;
}

.sirah-v2-content .nota-container .row.g-4 {
  flex: 1 0 auto !important;
}

.sirah-v2-content .nota-bottom-nav {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}

/* Ensure under construction placeholder fills the container */
#subtopicsSection .subtopic-content-box>.text-center.text-muted {
  margin: 0 !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-white);
  border-radius: 0 !important;
}

/* ========================================= */
/* PENILAIAN (QUIZ) STYLING PACK             */
/* ========================================= */
/* PENILAIAN (QUIZ) GAMIFIED ARCADE STYLING  */
/* ========================================= */
#subtopicsSection #quiz-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  background: #f8fafc !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  box-shadow: 0 8px 30px rgba(12, 28, 46, 0.06) !important;
}

/* Gamified HUD Top Bar */
.quiz-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.quiz-hud-timer-badge {
  background: var(--primary-dark) !important;
  border: 2px solid var(--accent-gold) !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 12px rgba(12, 28, 46, 0.18) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.quiz-hud-timer-badge i {
  color: var(--accent-gold);
}

.quiz-hud-timer-badge.timer-urgent {
  background: #e11d48 !important;
  border-color: #fecdd3 !important;
  color: #ffffff !important;
  animation: timerPulseDanger 0.8s infinite alternate ease-in-out;
}

.quiz-hud-timer-badge.timer-urgent i {
  color: #ffffff;
}

@keyframes timerPulseDanger {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(225, 29, 72, 0.4);
  }

  100% {
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(225, 29, 72, 0.8);
  }
}

.quiz-hud-progress-wrapper {
  flex-grow: 1;
  max-width: 500px;
}

.quiz-hud-progress-track {
  height: 14px !important;
  border-radius: 20px !important;
  background: #e2e8f0 !important;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

#quiz-container .progress-bar {
  background: linear-gradient(90deg, #D9A54C 0%, #267370 60%, #10b981 100%) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quiz-hud-score-badge {
  background: var(--primary-dark) !important;
  border: 2px solid var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 12px rgba(12, 28, 46, 0.18) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.quiz-hud-score-badge span {
  color: #ffffff;
  font-weight: 900;
}

/* Royal Islamic Question Arena Box */
#quiz-container .question-box {
  background: linear-gradient(135deg, #0C1C2E 0%, #15384B 60%, #174644 100%) !important;
  border: 2.5px solid var(--accent-gold) !important;
  border-radius: 22px !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(12, 28, 46, 0.2), 0 0 16px rgba(217, 165, 76, 0.15) !important;
  padding: 34px 28px 24px 28px !important;
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#question-counter {
  background: linear-gradient(135deg, #D9A54C 0%, #C5933A 100%) !important;
  border: 2px solid #ffffff !important;
  color: #0C1C2E !important;
  font-weight: 900 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  border-radius: 30px !important;
  padding: 6px 20px !important;
  top: 0 !important;
  transform: translate(-50%, -50%) !important;
}

#question-text {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  margin: 10px 0 !important;
  max-width: 92%;
}

body.jawi-mode #question-text {
  font-size: 1.45rem !important;
  direction: rtl;
  text-align: center;
  font-family: "Sakkal-Majalla", "Amiri-Jawi", "Amiri", serif;
  line-height: 1.8 !important;
}

.rumi-target {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  letter-spacing: 0.5px;
  font-weight: 800;
  color: #FFE082 !important;
}

.jawi-text {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", "Amiri", serif;
  direction: rtl;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1.6;
}

.quiz-skip-pill {
  position: absolute;
  bottom: 12px;
  right: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(217, 165, 76, 0.6);
  color: var(--accent-gold);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.quiz-skip-pill:hover {
  background: var(--accent-gold);
  color: #0C1C2E;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(217, 165, 76, 0.35);
}

/* 3D Tactile Arcade Power-Ups */
.quiz-powerups-vault {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 16px 0 24px 0;
}

.quiz-powerup-item {
  text-align: center;
}

.quiz-powerup-btn {
  width: 56px;
  height: 56px;
  border-radius: 18px !important;
  border: none !important;
  font-size: 1.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  outline: none !important;
}

.quiz-powerup-label {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.3px;
}

/* ❄️ Beku Masa - Ice Cyan */
#btn-freeze {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #0369a1, 0 8px 14px rgba(2, 132, 199, 0.25) !important;
}

#btn-freeze:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #0369a1, 0 10px 18px rgba(2, 132, 199, 0.35) !important;
}

#btn-freeze:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #0369a1 !important;
}

/* ⚡ Ganda Skor - Electric Gold */
#btn-x2 {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 0 #b45309, 0 8px 14px rgba(217, 119, 6, 0.25) !important;
}

#btn-x2:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #b45309, 0 10px 18px rgba(217, 119, 6, 0.35) !important;
}

#btn-x2:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #b45309 !important;
}

/* 🎯 50/50 - Neon Emerald */
#btn-fifty {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #047857, 0 8px 14px rgba(5, 150, 105, 0.25) !important;
}

#btn-fifty:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #047857, 0 10px 18px rgba(5, 150, 105, 0.35) !important;
}

#btn-fifty:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #047857 !important;
}

#quiz-container button:disabled {
  opacity: 0.4 !important;
  filter: grayscale(0.85);
  box-shadow: 0 2px 0 #cbd5e1 !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Gamified Option Cards (Kahoot / Quizizz / Duolingo Style) */
#quiz-container #options-container {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#quiz-container #options-container>div {
  display: flex;
  flex-direction: column;
}

#quiz-container .option-btn {
  flex-grow: 1;
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: 2.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 0 #cbd5e1 !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  min-height: 80px;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: start !important;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.2s ease !important;
  cursor: pointer;
  position: relative;
}

body.jawi-mode #quiz-container .option-btn {
  direction: rtl;
  text-align: right !important;
  font-size: 1.25rem !important;
  font-family: "Sakkal-Majalla", "Amiri-Jawi", "Amiri", serif;
}

body.jawi-mode #quiz-container .quiz-option-text {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", "Amiri", serif;
  font-size: 1.35rem;
  line-height: 1.6;
}

#quiz-container .option-btn:hover:not(:disabled) {
  border-color: #94a3b8 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 0 #94a3b8 !important;
}

#quiz-container .option-btn:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #cbd5e1 !important;
}

/* Option Letter Badges (A, B, C, D) */
.quiz-option-token {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.token-A {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}

.token-B {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.token-C {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.token-D {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.quiz-option-text {
  flex-grow: 1;
  line-height: 1.5;
}

/* Clicked feedback colors */
#quiz-container .option-btn.btn-success,
#quiz-container .option-btn.option-correct {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #047857, 0 10px 20px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-2px) scale(1.01) !important;
  animation: popCorrectAnswer 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#quiz-container .option-btn.btn-success .quiz-option-token,
#quiz-container .option-btn.option-correct .quiz-option-token {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#quiz-container .option-btn.btn-danger,
#quiz-container .option-btn.option-wrong {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #be123c, 0 10px 20px rgba(244, 63, 94, 0.35) !important;
  animation: shakeWrongAnswer 0.4s ease-in-out;
}

#quiz-container .option-btn.btn-danger .quiz-option-token,
#quiz-container .option-btn.option-wrong .quiz-option-token {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

@keyframes popCorrectAnswer {
  0% {
    transform: scale(0.97);
  }

  60% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1.01) translateY(-2px);
  }
}

@keyframes shakeWrongAnswer {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-7px);
  }

  40%,
  80% {
    transform: translateX(7px);
  }
}

/* Victory Score Panel Modal */
#score-panel {
  background: linear-gradient(135deg, #0C1C2E 0%, #15384B 60%, #174644 100%) !important;
  border: 3px solid var(--accent-gold) !important;
  box-shadow: 0 20px 50px rgba(12, 28, 46, 0.5), 0 0 25px rgba(217, 165, 76, 0.25) !important;
  border-radius: 26px !important;
}

/* ========================================= */
/* ELEMEN TAMBAHAN PEMAIN AL-QURAN & MODAL   */
/* ========================================= */
.verse-play-btn {
  background-color: #E2E8F0;
  color: var(--primary-dark);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 6px;
}

.verse-play-btn:hover {
  background-color: var(--badge-bg);
  transform: scale(1.05);
}

.verse-play-btn.playing {
  background-color: var(--accent-gold);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(217, 165, 76, 0.4);
}

.quran-word {
  display: inline-block;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 5px;
  transition: color 0.1s ease, background-color 0.1s ease;
}

.quran-word:hover {
  background-color: #E3EFEF;
}

.quran-word.active-word {
  color: var(--primary-dark) !important;
  background-color: var(--accent-gold) !important;
  font-weight: bold;
}

/* Custom premium tip modal */
.custom-tip-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.custom-tip-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.custom-tip-modal-content {
  background-color: #ffffff;
  border: 3px solid var(--primary-dark);
  border-radius: 20px;
  width: 90%;
  max-width: 450px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(12, 28, 46, 0.25);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.custom-tip-modal.show .custom-tip-modal-content {
  transform: translateY(0);
}

.custom-tip-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed #E2E8F0;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.custom-tip-modal-title {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-tip-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #a0aec0;
  cursor: pointer;
  transition: color 0.2s;
}

.custom-tip-modal-close:hover {
  color: var(--primary-dark);
}

.custom-tip-modal-body {
  color: var(--text-dark);
  line-height: 1.6;
  font-size: 1.05rem;
}

/* ========================================= */
/* MODUL RUMUSAN & GLOSARI (STANDARDIZED THEME) */
/* ========================================= */
.subtopic-content-box>.rumusan-wrapper,
.rumusan-wrapper {
  display: block !important;
  height: auto !important;
  min-height: 100%;
  flex-grow: 0 !important;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 24px 28px 10px 28px !important;
  box-sizing: border-box;
}

/* Banner Header */
.rumusan-hero-banner {
  flex-shrink: 0 !important;
  display: block !important;
  background: linear-gradient(135deg, var(--primary-dark) 0%, #15384B 60%, var(--primary-color) 100%);
  border-radius: 20px;
  padding: 26px 28px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(12, 28, 46, 0.12);
  margin-bottom: 24px;
  border: 1.5px solid rgba(217, 165, 76, 0.3);
}

.rumusan-hero-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(217, 165, 76, 0.2) 0%, rgba(217, 165, 76, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.rumusan-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.rumusan-hero-title-group {
  flex: 1;
  min-width: 260px;
}

.rumusan-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(217, 165, 76, 0.25);
  color: #f7e4a8;
  border: 1px solid rgba(217, 165, 76, 0.45);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.rumusan-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.rumusan-hero-desc {
  font-size: 0.95rem;
  color: #d1e2ec;
  margin: 0;
  line-height: 1.45;
}

.rumusan-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.rumusan-action-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.rumusan-action-btn:hover {
  background: var(--accent-gold);
  color: var(--primary-dark);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(217, 165, 76, 0.35);
}

/* Category Filter Tabs */
.rumusan-filter-nav {
  flex-shrink: 0 !important;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 4px 14px 4px;
  margin-bottom: 24px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.rumusan-filter-tab {
  background: #f8fafc;
  color: var(--text-dark);
  border: 1.5px solid #e2e8f0;
  padding: 12px 22px;
  border-radius: 16px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.rumusan-filter-tab:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(38, 115, 112, 0.12);
}

.rumusan-filter-tab.active {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 14px rgba(38, 115, 112, 0.3);
}

.rumusan-tab-count {
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 800;
}

.rumusan-filter-tab.active .rumusan-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Category Section */
.rumusan-category-block {
  flex-shrink: 0 !important;
  margin-bottom: 28px;
}

.rumusan-category-block:last-child {
  margin-bottom: 0 !important;
}

.rumusan-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid #edf2f7;
}

.rumusan-category-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rumusan-category-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(12, 28, 46, 0.15);
}

.rumusan-category-badge-text {
  font-size: 0.78rem;
  font-weight: 700;
  background: #f1f5f9;
  color: var(--primary-dark);
  padding: 4px 10px;
  border-radius: 8px;
}

/* Term Cards Grid */
.rumusan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.rumusan-term-card {
  background: #fdfefe;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 3px 12px rgba(12, 28, 46, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rumusan-term-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rumusan-term-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 22px rgba(38, 115, 112, 0.1);
  background: #ffffff;
}

.rumusan-term-card:hover::before {
  opacity: 1;
}

.rumusan-term-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.rumusan-term-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.35;
}

.rumusan-term-jawi-pill {
  background: #fef8e7;
  color: #b58500;
  border: 1px solid rgba(217, 165, 76, 0.3);
  font-size: 0.85rem;
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.rumusan-term-maksud {
  font-size: 0.94rem;
  color: var(--text-dark);
  line-height: 1.6;
}

/* Timeline Flow for Fasa Kejadian Manusia */
.rumusan-timeline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.rumusan-timeline-card {
  background: #fdfefe;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 3px 10px rgba(12, 28, 46, 0.03);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  transition: all 0.25s ease;
}

.rumusan-timeline-card:hover {
  border-color: var(--primary-color);
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(38, 115, 112, 0.1);
  background: #ffffff;
}

.rumusan-timeline-step-badge {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(12, 28, 46, 0.2);
}

.rumusan-timeline-content {
  flex: 1;
}

.rumusan-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.rumusan-timeline-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0;
}

/* Toast Feedback */
.rumusan-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--primary-dark);
  color: #ffffff;
  border: 1px solid var(--accent-gold);
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.rumusan-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Jawi Mode Adjustments */
body.jawi-mode .rumusan-hero-banner {
  text-align: right;
  direction: rtl;
}

body.jawi-mode .rumusan-filter-nav {
  direction: rtl;
}

body.jawi-mode .rumusan-term-card,
body.jawi-mode .rumusan-timeline-card {
  text-align: right;
  direction: rtl;
}

body.jawi-mode .rumusan-term-card::before {
  left: auto;
  right: 0;
}

body.jawi-mode .rumusan-timeline-card:hover {
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .rumusan-hero-banner {
    padding: 18px;
  }

  .rumusan-hero-title {
    font-size: 1.3rem;
  }

  .rumusan-card-grid {
    grid-template-columns: 1fr;
  }

  .rumusan-timeline-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.rumusan-bottom-spacer {
  height: 30px !important;
  min-height: 30px !important;
  width: 100% !important;
  display: block !important;
  clear: both;
}

/* ========================================= */
/* HUKUM TAJWID COMPONENTS                   */
/* ========================================= */
.tajwid-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-bottom: 20px;
}

.tajwid-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tajwid-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.tajwid-badge {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
}

.tajwid-audio-btn {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #0f2c3d;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tajwid-audio-btn:hover {
  background: #e2e8f0;
  color: var(--primary-color);
  transform: scale(1.04);
}

.tajwid-audio-btn.playing {
  background: #df6d53;
  border-color: #df6d53;
  color: #ffffff;
  animation: pulse-badge 1.5s infinite;
}

.tajwid-pill-gold {
  background: #d9a54c;
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 1.15rem;
  font-family: 'Nunito', sans-serif;
  flex: 1;
}

.tajwid-pill-teal {
  background: #eef5f6;
  color: #0f2c3d;
  border: 1.5px solid #267370;
  border-radius: 16px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 1.15rem;
  font-family: 'Nunito', sans-serif;
  flex: 1;
}

.tajwid-card-white {
  background: #ffffff;
  border: 2px solid #df6d53;
  border-radius: 20px;
  padding: 22px 26px;
  color: #0f2c3d;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(223, 109, 83, 0.06);
}

.tajwid-card-dark {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 20px;
  padding: 22px 26px;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 400;
  box-shadow: 0 4px 14px rgba(15, 44, 61, 0.15);
}

/* TAJWID PETUNJUK & KAEDAH (PAGE 3) */
.tajwid-kaedah-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 20px;
}

.tajwid-petunjuk-bar {
  background: #d9a54c;
  color: #ffffff;
  border-radius: 14px;
  padding: 10px 24px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  font-family: 'Nunito', sans-serif;
  margin-bottom: 12px;
}

.tajwid-petunjuk-boxes {
  display: flex;
  gap: 16px;
  width: 100%;
}

.tajwid-petunjuk-box {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.tajwid-symbol-badge {
  background: #ffffff;
  color: #0f2c3d;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.tajwid-petunjuk-text {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
}

.tajwid-kaedah-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.tajwid-kaedah-card {
  background: #ffffff;
  border: 2px solid #df6d53;
  border-radius: 26px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(223, 109, 83, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tajwid-kaedah-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(223, 109, 83, 0.14);
}

.tajwid-kaedah-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tajwid-kaedah-title {
  color: #0f2c3d;
  font-weight: 800;
  font-size: 1.18rem;
  font-family: 'Nunito', sans-serif;
  margin: 0;
}

.tajwid-kaedah-desc {
  color: #334155;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

/* TAJWID LAFAZ (PAGE 4) */
.tajwid-lafaz-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 20px;
}

.tajwid-split-header {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.tajwid-split-left {
  background: #0f2c3d;
  color: #ffffff;
  padding: 12px 24px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
}

.tajwid-split-right {
  background: #267370;
  color: #ffffff;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1.05rem;
  flex: 1;
  display: flex;
  align-items: center;
}

.tajwid-arabic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tajwid-arabic-gold {
  background: #ecd58a;
  color: #5a3d0b;
  border-radius: 14px;
  padding: 8px 30px;
  font-size: 2.2rem;
  font-family: 'Amiri', 'KFGQPC-Uthmani', serif;
  direction: rtl;
  text-align: right;
  font-weight: 700;
  line-height: 1.4;
}

.tajwid-arabic-teal {
  color: #267370;
  font-size: 2.3rem;
  font-family: 'Amiri', 'KFGQPC-Uthmani', serif;
  direction: rtl;
  text-align: right;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 10px;
}

.tajwid-maksud-card-white {
  background: #ffffff;
  border: 2px solid #df6d53;
  border-radius: 18px;
  padding: 16px 24px;
  color: #0f2c3d;
  font-size: 1.05rem;
  font-weight: 700;
}

.tajwid-maksud-card-navy {
  background: #0f2c3d;
  color: #ffffff;
  border-radius: 18px;
  padding: 16px 24px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Jawi adaptations */
body.jawi-mode .tajwid-header-row {
  flex-direction: row-reverse;
}

body.jawi-mode .tajwid-pill-gold,
body.jawi-mode .tajwid-pill-teal {
  text-align: right;
  direction: rtl;
}

body.jawi-mode .tajwid-card-white,
body.jawi-mode .tajwid-card-dark {
  text-align: right;
  direction: rtl;
}

body.jawi-mode .tajwid-petunjuk-bar {
  text-align: right;
  direction: rtl;
}


body.jawi-mode .tajwid-petunjuk-box {
  flex-direction: row-reverse;
  text-align: right;
}

body.jawi-mode .tajwid-kaedah-card-header {
  flex-direction: row-reverse;
}

body.jawi-mode .tajwid-kaedah-title,
body.jawi-mode .tajwid-kaedah-desc {
  text-align: right;
  direction: rtl;
}


body.jawi-mode .tajwid-maksud-card-white,
body.jawi-mode .tajwid-maksud-card-navy {
  text-align: right;
  direction: rtl;
}

@media (max-width: 768px) {
  .tajwid-petunjuk-boxes {
    flex-direction: column;
  }

  .tajwid-kaedah-grid {
    grid-template-columns: 1fr;
  }

  .tajwid-split-header {
    flex-direction: column;
  }

  .tajwid-arabic-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tajwid-arabic-gold,
  .tajwid-arabic-teal {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
  }
}

/* ========================================= */
/* PENGUATKUASAAN FON NUNITO UNTUK SEMUA NOMBOR */
/* ========================================= */
.carousel-card-badge,
.kitaran-badge,
.topic-card-badge,
.topic-num-badge,
.isi-kandungan-badge,
.ibrah-badge,
.badge-num,
.verse-num,
.verse-number,
.nombor-ayat,
.tajwid-badge,
.tajwid-kaedah-badge,
.interactive-tab-badge,
.pagination-badge,
.page-count,
.glosari-count-badge,
.rumusan-tab-count,
.rumusan-category-badge-text,
.rumusan-timeline-step-badge,
.sidebar-sk-code,
.num-font,
.header-level-badge,
body.jawi-mode .carousel-card-badge,
body.jawi-mode .kitaran-badge,
body.jawi-mode .topic-card-badge,
body.jawi-mode .topic-num-badge,
body.jawi-mode .isi-kandungan-badge,
body.jawi-mode .ibrah-badge,
body.jawi-mode .badge-num,
body.jawi-mode .verse-num,
body.jawi-mode .verse-number,
body.jawi-mode .nombor-ayat,
body.jawi-mode .tajwid-badge,
body.jawi-mode .tajwid-kaedah-badge,
body.jawi-mode .interactive-tab-badge,
body.jawi-mode .pagination-badge,
body.jawi-mode .page-count,
body.jawi-mode .glosari-count-badge,
body.jawi-mode .rumusan-tab-count,
body.jawi-mode .rumusan-category-badge-text,
body.jawi-mode .rumusan-timeline-step-badge,
body.jawi-mode .sidebar-sk-code,
body.jawi-mode .num-font,
body.jawi-mode .header-level-badge {
  font-family: "Nunito", sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ========================================= */
/* GLOSARI DALAM PEMBELAJARAN                */
/* ========================================= */
.glosari-pembelajaran-container {
  padding: 10px 5px;
}

.glosari-pembelajaran-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(23, 70, 68, 0.08), rgba(217, 165, 76, 0.08));
  border-radius: 14px;
  border-left: 4px solid var(--primary-color, #174644);
}

body.jawi-mode .glosari-pembelajaran-header {
  border-left: none;
  border-right: 4px solid var(--primary-color, #174644);
}

.glosari-pembelajaran-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-color, #174644);
  display: flex;
  align-items: center;
  gap: 10px;
}

.glosari-pembelajaran-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #174644;
  background: #e4f0ee;
  padding: 4px 14px;
  border-radius: 20px;
}

.glosari-pembelajaran-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.glosari-pembelajaran-card {
  background: #ffffff;
  border: 1px solid #e8edea;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.glosari-pembelajaran-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(23, 70, 68, 0.1);
  border-color: #d9a54c;
}

.glosari-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}


.glosari-term-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #174644;
}

.glosari-pill-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8b6b23;
  background: #fdf5e2;
  border: 1px solid rgba(217, 165, 76, 0.35);
  border-radius: 16px;
  padding: 2px 10px;
  white-space: nowrap;
}

.glosari-card-maksud {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4a5568;
  flex: 1;
}

body.jawi-mode .glosari-card-maksud {
  text-align: right;
  direction: rtl;
}

/* ========================================= */
/* MENU SISI STANDARD KANDUNGAN (DSKP)       */
/* ========================================= */
.sidebar-sub-bidang-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: #174644;
  background: #eef5f3;
  padding: 6px 12px;
  border-radius: 8px;
  margin: 10px 4px 6px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid #174644;
}

body.jawi-mode .sidebar-sub-bidang-header {
  border-left: none;
  border-right: 3px solid #174644;
  text-align: right;
  direction: rtl;
}

.sidebar-sk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.83rem;
  color: #4a5568;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
  margin-bottom: 2px;
}

body.jawi-mode .sidebar-sk-item {
  direction: rtl;
  text-align: right;
}

.sidebar-sk-item:hover {
  background: #f0f7f5;
  color: #174644;
}

.sidebar-sk-item.active-sk {
  background: rgba(23, 70, 68, 0.12);
  color: #174644;
  font-weight: 700;
}

.sidebar-sk-code {
  font-weight: 800;
  color: #8b6b23;
  background: #fef8eb;
  border: 1px solid rgba(217, 165, 76, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.72rem;
  white-space: nowrap;
  margin-top: 1px;
}

.sidebar-sk-text {
  flex: 1;
}

/* Sidebar Subtopic Children Links */
.sidebar-subitem-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 2px solid rgba(217, 165, 76, 0.25);
  margin-left: 12px;
}

body.jawi-mode .sidebar-subitem-list {
  padding-left: 0 !important;
  padding-right: 8px !important;
  margin-left: 0 !important;
  margin-right: 12px !important;
  border-left: none !important;
  border-right: 2px solid rgba(217, 165, 76, 0.25) !important;
}

.sidebar-subitem-link {
  font-size: 0.77rem;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  line-height: 1.35;
}

body.jawi-mode .sidebar-subitem-link {
  direction: rtl;
  text-align: right;
}

.sidebar-subitem-link:hover {
  background: rgba(23, 70, 68, 0.08);
  color: #174644;
  padding-left: 11px;
}

body.jawi-mode .sidebar-subitem-link:hover {
  padding-left: 8px;
  padding-right: 11px;
}

.sidebar-subitem-link.active-subitem {
  background: rgba(217, 165, 76, 0.2);
  color: #8b6b23;
  font-weight: 700;
}

.sidebar-subitem-link .subitem-icon {
  font-size: 8px;
  color: #94a3b8;
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

body.jawi-mode .sidebar-subitem-link .subitem-icon {
  transform: rotate(180deg);
}

.sidebar-subitem-link.active-subitem .subitem-icon {
  color: #d9a54c;
}

/* ===================================================
   AL-QURAN PRE-UAT IMPROVEMENTS & DK 2027 ENHANCEMENTS
   =================================================== */

/* Enlarge Jawi translation font size (Row 11) */
body.jawi-mode .translation-pill-card,
body.jawi-mode .translation-pill-card div,
body.jawi-mode .ghafir-translation-box,
body.jawi-mode .ghafir-translation-box div {
  font-size: 1.35rem !important;
  line-height: 2 !important;
}

/* Quran Closing Block (Row 13) */
.quran-closing-block {
  margin: 36px auto 16px auto;
  text-align: center;
  padding: 16px 28px;
  background: linear-gradient(135deg, rgba(38, 115, 112, 0.08) 0%, rgba(217, 165, 76, 0.12) 100%);
  border: 1.5px solid rgba(217, 165, 76, 0.4);
  border-radius: 20px;
  max-width: 480px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.quran-closing-arabic {
  font-family: 'KFGQPC-Uthmani', 'Amiri', serif;
  font-size: 2.2rem;
  color: var(--primary-color, #267370);
  direction: rtl;
  line-height: 1.8;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
}

/* Rumusan Sub-Module Segmented Navigation (Row 27, 28, 39, 40) */
.rumusan-module-selector {
  background: #e2e8f0;
  padding: 6px;
  border-radius: 50px;
  display: inline-flex;
  margin: 0 auto;
  border: 1.5px solid #cbd5e1;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);
}

.rumusan-module-btn {
  border: none;
  background: transparent;
  padding: 10px 28px;
  border-radius: 40px;
  font-weight: 800;
  font-size: 0.96rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.rumusan-module-btn:hover {
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.rumusan-module-btn.active {
  background: var(--primary-dark) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--accent-gold) !important;
  box-shadow: 0 4px 14px rgba(12, 28, 46, 0.3) !important;
}

.rumusan-module-btn.active i {
  color: var(--accent-gold) !important;
}

/* Peta Pembelajaran Infographic Viewer (Row 39) */
.peta-pembelajaran-container {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.peta-img-wrapper {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  position: relative;
  cursor: pointer;
  padding: 12px;
}

.peta-img-wrapper img {
  width: 100%;
  max-height: 750px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.peta-img-wrapper:hover img {
  transform: scale(1.012);
}

/* Refleksi Kendiri Gamified Mastery Hub */
.refleksi-container {
  text-align: start;
}

.refleksi-progress-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #effcf6 100%);
  border: 2px solid var(--accent-gold);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 10px 25px rgba(12, 28, 46, 0.08), 0 0 16px rgba(217, 165, 76, 0.12);
}

/* Gamified Rank Badges */
.refleksi-rank-badge {
  padding: 7px 18px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.refleksi-rank-badge.rank-mumtaz {
  background: linear-gradient(135deg, #D9A54C 0%, #C5933A 100%);
  color: #0C1C2E;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(217, 165, 76, 0.35);
}

.refleksi-rank-badge.rank-jayyid {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.refleksi-rank-badge.rank-usaha {
  background: linear-gradient(135deg, #0C1C2E 0%, #1e3a5f 100%);
  color: #facc15;
  border: 2px solid var(--accent-gold);
  box-shadow: 0 4px 12px rgba(12, 28, 46, 0.2);
}

.refleksi-progress-track {
  height: 16px !important;
  border-radius: 20px !important;
  background: #e2e8f0 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.refleksi-progress-bar {
  background: linear-gradient(90deg, #D9A54C 0%, #267370 50%, #10b981 100%) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.refleksi-reset-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #64748b;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.refleksi-reset-btn:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #ef4444;
  transform: rotate(-45deg);
}

/* SP Card & Headers */
.refleksi-group-header {
  margin-top: 28px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.refleksi-group-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-dark) !important;
  border: 2px solid var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(12, 28, 46, 0.2);
  flex-shrink: 0;
}

.refleksi-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-top: 4px solid var(--accent-gold);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(12, 28, 46, 0.04);
  transition: all 0.2s ease;
}

.refleksi-card:hover {
  border-color: #cbd5e1;
  border-top-color: var(--accent-gold);
  box-shadow: 0 8px 24px rgba(12, 28, 46, 0.08);
  transform: translateY(-2px);
}

.refleksi-sp-badge {
  background: var(--primary-dark) !important;
  color: var(--accent-gold) !important;
  border: 1.5px solid var(--accent-gold) !important;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(12, 28, 46, 0.18);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.refleksi-item-row {
  padding: 14px 10px;
  border-bottom: 1px dashed #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.refleksi-item-row:hover {
  background: #f8fafc;
}

.refleksi-item-row:last-child {
  border-bottom: none;
}

.refleksi-item-text {
  font-size: 1rem;
  color: #1e293b;
  font-weight: 600;
  line-height: 1.55;
}

body.jawi-mode .refleksi-item-text {
  font-size: 1.25rem;
  direction: rtl;
  text-align: right;
}

.refleksi-choice-group {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* 3D Tactile Choice Buttons (Duolingo Style) */
.btn-refleksi-choice {
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  border-radius: 14px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 #cbd5e1;
  transition: all 0.12s ease-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  outline: none;
}

.btn-refleksi-choice:hover {
  border-color: #94a3b8;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #94a3b8;
}

.btn-refleksi-choice:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #cbd5e1;
}

/* Active 3D States */
.btn-refleksi-choice.active-ya {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #047857, 0 6px 14px rgba(16, 185, 129, 0.35) !important;
}

.btn-refleksi-choice.active-ya:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #047857 !important;
}

.btn-refleksi-choice.active-tidak {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #be123c, 0 6px 14px rgba(244, 63, 94, 0.35) !important;
}

.btn-refleksi-choice.active-tidak:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #be123c !important;
}

.btn-refleksi-choice.active-menguasai {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #047857, 0 6px 14px rgba(16, 185, 129, 0.35) !important;
}

.btn-refleksi-choice.active-menguasai:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #047857 !important;
}

.btn-refleksi-choice.active-hampir {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #b45309, 0 6px 14px rgba(245, 158, 11, 0.35) !important;
}

.btn-refleksi-choice.active-hampir:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #b45309 !important;
}

.btn-refleksi-choice.active-bimbingan {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #1e40af, 0 6px 14px rgba(59, 130, 246, 0.35) !important;
}

.btn-refleksi-choice.active-bimbingan:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1e40af !important;
}

/* ===================================================
   ITMAM AL-HARAKAH & TAJWID SIDEBAR STYLES (DK 2027)
   =================================================== */

.itmam-container {
  width: 100%;
  padding: 8px 4px;
}

.itmam-section-title-wrap {
  position: relative;
}

.itmam-section-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--primary-color, #267370);
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: 0.3px;
}

body.jawi-mode .itmam-section-title {
  font-family: 'Sakkal-Majalla', 'Amiri-Jawi', serif !important;
  font-size: 1.65rem;
}

/* Definition Cards (Page 24) */
.itmam-def-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

.itmam-def-badge {
  background: #267370;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.itmam-def-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

body.jawi-mode .itmam-def-text {
  font-size: 1.25rem;
  line-height: 1.9;
  text-align: right;
  direction: rtl;
}

/* Visual Cards (Page 24 & Page 27) */
.itmam-visual-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.itmam-visual-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.itmam-badge-pill {
  display: inline-block;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.itmam-visual-label {
  font-weight: 800;
  color: #1e293b;
  font-size: 1.05rem;
  line-height: 1.35;
}

.itmam-img-box {
  background: #f8fafc;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.itmam-diagram-img {
  max-height: 160px;
  max-width: 100%;
  object-fit: contain;
}

.itmam-caption-box {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 600;
}

body.jawi-mode .itmam-caption-box {
  font-size: 1.15rem;
  direction: rtl;
}

/* Kaedah Kasrah Cards (Page 25) */
.itmam-kaedah-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 18px;
  padding: 18px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.itmam-kaedah-title {
  font-weight: 750;
  color: #0f172a;
  font-size: 1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itmam-tag-pill {
  display: inline-block;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
}

.itmam-kaedah-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

body.jawi-mode .itmam-kaedah-desc {
  font-size: 1.1rem;
  direction: rtl;
}

/* Cara Fathah Cards (Page 28) */
.itmam-cara-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.itmam-badge-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.itmam-cara-card-title {
  font-weight: 800;
  color: #1e293b;
  font-size: 1.12rem;
}

.itmam-cara-card-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

body.jawi-mode .itmam-cara-card-desc {
  font-size: 1.22rem;
  direction: rtl;
}

/* Comparison Table (Page 26) */
.itmam-compare-col {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.itmam-compare-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
}

.header-teal {
  background: linear-gradient(135deg, #0c1c2e, #1a365d);
}

.header-dark {
  background: linear-gradient(135deg, #1e293b, #334155);
}

.itmam-col-desc {
  padding: 12px 18px;
  font-size: 0.84rem;
  color: #475569;
  margin: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.itmam-example-list {
  padding: 10px 14px;
}

.itmam-example-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.itmam-example-row:last-child {
  border-bottom: none;
}

.itmam-arabic-chip {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  font-family: 'Amiri', serif;
  font-size: 1.35rem;
  color: #0f172a;
  direction: rtl;
  font-weight: bold;
}

.itmam-arabic-chip.chip-dark {
  background: #0f172a;
  color: #ffffff;
  border-color: #1e293b;
}

.itmam-trans-chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

.itmam-note-text {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.35;
}

body.jawi-mode .itmam-note-text {
  font-size: 1.05rem;
  direction: rtl;
}

/* Cara Kasrah & Dhommah Banners (Page 29 & 30) */
.itmam-intro-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 18px;
  color: #166534;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

.itmam-card-pill {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.itmam-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fee2e2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.itmam-summary-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  color: #1e40af;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
}

.itmam-cara-panel {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

.itmam-panel-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #1e293b;
  margin: 0;
}

.itmam-step-pill {
  display: inline-block;
  background: #e2e8f0;
  color: #334155;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 20px;
}

.itmam-step-desc {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

body.jawi-mode .itmam-step-desc {
  font-size: 1.12rem;
  direction: rtl;
}

.itmam-key-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1.5px solid #f59e0b;
  border-radius: 16px;
  color: #92400e;
}

/* Practice & Actions (Page 31-33) */
.itmam-main-highlight-box {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px 20px;
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.55;
  border-left: 5px solid #267370;
}

.itmam-amal-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.itmam-amal-text {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.45;
}

body.jawi-mode .itmam-amal-text {
  font-size: 1.18rem;
  direction: rtl;
}

.itmam-contoh-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 18px;
}

.itmam-contoh-desc {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

/* Spektrum Ilmu & Ingat Sidebar Card (Page 21 & 23) */
.tajwid-sidebar-card {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fde68a;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
  height: 100%;
}

.tajwid-sidebar-title {
  font-weight: 800;
  color: #b45309 !important;
  font-size: 1rem;
  margin-bottom: 12px;
}

.tajwid-sidebar-desc {
  font-size: 0.86rem;
  color: #78350f;
  line-height: 1.6;
  margin: 0;
}

body.jawi-mode .tajwid-sidebar-desc {
  font-size: 1.15rem;
  line-height: 1.9;
  direction: rtl;
}

/* ========================================= */
/* MODUL PEMBELAJARAN HADIS 2.1 (PDF MATCH)  */
/* ========================================= */

.hadis-app-outer-frame {
  background: #082137;
  border: none !important;
  /* Main container (.content-frame) already has pre-existing border */
  border-radius: 0 !important;
  /* Flush fit with .content-frame, smoothly clipped by its overflow: hidden */
  padding: 16px 20px;
  box-shadow: none !important;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  font-family: inherit;
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Main White Inner Card (Contains Top Nav Bar + Body Content) */
.hadis-white-inner-card {
  flex: 1 1 auto;
  min-width: 0;
  background: #fdfefe;
  border-radius: 20px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}

/* Top Navigation Bar INSIDE White Card */
.hadis-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
  width: 100%;
}

.hadis-nav-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #dca54e;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(220, 165, 78, 0.38);
}

.hadis-nav-arrow:hover:not(:disabled) {
  background: #c8913b;
  transform: scale(1.06);
}

.hadis-nav-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.hadis-center-title-pill {
  flex: 1;
  max-width: 650px;
  background: #082137;
  border: 2px solid #146a78;
  border-radius: 999px;
  padding: 10px 30px;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.15);
}

.hadis-center-title-pill i {
  color: #dca54e;
  font-size: 1.15rem;
}

.hadis-inner-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Right Side Action Column (In Dark Navy Space) */
.hadis-side-action-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 2px 0;
  flex-shrink: 0;
}

.hadis-side-action-col.with-toggles {
  width: 160px;
}

.hadis-side-action-col.lightbulb-only {
  width: 48px;
}

.hadis-lightbulb-btn {
  background: #dca54e;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 165, 78, 0.45);
  transition: all 0.2s ease;
  margin-top: 0;
}

.hadis-lightbulb-btn:hover {
  background: #cca04b;
  transform: scale(1.08);
}

.hadis-side-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;
}

.hadis-matan-side-btn {
  width: 100%;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.70rem;
  line-height: 1.25;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.hadis-matan-side-btn.active {
  background: #1e707e;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(30, 112, 126, 0.45);
}

.hadis-matan-side-btn:not(.active) {
  background: #ffffff;
  color: #082137;
}

.hadis-matan-side-btn:hover:not(.active) {
  background: #f0fdfa;
  color: #146a78;
}

/* Subtitle Inside White Card */
.hadis-card-subtitle-teal {
  color: #146a78;
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hadis-audio-btn-dark {
  background: #082137;
  color: #ffffff;
  border-radius: 8px;
  border: none;
  padding: 6px 14px;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(8, 33, 55, 0.25);
}

.hadis-audio-btn-dark:hover {
  background: #146a78;
  transform: translateY(-1px);
}

.hadis-audio-btn-dark.playing {
  background: #146a78;
  animation: pulseHadisAudio 1.2s infinite alternate;
}

@keyframes pulseHadisAudio {
  0% {
    box-shadow: 0 0 0 rgba(20, 106, 120, 0.4);
  }

  100% {
    box-shadow: 0 0 12px rgba(20, 106, 120, 0.9);
  }
}

/* Matan Section */
.hadis-matan-arabic-text {
  font-family: 'Amiri', 'Sakkal Majalla', serif;
  color: #146a78;
  font-size: 1.65rem;
  line-height: 2.15;
  direction: rtl;
  text-align: right;
  padding: 10px 40px 10px 20px;
  margin: 14px 0 10px 0;
  font-weight: normal;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hadis-matan-arabic-text:hover {
  color: #0c434c;
}

.hadis-rawi-credit {
  color: #146a78;
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
  direction: rtl;
  margin-bottom: 20px;
}

/* Mustard Translation / Perawi Card */
.hadis-mustard-card {
  background: #d8a04a;
  border-radius: 20px;
  padding: 18px 24px;
  color: #ffffff;
  margin-top: auto;
  box-shadow: 0 4px 12px rgba(216, 160, 74, 0.3);
  position: relative;
  cursor: pointer;
}

.hadis-mustard-card.playing-translation {
  box-shadow: 0 0 0 3px rgba(20, 106, 120, 0.6), 0 6px 18px rgba(216, 160, 74, 0.4);
}

.hadis-mustard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hadis-mustard-audio-btn {
  background: #146a78;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.hadis-mustard-audio-btn:hover {
  background: #082137;
}

.hadis-mustard-audio-btn.playing {
  background: #082137;
  animation: pulseHadisAudio 1.2s infinite alternate;
}

.hadis-mustard-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0;
}

.hadis-mustard-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #ffffff;
  margin: 0;
  font-weight: 400;
}

/* Perawi Grid in Mustard Card */
.hadis-perawi-mustard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.hadis-perawi-white-card {
  background: #ffffff;
  color: #082137;
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 4px solid #146a78;
}

.hadis-perawi-white-card .fakta-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.hadis-perawi-white-card .fakta-val {
  font-size: 0.92rem;
  font-weight: 600;
  color: #082137;
  line-height: 1.4;
}

/* Huraian Cards (Coral Bordered) */
.hadis-huraian-coral-card {
  border: 1.8px solid #ea6f58;
  border-radius: 20px;
  background: #ffffff;
  padding: 14px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.2s ease;
}

.hadis-huraian-coral-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 111, 88, 0.15);
}

.hadis-coral-badge-dark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #082137;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hadis-coral-content-wrap {
  flex: 1;
}

.hadis-coral-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}

.hadis-coral-card-desc {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.55;
  margin: 0;
}

/* Hadis 3: Huraian Sedekah Ochre Pills */
.hadis-sedekah-sendi-banner {
  border: 1.8px solid #ea6f58;
  border-radius: 20px;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hadis-sedekah-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.hadis-ochre-capsule-pill {
  background: #a8743e;
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 3px 8px rgba(168, 116, 62, 0.25);
  transition: transform 0.2s ease;
}

.hadis-ochre-capsule-pill:hover {
  transform: translateY(-2px);
  background: #986532;
}

.hadis-ochre-pill-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #a8743e;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Mari Belajar: Overview Grid (Page 14) */
.hadis-mari-belajar-overview-title {
  color: #146a78;
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.hadis-mari-belajar-overview-sub {
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.hadis-mari-belajar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
  width: 100%;
}

.hadis-mari-belajar-grid.grid-5-items {
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.hadis-mari-belajar-grid.grid-5-items .hadis-mari-belajar-card:nth-child(1),
.hadis-mari-belajar-grid.grid-5-items .hadis-mari-belajar-card:nth-child(2),
.hadis-mari-belajar-grid.grid-5-items .hadis-mari-belajar-card:nth-child(3) {
  grid-column: span 2;
}

.hadis-mari-belajar-grid.grid-5-items .hadis-mari-belajar-card:nth-child(4),
.hadis-mari-belajar-grid.grid-5-items .hadis-mari-belajar-card:nth-child(5) {
  grid-column: span 3;
}

.hadis-mari-belajar-card {
  border: 1.6px solid #146a78;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 106, 120, 0.12);
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.hadis-mari-belajar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(20, 106, 120, 0.22);
}

/* Vertical Cards (Cards 01, 02, 03) */
.hadis-mari-belajar-card.card-vertical {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 255px;
}

.hadis-mari-belajar-card.card-vertical .hadis-mari-badge-dark {
  position: absolute;
  top: 14px;
  left: 14px;
}

.hadis-mari-belajar-card.card-vertical .hadis-mari-belajar-img-wrap {
  height: 145px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 12px;
}

.hadis-mari-belajar-card.card-vertical .hadis-mari-belajar-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.hadis-mari-belajar-card.card-vertical .hadis-mari-title-text {
  font-weight: 700;
  font-size: 0.98rem;
  color: #082137;
  text-align: center;
  line-height: 1.35;
}

/* Horizontal Cards (Cards 04, 05) */
.hadis-mari-belajar-card.card-horizontal {
  padding: 14px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 110px;
}

.hadis-mari-belajar-card.card-horizontal .hadis-mari-badge-dark {
  position: absolute;
  top: 12px;
  left: 14px;
}

.hadis-mari-belajar-card.card-horizontal .hadis-mari-belajar-img-wrap {
  width: 90px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 28px;
}

.hadis-mari-belajar-card.card-horizontal .hadis-mari-belajar-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.hadis-mari-belajar-card.card-horizontal .hadis-mari-title-text {
  font-weight: 700;
  font-size: 0.98rem;
  color: #082137;
  text-align: center;
  flex: 1;
  line-height: 1.35;
}

.hadis-mari-badge-dark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #082137;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Mari Belajar: Detail Slide View (Pages 4-10, 12) */
.hadis-detail-top-banner {
  background: #082137;
  border-radius: 16px;
  padding: 10px 20px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hadis-detail-back-btn {
  background: #146a78;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.hadis-detail-back-btn:hover {
  background: #dca54e;
}

.hadis-detail-content-frame {
  border: 1.8px solid #ea6f58;
  border-radius: 20px;
  padding: 22px;
  flex: 1;
  display: flex;
  gap: 22px;
  align-items: center;
  background: #ffffff;
  position: relative;
}

.hadis-detail-img-col {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hadis-detail-img-col img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 12px;
}

.hadis-detail-text-col {
  flex: 1;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #1f2937;
}

/* Vertical Slide Dots Indicator (Page 12) */
.hadis-slide-dots-col {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hadis-slide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.hadis-slide-dot.active {
  background: #146a78;
  height: 22px;
  border-radius: 999px;
}

/* Ibrah View (Pages 15, 25) */
.hadis-ibrah-card {
  border: 1.8px solid #ea6f58;
  border-radius: 20px;
  padding: 16px 22px;
  margin-bottom: 16px;
  background: #ffffff;
}

.hadis-ibrah-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.hadis-ibrah-inner-box {
  background: #f0fdfa;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.hadis-ibrah-img-wrap {
  width: 130px;
  flex-shrink: 0;
  text-align: center;
}

.hadis-ibrah-img-wrap img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}

.hadis-ibrah-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #1e293b;
  margin: 0;
}

/* Cara Mengamalkan View (Pages 11, 26) */
.hadis-amal-row-card {
  border: 1.8px solid #ea6f58;
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 16px;
  background: #ffffff;
}

.hadis-quote-box {
  background: #f8fafc;
  border-left: 4px solid #146a78;
  border-radius: 12px;
  padding: 14px 18px;
  font-style: italic;
  color: #334155;
  font-size: 0.98rem;
  line-height: 1.6;
  position: relative;
  margin-top: 10px;
}

.hadis-quote-box .quote-mark {
  color: #10b981;
  font-size: 1.8rem;
  line-height: 1;
  font-family: Georgia, serif;
  margin-right: 6px;
}

/* Jawi Overrides for Hadis */
body.jawi-mode .hadis-white-inner-card,
body.jawi-mode .hadis-huraian-coral-card,
body.jawi-mode .hadis-mustard-card,
body.jawi-mode .hadis-detail-content-frame,
body.jawi-mode .hadis-ibrah-card,
body.jawi-mode .hadis-amal-row-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .hadis-main-layout-row,
body.jawi-mode .hadis-app-outer-frame {
  direction: ltr !important;
  /* keep action column consistently oriented */
}

body.jawi-mode .hadis-perawi-white-card {
  border-left: 1px solid #e2e8f0;
  border-right: 4px solid #146a78;
  text-align: right;
  direction: rtl;
}

body.jawi-mode .hadis-quote-box {
  border-left: none;
  border-right: 4px solid #146a78;
}

@media (max-width: 991px) {
  .hadis-main-layout-row {
    flex-direction: column;
  }

  .hadis-side-action-col {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 14px;
  }

  .hadis-side-toggle-group {
    flex-direction: row;
    width: auto;
  }

  .hadis-mari-belajar-grid,
  .hadis-sedekah-pills-grid {
    grid-template-columns: 1fr;
  }

  .hadis-detail-content-frame {
    flex-direction: column;
  }

  .hadis-detail-img-col {
    width: 100%;
  }
}

/* ========================================= */
/* MODUL PEMBELAJARAN AKIDAH 3.1 (PDF MATCH) */
/* ========================================= */

.aqidah-container-wrapper {
  background: transparent;
  border-radius: 0;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 26px 20px;
  position: relative;
  overflow-y: auto;
}

/* Top Nav Bar */
.aqidah-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1040px;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
}

.aqidah-nav-group-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.aqidah-nav-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.aqidah-nav-arrow-btn:hover:not(:disabled) {
  background: #c89e4e;
  transform: scale(1.06);
}

.aqidah-nav-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.aqidah-nav-center-capsule {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 12px 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(14, 35, 64, 0.3);
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  text-align: center;
}

.aqidah-gold-icon {
  color: #deb265;
  font-size: 19px;
}

.aqidah-star-circle-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d8af60;
  color: #0e2340;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.aqidah-lightbulb-square-btn {
  position: static;
  transform: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.aqidah-lightbulb-square-btn:hover {
  background: #c89e4e;
  transform: scale(1.06);
}

/* Slide Body Content */
.aqidah-slide-body-content {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.aqidah-311-content-center {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
  flex: 1 1 auto;
  margin: auto 0;
}

/* Terracotta bordered box */
.aqidah-311-terracotta-box {
  background: #ffffff;
  border: 1.8px solid #d06d52;
  border-radius: 26px;
  padding: 24px 30px;
  box-shadow: 0 6px 20px rgba(208, 109, 82, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  flex: 1;
}

.aqidah-311-full-width {
  width: 100%;
  flex: none;
}

.aqidah-311-def-top-row {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 22px;
  width: 100%;
  min-height: 185px;
}

.aqidah-311-two-col-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.aqidah-card-navy-pill {
  display: block;
  width: 86%;
  max-width: 620px;
  margin: 0 auto 16px auto;
  background: #0e2340;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 10px 28px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(14, 35, 64, 0.22);
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.02em;
}

.aqidah-box-text {
  font-size: 1.05rem;
  line-height: 1.68;
  color: #1e293b;
  margin: 0;
  width: 100%;
  font-weight: 500;
}

.aqidah-bullets-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0 10px;
}

.aqidah-bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.aqidah-bullet-symbol {
  color: #1e293b;
  font-weight: 700;
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1.55;
}

/* Slide 2: Dalil Naqli */
.aqidah-subtitle-audio-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
}

.aqidah-audio-sq-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e0f2f3;
  border: 1.5px solid #82c8cf;
  color: #226b74;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(36, 123, 133, 0.15);
  flex-shrink: 0;
}

.aqidah-audio-sq-btn:hover {
  background: #d0eeee;
  transform: scale(1.05);
}

.aqidah-dalil-title {
  color: #247b85;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  margin: 0;
}

.aqidah-arabic-yellow-card {
  background: #fae39c;
  border: 1.5px solid #ebd48f;
  border-radius: 24px;
  padding: 20px 32px;
  box-shadow: 0 4px 16px rgba(250, 227, 156, 0.45);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.aqidah-arabic-matan-text {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 1.48rem;
  line-height: 2.3;
  color: #1c1a16;
  direction: rtl;
  margin: 0;
  font-weight: 700;
}

/* Slide 3: Dalil Akli */
.aqidah-311-akli-two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
}

.aqidah-akli-img-wrap {
  width: 100%;
  height: 190px;
  border-radius: 20px;
  overflow: hidden;
  background: #0e2340;
  margin-bottom: 14px;
}

.aqidah-akli-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slide 4: Kepentingan Tabs */
.aqidah-311-tabs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

.aqidah-tab-card-btn {
  background: #ffffff;
  border: 1.8px solid #d57a6a;
  border-radius: 22px;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 135px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(213, 122, 106, 0.08);
  box-sizing: border-box;
}

.aqidah-tab-card-btn:hover {
  transform: translateY(-2px);
  border-color: #d9a74a;
}

.aqidah-tab-card-btn.active {
  background: #d4a359;
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(212, 163, 89, 0.35);
  transform: translateY(-2px);
}

.aqidah-tab-num-badge {
  font-size: 0.9rem;
  font-weight: 800;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e2340;
  color: #ffffff;
  flex-shrink: 0;
}

.aqidah-tab-card-btn.active .aqidah-tab-num-badge {
  background: #ffffff;
  color: #226b74;
}

.aqidah-tab-title-text {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.38;
  color: #0e2340;
}

.aqidah-tab-card-btn.active .aqidah-tab-title-text {
  color: #ffffff;
}

.aqidah-dots-indicator-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}

.aqidah-dot-bar {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: #cbd5e1;
  transition: all 0.2s ease;
}

.aqidah-dot-bar.active {
  width: 28px;
  background: #0e2340;
}

.aqidah-311-detail-bottom-card {
  background: #ffffff;
  border: 1.8px solid #d57a6a;
  border-radius: 24px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 6px 20px rgba(213, 122, 106, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.aqidah-detail-img-box {
  width: 270px;
  height: 170px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0e2340;
}

.aqidah-detail-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aqidah-detail-text-box {
  flex: 1;
  min-width: 0;
}

.aqidah-caramel-pill {
  display: block;
  background: #a67d4c;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(166, 125, 76, 0.25);
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Slide 5: Perbezaan */
.aqidah-311-perbezaan-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.aqidah-311-benar-solid-card {
  background: #a67d4c;
  border-radius: 22px;
  padding: 22px 26px;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(166, 125, 76, 0.25);
}

.aqidah-311-salah-bordered-card {
  background: #ffffff;
  border: 2px solid #3d97a8;
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 6px 20px rgba(61, 151, 168, 0.15);
}

.aqidah-311-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 8px 0;
}

.aqidah-311-card-sub {
  font-size: 0.94rem;
  line-height: 1.48;
  margin: 0;
}

.aqidah-311-perbezaan-bottom-frame {
  background: #ffffff;
  border: 5px solid #bfa281;
  border-radius: 24px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 6px 20px rgba(191, 162, 129, 0.15);
  width: 100%;
  box-sizing: border-box;
}

.aqidah-311-perbezaan-img-box {
  width: 280px;
  height: 165px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
}

.aqidah-311-perbezaan-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aqidah-311-perbezaan-content-box {
  flex: 1;
  min-width: 0;
}

/* Jawi Support for 3.1.1 */
body.jawi-mode .aqidah-311-content-center,
body.jawi-mode .aqidah-bullets-col,
body.jawi-mode .aqidah-bullet-row,
body.jawi-mode .aqidah-bullet-row .aqidah-box-text,
body.jawi-mode .aqidah-detail-text-box,
body.jawi-mode .aqidah-311-benar-solid-card,
body.jawi-mode .aqidah-311-salah-bordered-card,
body.jawi-mode .aqidah-311-perbezaan-content-box {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .aqidah-311-def-top-row,
body.jawi-mode .aqidah-311-akli-two-cards,
body.jawi-mode .aqidah-311-perbezaan-top-row,
body.jawi-mode .aqidah-311-tabs-row,
body.jawi-mode .aqidah-311-detail-bottom-card,
body.jawi-mode .aqidah-311-perbezaan-bottom-frame {
  direction: rtl;
}

/* Sub-caption */
.aqidah-sub-caption {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.55;
  background: #f8fafc;
  padding: 10px 16px;
  border-radius: 12px;
  border-left: 4px solid #d9a54c;
}

body.jawi-mode .aqidah-sub-caption {
  border-left: none;
  border-right: 4px solid #d9a54c;
  text-align: right;
  direction: rtl;
}

/* Dark Number Badge */
.aqidah-dark-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #082137;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  flex-shrink: 0;
}

/* 1. Definisi Layout */
.aqidah-definisi-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.aqidah-def-cards-col {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aqidah-def-img-col {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aqidah-coral-box {
  background: #ffffff;
  border: 1.5px solid #ffccd2;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 3px 12px rgba(222, 91, 91, 0.06);
  position: relative;
}

.aqidah-coral-badge {
  display: inline-block;
  background: #de5b5b;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.aqidah-box-desc {
  color: #2d3748;
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.aqidah-komponen-banner {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 14px;
  padding: 12px 16px;
}

.aqidah-komponen-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #166534;
  margin-bottom: 8px;
}

.aqidah-komponen-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aqidah-komponen-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  color: #1e293b;
  line-height: 1.45;
}

.aqidah-img-card {
  width: 100%;
  max-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.aqidah-img-card img {
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
  border-radius: 12px;
}

/* 2. Rukun Iman Grid */
.aqidah-rukun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aqidah-rukun-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aqidah-rukun-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #d9a54c;
}

.aqidah-rukun-card .aqidah-dark-num-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

body.jawi-mode .aqidah-rukun-card .aqidah-dark-num-badge {
  left: auto;
  right: 10px;
}

.aqidah-rukun-img-wrap {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.aqidah-rukun-img-wrap img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.aqidah-rukun-card-title {
  font-weight: 700;
  font-size: 0.94rem;
  color: #082137;
  margin-top: 4px;
}

/* 3. Dalil Naqli Layout */
.aqidah-dalil-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.aqidah-dalil-content-col {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aqidah-dalil-img-col {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aqidah-surah-ref-badge {
  display: inline-block;
  align-self: flex-start;
  background: #082137;
  color: #f7fafc;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 12px;
}

.aqidah-arabic-card {
  background: #fdfbf7;
  border: 1.5px solid #e8dbb8;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 3px 10px rgba(217, 165, 76, 0.08);
}

.aqidah-arabic-text {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 1.45rem;
  line-height: 2.2;
  text-align: center;
  direction: rtl;
  color: #082137;
  font-weight: 700;
  margin-bottom: 0;
}

.aqidah-translation-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
}

.aqidah-trans-header {
  font-size: 0.92rem;
  color: #082137;
  margin-bottom: 6px;
}

.aqidah-trans-body {
  font-size: 0.93rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 0;
}

.aqidah-pengajaran-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #1e3a8a;
  line-height: 1.5;
}

/* 4. Dalil Akli Layout */
.aqidah-dalil-akli-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.aqidah-akli-main-col {
  flex: 1 1 58%;
}

.aqidah-card-subtitle-teal {
  font-size: 1.05rem;
  font-weight: 700;
  color: #267370;
}

.aqidah-akli-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.aqidah-akli-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #082137;
  margin-bottom: 2px;
}

.aqidah-akli-card-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}

/* 5. Kepentingan Layout */
.aqidah-kepentingan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.aqidah-kepentingan-card {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 3px 12px rgba(217, 165, 76, 0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aqidah-kepentingan-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: #082137;
}

.aqidah-kepentingan-card-desc {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
}

/* 6. Perbezaan Layout */
.aqidah-perbezaan-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.aqidah-perbezaan-col {
  flex: 1 1 50%;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aqidah-perbezaan-col.benar {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
}

.aqidah-perbezaan-col.salah {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
}

.aqidah-perbezaan-header {
  font-size: 1.05rem;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
}

.aqidah-perbezaan-header.benar {
  color: #166534;
}

.aqidah-perbezaan-header.salah {
  color: #991b1b;
}

.aqidah-perbezaan-sub {
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.45;
}

.aqidah-perbezaan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aqidah-perbezaan-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  color: #1e293b;
  line-height: 1.5;
}

/* 7. Tiga Kad Layout */
.aqidah-tiga-kad-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aqidah-tri-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.aqidah-tri-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.aqidah-tri-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #082137;
}

.aqidah-tri-img-wrap {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.aqidah-tri-img-wrap img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}

.aqidah-tri-card-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}

/* 8. Dalil Duo Layout */
.aqidah-dalil-duo-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.aqidah-duo-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.aqidah-duo-img-wrap {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.aqidah-duo-img-wrap img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}

/* 9. Sifat Duo Layout */
.aqidah-sifat-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.aqidah-sifat-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.aqidah-sifat-img-wrap {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aqidah-sifat-img-wrap img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}

.aqidah-mustahil-tag {
  display: inline-flex;
  align-items: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 8px;
}

.aqidah-fungsi-card {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 12px 18px;
}

/* 10. Asmaul Husna Layout */
.aqidah-asmaul-husna-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.aqidah-asmaul-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.aqidah-asmaul-img-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.aqidah-asmaul-img-wrap img {
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
}

.aqidah-asmaul-title-box {
  margin-bottom: 10px;
}

.aqidah-asmaul-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
}

/* 11. Dalil Akli Duo */
.aqidah-dalil-akli-duo-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.aqidah-akli-duo-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.aqidah-duo-img-box {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 8px;
}

.aqidah-duo-img-box img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

/* 12. 10 Malaikat Grid */
.aqidah-malaikat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.aqidah-malaikat-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.aqidah-malaikat-num {
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #082137;
  color: #ecd58a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.aqidah-malaikat-info {
  flex: 1 1 auto;
}

.aqidah-malaikat-name {
  font-weight: 700;
  font-size: 0.94rem;
  color: #082137;
  margin-bottom: 2px;
}

.aqidah-malaikat-duty {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.45;
}

/* 13. Kesan Malaikat Layout */
.aqidah-kesan-malaikat-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.aqidah-kesan-mal-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.aqidah-kesan-mal-img {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: #f8fafc;
  border-radius: 12px;
}

.aqidah-kesan-mal-img img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

/* 14. Hujah Kontemporari & Cara Kukuh */
.aqidah-hujah-card,
.aqidah-cara-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.aqidah-hujah-title,
.aqidah-cara-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #082137;
  margin-bottom: 2px;
}

.aqidah-hujah-desc,
.aqidah-cara-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}

/* 15. Kesan Hidup Layout */
.aqidah-kesan-hidup-layout {
  display: flex;
  gap: 20px;
}

.aqidah-kesan-cat-col {
  flex: 1 1 50%;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
}

.aqidah-kesan-item-box {
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.45;
}

/* Jawi RTL adjustments */
body.jawi-mode .aqidah-app-outer-frame {
  direction: ltr !important;
}

body.jawi-mode .aqidah-white-inner-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .aqidah-box-desc,
body.jawi-mode .aqidah-trans-body,
body.jawi-mode .aqidah-akli-card-desc,
body.jawi-mode .aqidah-kepentingan-card-desc,
body.jawi-mode .aqidah-tri-card-desc,
body.jawi-mode .aqidah-asmaul-desc,
body.jawi-mode .aqidah-malaikat-duty,
body.jawi-mode .aqidah-hujah-desc,
body.jawi-mode .aqidah-cara-desc {
  direction: rtl;
  text-align: right;
}

@media (max-width: 991px) {

  .aqidah-definisi-layout,
  .aqidah-dalil-layout,
  .aqidah-dalil-akli-layout,
  .aqidah-perbezaan-layout,
  .aqidah-kesan-hidup-layout {
    flex-direction: column;
  }

  .aqidah-rukun-grid,
  .aqidah-tiga-kad-layout,
  .aqidah-dalil-duo-layout,
  .aqidah-sifat-duo-grid,
  .aqidah-asmaul-husna-layout,
  .aqidah-dalil-akli-duo-layout,
  .aqidah-malaikat-grid,
  .aqidah-kesan-malaikat-layout,
  .aqidah-kepentingan-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MODUL PEMBELAJARAN FIQAH (REKA BENTUK RUJUKAN TEPAT DK 2027)
   ========================================================================== */

.fiqah-container-wrapper {
  background: transparent;
  border-radius: 0;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 24px 22px;
  position: relative;
  overflow-y: auto;
}

/* Navigasi Atas Fiqah */
.fiqah-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1040px;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
}

.fiqah-nav-group-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.fiqah-nav-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.fiqah-nav-arrow-btn:hover:not(:disabled) {
  background: #c89e4e;
  transform: scale(1.06);
}

.fiqah-nav-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.fiqah-nav-center-capsule {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 12px 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(14, 35, 64, 0.3);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.fiqah-gold-icon {
  color: #deb265;
  font-size: 19px;
}

.fiqah-lightbulb-square-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.fiqah-lightbulb-square-btn:hover {
  background: #c89e4e;
  transform: scale(1.06);
}

/* Badan Slaid Fiqah */
.fiqah-slide-body-content {
  width: 100%;
  max-width: 1040px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  margin: auto 0;
}

.fiqah-content-center {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   HALAMAN A: PENGERTIAN IBADAH
   ========================================================================== */

.fiqah-terracotta-box {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(202, 108, 77, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.fiqah-def-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.fiqah-card-navy-pill {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 800;
  padding: 8px 26px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 3px 10px rgba(14, 35, 64, 0.22);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  text-align: center;
}

.fiqah-card-navy-pill-wide {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 800;
  padding: 9px 36px;
  border-radius: 999px;
  display: block;
  width: 100%;
  text-align: center;
  box-shadow: 0 3px 10px rgba(14, 35, 64, 0.22);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.fiqah-box-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #1e293b;
  margin: 0;
  width: 100%;
  font-weight: 500;
  text-align: left;
}

.fiqah-pembahagian-box {
  width: 100%;
}

.fiqah-pembahagian-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.fiqah-gold-card {
  background: #d8af60;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(216, 175, 96, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.fiqah-icon-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fiqah-icon-badge-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #cce7f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  overflow: hidden;
}

.fiqah-icon-badge-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fiqah-gold-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.fiqah-gold-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
  text-align: left;
}

/* ==========================================================================
   HALAMAN B: FARDHU AIN & FARDHU KIFAYAH
   ========================================================================== */

.fiqah-fardhu-container {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
}

.fiqah-fardhu-tabs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.fiqah-fardhu-tab-btn {
  border-radius: 24px;
  padding: 22px 26px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
  box-sizing: border-box;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.fiqah-fardhu-tab-btn.active {
  background: #b98f54;
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(185, 143, 84, 0.35);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -4px;
}

.fiqah-fardhu-tab-btn.inactive {
  background: #ffffff;
  border: 2.2px solid #5d9ba6;
  color: #1e293b;
  box-shadow: 0 4px 14px rgba(93, 155, 166, 0.12);
}

.fiqah-fardhu-tab-btn.inactive:hover {
  transform: translateY(-2px);
  border-color: #b98f54;
}

.fiqah-fardhu-tab-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.fiqah-fardhu-tab-btn.active .fiqah-fardhu-tab-title {
  color: #ffffff;
}

.fiqah-fardhu-tab-btn.inactive .fiqah-fardhu-tab-title {
  color: #0e2340;
}

.fiqah-fardhu-tab-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.fiqah-fardhu-tab-btn.active .fiqah-fardhu-tab-desc {
  color: rgba(255, 255, 255, 0.96);
}

.fiqah-fardhu-tab-btn.inactive .fiqah-fardhu-tab-desc {
  color: #1e293b;
}

.fiqah-fardhu-bottom-frame {
  background: #b98f54;
  border-radius: 24px;
  padding: 18px;
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(185, 143, 84, 0.28);
  position: relative;
  z-index: 1;
}

.fiqah-fardhu-bottom-frame.tab-ain {
  border-top-left-radius: 0;
}

.fiqah-fardhu-bottom-frame.tab-kifayah {
  border-top-right-radius: 0;
}

.fiqah-fardhu-img-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}

.fiqah-fardhu-img-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.fiqah-fardhu-content-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.fiqah-brown-pill {
  background: #a4763e;
  color: #ffffff;
  border-radius: 999px;
  padding: 7px 24px;
  font-weight: 700;
  width: fit-content;
  margin-bottom: 16px;
  font-size: 0.98rem;
  box-shadow: 0 2px 8px rgba(164, 118, 62, 0.25);
  letter-spacing: 0.02em;
}

.fiqah-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fiqah-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #1e293b;
  font-weight: 500;
  text-align: left;
}

.fiqah-bullet-dot {
  font-size: 1.2rem;
  line-height: 1.2;
  color: #1e293b;
  flex-shrink: 0;
}

/* ==========================================================================
   HALAMAN C: LIMA HUKUM TAKLIFI
   ========================================================================== */

.fiqah-hukum-container {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fiqah-hukum-tabs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  padding: 4px 4px 8px 4px;
  scrollbar-width: none;
}

.fiqah-hukum-tabs-row::-webkit-scrollbar {
  display: none;
}

.fiqah-hukum-tab-btn {
  border-radius: 20px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  justify-content: center;
  min-width: 145px;
  box-sizing: border-box;
  font-weight: 800;
  font-size: 1.15rem;
}

.fiqah-hukum-tab-btn.active {
  background: #d8af60;
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(216, 175, 96, 0.38);
  transform: translateY(-2px);
}

.fiqah-hukum-tab-btn.inactive {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  color: #0e2340;
  box-shadow: 0 2px 8px rgba(202, 108, 77, 0.08);
}

.fiqah-hukum-tab-btn.inactive:hover {
  transform: translateY(-2px);
  border-color: #d8af60;
}

.fiqah-hukum-num-badge {
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.fiqah-hukum-tab-btn.active .fiqah-hukum-num-badge {
  background: #ffffff;
  color: #247b85;
}

.fiqah-hukum-tab-btn.inactive .fiqah-hukum-num-badge {
  background: #0e2340;
  color: #ffffff;
}

.fiqah-dots-indicator-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 10px 0;
}

.fiqah-dot-indicator {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: #cbd5e1;
  transition: all 0.2s ease;
}

.fiqah-dot-indicator.active {
  background: #0e2340;
  width: 30px;
}

.fiqah-hukum-detail-box {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 24px;
  align-items: center;
  box-sizing: border-box;
}

.fiqah-hukum-img-frame {
  width: 100%;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-hukum-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.fiqah-hukum-content-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  text-align: left;
}

.fiqah-hukum-desc-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
}

/* ==========================================================================
   HALAMAN D: PENGAMALAN DALAM KEHIDUPAN
   ========================================================================== */

.fiqah-pengamalan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
}

.fiqah-pengamalan-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.fiqah-pengamalan-img-box {
  width: 100%;
  height: 290px;
  border-radius: 20px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-pengamalan-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.fiqah-pengamalan-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
  text-align: left;
}

/* ==========================================================================
   SOKONGAN JAWI BAGI FIQAH
   ========================================================================== */

body.jawi-mode .fiqah-box-text,
body.jawi-mode .fiqah-gold-card-desc,
body.jawi-mode .fiqah-fardhu-tab-desc,
body.jawi-mode .fiqah-bullet-item,
body.jawi-mode .fiqah-hukum-desc-text,
body.jawi-mode .fiqah-pengamalan-text {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .fiqah-fardhu-tab-btn {
  text-align: right;
}

body.jawi-mode .fiqah-hukum-content-side {
  align-items: flex-end;
  text-align: right;
}

body.jawi-mode .fiqah-icon-header-row {
  flex-direction: row-reverse;
}

body.jawi-mode .fiqah-bullet-item {
  flex-direction: row-reverse;
}

body.jawi-mode .fiqah-bersuci-hukum-content {
  align-items: flex-end;
  text-align: right;
}

body.jawi-mode .fiqah-water-tab-btn {
  text-align: right;
  align-items: flex-end;
}

body.jawi-mode .fiqah-kaifiat-text {
  direction: rtl;
  text-align: right;
}

/* ==========================================================================
   TOPIK 2: BERSUCI ASAS KEBERSIHAN STYLES
   ========================================================================== */

/* Topik 2 Slide A: Hukum Bersuci Box */
.fiqah-bersuci-hukum-box {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 20px 24px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 24px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-bersuci-hukum-img {
  width: 100%;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid #5d9ba6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.fiqah-bersuci-hukum-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.fiqah-bersuci-hukum-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  text-align: left;
}

/* Topik 2 Slide B: 4 Jenis Air Tabs */
.fiqah-water-tabs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 18px;
}

.fiqah-water-tab-btn {
  border-radius: 22px;
  padding: 16px 18px;
  min-height: 130px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  text-align: left;
}

.fiqah-water-tab-btn.active {
  background: #d8af60;
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(216, 175, 96, 0.35);
  transform: translateY(-2px);
}

.fiqah-water-tab-btn.inactive {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  color: #0e2340;
  box-shadow: 0 4px 12px rgba(202, 108, 77, 0.08);
}

.fiqah-water-tab-btn.inactive:hover {
  transform: translateY(-2px);
  border-color: #d8af60;
}

.fiqah-water-num-badge {
  border-radius: 12px;
  padding: 5px 14px;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
}

.fiqah-water-tab-btn.active .fiqah-water-num-badge {
  background: #ffffff;
  color: #247b85;
}

.fiqah-water-tab-btn.inactive .fiqah-water-num-badge {
  background: #0e2340;
  color: #ffffff;
}

.fiqah-water-tab-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
}

.fiqah-water-tab-btn.active .fiqah-water-tab-title {
  color: #ffffff;
}

.fiqah-water-tab-btn.inactive .fiqah-water-tab-title {
  color: #0e2340;
}

.fiqah-water-detail-box {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 24px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

.fiqah-water-img-frame {
  width: 100%;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid #5d9ba6;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-water-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Topik 2 Slide D: Kaifiat Bersuci Cards */
.fiqah-kaifiat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 980px;
  box-sizing: border-box;
}

.fiqah-kaifiat-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.fiqah-kaifiat-img-box {
  width: 100%;
  height: 290px;
  border-radius: 20px;
  border: 2px solid #5d9ba6;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-kaifiat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.fiqah-kaifiat-pill {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 8px 30px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 3px 10px rgba(14, 35, 64, 0.22);
  letter-spacing: 0.03em;
  text-align: center;
}

.fiqah-kaifiat-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

/* ==========================================================================
   RESPONSIF FIQAH (TABLET & MUDAH ALIH)
   ========================================================================== */

@media (max-width: 991px) {

  .fiqah-def-top-row,
  .fiqah-pembahagian-grid,
  .fiqah-fardhu-tabs-row,
  .fiqah-pengamalan-grid,
  .fiqah-kaifiat-grid {
    grid-template-columns: 1fr;
  }

  .fiqah-fardhu-bottom-frame,
  .fiqah-hukum-detail-box,
  .fiqah-bersuci-hukum-box,
  .fiqah-water-detail-box {
    grid-template-columns: 1fr;
  }

  .fiqah-water-tabs-row {
    grid-template-columns: 1fr 1fr;
  }

  .fiqah-fardhu-tab-btn.active {
    border-radius: 24px;
    margin-bottom: 0;
  }

  .fiqah-fardhu-bottom-frame.tab-ain,
  .fiqah-fardhu-bottom-frame.tab-kifayah {
    border-radius: 24px;
  }

  .fiqah-hukum-img-frame,
  .fiqah-fardhu-img-card,
  .fiqah-pengamalan-img-box,
  .fiqah-bersuci-hukum-img,
  .fiqah-water-img-frame,
  .fiqah-kaifiat-img-box {
    height: 230px;
  }

  .fiqah-hukum-tabs-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .fiqah-water-tabs-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   NAJIS, ISTINJAK, WUDUK & SOLAT EXPANSION STYLES
   ========================================================================== */

/* --- Najis Slide A: Pengertian & 3 Jenis Najis --- */
.fiqah-najis-intro-box {
  background: #ca6c4d;
  color: #ffffff;
  border-radius: 22px;
  padding: 16px 24px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(202, 108, 77, 0.25);
}

.fiqah-najis-intro-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fiqah-najis-intro-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.96;
}

.fiqah-najis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-najis-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 20px 18px;
  box-shadow: 0 6px 18px rgba(202, 108, 77, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}

.fiqah-najis-pill {
  background: #0e2340;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 7px 20px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-align: center;
  width: fit-content;
}

.fiqah-najis-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0e2340;
  margin: 0;
  text-align: center;
}

.fiqah-najis-card-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
  margin: 0;
  text-align: center;
}

.fiqah-najis-contoh-box {
  background: #fdf6ec;
  border: 1px dashed #d8af60;
  border-radius: 14px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-najis-contoh-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ca6c4d;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.fiqah-najis-contoh-text {
  font-size: 0.92rem;
  color: #1e293b;
  margin: 0;
  line-height: 1.45;
}

/* --- Vertical Scrollable Stack (Najis Slide B & Solat Slide D) --- */
.fiqah-vertical-scroll-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.fiqah-scroll-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(202, 108, 77, 0.1);
  display: grid;
  grid-template-columns: 36fr 64fr;
  gap: 22px;
  align-items: center;
  box-sizing: border-box;
}

.fiqah-scroll-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.fiqah-scroll-card-badge {
  background: #0e2340;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 999px;
  text-align: center;
  width: fit-content;
}

.fiqah-scroll-img-frame {
  width: 100%;
  height: 175px;
  border-radius: 16px;
  border: 2px solid #5d9ba6;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-scroll-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiqah-scroll-card-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.fiqah-scroll-card-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0e2340;
  margin: 0;
}

.fiqah-scroll-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiqah-scroll-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #1e293b;
}

.fiqah-scroll-step-num {
  background: #d8af60;
  color: #ffffff;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- Generic Side-by-Side Card Layouts (Istinjak A, Wuduk A, Solat A) --- */
.fiqah-side-by-side-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 26px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(202, 108, 77, 0.12);
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: 26px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-side-card-img-box {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  border: 2px solid #5d9ba6;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-side-card-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiqah-side-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  text-align: left;
}

/* --- 2-Column Split: Left Big Card + Right Stacked Cards (Istinjak B, Wuduk B) --- */
.fiqah-split-2col-layout {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: 22px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-card-bordered {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: 0 5px 18px rgba(202, 108, 77, 0.1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiqah-stacked-cards-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.fiqah-alat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
  width: 100%;
}

.fiqah-alat-mini-card {
  background: #fdfaf6;
  border: 1.5px solid #d8af60;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.fiqah-alat-mini-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.fiqah-alat-mini-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0e2340;
}

/* --- Rukun Wuduk 6 Grid --- */
.fiqah-rukun-wuduk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}

.fiqah-rukun-mini-card {
  background: #fdf8f4;
  border: 1.5px solid #ca6c4d;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fiqah-rukun-mini-num {
  background: #0e2340;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.fiqah-rukun-mini-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.35;
}

/* --- Interactive Two-Tab Switcher (Istinjak C, Istinjak D) --- */
.fiqah-two-tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 18px;
}

.fiqah-two-tabs-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.fiqah-two-tab-btn {
  border-radius: 20px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.fiqah-two-tab-btn.active {
  background: #d8af60;
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 18px rgba(216, 175, 96, 0.35);
  transform: translateY(-2px);
}

.fiqah-two-tab-btn.inactive {
  background: #ffffff;
  color: #0e2340;
  border: 2px solid #ca6c4d;
  box-shadow: 0 4px 12px rgba(202, 108, 77, 0.08);
}

.fiqah-two-tab-btn.inactive:hover {
  transform: translateY(-2px);
  border-color: #d8af60;
}

.fiqah-two-tab-num {
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.fiqah-two-tab-btn.active .fiqah-two-tab-num {
  background: #ffffff;
  color: #247b85;
}

.fiqah-two-tab-btn.inactive .fiqah-two-tab-num {
  background: #0e2340;
  color: #ffffff;
}

.fiqah-two-tab-title {
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0;
}

/* --- Solat Slide B: 4-Column Layout --- */
.fiqah-solat-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-solat-col {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 22px;
  padding: 16px 14px;
  box-shadow: 0 4px 14px rgba(202, 108, 77, 0.1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiqah-solat-batal-col {
  background: #fff7f5;
  border: 2px solid #e05d44;
  border-radius: 22px;
  padding: 16px 14px;
  box-shadow: 0 4px 14px rgba(224, 93, 68, 0.15);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiqah-solat-col-header {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
}

.fiqah-solat-col .fiqah-solat-col-header {
  background: #0e2340;
  color: #ffffff;
}

/* --- Solat Slide B: Solid Table Card Grid (2nd Screenshot Design) --- */
.fiqah-solat-table-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 1fr;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-solat-card-col {
  background: #2b7a84;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(43, 122, 132, 0.18);
}

.fiqah-solat-card-col.coral-theme {
  background: #d85c45;
  box-shadow: 0 4px 16px rgba(216, 92, 69, 0.18);
}

.fiqah-solat-card-header {
  background: #0e2340;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  padding: 12px 10px;
  line-height: 1.3;
}

.fiqah-solat-card-col.coral-theme .fiqah-solat-card-header {
  background: #0e2340;
}

.fiqah-solat-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fiqah-solat-table-cell {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.fiqah-solat-table-cell:last-child {
  border-bottom: none;
}

body.jawi-mode .fiqah-solat-table-cell {
  direction: rtl;
  text-align: center;
}

/* --- Solat Slide C: 3 Tabs (Sunat Ab'adh, Sunat Hai'at, Perkara Makruh) --- */
.fiqah-three-tabs-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.fiqah-three-tab-btn {
  border-radius: 20px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 110px;
  box-sizing: border-box;
}

.fiqah-three-tab-btn.active {
  background: #d8af60;
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 18px rgba(216, 175, 96, 0.35);
  transform: translateY(-2px);
}

.fiqah-three-tab-btn.inactive {
  background: #ffffff;
  color: #0e2340;
  border: 2px solid #ca6c4d;
  box-shadow: 0 4px 12px rgba(202, 108, 77, 0.08);
}

.fiqah-three-tab-btn.inactive:hover {
  transform: translateY(-2px);
  border-color: #d8af60;
}

.fiqah-three-tab-num {
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.fiqah-three-tab-btn.active .fiqah-three-tab-num {
  background: #ffffff;
  color: #247b85;
}

.fiqah-three-tab-btn.inactive .fiqah-three-tab-num {
  background: #0e2340;
  color: #ffffff;
}

.fiqah-three-tab-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.fiqah-najis-num-badge {
  background: #0e2340;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.fiqah-alat-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-alat-card {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 20px 18px;
  box-shadow: 0 6px 18px rgba(202, 108, 77, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-sizing: border-box;
}

.fiqah-alat-num-badge {
  background: #0e2340;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-alat-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0e2340;
  margin: 0;
}

.fiqah-alat-img-box {
  width: 100%;
  height: 150px;
  border-radius: 16px;
  border: 2px solid #5d9ba6;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiqah-alat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiqah-alat-card-text {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #334155;
  margin: 0;
}

/* --- Syarat & Kaifiat / Adab & Hikmah Split Layout (Tan Left + White Right) --- */
.fiqah-syarat-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
  box-sizing: border-box;
}

.fiqah-syarat-left-panel {
  background: #fdf6ec;
  border: 2px solid #d8af60;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(216, 175, 96, 0.15);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiqah-syarat-right-panel {
  background: #ffffff;
  border: 2px solid #ca6c4d;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(202, 108, 77, 0.1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiqah-syarat-panel-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #d8af60;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(216, 175, 96, 0.4);
}

.fiqah-syarat-panel-title.text-navy {
  color: #0e2340;
  border-bottom-color: rgba(14, 35, 64, 0.2);
}

.fiqah-syarat-img-box {
  width: 100%;
  height: 160px;
  border-radius: 16px;
  border: 2px solid #5d9ba6;
  overflow: hidden;
  background: #f8fafc;
}

.fiqah-syarat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Rukun Wuduk Full Layout & Image Grid --- */
.fiqah-rukun-wuduk-full-layout {
  width: 100%;
}

.fiqah-rukun-image-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.fiqah-rukun-img-card {
  background: #fdf8f4;
  border: 1.5px solid #ca6c4d;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fiqah-rukun-img-frame {
  width: 100%;
  height: 130px;
  background: #f8fafc;
  overflow: hidden;
}

.fiqah-rukun-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiqah-rukun-card-footer {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
}

.fiqah-rukun-num-badge {
  background: #0e2340;
  color: #ffffff;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.fiqah-rukun-card-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

/* --- Solat Rukun Grouped Sub-sections --- */
.fiqah-rukun-group-section {
  margin-bottom: 10px;
}

.fiqah-rukun-sub-badge {
  background: #fdf6ec;
  color: #d8af60;
  border: 1px solid #d8af60;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  display: inline-block;
}

/* Jawi RTL adjustments for new components */
body.jawi-mode .fiqah-najis-intro-desc,
body.jawi-mode .fiqah-najis-card-desc,
body.jawi-mode .fiqah-najis-contoh-text,
body.jawi-mode .fiqah-scroll-card-right,
body.jawi-mode .fiqah-scroll-step-item,
body.jawi-mode .fiqah-side-card-content,
body.jawi-mode .fiqah-solat-item,
body.jawi-mode .fiqah-rukun-mini-text,
body.jawi-mode .fiqah-syarat-left-panel,
body.jawi-mode .fiqah-syarat-right-panel,
body.jawi-mode .fiqah-alat-card-text {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .fiqah-syarat-panel-title {
  text-align: right;
}

body.jawi-mode .fiqah-scroll-step-item,
body.jawi-mode .fiqah-solat-item {
  flex-direction: row-reverse;
}

body.jawi-mode .fiqah-two-tab-btn,
body.jawi-mode .fiqah-three-tab-btn {
  text-align: right;
  align-items: flex-end;
}

body.jawi-mode .fiqah-two-tab-btn {
  flex-direction: row-reverse;
}

body.jawi-mode .fiqah-rukun-mini-card {
  flex-direction: row-reverse;
}

/* Responsive adjustments */
@media (max-width: 991px) {

  .fiqah-najis-grid,
  .fiqah-three-tabs-header,
  .fiqah-split-2col-layout,
  .fiqah-solat-table-grid {
    grid-template-columns: 1fr;
  }

  .fiqah-scroll-card,
  .fiqah-side-by-side-card {
    grid-template-columns: 1fr;
  }

  .fiqah-scroll-img-frame,
  .fiqah-side-card-img-box {
    height: 220px;
  }
}

/* ==========================================================================
   MODUL PEMBELAJARAN AKHLAK & TASAWUF (REKA BENTUK RUJUKAN TEPAT DK 2027)
   ========================================================================== */

.akhlak-container-wrapper {
  background: transparent;
  border-radius: 0;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 24px 22px;
  position: relative;
  overflow-y: auto;
}

/* Navigasi Atas Akhlak */
.akhlak-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1040px;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
}

.akhlak-nav-group-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.akhlak-nav-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.akhlak-nav-arrow-btn:hover:not(:disabled) {
  background: #c89e4e;
  transform: scale(1.06);
}

.akhlak-nav-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.akhlak-nav-center-capsule {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 12px 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(14, 35, 64, 0.3);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.akhlak-gold-icon {
  color: #deb265;
  font-size: 19px;
}

.akhlak-lightbulb-square-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #d8af60;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(216, 175, 96, 0.4);
  flex-shrink: 0;
}

.akhlak-lightbulb-square-btn:hover {
  background: #c89e4e;
  transform: scale(1.06);
}

/* Badan Slaid Akhlak */
.akhlak-slide-body-content {
  width: 100%;
  max-width: 1040px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.akhlak-content-center {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.akhlak-section-subtitle {
  color: #174644;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.akhlak-desc-lead {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 500;
}

/* Slide 1: Pengertian Akhlak & Tasawuf */
.akhlak-maksud-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.akhlak-card-box {
  background: #ffffff;
  border: 1.5px solid #d88a66;
  border-radius: 18px;
  padding: 18px 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 14px rgba(216, 138, 102, 0.08);
}

.akhlak-card-navy-pill {
  background: #0e2340;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 8px 32px;
  border-radius: 999px;
  margin-bottom: 16px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 8px rgba(14, 35, 64, 0.2);
}

.akhlak-box-text {
  color: #1e293b;
  font-size: 1.02rem;
  line-height: 1.75;
  width: 100%;
  text-align: left;
}

.akhlak-bullet-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  width: 100%;
}

.akhlak-bullet-list li {
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 6px;
  color: #1e293b;
}

.akhlak-ghazali-card {
  background: #ffffff;
  border: 1.5px solid #d88a66;
  border-radius: 18px;
  padding: 20px 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 14px rgba(216, 138, 102, 0.08);
  width: 100%;
}

.akhlak-gold-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.akhlak-gold-box {
  background: #aa7e4e;
  color: #ffffff;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 1.02rem;
  line-height: 1.65;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 10px rgba(170, 126, 78, 0.25);
}

/* Slide 2: Tuntutan Berakhlak Mulia */
.akhlak-tuntutan-scroll-container {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

.akhlak-tuntutan-scroll-container::-webkit-scrollbar,
.akhlak-cards-scroll-container::-webkit-scrollbar {
  width: 7px;
}

.akhlak-tuntutan-scroll-container::-webkit-scrollbar-track,
.akhlak-cards-scroll-container::-webkit-scrollbar-track {
  background: rgba(46, 116, 124, 0.08);
  border-radius: 10px;
}

.akhlak-tuntutan-scroll-container::-webkit-scrollbar-thumb,
.akhlak-cards-scroll-container::-webkit-scrollbar-thumb {
  background: #2e747c;
  border-radius: 10px;
}

.akhlak-tuntutan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.akhlak-tuntutan-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.akhlak-tuntutan-header {
  background: #ffffff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.akhlak-num-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.akhlak-tuntutan-title {
  color: #0e2340;
  font-size: 1.02rem;
  font-weight: 800;
}

.akhlak-tuntutan-body {
  background: #337c86;
  color: #ffffff;
  padding: 14px 18px;
  font-size: 0.98rem;
  line-height: 1.65;
  flex: 1;
}

/* Slide 3: Tujuan Berakhlak Mulia */
.akhlak-tujuan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.akhlak-tujuan-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.akhlak-tujuan-header {
  background: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.akhlak-check-badge {
  color: #ef4444;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.akhlak-tujuan-title {
  color: #0e2340;
  font-size: 1.05rem;
  font-weight: 800;
}

.akhlak-tujuan-body {
  background: #337c86;
  color: #ffffff;
  padding: 16px 20px;
  font-size: 0.98rem;
  line-height: 1.7;
  flex: 1;
}

.akhlak-tujuan-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.akhlak-tujuan-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.akhlak-tujuan-bullet {
  color: #ffffff;
  font-weight: bold;
  flex-shrink: 0;
}

/* Slide 4 & 5: Banner & Horizontal Cards */
.akhlak-green-banner {
  background: #c2e3d2;
  color: #174644;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.65;
  padding: 14px 24px;
  border-radius: 22px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(194, 227, 210, 0.4);
}

.akhlak-cards-scroll-container {
  max-height: 540px;
  overflow-y: auto;
  padding-right: 8px;
}

.akhlak-horizontal-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  background: transparent;
  align-items: stretch;
}

.akhlak-card-img-box {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  min-height: 180px;
  background: #f1f5f9;
}

.akhlak-card-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.akhlak-card-right {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.akhlak-card-top-bar {
  background: #2e747c;
  color: #ffffff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.akhlak-card-top-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
}

.akhlak-card-white-body {
  background: #ffffff;
  padding: 16px 20px;
  flex: 1;
  color: #1e293b;
}

.akhlak-card-huraian {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #1e293b;
}

.akhlak-contoh-wrapper {
  margin-top: 8px;
}

.akhlak-contoh-label {
  color: #0e2340;
  font-size: 0.98rem;
}

.akhlak-contoh-list,
.akhlak-amalan-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.akhlak-contoh-list li,
.akhlak-amalan-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.96rem;
  line-height: 1.6;
}

.akhlak-dot {
  color: #2e747c;
  font-weight: bold;
  flex-shrink: 0;
}

/* ==========================================================================
   JAWI MODE OVERRIDES UNTUK MODUL AKHLAK
   ========================================================================== */

body.jawi-mode .akhlak-section-subtitle,
body.jawi-mode .akhlak-desc-lead,
body.jawi-mode .akhlak-box-text,
body.jawi-mode .akhlak-bullet-list,
body.jawi-mode .akhlak-gold-box,
body.jawi-mode .akhlak-tuntutan-header,
body.jawi-mode .akhlak-tuntutan-body,
body.jawi-mode .akhlak-tujuan-header,
body.jawi-mode .akhlak-tujuan-body,
body.jawi-mode .akhlak-green-banner,
body.jawi-mode .akhlak-card-top-bar,
body.jawi-mode .akhlak-card-white-body,
body.jawi-mode .akhlak-contoh-label,
body.jawi-mode .akhlak-definisi-banner-header,
body.jawi-mode .akhlak-col-title-bar,
body.jawi-mode .akhlak-col-content-box,
body.jawi-mode .akhlak-mini-label-box {
  direction: rtl !important;
  text-align: right !important;
  font-family: var(--font-jawi) !important;
}

body.jawi-mode .akhlak-definisi-banner-header,
body.jawi-mode .akhlak-col-title-bar,
body.jawi-mode .akhlak-mini-label-box {
  text-align: center !important;
}

body.jawi-mode .akhlak-tuntutan-header,
body.jawi-mode .akhlak-tujuan-header,
body.jawi-mode .akhlak-card-top-bar {
  flex-direction: row-reverse;
}

body.jawi-mode .akhlak-tujuan-list li,
body.jawi-mode .akhlak-contoh-list li,
body.jawi-mode .akhlak-amalan-list li {
  flex-direction: row-reverse;
}


/* ==========================================================================
   TOPIK 2: DEFINISI BANNER & FIVE CARDS ROW
   ========================================================================== */

.akhlak-definisi-banner-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  width: 100%;
  border: 1.5px solid rgba(14, 35, 64, 0.15);
  background: #ffffff;
}

.akhlak-definisi-banner-header {
  background: #0e2340;
  color: #ffffff;
  text-align: center;
  padding: 12px 24px;
}

.akhlak-definisi-banner-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.akhlak-definisi-banner-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  width: 100%;
  align-items: stretch;
}

.akhlak-definisi-col-left,
.akhlak-definisi-col-right {
  display: flex;
  flex-direction: column;
}

.akhlak-col-title-bar {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 10px 18px;
  text-align: center;
}

.akhlak-col-title-bar.teal-bg {
  background: #2e747c;
}

.akhlak-col-title-bar.gold-bg {
  background: #d8af60;
}

.akhlak-col-content-box {
  padding: 20px 24px;
  font-size: 1.02rem;
  line-height: 1.75;
  flex: 1;
  display: flex;
  align-items: center;
}

.akhlak-col-content-box.mint-bg {
  background: #c2e3d2;
  color: #174644;
  font-weight: 600;
}

.akhlak-col-content-box.cream-bg {
  background: #fdfbf7;
  color: #1e293b;
}

.akhlak-five-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 100%;
}

.akhlak-mini-example-card {
  border: 1.5px solid #2e747c;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.akhlak-mini-example-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(46, 116, 124, 0.18);
}

.akhlak-mini-img-box {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #f8fafc;
}

.akhlak-mini-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.akhlak-mini-label-box {
  background: #c2e3d2;
  color: #174644;
  font-weight: 800;
  font-size: 0.98rem;
  text-align: center;
  padding: 8px 10px;
}

/* ==========================================================================
   TOPIK 2: ENAM DISIPLIN DIRI & AMALAN STACKED BARS (SLIDE D1 - D4)
   ========================================================================== */

.akhlak-section-title-d {
  color: #2e747c;
  font-size: 1.35rem;
  font-weight: 800;
  font-family: 'Nunito', 'Poppins', sans-serif;
  text-align: left;
  margin: 0;
}

.akhlak-top-bullet {
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.6;
  margin: 0;
}

.akhlak-disiplin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.akhlak-disiplin-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  background: #2e747c;
  border: 1.5px solid #2e747c;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.akhlak-disiplin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(46, 116, 124, 0.18);
}

.akhlak-disiplin-card-header {
  background: #ffffff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.akhlak-disiplin-num {
  background: #ff5722;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.akhlak-disiplin-title {
  color: #0e2340;
  font-weight: 800;
  font-size: 1.05rem;
}

.akhlak-disiplin-card-body {
  background: #2e747c;
  color: #ffffff;
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.akhlak-disiplin-desc {
  font-weight: 600;
}

.akhlak-disiplin-contoh {
  color: #e2f1ee;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Stacked Bars Layout (Slide D2, D3, D4) */
.akhlak-stacked-bars-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.akhlak-stacked-img-col {
  width: 100%;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  background: #f8fafc;
}

.akhlak-stacked-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.akhlak-stacked-bars-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.akhlak-stacked-col-title {
  color: #0e2340;
  font-weight: 800;
  font-size: 1.08rem;
  text-align: left;
}

.akhlak-pill-bar {
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.55;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.akhlak-pill-bar:hover {
  transform: translateX(4px);
}

.akhlak-pill-bar.mint-bar {
  background: #c2e3d2;
  color: #143d3b;
}

.akhlak-pill-bar.teal-bar {
  background: #2e747c;
  color: #ffffff;
}

/* Jawi RTL overrides for Section D */
body.jawi-mode .akhlak-section-title-d,
body.jawi-mode .akhlak-top-bullet,
body.jawi-mode .akhlak-stacked-col-title,
body.jawi-mode .akhlak-pill-bar,
body.jawi-mode .akhlak-disiplin-card-body {
  direction: rtl !important;
  text-align: right !important;
  font-family: var(--font-jawi) !important;
}

body.jawi-mode .akhlak-disiplin-card-header {
  flex-direction: row-reverse;
  direction: rtl;
  text-align: right;
  font-family: var(--font-jawi) !important;
}


body.jawi-mode .akhlak-pill-bar:hover {
  transform: translateX(-4px);
}

/* Responsive adjustments */
@media (max-width: 991px) {

  .akhlak-maksud-top-row,
  .akhlak-gold-box-grid,
  .akhlak-tuntutan-grid,
  .akhlak-tujuan-grid {
    grid-template-columns: 1fr;
  }

  .akhlak-horizontal-card,
  body.jawi-mode .akhlak-horizontal-card {
    grid-template-columns: 1fr;
  }

  .akhlak-card-img-box,
  body.jawi-mode .akhlak-card-img-box {
    order: 1;
    height: 220px;
  }

  .akhlak-card-right,
  body.jawi-mode .akhlak-card-right {
    order: 2;
  }

  .akhlak-definisi-banner-grid,
  body.jawi-mode .akhlak-definisi-banner-grid {
    grid-template-columns: 1fr;
  }

  .akhlak-five-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .akhlak-disiplin-grid {
    grid-template-columns: 1fr;
  }

  .akhlak-stacked-bars-layout,
  body.jawi-mode .akhlak-stacked-bars-layout {
    grid-template-columns: 1fr;
  }

  .akhlak-stacked-img-col,
  body.jawi-mode .akhlak-stacked-img-col {
    order: 1;
    height: 240px;
  }

  .akhlak-stacked-bars-col,
  body.jawi-mode .akhlak-stacked-bars-col {
    order: 2;
  }
}

/* ==========================================================================
   PENILAIAN & REFLEKSI PENTAKSIRAN (DK 2027) STYLES
   ========================================================================== */

.penilaian-nav-wrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.penilaian-nav-btn {
  background: #ffffff;
  color: #0C1C2E;
  border: 2px solid rgba(217, 165, 76, 0.4);
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(12, 28, 46, 0.05);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.penilaian-nav-btn:hover {
  border-color: var(--accent-gold);
  background: #fdfaf3;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 165, 76, 0.2);
}

.penilaian-nav-btn.active {
  background: linear-gradient(135deg, #0C1C2E 0%, #1e3a5f 100%);
  color: #facc15;
  border-color: var(--accent-gold);
  box-shadow: 0 6px 18px rgba(12, 28, 46, 0.25);
}

/* Reward TP Badge in Quiz Score */
.reward-tp-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(217, 165, 76, 0.5);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}

.reward-tp-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.reward-tp-badge.tp-4 {
  background: #10b981;
  color: #ffffff;
}

.reward-tp-badge.tp-3 {
  background: #3b82f6;
  color: #ffffff;
}

.reward-tp-badge.tp-2 {
  background: #f59e0b;
  color: #ffffff;
}

.reward-tp-badge.tp-1 {
  background: #ef4444;
  color: #ffffff;
}

/* Refleksi DK 2027 Container & Cards */
.refleksi-dk2027-container {
  text-align: start;
}

.refleksi-dk2027-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #effcf6 100%);
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(217, 165, 76, 0.15);
}

.refleksi-tp-indicator-badge {
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.refleksi-tp-indicator-badge.tp-4 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}

.refleksi-tp-indicator-badge.tp-3 {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}

.refleksi-tp-indicator-badge.tp-2 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}

.refleksi-tp-indicator-badge.tp-1 {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}

.refleksi-tp-indicator-badge.tp-unrated {
  background: linear-gradient(135deg, #0C1C2E 0%, #1e3a5f 100%);
  color: #facc15;
  border: 2px solid var(--accent-gold);
}

.refleksi-sk-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(12, 28, 46, 0.04);
}

.refleksi-sk-header {
  background: linear-gradient(135deg, #0C1C2E 0%, #17324d 100%);
  color: #ffffff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.refleksi-sk-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  color: #ffffff;
}

.refleksi-rubric-toggle-btn {
  background: rgba(217, 165, 76, 0.25);
  border: 1px solid var(--accent-gold);
  color: #facc15;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.refleksi-rubric-toggle-btn:hover {
  background: var(--accent-gold);
  color: #0C1C2E;
}

.refleksi-rubric-panel {
  background: #f8fafc;
  border-bottom: 1.5px dashed #cbd5e1;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.refleksi-rubric-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.refleksi-rubric-tp-label {
  font-weight: 800;
  font-size: 0.8rem;
  margin-bottom: 4px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
}

.refleksi-rubric-tp-label.tp-4 {
  background: #d1fae5;
  color: #065f46;
}

.refleksi-rubric-tp-label.tp-3 {
  background: #dbeafe;
  color: #1e40af;
}

.refleksi-rubric-tp-label.tp-2 {
  background: #fef3c7;
  color: #92400e;
}

.refleksi-rubric-tp-label.tp-1 {
  background: #fee2e2;
  color: #991b1b;
}

.refleksi-rubric-tp-desc {
  font-size: 0.82rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

.refleksi-item-row-dk {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transition: background 0.2s;
}

.refleksi-item-row-dk:last-child {
  border-bottom: none;
}

.refleksi-item-row-dk:hover {
  background: #fdfaf3;
}

.refleksi-item-sp-badge {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 6px;
  margin-right: 8px;
  display: inline-block;
}

.refleksi-item-text-dk {
  font-size: 0.95rem;
  color: #1e293b;
  font-weight: 500;
  flex: 1;
  min-width: 250px;
}

.refleksi-choices-dk {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-tp-choice {
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-tp-choice:hover {
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

.btn-tp-choice.active-tp4 {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-tp-choice.active-tp3 {
  background: #3b82f6;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-tp-choice.active-tp2 {
  background: #f59e0b;
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-tp-choice.active-tp1 {
  background: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* RTL Jawi Refleksi Fixes */
[dir="rtl"] .refleksi-item-sp-badge {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .refleksi-dk2027-container {
  text-align: right;
}

[dir="rtl"] .refleksi-item-text-dk {
  text-align: right;
}

/* =================================================== */
/* 📱 KUNCI ORIENTASI LANDSKAP (PORTRAIT LOCK OVERLAY) */
/* =================================================== */
.orientation-lock-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at center, rgba(14, 35, 64, 0.97) 0%, rgba(6, 14, 26, 0.99) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 36px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}

/* Aktifkan secara automatik melalui CSS @media orientation: portrait */
@media screen and (orientation: portrait) {
  .orientation-lock-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Sokongan jika diaktifkan melalui kelas JS (cth: fallback atau event deteksi) */
.orientation-lock-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.orientation-lock-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(217, 165, 76, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(217, 165, 76, 0.15);
  border-radius: 28px;
  max-width: 440px;
  width: 92%;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: orientationCardEntrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes orientationCardEntrance {
  0% {
    transform: scale(0.85) translateY(20px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.orientation-phone-animation {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-device-icon {
  font-size: 3.5rem;
  color: #F2DB95;
  filter: drop-shadow(0 4px 12px rgba(217, 165, 76, 0.5));
  animation: phoneRotateLandscape 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  display: inline-block;
}

@keyframes phoneRotateLandscape {

  0%,
  15% {
    transform: rotate(0deg);
  }

  45%,
  70% {
    transform: rotate(-90deg);
  }

  90%,
  100% {
    transform: rotate(0deg);
  }
}

.rotate-arrow-indicator {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--accent-gold);
  color: var(--primary-dark);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  animation: rotatePulse 2s ease-in-out infinite;
}

@keyframes rotatePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.orientation-lock-title {
  color: #ffffff;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

body.jawi-mode .orientation-lock-title {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  line-height: 1.3;
}

.orientation-lock-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.88rem, 2.6vw, 1rem);
  line-height: 1.55;
  margin-bottom: 24px;
  padding: 0 8px;
}

body.jawi-mode .orientation-lock-desc {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-size: clamp(1.15rem, 3.8vw, 1.35rem);
  line-height: 1.45;
  direction: rtl;
}

.orientation-lock-btn {
  background: linear-gradient(135deg, #D9A54C 0%, #C5933A 100%);
  color: #0C1C2E;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(217, 165, 76, 0.4);
  transition: all 0.25s ease;
}

body.jawi-mode .orientation-lock-btn {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-size: clamp(1.15rem, 3.5vw, 1.3rem);
}

.orientation-lock-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(217, 165, 76, 0.6);
  background: linear-gradient(135deg, #f0be65 0%, #d9a54c 100%);
}

.orientation-lock-btn:active {
  transform: scale(0.96);
}

/* =================================================== */
/* 📱 RESPONSIVITI LANDSKAP SEMUA SAIZ SKRIN            */
/* =================================================== */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  .section-container {
    padding-left: clamp(20px, 4vw, 50px);
    padding-right: clamp(20px, 4vw, 50px);
    padding-bottom: clamp(45px, 9vh, 65px);
  }

  .top-nav,
  .islamic-header-bar {
    width: calc(100% + (2 * clamp(20px, 4vw, 50px)));
    margin-left: calc(-1 * clamp(20px, 4vw, 50px));
    margin-right: calc(-1 * clamp(20px, 4vw, 50px));
  }

  .home-title-img {
    max-height: clamp(100px, 30vh, 220px);
    max-width: min(720px, 75vw);
  }

  .btn-start {
    bottom: 14%;
    padding: 10px 36px;
    font-size: 1.05rem;
  }

  .islamic-footer-bar {
    width: clamp(260px, 60vw, 700px);
  }
}

/* Skrin landskap kompak (telefon pintar dalam mod landskap cth. iPhone, Galaxy) */
@media screen and (orientation: landscape) and (max-height: 520px) {
  .section-container {
    padding-left: max(clamp(15px, 3vw, 35px), env(safe-area-inset-left));
    padding-right: max(clamp(15px, 3vw, 35px), env(safe-area-inset-right));
    padding-bottom: max(clamp(20px, 5vh, 35px), env(safe-area-inset-bottom));
  }

  .top-nav,
  .islamic-header-bar {
    width: calc(100% + (2 * clamp(15px, 3vw, 35px)));
    margin-left: calc(-1 * clamp(15px, 3vw, 35px));
    margin-right: calc(-1 * clamp(15px, 3vw, 35px));
    aspect-ratio: 1920 / 175;
  }

  .home-title-img {
    top: clamp(80px, 28vh, 120px);
    max-height: clamp(65px, 24vh, 115px);
    max-width: min(680px, 72vw);
  }

  .btn-start {
    bottom: clamp(34px, 11vh, 52px);
    padding: 8px 32px;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  }

  .frame-scroll-body {
    padding: 12px 18px;
  }

  .menu-carousel-stage {
    height: clamp(170px, 46vh, 240px);
  }

  .subject-card.carousel-card {
    width: clamp(145px, 21vw, 170px);
    height: clamp(165px, 44vh, 220px);
    padding: 10px;
  }

  .subject-card.carousel-card .card-image-box {
    height: clamp(55px, 16vh, 80px);
    margin-bottom: 6px;
  }

  .topic-card {
    min-height: 130px;
    padding: 12px 14px;
  }

  .islamic-footer-bar {
    width: clamp(240px, 52vw, 520px);
    bottom: max(2px, env(safe-area-inset-bottom));
  }

  .footer-text-center {
    font-size: clamp(0.7rem, 1.2vw, 0.95rem);
  }
}

/* Skrin landskap sangat kompak (cth: iPhone Safari dengan palang alamat & tab bar kekal kelihatan) */
@media screen and (orientation: landscape) and (max-height: 420px) {
  .section-container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .top-nav,
  .islamic-header-bar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 1920 / 170;
  }

  .header-nav-left-home,
  .header-nav-left {
    gap: 1.2vw;
    left: max(3%, calc(env(safe-area-inset-left) + 6px));
  }

  .header-nav-right {
    gap: 1.2vw;
    padding-right: max(1.5vw, calc(env(safe-area-inset-right) + 6px));
  }

  .header-icon-btn i {
    font-size: clamp(14px, 1.6vw, 18px);
  }

  .header-lang-badge {
    padding: 2px 8px;
    font-size: 0.8rem;
  }

  .home-title-img {
    top: clamp(66px, 26vh, 92px);
    max-height: clamp(48px, 19vh, 75px);
    max-width: min(520px, 70vw);
  }

  .btn-start {
    bottom: clamp(26px, 9vh, 40px);
    padding: 5px 24px;
    font-size: 0.88rem;
    box-shadow: 0 4px 10px rgba(217, 165, 76, 0.3);
  }

  .islamic-footer-bar {
    width: clamp(200px, 48vw, 420px);
    bottom: max(1px, env(safe-area-inset-bottom));
  }

  .footer-text-center {
    font-size: clamp(0.62rem, 1.1vw, 0.82rem);
  }

  .menu-carousel-stage {
    height: clamp(140px, 42vh, 180px);
  }

  .subject-card.carousel-card {
    width: clamp(125px, 20vw, 150px);
    height: clamp(135px, 40vh, 175px);
    padding: 8px;
    border-radius: 16px;
  }

  .subject-card.carousel-card .card-image-box {
    height: clamp(38px, 12vh, 52px);
    margin-bottom: 3px;
  }

  .subject-card.carousel-card .card-icon {
    font-size: 1.5rem;
  }

  .subject-card.carousel-card .card-title {
    font-size: 0.82rem;
    margin-bottom: 2px;
  }

  .subject-card.carousel-card .carousel-card-btn {
    padding: 2px 8px;
    font-size: 0.7rem;
  }

  .frame-scroll-body {
    padding: 6px 10px;
  }
}

/* ========================================= */
/* DEV TOOL PANEL (FONT & UI SCALER)        */
/* ========================================= */
.devtool-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 13, 26, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.devtool-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.devtool-window {
  width: clamp(340px, 42vw, 500px);
  max-height: 90vh;
  background: linear-gradient(145deg, #0d1b2a, #1b263b);
  border: 2px solid #d9a54c;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 25px rgba(217, 165, 76, 0.25);
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Poppins', system-ui, sans-serif;
  direction: ltr !important;
  text-align: left !important;
  transform: translateY(-16px) scale(0.96);
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.devtool-overlay.show .devtool-window {
  transform: translateY(0) scale(1);
}

.devtool-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(12, 28, 46, 0.85);
  border-bottom: 1px solid rgba(217, 165, 76, 0.3);
}

.devtool-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #d9a54c;
  letter-spacing: 0.5px;
}

.devtool-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.2s ease;
}

.devtool-close-btn:hover {
  color: #ffffff;
  transform: scale(1.15);
}

.devtool-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.devtool-hint {
  font-size: 0.8rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #d9a54c;
  padding: 8px 12px;
  border-radius: 6px;
  line-height: 1.4;
}

.devtool-hint code {
  color: #f6d365;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 4px;
}

.devtool-control-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.devtool-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.devtool-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.devtool-badge {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: monospace;
  background: rgba(217, 165, 76, 0.18);
  border: 1px solid rgba(217, 165, 76, 0.45);
  color: #d9a54c;
  padding: 2px 8px;
  border-radius: 8px;
}

.devtool-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.devtool-btn-step {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.devtool-btn-step:hover {
  background: #d9a54c;
  color: #0c1c2e;
}

.devtool-range {
  flex: 1;
  accent-color: #d9a54c;
  cursor: pointer;
  height: 6px;
}

.devtool-code-preview {
  background: #060e18;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 0.78rem;
  color: #38bdf8;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  position: relative;
  line-height: 1.45;
}

.devtool-footer {
  padding: 12px 20px;
  background: rgba(12, 28, 46, 0.9);
  border-top: 1px solid rgba(217, 165, 76, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.devtool-action-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  border: none;
}

.devtool-btn-copy {
  background: #d9a54c;
  color: #0c1c2e;
}

.devtool-btn-copy:hover {
  background: #f1b759;
  transform: translateY(-1px);
}

.devtool-btn-reset {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.devtool-btn-reset:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   SIRAH DAN TAMADUN ISLAM - DESIGN SYSTEM & COMPONENTS
   ========================================================================== */

/* ==========================================================================
   SIRAH MODULE - Complete Redesign v2
   Colours: Navy #0f2040, Teal #1c8f96, Orange badge #e07b2c, 
            Coral/biodata #b94a38, Gold #e5b95a
   ========================================================================== */

/* ─── OUTER WRAPPER ────────────────────────────────────────────────────── */
.sirah-v2-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f1f5f7;
  border-radius: 18px;
  overflow: hidden;
}

/* ─── NAVIGATION BAR ───────────────────────────────────────────────────── */
.sirah-v2-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px 16px;
  background: #f1f5f7;
  flex-shrink: 0;
}

/* Golden circular arrow buttons */
.sirah-v2-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e5a73b, #d49526);
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(212, 149, 38, 0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
.sirah-v2-arrow:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(212, 149, 38, 0.5);
}
.sirah-v2-arrow:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Dark navy pill */
.sirah-v2-pill {
  flex: 1;
  background: #0d2238;
  color: #ffffff;
  border-radius: 16px;
  padding: 12px 22px;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(13, 34, 56, 0.25);
  letter-spacing: 0.2px;
}

.sirah-v2-pill-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sirah-v2-pill-icon-fallback {
  font-size: 1.2rem;
  color: #e5b95a;
  flex-shrink: 0;
}

/* Golden lightbulb square */
.sirah-v2-bulb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e5a73b, #d49526);
  border: none;
  color: #ffffff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(212, 149, 38, 0.35);
  transition: transform 0.18s;
}
.sirah-v2-bulb:hover { transform: scale(1.08); }

/* ─── BODY ROW (content + dots) ────────────────────────────────────────── */
.sirah-v2-body-row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sirah-v2-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Progress dots (right side) */
.sirah-v2-dots {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 24px;
  gap: 7px;
  flex-shrink: 0;
}
.sirah-v2-dot {
  width: 5px;
  height: 8px;
  border-radius: 3px;
  background: #cbd5e1;
  transition: all 0.25s;
}
.sirah-v2-dot.active {
  background: #0d2238;
  height: 18px;
}

/* ─── SCROLLABLE CONTENT AREA ──────────────────────────────────────────── */
.sirah-scroll-content {
  padding: 16px 20px 24px 20px;
}

/* ─── SECTION LABELS ────────────────────────────────────────────────────── */
.sirah-section-label {
  font-size: 1.08rem;
  font-weight: 700;
  color: #2b787c;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

/* Bold uppercase info heading like "INFO TAMBAHAN: ..." */
.sirah-info-heading {
  font-size: 1.02rem;
  font-weight: 800;
  color: #2b787c;
  text-transform: uppercase;
  margin: 26px 0 16px;
  line-height: 1.45;
  letter-spacing: 0.2px;
}

/* ─── SIMPLE CARD GRID (2-col, white head + teal body) ─────────────────── */
.sirah-simple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.sirah-simple-card {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(20, 60, 70, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sirah-simple-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 60, 70, 0.12);
}

.sirah-simple-card-head {
  background: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px 16px 0 0;
}

.sirah-orange-badge {
  background: #eb592c;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 3px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 32px;
  height: 26px;
}

.sirah-gold-badge {
  background: #e0992c;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 3px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 32px;
  height: 26px;
}

.sirah-simple-card-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #1e293b;
  line-height: 1.35;
}

.sirah-simple-card-body {
  padding: 18px 20px;
  background: #338186;
  flex: 1;
  font-size: 0.93rem;
  color: #ffffff;
  line-height: 1.6;
  border-radius: 0 0 16px 16px;
}

/* ─── IMAGE CARD GRID (2-col, teal head + img + white centered body) ──── */
.sirah-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.sirah-image-card {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(20, 60, 70, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sirah-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 60, 70, 0.12);
}

.sirah-image-card-head {
  background: #338186;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px 16px 0 0;
}

.sirah-image-card-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffffff;
  line-height: 1.35;
}

.sirah-image-slot {
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: #e2ecee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sirah-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.sirah-image-card:hover .sirah-image-slot img {
  transform: scale(1.03);
}

.sirah-image-card-body {
  padding: 18px 20px;
  background: #ffffff;
  flex: 1;
  font-size: 0.93rem;
  color: #2c3e50;
  line-height: 1.6;
  text-align: center;
  border-radius: 0 0 16px 16px;
}

/* ─── HORIZONTAL ROWS (image left, unified teal card right) ─────────────── */
.sirah-horiz-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 12px;
}

.sirah-horiz-row {
  display: flex;
  background: #338186;
  border-radius: 16px;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(20, 60, 70, 0.08);
  min-height: 155px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sirah-horiz-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 60, 70, 0.12);
}

.sirah-horiz-img {
  width: 42%;
  min-width: 180px;
  flex-shrink: 0;
  overflow: hidden;
  background: #e2ecee;
}
.sirah-horiz-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sirah-horiz-card {
  flex: 1;
  background: #338186;
  color: #ffffff;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sirah-horiz-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sirah-horiz-card-head.no-badge {
  margin-bottom: 8px;
}

.sirah-horiz-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.35;
}

.sirah-horiz-card-body {
  font-size: 0.93rem;
  color: #ffffff;
  line-height: 1.6;
}

/* Split style horizontal row (image left, teal head + white body right) */
.sirah-horiz-row.split-style {
  background: #ffffff;
  min-height: 195px;
}
.sirah-horiz-row.split-style .sirah-horiz-card {
  background: #ffffff;
  padding: 0;
  justify-content: flex-start;
}
.sirah-horiz-row.split-style .sirah-horiz-card-head {
  background: #338186;
  padding: 12px 20px;
  margin-bottom: 0;
}
.sirah-horiz-row.split-style .sirah-horiz-card-body {
  background: #ffffff;
  color: #2c3e50;
  padding: 16px 20px;
}
.sirah-horiz-row.split-style .sirah-horiz-card-body p {
  color: #2c3e50;
  line-height: 1.6;
}

/* White banner horizontal row */
.sirah-horiz-row.banner-white {
  background: #ffffff;
  min-height: 195px;
}
.sirah-horiz-row.banner-white .sirah-horiz-card {
  background: #ffffff;
  color: #2c3e50;
  padding: 20px 24px;
  justify-content: center;
}
.sirah-horiz-row.banner-white .sirah-horiz-card-title {
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.sirah-horiz-row.banner-white .sirah-horiz-card-body {
  color: #2c3e50;
}
.sirah-horiz-row.banner-white .sirah-horiz-card-body p {
  color: #2c3e50;
  line-height: 1.6;
}

/* Bullet intro for Info Tambahan slides */
.sirah-bullet-intro {
  color: #2b787c;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.55;
  margin: -4px 0 18px 0;
  list-style-type: disc;
  padding-left: 22px;
}
body.jawi-mode .sirah-bullet-intro {
  padding-left: 0;
  padding-right: 22px;
  text-align: right;
  direction: rtl;
}

/* ─── BIODATA LAYOUT ────────────────────────────────────────────────────── */
.sirah-biodata-page {
  padding: 0 !important;
}

.sirah-biodata-container {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 60, 70, 0.08);
}

.sirah-biodata-topbar {
  padding: 18px 28px 14px;
  text-align: center;
  background: #cb583b;
}
.sirah-biodata-topbar-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sirah-biodata-topbar-sub {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 4px;
}

.sirah-biodata-body {
  display: flex;
  gap: 22px;
  padding: 24px;
  background: #ffffff;
}

/* Left column: avatar + gelaran + tempat lahir */
.sirah-biodata-left {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.sirah-avatar-ring {
  width: 175px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sirah-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sirah-gelaran-box {
  width: 100%;
  border: 2px dashed #caa267;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  background: #fdfaf3;
}
.sirah-gelaran-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #2b787c;
  margin-bottom: 4px;
}
.sirah-gelaran-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a202c;
  line-height: 1.2;
}
.sirah-gelaran-sub {
  font-size: 0.85rem;
  color: #556270;
  font-style: italic;
  margin-top: 3px;
}

.sirah-wafat-box {
  border: 2px dashed #f5a79b !important;
  background: #fdf0ee !important;
}
.sirah-wafat-box .sirah-gelaran-label {
  color: #cb583b !important;
}

.sirah-info-item-left {
  width: 100%;
  text-align: center;
}

/* Right column: info items */
.sirah-biodata-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sirah-info-item {
  border: 2px dashed #8dc6b3;
  border-radius: 14px;
  padding: 10px 18px;
  background: #edf7f2;
}
.sirah-info-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #2b787c;
  margin-bottom: 4px;
}
.sirah-info-val {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96rem;
  font-weight: 600;
  color: #cb583b;
  line-height: 1.4;
}
.sirah-info-icon {
  color: #2b787c;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* RTL support for Sirah */
body.jawi-mode .sirah-simple-card-body,
body.jawi-mode .sirah-horiz-card-body,
body.jawi-mode .sirah-horiz-row.split-style .sirah-horiz-card-body,
body.jawi-mode .sirah-horiz-row.banner-white .sirah-horiz-card,
body.jawi-mode .sirah-section-label,
body.jawi-mode .sirah-info-heading {
  direction: rtl;
  text-align: right;
}
body.jawi-mode .sirah-simple-card-head,
body.jawi-mode .sirah-image-card-head,
body.jawi-mode .sirah-horiz-card-head {
  direction: rtl;
}
body.jawi-mode .sirah-info-item {
  direction: rtl;
  text-align: right;
}
body.jawi-mode .sirah-info-label {
  text-align: right;
}
body.jawi-mode .sirah-info-val {
  direction: rtl;
  justify-content: flex-start;
}
body.jawi-mode .sirah-info-item-left .sirah-info-label {
  text-align: center;
}
body.jawi-mode .sirah-info-item-left .sirah-info-val {
  justify-content: center;
}

/* ─── MISC: Pusat & Lead boxes ──────────────────────────────────────────── */
.sirah-pusat-box,
.sirah-lead-box {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #dde8ec;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(20,60,80,0.06);
}
.sirah-pusat-box .sirah-simple-card-head {
  border-radius: 13px 13px 0 0;
}
.sirah-lead-box {
  padding: 14px 18px;
  font-size: 0.95rem;
  color: #2b4850;
  line-height: 1.6;
  border-left: 5px solid #e5b95a;
  border-radius: 12px;
  background: #fffdf5;
}

/* ─── GLOSARI v2 ────────────────────────────────────────────────────────── */
.sirah-glosari-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sirah-glosari-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #dde8ec;
  border-left: 5px solid #1c8f96;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(20,60,80,0.04);
}
.sirah-glosari-num {
  background: #e07b2c;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sirah-glosari-term-v2 {
  font-weight: 800;
  font-size: 1rem;
  color: #1b6f76;
  min-width: 130px;
  flex-shrink: 0;
  padding-top: 4px;
}
.sirah-glosari-def-v2 {
  font-size: 0.92rem;
  color: #3a4e55;
  line-height: 1.55;
  flex: 1;
  padding-top: 4px;
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sirah-simple-grid,
  .sirah-image-grid {
    grid-template-columns: 1fr;
  }
  .sirah-biodata-body {
    flex-direction: column;
  }
  .sirah-biodata-left {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sirah-avatar-ring {
    width: 140px;
    height: 140px;
  }
  .sirah-gelaran-box {
    width: 160px;
  }
}

@media (max-width: 600px) {
  .sirah-v2-pill { font-size: 0.82rem; padding: 10px 14px; }
  .sirah-v2-arrow, .sirah-v2-bulb { width: 38px; height: 38px; font-size: 0.95rem; }
  .sirah-horiz-img { width: 34%; min-width: 110px; }
  .sirah-glosari-row { flex-wrap: wrap; }
  .sirah-glosari-term-v2 { min-width: unset; }
}
/* ─── TIMELINE GARIS MASA (Info Tambahan) ────────────────────────────── */
.sirah-timeline-banner {
  display: inline-block;
  background: #b58038;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 24px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(181, 128, 56, 0.25);
  letter-spacing: 0.3px;
}

.sirah-timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}
.sirah-timeline-spine {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  border-left: 2px dashed #203a43;
  transform: translateX(-50%);
}
.sirah-timeline-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
}
.sirah-timeline-row.left-side {
  justify-content: flex-start;
  padding-right: calc(50% + 24px);
}
.sirah-timeline-row.right-side {
  justify-content: flex-end;
  padding-left: calc(50% + 24px);
}
.sirah-timeline-row.left-side .sirah-timeline-card-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
}
.sirah-timeline-row.left-side .sirah-timeline-card-wrap::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  width: 24px;
  border-top: 2px dashed #203a43;
}
.sirah-timeline-row.right-side .sirah-timeline-card-wrap {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 12px;
  width: 100%;
  position: relative;
}
.sirah-timeline-row.right-side .sirah-timeline-card-wrap::after {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 24px;
  border-top: 2px dashed #203a43;
}
.sirah-timeline-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5b95a;
  border: 3px solid #1c353d;
  z-index: 2;
}
.sirah-timeline-badge {
  background: #338186;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
}
.sirah-timeline-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 15px rgba(20, 60, 70, 0.08);
  position: relative;
  flex: 1;
}
.sirah-timeline-tag {
  display: inline-block;
  background: #ff5733;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.sirah-timeline-body {
  font-size: 0.88rem;
  color: #2c3e50;
  line-height: 1.45;
}

/* RTL Garis Masa */
body.jawi-mode .sirah-timeline-row.left-side {
  padding-right: 0;
  padding-left: calc(50% + 24px);
  direction: rtl;
  text-align: right;
}
body.jawi-mode .sirah-timeline-row.right-side {
  padding-left: 0;
  padding-right: calc(50% + 24px);
  direction: rtl;
  text-align: right;
}
body.jawi-mode .sirah-timeline-row.left-side .sirah-timeline-card-wrap::after {
  right: auto;
  left: -24px;
}
body.jawi-mode .sirah-timeline-row.right-side .sirah-timeline-card-wrap::after {
  left: auto;
  right: -24px;
}

/* ─── DAKWAH SULIT PIN COMPONENT ─────────────────────────────────────── */
.sirah-pin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 10px 0 20px 0;
}
.sirah-pin-line {
  width: 2px;
  height: 24px;
  border-left: 2px dashed #203a43;
}
.sirah-pin-icon {
  width: 32px;
  height: 32px;
  background: #2b787c;
  color: #e5b95a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(43, 120, 124, 0.3);
  margin-bottom: 8px;
}
.sirah-pin-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  max-width: 820px;
  box-shadow: 0 4px 15px rgba(20, 60, 70, 0.08);
}
.sirah-pin-tag {
  display: inline-block;
  background: #ff5733;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.sirah-pin-body {
  font-size: 0.94rem;
  color: #2c3e50;
  line-height: 1.6;
}

/* ─── CHAT PHONE UI (Info Tambahan) ──────────────────────────────────── */
.sirah-phone-frame {
  width: 100%;
  max-width: 620px;
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 45, 60, 0.15);
  border: 1px solid #d5e2e5;
  margin: 0 auto;
}
.sirah-phone-notch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334e56;
  background: #ffffff;
}
.sirah-phone-notch {
  width: 60px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 4px;
}
.sirah-phone-header {
  background: #2b787c;
  color: #ffffff;
  padding: 12px 20px 14px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sirah-phone-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b787c;
  font-size: 1.3rem;
  overflow: hidden;
}
.sirah-phone-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sirah-phone-header-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sirah-phone-body {
  padding: 20px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 480px;
  overflow-y: auto;
}
.sirah-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.sirah-chat-row.from-sofia {
  justify-content: flex-end;
}
.sirah-chat-row.from-wirda {
  justify-content: flex-start;
}
.sirah-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2b787c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.sirah-chat-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sirah-chat-bubble.bubble-sofia {
  background: #2b787c;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.sirah-chat-bubble.bubble-wirda {
  background: #e6f4ea;
  color: #1e3a3e;
  border-bottom-left-radius: 4px;
}
.sirah-chat-tag {
  display: inline-block;
  background: #e2edea;
  color: #1e3a3e;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}
.sirah-chat-text {
  word-break: break-word;
}
.sirah-phone-footer {
  padding: 10px 18px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
}
.sirah-phone-input {
  flex: 1;
  background: #f1f5f9;
  border-radius: 20px;
  padding: 8px 16px;
  color: #94a3b8;
  font-size: 0.88rem;
}
body.jawi-mode .sirah-chat-row.from-sofia {
  justify-content: flex-start;
}
body.jawi-mode .sirah-chat-row.from-wirda {
  justify-content: flex-end;
}
body.jawi-mode .sirah-chat-bubble {
  direction: rtl;
  text-align: right;
}

/* Ensure sirah-v2-wrapper fills the hadis-subtopic-wrapper flex container */
#subtopicsSection .hadis-subtopic-wrapper .sirah-v2-wrapper {
  flex: 1 1 auto;
  height: 100%;
  min-height: 540px;
  max-height: 620px;
}

/* Scrollbar styling for sirah content */
.sirah-v2-content::-webkit-scrollbar {
  width: 4px;
}
.sirah-v2-content::-webkit-scrollbar-track {
  background: transparent;
}
.sirah-v2-content::-webkit-scrollbar-thumb {
  background: #c8d8e0;
  border-radius: 2px;
}
.sirah-v2-content::-webkit-scrollbar-thumb:hover {
  background: #1c8f96;
}

/* ─── UNIFIED PEMBELAJARAN MODULE STYLES ───────────────────────────────── */
.sirah-v2-content .aqidah-slide-body-content,
.sirah-v2-content .fiqah-slide-body-content,
.sirah-v2-content .akhlak-slide-body-content,
.sirah-v2-content .hadis-inner-card-content,
.sirah-v2-content .sirah-slide-body-content,
.sirah-v2-content .jawi-slide-body-content,
.sirah-v2-content .quran-slide-body-content {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 16px 24px 16px;
  box-sizing: border-box;
}

.sirah-v2-content .subtopic-content-box {
  width: 100%;
  border-radius: 14px;
}

/* ==========================================================================
   MODUL PEMBELAJARAN JAWI (EXACT SCREENSHOT MATCH)
   ========================================================================== */

/* Subheading label */
.jawi-section-label {
  color: #2b787c;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ─── 1. SPLIT CARDS (SEJARAH KLASIK & PERKEMBANGAN MODEN) ─────────────── */
.jawi-split-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jawi-split-card {
  display: flex;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid #dce5e7;
  min-height: 195px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jawi-split-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.jawi-split-img {
  width: 35%;
  min-width: 170px;
  max-width: 250px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: #e2e8f0;
}

.jawi-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jawi-split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jawi-split-head {
  background: #338186;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.jawi-gold-badge {
  background: #e5a73b;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 3px 11px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.2;
}

.jawi-split-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.jawi-split-body {
  background: #ffffff;
  padding: 14px 20px 16px 20px;
  flex: 1;
  color: #2c3e50;
  font-size: 0.93rem;
  line-height: 1.6;
}

/* Bullet list */
.jawi-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jawi-bullet-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  line-height: 1.55;
  color: #2c3e50;
}

.jawi-bullet-list li:last-child {
  margin-bottom: 0;
}

.jawi-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: -1px;
  color: #1e293b;
  font-size: 1.15rem;
  font-weight: bold;
}

/* ─── 2. HORIZONTAL SELECTABLE TABS (MELESTARI JAWI) ──────────────────── */
.jawi-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jawi-melestari-tabs {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 8px 4px;
  scrollbar-width: thin;
}

.jawi-melestari-tabs::-webkit-scrollbar {
  height: 5px;
}

.jawi-melestari-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.jawi-tab-card {
  flex: 0 0 195px;
  width: 195px;
  height: 130px;
  background: #ffffff;
  border: 1.5px solid rgba(217, 119, 6, 0.45);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  user-select: none;
}

.jawi-tab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.jawi-tab-card .jawi-tab-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #11293f;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jawi-tab-card .jawi-tab-title {
  color: #1e293b;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Active tab in golden amber gradient */
.jawi-tab-card.active {
  background: linear-gradient(135deg, #d89f56, #c5863e);
  border-color: #c5863e;
  box-shadow: 0 6px 18px rgba(216, 159, 86, 0.38);
}

.jawi-tab-card.active .jawi-tab-badge {
  background: #ffffff;
  color: #338186;
  font-weight: 900;
}

.jawi-tab-card.active .jawi-tab-title {
  color: #ffffff;
}

/* Horizontal tab indicator dots */
.jawi-tab-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 10px 0;
}

.jawi-tab-dot {
  width: 14px;
  height: 4px;
  border-radius: 3px;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s;
}

.jawi-tab-dot.active {
  background: #11293f;
  width: 22px;
}

/* Bottom detail card */
.jawi-melestari-detail {
  background: #ffffff;
  border: 1.5px solid #dce5e7;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  min-height: 220px;
}

.jawi-detail-img {
  width: 40%;
  min-width: 200px;
  max-width: 320px;
  height: 195px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e2e8f0;
}

.jawi-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jawi-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jawi-brown-banner {
  background: #9e6e3c;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 7px 22px;
  border-radius: 24px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
}

/* ─── 3. DEFINISI & JADUAL AYAT (MEMBACA & MENULIS) ────────────────────── */
.jawi-pill-header {
  background: #338186;
  color: #ffffff;
  border-radius: 30px;
  padding: 5px 20px 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(51, 129, 134, 0.25);
}

.jawi-pill-badge {
  background: #11293f;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jawi-pill-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.jawi-def-card {
  background: #ffffff;
  border: 1px solid #c9d8dc;
  border-radius: 16px;
  padding: 14px 22px;
  color: #2c3e50;
  font-size: 0.93rem;
  line-height: 1.65;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Diagram container card (e.g. 7.1.3 A) */
.jawi-diagram-card {
  background: #ffffff;
  border: 1.5px solid #dce5e7;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jawi-diagram-img {
  width: 100%;
  max-width: 960px;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* Side-by-side duo boxes card (e.g. 7.1.3 C) */
.jawi-duo-boxes-card {
  background: #ffffff;
  border: 1.5px solid #dce5e7;
  border-radius: 20px;
  padding: 18px 20px 20px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.jawi-duo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jawi-duo-pill {
  background: #11293f;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  padding: 7px 32px;
  border-radius: 20px;
  margin-bottom: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(17, 41, 63, 0.2);
}

.jawi-duo-body {
  background: #cbe8df;
  color: #143e3d;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  padding: 16px 20px;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jawi-table-card {
  background: #ffffff;
  border: 1.5px solid #dce5e7;
  border-radius: 18px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
}

.jawi-ayat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.jawi-ayat-table thead th {
  background: #9e6e3c;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 14px;
  letter-spacing: 0.5px;
}

.jawi-ayat-table thead th:first-child {
  border-radius: 8px 0 0 8px;
}

.jawi-ayat-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}

.jawi-ayat-table tbody tr td {
  padding: 11px 16px;
  text-align: center;
}

.jawi-ayat-table tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.jawi-ayat-table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.jawi-ayat-table tbody td.jawi-cell {
  background: #f05138;
  color: #ffffff;
  font-family: 'Amiri', 'Traditional Arabic', serif, system-ui;
  font-size: 1.25rem;
  font-weight: 700;
  direction: rtl;
}

.jawi-ayat-table tbody td.rumi-cell {
  background: #cbe8df;
  color: #1b4344;
  font-weight: 600;
  font-size: 0.96rem;
}

.jawi-ayat-table tbody td.kegunaan-cell {
  background: #f7e199;
  color: #5a3e00;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ─── 4. JAWI RTL STYLING (body.jawi-mode) ────────────────────────────── */
body.jawi-mode .jawi-section-label {
  direction: rtl;
  text-align: right;
}


body.jawi-mode .jawi-split-head {
  direction: rtl;
}

body.jawi-mode .jawi-split-body {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .jawi-bullet-list li {
  padding-left: 0;
  padding-right: 18px;
  text-align: right;
}

body.jawi-mode .jawi-bullet-list li::before {
  left: auto;
  right: 2px;
}

body.jawi-mode .jawi-tab-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .jawi-tab-card .jawi-tab-badge {
  align-self: flex-start;
}

body.jawi-mode .jawi-detail-content {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .jawi-brown-banner {
  align-self: flex-start;
}

body.jawi-mode .jawi-pill-header {
  direction: rtl;
  padding: 5px 6px 5px 20px;
}

body.jawi-mode .jawi-def-card {
  direction: rtl;
  text-align: right;
}

@media (max-width: 768px) {
  .jawi-split-card {
    flex-direction: column;
    min-height: auto;
  }
  .jawi-split-img {
    width: 100%;
    max-width: 100%;
    height: 160px;
  }
  .jawi-melestari-detail {
    flex-direction: column;
  }
  .jawi-detail-img {
    width: 100%;
    max-width: 100%;
    height: 160px;
  }
}

/* =================================================== */
/* 📱 MODAL PANDUAN SKRIN PENUH (IOS SAFARI FALLBACK)  */
/* =================================================== */
.ios-fs-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  background: rgba(4, 13, 26, 0.75);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 28px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.ios-fs-modal-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ios-fs-modal-card {
  position: relative;
  background: linear-gradient(145deg, rgba(14, 35, 64, 0.97) 0%, rgba(6, 17, 33, 0.99) 100%);
  border: 1.8px solid var(--accent-gold);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(217, 165, 76, 0.22);
  border-radius: 24px;
  width: 95%;
  max-width: 540px;
  max-height: min(92vh, 92dvh);
  overflow-y: auto;
  padding: clamp(18px, 3.5vw, 28px);
  color: #ffffff;
  transform: scale(0.92) translateY(15px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ios-fs-modal-overlay.show .ios-fs-modal-card {
  transform: scale(1) translateY(0);
}

.ios-fs-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  z-index: 5;
}

.ios-fs-modal-close:hover {
  background: rgba(217, 165, 76, 0.3);
  border-color: var(--accent-gold);
  transform: scale(1.1);
}

.ios-fs-modal-header {
  text-align: center;
  margin-bottom: 16px;
}

.ios-fs-icon-circle {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 165, 76, 0.25) 0%, rgba(217, 165, 76, 0.05) 100%);
  border: 1.5px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent-gold);
  box-shadow: 0 0 16px rgba(217, 165, 76, 0.35);
}

.ios-fs-title {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.ios-fs-subtitle {
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  color: #CBD5E1;
  line-height: 1.45;
  margin: 0;
}

.ios-fs-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.ios-fs-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.ios-fs-step-card.highlight {
  background: rgba(217, 165, 76, 0.1);
  border-color: rgba(217, 165, 76, 0.45);
  box-shadow: 0 4px 15px rgba(217, 165, 76, 0.12);
}

.ios-fs-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ios-fs-step-content {
  flex: 1;
}

.ios-fs-step-heading {
  font-size: clamp(0.88rem, 2vw, 0.98rem);
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 3px;
}

.ios-fs-step-body {
  font-size: clamp(0.78rem, 1.7vw, 0.86rem);
  color: #E2E8F0;
  line-height: 1.4;
}

.ios-fs-step-body strong {
  color: #ffffff;
}

.ios-fs-modal-footer {
  display: flex;
  justify-content: center;
}

.ios-fs-btn-close {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #C5933A 100%);
  color: var(--primary-dark);
  border: none;
  border-radius: 24px;
  padding: 8px 32px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 165, 76, 0.4);
  transition: all 0.25s ease;
}

.ios-fs-btn-close:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(217, 165, 76, 0.6);
}

.ios-fs-btn-close:active {
  transform: scale(0.97);
}

/* Penyesuaian Jawi untuk Modal Skrin Penuh iOS */
body.jawi-mode .ios-fs-modal-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .ios-fs-modal-close {
  right: auto;
  left: 16px;
}

body.jawi-mode .ios-fs-step-card {
  direction: rtl;
  text-align: right;
}

body.jawi-mode .ios-fs-title,
body.jawi-mode .ios-fs-subtitle,
body.jawi-mode .ios-fs-step-heading,
body.jawi-mode .ios-fs-step-body,
body.jawi-mode .ios-fs-btn-close {
  font-family: "Sakkal-Majalla", "Amiri-Jawi", serif !important;
  font-weight: 700;
}