/* Ai MEDIA — خلفية بيضاء · أزرق اللوجو #003366 · #00AEEF */
:root {
  --deran-primary: #003366;
  --deran-accent: #00aeef;
  --deran-accent-mid: #0071bc;
  --deran-accent-bright: #5ee7ff;
  --deran-bg: #ffffff;
  --deran-text: #003366;
  --deran-text-muted: #5a6d7e;
  --deran-border: #d4e8f2;
  --deran-radius: 1.25rem;
  --deran-radius-sm: 0.85rem;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

.deran-main {
  max-width: 1180px;
}

.deran-main-panel,
.deran-hero-panel {
  background: #fff;
  border-radius: var(--deran-radius);
  border: 1px solid var(--deran-border);
  box-shadow: 0 12px 40px -16px color-mix(in srgb, var(--deran-primary) 15%, transparent);
}

.form-control,
.form-select {
  background: #fff;
  border: 1px solid var(--deran-border);
  color: var(--deran-text);
  border-radius: var(--deran-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--deran-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--deran-accent) 25%, transparent);
  color: var(--deran-text);
}

.form-label {
  color: var(--deran-text-muted);
}

.alert-success {
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #166534;
  border-radius: var(--deran-radius-sm);
}

/* —— Hero —— */
.deran-hero-cinematic {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(22rem, 58vh, 36rem);
  border-radius: 0 0 1.5rem 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--deran-primary) 25%, transparent);
}

.deran-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.deran-hero-mesh {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--deran-primary) 0%, #0071bc 45%, #00aeef 100%);
}

.deran-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--deran-primary) 75%, transparent) 0%,
    color-mix(in srgb, var(--deran-primary) 40%, transparent) 50%,
    color-mix(in srgb, #001a33 60%, transparent) 100%
  );
  pointer-events: none;
}

.deran-hero-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 35%, color-mix(in srgb, var(--deran-accent-bright) 15%, transparent) 50%, transparent 65%);
  pointer-events: none;
}

.deran-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 10vw, 5rem) 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: inherit;
}

.deran-hero-content .deran-section-eyebrow {
  color: var(--deran-accent-bright);
}

.deran-hero-title {
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0, 30, 60, 0.35);
}

.deran-hero-lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 38rem;
  line-height: 1.75;
}

/* —— فيديو تعريفي —— */
.deran-intro-section h2,
.deran-intro-section h3 {
  color: var(--deran-text) !important;
}

.deran-intro-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(14rem, 40vw, 22rem);
  border-radius: var(--deran-radius);
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--deran-accent) 40%, var(--deran-border));
  box-shadow: 0 16px 48px -16px color-mix(in srgb, var(--deran-accent) 30%, transparent);
  background: #001525;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deran-intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #001525;
}

.deran-intro-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  background: linear-gradient(145deg, #001525 0%, #003366 100%);
}

/* صور وفيديوهات — تملأ الحاوية بالكامل */
.deran-media-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--deran-primary) 5%, #f4f9fc);
}

.deran-media-box img,
.deran-media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.deran-media-box.ratio > img,
.deran-media-box.ratio > video {
  position: absolute;
  inset: 0;
}

.deran-about-feature-img {
  border-radius: var(--deran-radius);
  border: 1px solid var(--deran-border);
  min-height: clamp(16rem, 32vw, 22rem);
}

.deran-about-gallery-img {
  border-radius: var(--deran-radius-sm);
  border: 1px solid var(--deran-border);
  aspect-ratio: 4 / 3;
}

/* —— إحصاءات —— */
.deran-stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--deran-accent) 0%, var(--deran-accent-mid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.deran-stat-label {
  color: var(--deran-text-muted);
  margin-top: 0.5rem;
}

.deran-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--deran-accent) 12%, transparent), transparent 55%);
  pointer-events: none;
}

.deran-cta-glow {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--deran-accent) 18%, transparent), transparent 65%);
}

.deran-service-thumb {
  border: 1px solid var(--deran-border);
}

@keyframes deran-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes deran-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade { animation: deran-fade-in 0.55s ease both; }
.animate-slide { animation: deran-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

.deran-map-wrap iframe {
  display: block;
  width: 100% !important;
  min-height: 360px;
  border: 0 !important;
  border-radius: var(--deran-radius-sm);
}

/* أيقونات التواصل الاجتماعي */
.deran-social-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  color: #003366 !important;
  background: #fff;
  border: 1px solid color-mix(in srgb, #00aeef 35%, #d4e8f2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.deran-social-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
  display: block;
}

.deran-social-icon:hover {
  color: #00aeef !important;
  border-color: #00aeef;
  background: #f0f9ff;
  transform: translateY(-2px);
}

.deran-social-icon.is-disabled {
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}

.deran-footer-social {
  min-height: 2.75rem;
}

/* Footer */
.deran-footer {
  background: var(--deran-surface-elevated, #f4f9fc);
  border-top: 1px solid var(--deran-border);
}

.deran-footer a:not(.deran-social-icon) {
  color: var(--deran-text) !important;
}