:root {
  --color-bg: #f7f7f9;
  --color-surface: #ffffff;
  --color-text: #1f2328;
  --color-text-muted: #6b7280;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-danger: #dc2626;
  --color-border: #e5e7eb;

  --color-nav-active: #2386C8;
  --color-nav-inactive: #164064;
  --header-height: 88px;

  --color-heading: #0F2942;
  --color-text-secondary: #4A5565;
  --color-accent-light: #E3EFFB;

  --radius-sm: 6px;
  --radius-md: 10px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --font-family: "Montserrat", sans-serif;

  /* Səhifənin sağ/sol boşluğu: 390px-də 20px, 1440px-də 80px, arada fasiləsiz
     (xətti: 20 + (100vw − 390px) × 60/1050), 1440px-dən yuxarı 80px-də sabitlənir. */
  --page-pad-x: clamp(20px, calc(20px + (100vw - 390px) * 0.05714), 80px);

  /* Header → səhifənin ilk elementi: 390px-də 32px, 1440px-də 64px, arada fasiləsiz. */
  /* header → ilk bölmə: bütün desktopda (≥960px) 64px, 390px-də 32px, arada xətti */
  --page-pad-top: clamp(32px, calc(32px + (100vw - 390px) * 0.05614), 64px);
}

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  /* Tam-en (100vw) bloklar (qalereya zolağı, mobil xidmət/xəbər şəkilləri) şaquli
     scrollbar-ın enini də daxil etdiyi üçün üfüqi scroll yaradırdı. "clip" (hidden-dən
     fərqli olaraq) scroll konteyneri yaratmır, sticky header-i pozmur. */
  overflow-x: clip;
}

.page-main {
  flex: 1;
  width: 100%;
  /* 1440px-də: 80 + 1280 (Figma məzmun eni) + 80. Daha geniş ekranda mərkəzdə qalır. */
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) 0;
}

/* Header-dən ilk elementə qədər məsafəni yalnız .page-main versin — ilk blokun öz
   yuxarı boşluğu (hero-ların 40px-i, breadcrumb-un 24px-i və s.) sıfırlanır. */
.page-main > :first-child {
  padding-top: 0;
  margin-top: 0;
}

/* about.html: header şəffafdır və video hero-nun üzərində oturur, .page-main hero-dan
   sonra başlayır. Banner → başlıq: 1440px-də 160px, 390px-də 100px, arada fasiləsiz. */
.page-hero + .page-main {
  padding-top: clamp(100px, calc(100px + (100vw - 390px) * 0.05714), 160px);
}

/* Mobil: hər səhifədə son blokdan footer-ə qədər məsafə dəqiq 100px.
   Son blokun öz alt padding/margin-i sıfırlanır, məsafəni yalnız .page-main verir. */
