/* Gəncə STEAM səhifəsinə xas dizayn qatı — steam.edu.az-ın vizual dilindən
   (ağ fon, mavi/firuzəyi aksentlər, kart-əsaslı, təmiz/müasir) ilhamlanıb.
   Yalnız bu səhifədə yüklənir, əsas saytın navy/cyan mövzusuna toxunmur. */

.steam-content {
  --steam-blue: #0b5fff;
  --steam-teal: #14b8a6;
  --steam-purple: #7c5cf0;
  --steam-orange: #ff9a3d;
  --steam-bg: #ffffff;
  --steam-bg-alt: #f3f7fb;
  --steam-ink: #142033;
  --steam-ink-soft: #5c6b7a;
  --steam-line: #e3ebf2;
  --steam-radius: 1.1rem;
  background: var(--steam-bg);
  color: var(--steam-ink);
}

.steam-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 6rem;
  background: linear-gradient(120deg, var(--steam-blue) 0%, var(--steam-teal) 100%);
  color: #fff;
  text-align: center;
}

.steam-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.steam-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(11,95,255,0.82) 0%, rgba(20,184,166,0.82) 100%);
}

.steam-hero::before,
.steam-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}

.steam-hero::before {
  width: 340px;
  height: 340px;
  top: -140px;
  right: -80px;
}

.steam-hero::after {
  width: 220px;
  height: 220px;
  bottom: -120px;
  left: -60px;
  background: rgba(255,255,255,0.08);
}

.steam-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.steam-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.3);
}

.steam-hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}

.steam-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  line-height: 1.12;
  text-shadow: 0 6px 24px rgba(0,10,30,0.35);
  text-transform: uppercase;
}

/* Bu səhifədə header-in brend adı da böyük hərflərlə göstərilir — yalnız
   steam.html-ə aiddir (css/steam.css yalnız bu səhifədə yüklənir, ona görə
   .brand-name kimi ümumi bir sinfi burada təhlükəsiz hədəfləmək olar). */
.brand-name {
  text-transform: uppercase;
}

.steam-hero p {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 2px 12px rgba(0,10,30,0.25);
  margin: 0;
}

.steam-section {
  padding: 4.5rem 1.5rem;
}

.steam-section--alt {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--steam-blue) 6%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--steam-teal) 8%, transparent) 0%, transparent 45%),
    var(--steam-bg-alt);
}

.steam-section-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}

/* Gəncə STEAM loqosunun solğun arxa fon izi (watermark) — saytın digər
   yerlərində (footer, tam-ekran menyu) istifadə olunan eyni üsul. */
.steam-watermark {
  position: relative;
  overflow: hidden;
}

.steam-watermark::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 4%;
  width: 520px;
  max-width: 46vw;
  min-width: 240px;
  aspect-ratio: 650 / 657;
  /* Loqo faylında ikon + "STEAM AZERBAIJAN" mətni yan-yana yerləşib —
     yalnız ikonu (soldakı ilk ~650px) göstərmək üçün böyüdülüb
     sol yuxarı küncə sıxılır ki, mətn hissəsi qutudan kənarda qalsın. */
  background-image: url("../images/steam-logo.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 307.7% 100%;
  opacity: 0.09;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.steam-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.steam-section-head .steam-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--steam-teal);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.steam-section-head .steam-kicker::before,
.steam-section-head .steam-kicker::after {
  content: '';
  height: 2px;
  width: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--steam-blue), var(--steam-teal));
}

.steam-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--steam-ink) 40%, var(--steam-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.9rem;
}

.steam-section-head p {
  color: var(--steam-ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}

.steam-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--steam-ink-soft);
  margin-top: 2rem;
}

/* Fəaliyyət kartları */
.steam-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.steam-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--steam-line);
  border-radius: var(--steam-radius);
  padding: 2.1rem 1.75rem 1.9rem;
  box-shadow: 0 4px 18px -12px rgba(11,95,255,0.12);
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.steam-card:focus-visible {
  outline: 2px solid var(--steam-blue);
  outline-offset: 3px;
}

.steam-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--steam-card-color, var(--steam-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.steam-card:hover::before {
  transform: scaleX(1);
}

.steam-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 45%, transparent);
}

