```css
@font-face {
  font-family: 'MontserratArabic';
  src: url('assets/fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf?v=1782753946') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MontserratArabic';
  src: url('assets/fonts/ArbFONTS-Montserrat-Arabic-Medium.ttf?v=1782753946') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MontserratArabic';
  src: url('assets/fonts/ArbFONTS-Montserrat-Arabic-Bold.ttf?v=1782753946') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --brand-blue: #003466;
  --brand-orange: #f57c00;
  --brand-green: #9bd300;
  --text: #ffffff;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--brand-blue);
  font-family: 'MontserratArabic', Tahoma, Arial, sans-serif;
  color: var(--text);
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
textarea {
  font-family: inherit;
}

/* =========================
   Main App Page
========================= */

.app-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--brand-blue);
}

.stage {
  position: relative;
  width: min(100vw, 480px);
  aspect-ratio: 1080 / 1920;
  background-image: url("assets/main-without-icons.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  overflow: hidden;
}

.icon-link {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 22%;
  outline: none;
  transition: transform 140ms ease, filter 140ms ease;
}

.icon-link img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.icon-link:active {
  transform: scale(0.96);
}

.icon-link:focus-visible {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px var(--brand-orange);
}

/* Positions match the reference layout on a 1080 × 1920 design */

.watch-tv {
  left: 8.52%;
  top: 61.98%;
  width: 26.02%;
}

.watch-quran {
  left: 37.22%;
  top: 62.03%;
  width: 25.83%;
}

/* قناة شباب 2 - بدل الموقع الإخباري القديم */
.watch-tv-2 {
  left: 65.46%;
  top: 61.98%;
  width: 26.02%;
}

/* لم يعد مستخدمًا بعد نقل الموقع الإخباري للأسفل، نتركه احتياطًا */
.web-link {
  left: 65.46%;
  top: 61.98%;
  width: 26.02%;
}

.listen-shabab {
  left: 8.89%;
  top: 77.76%;
  width: 25.83%;
}

.listen-quran {
  left: 37.13%;
  top: 77.71%;
  width: 26.02%;
}

.install-app {
  left: 65.46%;
  top: 77.71%;
  width: 26.02%;
}

/* بانر الموقع الإخباري الجديد أسفل الخانات الست */
.news-site-banner {
  position: absolute;
  left: 7%;
  top: 89.5%;
  width: 86%;
  z-index: 2;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  transition: transform 140ms ease, filter 140ms ease;
}

.news-site-banner img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.news-site-banner:active {
  transform: scale(0.98);
}

.news-site-banner:focus-visible {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px var(--brand-orange);
}

/* رابط سياسة الخصوصية داخل صفحة التطبيق */
.privacy-policy-link {
  position: absolute;
  left: 50%;
  bottom: 1.35%;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 52, 102, 0.62);
  color: #ffffff;
  font-size: clamp(10px, 2.25vw, 14px);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
  white-space: nowrap;
}

.privacy-policy-link:active {
  opacity: 1;
  transform: translateX(-50%) scale(0.97);
}

.privacy-policy-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px var(--brand-orange);
}

/* =========================
   Install Modal
========================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.55);
}

.modal[hidden] {
  display: none;
}

.modal-card {
  position: relative;
  width: min(92vw, 420px);
  background: #063f6a;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  padding: 28px 22px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  text-align: right;
  line-height: 1.75;
}

.modal-card h1 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}

.modal-card p {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 400;
}

.modal-card ol {
  padding-inline-start: 22px;
  margin: 12px 0 0;
}

.modal-close {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* =========================
   Default Player Page
========================= */

.player-page {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(151, 211, 0, 0.18), transparent 34%),
    var(--brand-blue);
}

.player-card {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
  text-align: center;
}

.player-logo {
  width: min(58vw, 260px);
  margin: 0 auto 14px;
  display: block;
}

.player-card h1 {
  margin: 6px 0 18px;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  line-height: 1.45;
}

video,
audio {
  width: 100%;
  border-radius: 18px;
  background: #000;
}

audio {
  margin-top: 18px;
}

.player-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.player-actions a,
.player-actions button {
  min-width: 132px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.player-actions .primary {
  background: var(--brand-orange);
}

.status {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* =========================
   Video Player Pages
   قنوات التلفزيون الثلاث
========================= */

.video-player-page {
  width: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(151, 211, 0, 0.18), transparent 34%),
    var(--brand-blue);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  padding: 0;
}

.video-stage {
  position: relative;
  width: min(100vw, 480px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 72px) 24px calc(env(safe-area-inset-bottom) + 28px);
}

.video-back-button {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 34px);
  left: 22px;
  z-index: 5;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent url("assets/back-button.png?v=1782753946") center / contain no-repeat;
  cursor: pointer;
}

.video-back-button:active {
  transform: scale(0.96);
}

.video-channel-logo {
  width: min(46vw, 210px);
  max-width: 230px;
  height: auto;
  display: block;
  margin: 0 auto 24px;
  user-select: none;
  -webkit-user-drag: none;
}

.video-channel-title {
  margin: 0 0 18px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.video-native-player {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  outline: 0;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* iPad / Tablets for video pages */
@media (min-width: 768px) {
  .video-player-page {
    align-items: center;
    padding: 24px;
  }

  .video-stage {
    width: min(92vw, 760px);
    min-height: auto;
    padding: 72px 32px 48px;
  }

  .video-channel-logo {
    width: min(32vw, 240px);
  }

  .video-native-player {
    max-width: 720px;
  }
}

/* =========================
   Main Page Responsive
========================= */

/* Large phones */
@media (min-width: 481px) and (max-width: 767px) {
  .stage {
    width: min(100vw, 480px);
  }
}

/* iPhone only adjustment - not iPad */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .app-shell {
      padding-top: calc(env(safe-area-inset-top) + 16px);
    }
  }
}

/* iPad / Tablets */
@media (min-width: 768px) {
  .app-shell {
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .stage {
    width: min(92vw, calc((100dvh - 48px) * 0.5625), 760px);
  }
}

/* Large iPad / Tablet landscape */
@media (min-width: 1024px) {
  .stage {
    width: min(80vw, calc((100dvh - 48px) * 0.5625), 820px);
  }
}

/* =========================
   Quran Radio Custom Player
   فقط لإذاعة القرآن الكريم
========================= */

.quran-player-page {
  width: 100%;
  min-height: 100dvh;
  background: var(--brand-blue);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  padding: 0;
}

.quran-stage {
  position: relative;
  width: min(100vw, 480px);
  aspect-ratio: 1080 / 1920;
  min-height: 0;
  background-image: url("assets/quran-player-bg.png?v=1782753946");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  overflow: hidden;
}

/* زر الرجوع لراديو القرآن */
.quran-back-button {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 34px);
  left: 22px;
  z-index: 5;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent url("assets/back-button.png?v=1782753946") center / contain no-repeat;
  cursor: pointer;
}

.quran-back-button:active {
  transform: scale(0.96);
}

/* Native Apple audio control for Quran Radio */
.quran-native-audio {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 36px;
  z-index: 4;

  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.quran-now-playing {
  position: absolute;
  top: 53%;
  left: 10%;
  right: 10%;
  z-index: 4;

  text-align: center;
  color: #ffffff;
  font-size: clamp(9px, 2.3vw, 10.5px);
  font-weight: 400;
  line-height: 1.35;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  direction: rtl;
  unicode-bidi: plaintext;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .quran-now-playing {
    font-size: clamp(10px, 2.8vw, 12px);
  }
}

/* صور الصدقات */
.sadakat-slider {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 6%;
  z-index: 2;
  background: transparent;
  box-shadow: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  overflow: hidden;
}

.sadakat-image {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  will-change: opacity;
}

/* إخفاء أي صورة ليس لها مصدر حتى لا يظهر إطار أبيض */
.sadakat-image:not([src]) {
  display: none;
}

.sadakat-current {
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 1500ms ease-in-out;
}

.sadakat-next {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 1500ms ease-in-out;
}

/* Fade Out للصورة الحالية + Fade In للصورة الجديدة */
.sadakat-slider.is-fading .sadakat-current {
  opacity: 0;
}

.sadakat-slider.is-fading .sadakat-next {
  opacity: 1;
}

/* Quran player on iPhone */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .quran-stage {
      min-height: calc(100dvh - env(safe-area-inset-top));
    }
  }
}

/* Quran player on tablets */
@media (min-width: 768px) {
  .quran-player-page {
    align-items: center;
    padding: 24px;
  }

  .quran-stage {
    width: min(92vw, calc((100dvh - 48px) * 0.5625), 760px);
    min-height: auto;
  }
}

/* Fix Quran page stretching on Android / Samsung only */
@supports not (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .quran-stage {
      min-height: 0;
      height: auto;
      aspect-ratio: 1080 / 1920;
    }
  }
}

/* =========================
   Shabab Radio Custom Player
   لراديو شباب
========================= */

.shabab-player-page {
  width: 100%;
  min-height: 100dvh;
  background: var(--brand-blue);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  padding: 0;
}

.shabab-stage {
  position: relative;
  width: min(100vw, 480px);
  min-height: 100dvh;
  aspect-ratio: 1080 / 1920;
  background-image: url("assets/shabab-player-bg.png?v=1782753946");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  overflow: hidden;
}

/* زر الرجوع لراديو شباب */
.shabab-back-button {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 34px);
  left: 22px;
  z-index: 5;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent url("assets/back-button.png?v=1782753946") center / contain no-repeat;
  cursor: pointer;
}

.shabab-back-button:active {
  transform: scale(0.96);
}

/* Native Apple / Android audio control for Shabab Radio */
.shabab-native-audio {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 60px;
  z-index: 4;

  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

/* iPhone فقط */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .shabab-stage {
      min-height: calc(100dvh - env(safe-area-inset-top));
    }
  }
}

/* Android / Samsung fix حتى لا تتمدد الصفحة */
@supports not (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .shabab-stage {
      min-height: 0;
      height: auto;
      aspect-ratio: 1080 / 1920;
    }
  }
}

/* Tablets */
@media (min-width: 768px) {
  .shabab-player-page {
    align-items: center;
    padding: 24px;
  }

  .shabab-stage {
    width: min(92vw, calc((100dvh - 48px) * 0.5625), 760px);
    min-height: auto;
  }
}

/* =========================
   Big Play / Pause Button
   زر تشغيل وإيقاف إضافي للراديو
========================= */

.big-play-button {
  position: absolute;
  z-index: 6;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.big-play-button img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  outline: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.big-play-button:active {
  transform: scale(0.94);
}

/* زر راديو شباب */
.shabab-big-play-button {
  top: 28%;
  left: 25.5%;
  width: 14.5%;
}

/* زر إذاعة القرآن الكريم */
.quran-big-play-button {
  top: 28%;
  left: 25.5%;
  width: 14.5%;
}

/* نبضة خفيفة بدون GIF */
.big-play-button {
  animation: bigPlayPulse 2.4s ease-in-out infinite;
}

@keyframes bigPlayPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.055);
  }

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