@media (max-width: 600px) {
  .page-main {
    padding-bottom: 100px;
  }

  .page-main > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* Planşet: footer.css-in köhnə 40px üst zolağı götürüldüyü üçün həmin 40px burada verilir
   (planşetdə footer-ə qədər məsafə əvvəlki kimi qalır). */
@media (min-width: 601px) and (max-width: 960px) {
  .page-main:not(.page-main--flush) {
    padding-bottom: 40px;
  }
}

/* Desktop: son məzmundan footer-ə qədər 160px (hər səhifədə eyni). Son blokun öz alt
   boşluğu sıfırlanır. 404 (.page-main--flush) istisnadır — səhnə bilərəkdən footer-ə qədər uzanır. */
@media (min-width: 961px) {
  .page-main:not(.page-main--flush) {
    padding-bottom: 160px;
  }

  .page-main:not(.page-main--flush) > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/*
 * Səhifənin yan boşluğu hər yerdə eyni: --page-pad-x (390px-də 20px, 1440px-də 80px).
 * Ana səhifənin bölmələri və footer-lər .page-main-in içində deyil, öz fayllarında
 * pilləli (80/24/20px) üfüqi padding-ləri var. "body " prefiksi spesifikliyi artırır ki,
 * bu qaydalar həmin fayllardakı (media query daxil) üfüqi dəyərləri fayl sırasından
 * asılı olmayaraq üstələsin. Şaquli padding-lərə toxunulmur.
 */
/*
 * 1440px-dən geniş ekranlarda məzmun .page-main kimi 1280px enində mərkəzdə qalsın,
 * fon isə tam en olsun: yan padding = max(--page-pad-x, (100% − 1280px) / 2).
 * 1440px-ə qədər bu, sadəcə --page-pad-x-dir.
 */
body .hero,
body .services,
body .who-we-are,
body .announcements,
body .partners__eyebrow,
body .site-footer__inner {
  padding-left: max(var(--page-pad-x), calc((100% - 1280px) / 2));
  padding-right: max(var(--page-pad-x), calc((100% - 1280px) / 2));
}

/* Fəaliyyətlər: track sağ kənara qədər uzanır (4-cü kart qismən görünür), sağ padding
   yalnız başlıq sətrindədir. Başlığın eni W olanda kontent = min(1280, W − pad-x),
   ona görə sağ padding = max(pad-x, W − 1280). Mobildə (≤600px) simmetrik padding qalır. */
body .activities {
  padding-left: max(var(--page-pad-x), calc((100% - 1280px) / 2));
  padding-right: 0;
}

body .activities__header {
  padding-right: max(var(--page-pad-x), calc(100% - 1280px));
}

@media (max-width: 600px) {
  body .activities {
    padding-right: var(--page-pad-x);
  }

  body .activities__header {
    padding-right: 0;
  }
}

/* İdarə Heyəti: desktopda slider sağ kənara qədər uzanır (sağ padding yoxdur),
   başlıq sətri isə sağdan boşluq saxlayır. */
body .board {
  padding-left: max(var(--page-pad-x), calc((100% - 1280px) / 2));
}

body .board__header {
  padding-right: max(var(--page-pad-x), calc((100% - 1280px) / 2));
}

@media (max-width: 960px) {
  body .board {
    padding-right: var(--page-pad-x);
  }

  body .board__header {
    padding-right: 0;
  }
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.app-root {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* =========================================================
   Scroll reveal (js/reveal.js). İstinad saytdan ölçülən dəyərlər:
   opacity 0 → 1 + translateY(40px) → 0, 0.6s ease-out, 95ms stagger. İstifadəçinin istəyi ilə
   daha yavaş/yumşaq edilib: 1.6s, cubic-bezier(.16,1,.3,1) (uzun, yumşaq "oturma"), stagger JS-də 180ms, trigger ekranın ~82%-ində.
   !important: gizli vəziyyət elementin öz opacity/transform/transition qaydalarından
   üstün olsun. Animasiya bitəndə JS class-ları silir, öz stilləri bərpa olunur.
   ========================================================= */
:root {
  --sr-y: 40px;
  --sr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 600px) {
  :root {
    --sr-y: 24px; /* mobildə daha yüngül hərəkət */
  }
}

.sr {
  opacity: 0 !important;
}

.sr:not(.sr--fade) {
  transform: translate3d(0, var(--sr-y), 0) !important;
}

.sr.sr--media {
  transform: translate3d(0, var(--sr-y), 0) scale(0.97) !important;
}

.sr-go {
  transition:
    opacity 1.6s var(--sr-ease) var(--sr-delay, 0ms),
    transform 1.6s var(--sr-ease) var(--sr-delay, 0ms) !important;
  will-change: opacity, transform; /* animasiya zamanı GPU qatında — daha hamar */
}

/*
 * Mobil (≤600px): əsas bölmələr arası 100px. Məsafə = əvvəlki bölmənin alt padding-i +
 * növbətinin üst padding-i; burada hər bölmə boşluğu yalnız üstdən alır (alt padding 0),
 * hero isə altdan (ondan sonrakı academy şəklinin padding-i yoxdur). `body` prefiksi
 * ayrı-ayrı bölmə fayllarındakı mobil padding-ləri üstələyir. Daxili səhifələrin məqalə
 * blokları (başlıq/şəkil/mətn, Figma-da 40–48px) bura daxil deyil.
 */
@media (max-width: 600px) {
  body .hero {
    padding-bottom: 100px;
  }

  body .services,
  body .who-we-are,
  body .activities,
  body .partners,
  body .announcements {
    padding-top: 100px;
    padding-bottom: 0;
  }

  body .board {
    padding-top: 100px; /* alt padding (footer-ə qədər 100px) board.css-də qalır */
  }

  /* about.html: intro → roadmap → statistika → komanda */
  body .roadmap {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  body .about-stats {
    padding-top: 0;
    padding-bottom: 100px;
  }

  body .team {
    padding-top: 0;
  }
}

/*
 * Slider ox düymələri (Fəaliyyətlərimiz, İdarə Heyəti, Peşəkar komandamız, Qalereya mobil):
 * Figma hover variantı 40 → 48px-dir (border 1 → 1.2px, ikon 30 → 36px), yəni hər şey
 * 1.2 dəfə böyüyür — scale(1.2) bunu dəqiq verir və layout-u sürüşdürmür.
 * Deaktiv (sona çatmış) düymə böyümür.
 */
.activities__arrow,
.board__arrow,
.team__arrow,
.gallery-grid__arrow {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .activities__arrow:not(:disabled):hover,
  .board__arrow:not(:disabled):hover,
  .team__arrow:not(:disabled):hover,
  .gallery-grid__arrow:not(:disabled):hover {
    transform: scale(1.2);
  }
}

/* =========================================================
   Yumşaq scroll (Lenis — js/vendor/lenis.min.js + js/smooth-scroll.js).
   Lenis-in öz lenis.css qaydaları.
   ========================================================= */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}