.steam-card:nth-child(4n+1) { --steam-card-color: var(--steam-blue); }
.steam-card:nth-child(4n+2) { --steam-card-color: var(--steam-teal); }
.steam-card:nth-child(4n+3) { --steam-card-color: var(--steam-purple); }
.steam-card:nth-child(4n+4) { --steam-card-color: var(--steam-orange); }

/* Basılanda hər kartın öz rənginə (--steam-card-color) uyğun "toxunma"
   animasiyası — modal açılmazdan əvvəl klikin harada baş verdiyini hiss
   etdirir. */
.steam-card.is-pressed {
  animation: steam-card-press 0.42s var(--ease);
}

@keyframes steam-card-press {
  0% {
    transform: translateY(-6px) scale(1);
  }
  35% {
    transform: translateY(-2px) scale(0.95);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 65%, transparent);
  }
  70% {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 26px 44px -16px color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 55%, transparent);
  }
  100% {
    transform: translateY(-6px) scale(1);
  }
}

.steam-card.is-pressed .steam-badge {
  animation: steam-badge-pop 0.42s var(--ease);
}

@keyframes steam-badge-pop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(0.8) rotate(-6deg); }
  70% { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.steam-badge {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
  background: linear-gradient(135deg, var(--steam-card-color, var(--steam-blue)), color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 70%, #000 10%));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 70%, transparent);
}

.steam-badge svg {
  width: 28px;
  height: 28px;
}

.steam-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--steam-ink);
  margin: 0 0 0.55rem;
  transition: color 0.25s var(--ease);
}

.steam-card:hover h3 {
  color: var(--steam-card-color, var(--steam-blue));
}

.steam-card p {
  margin: 0;
  color: var(--steam-ink-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Yaş intervalı nişanı — steam.edu.az-dakı hər təlimin öz detal
   səhifəsindən gəlir (bax əlaqədar commit-lər), tədricən hər proqrama
   əlavə olunur. */
.steam-card-age {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--steam-card-color, var(--steam-blue));
  background: color-mix(in srgb, var(--steam-card-color, var(--steam-blue)) 12%, transparent);
  border-radius: 999px;
}

/* Qeyd: bu blokda əvvəllər "İşçilərimiz v1" (yalnız vəzifə göstərən, real
   ad/foto olmayan) kartların stilləri var idi (.steam-staff-grid,
   .steam-staff-card, .steam-staff-avatar, .steam-staff-role və s.) —
   bunlar aşağıdakı "v2 — blog kartı" dizaynı (.steam-team-*) ilə əvəz
   olunub və steam.html-də artıq heç yerdə istifadə olunmur, ona görə
   silinib. Yalnız .steam-staff-desc və .steam-staff-tasks qalıb, çünki
   bunlar v2 kartlarında da (ağ fon üzərində) hələ istifadə olunur. */
.steam-staff-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

.steam-staff-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.steam-staff-tasks li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.9);
}

.steam-staff-tasks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--steam-blue);
}

/* ---------- İşçilərimiz v2: "blog kartı" üslubu (code.edu.az-dan
   ilhamlanıb) — rəngli, dekorativ halqalı foto-kart yuxarıda, ağ
   fonda mətn aşağıda. Real foto olmayan kartlarda foto yerinə kiçik
   ikon göstərilir, eyni dekorativ çərçivə saxlanılır. */
.steam-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.steam-team-card {
  border-radius: var(--steam-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--steam-line);
  box-shadow: 0 4px 18px -12px rgba(11,95,255,0.15);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.steam-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -18px rgba(11,95,255,0.3);
}

.steam-team-photocard {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.steam-team-card:nth-child(4n+1) .steam-team-photocard { background: var(--steam-blue); }
.steam-team-card:nth-child(4n+2) .steam-team-photocard { background: var(--steam-teal); }
.steam-team-card:nth-child(4n+3) .steam-team-photocard { background: var(--steam-purple); }
.steam-team-card:nth-child(4n+4) .steam-team-photocard { background: var(--steam-orange); }

.steam-team-ring {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  pointer-events: none;
}

.steam-team-ring--1 { width: 220px; height: 220px; top: -60px; right: -50px; }
.steam-team-ring--2 { width: 140px; height: 140px; top: 30px; right: 60px; }

.steam-team-dot {
  position: absolute;
  top: 42%;
  right: 38%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.18);
}

.steam-team-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64%;
  height: 94%;
  overflow: hidden;
  border-radius: 60% 0 0 45% / 65% 0 0 55%;
}

.steam-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(1) contrast(1.05);
}

/* Rauf Abışovun şəkli əvvəlcədən dairəvi kəsilib, ətrafında ağ boşluq
   var — adi cover kəsimi bu ağ küncləri kart çərçivəsində göstərirdi.
   Böyütmə ilə (zoom) yalnız dairənin öz içi görünür, ağ kənar qalmır. */
.steam-team-photo-img--zoom {
  transform: scale(1.65);
  transform-origin: 50% 32%;
}

/* Turanə Alayevanın şəkli dar (portret, digər ikisinə nisbətən uzun) olduğu
   üçün adi "cover" kəsimi əsasən üstdən (başdan) kəsirdi. Əvvəlki versiyada
   buna əlavə bir də süni böyütmə (scale) tətbiq olunmuşdu ki, bu, başın
   böyük hissəsini çərçivədən tam çıxarırdı. İndi Mətləbin şəkli ilə EYNİ
   qaydada (böyütmə YOXDUR) saxlanılır, sadəcə üfüqi kəsim nöqtəsi demək
   olar tam yuxarı sərhədə (5%) çəkilib ki, baş tam görünsün. */
.steam-team-photo img.steam-team-photo-img--zoom2 {
  object-position: center 5%;
}

.steam-team-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}

.steam-team-icon svg {
  width: 22px;
  height: 22px;
}

.steam-team-header {
  position: relative;
  z-index: 1;
  max-width: 54%;
}

.steam-team-header h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.steam-team-header span {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.85);
}

.steam-team-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.steam-team-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.steam-team-brand span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}

.steam-team-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

.steam-team-body .steam-staff-desc {
  color: var(--steam-ink-soft);
}

.steam-team-body .steam-staff-tasks li {
  color: var(--steam-ink-soft);
}

/* Qalereya */
.steam-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.steam-gallery:empty {
  display: block;
}

.steam-gallery-item {
  border-radius: var(--steam-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 30px -18px rgba(11,95,255,0.2);
}

.steam-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.steam-gallery-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--steam-line);
  border-radius: var(--steam-radius);
  color: var(--steam-ink-soft);
  font-size: 0.92rem;
}

/* Əlaqə */
.steam-contact-card {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--steam-line);
  border-radius: var(--steam-radius);
  padding: 2.5rem;
  box-shadow: 0 16px 50px -24px rgba(11,95,255,0.3);
}

.steam-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--steam-blue), var(--steam-teal));
}

.steam-content .form-row label {
  color: var(--steam-ink);
  font-weight: 600;
}

.steam-content .contact-form .btn-submit {
  background: linear-gradient(120deg, var(--steam-blue), var(--steam-teal));
  border: none;
  box-shadow: 0 10px 26px -12px rgba(11,95,255,0.5);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.steam-content .contact-form .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(11,95,255,0.6);
}

.steam-content .form-row input:focus,
.steam-content .form-row textarea:focus {
  border-color: var(--steam-blue);
  box-shadow: 0 0 0 3px rgba(11,95,255,0.15);
}

@media (max-width: 720px) {
  .steam-hero { padding: 3.5rem 1.25rem 4.5rem; }
  .steam-section { padding: 3rem 1.25rem; }
  .steam-contact-card { padding: 1.75rem; }
}

/* Proqram kartı modalı — kliklənəndə tam məlumatı göstərir */
.steam-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.steam-modal[hidden] { display: none; }

.steam-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,20,35,0.55);
  backdrop-filter: blur(3px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.steam-modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--steam-radius);
  padding: 2.5rem 2.25rem 2.25rem;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
  animation: steam-modal-rise 0.3s var(--ease) both;
}

@keyframes steam-modal-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.steam-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--steam-line);
  background: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--steam-ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.steam-modal-close:hover {
  color: var(--steam-ink);
  border-color: var(--steam-ink-soft);
}

.steam-modal-badge {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.steam-modal-badge svg {
  width: 28px;
  height: 28px;
}

.steam-modal-content h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--steam-ink);
  margin: 0 0 0.9rem;
}

.steam-modal-content .steam-card-age {
  margin-top: 0;
  margin-bottom: 1rem;
}

.steam-modal-content p {
  color: var(--steam-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}