/* ========================================================= */
/*  Bu fayl saytın bütün görünüşünü idarə edir.      */
/*  Buradakı hər sinif və seçimçi HTML elementlərinə  */
/*  rəng, ölçü, boşluq, animasiya və düzülüş verir.   */
/* ========================================================= */

/*  :root ümumi dəyişənlər üçündür. */
/*  Burada əsas rəngləri bir dəfə yazırıq, sonra hər yerdə çağırırıq. */
:root {
  --primary: #0a6fe8; /*  Əsas mavi rəng. */
  --primary-dark: #084db0; /*  Tünd mavi ton. */
  --primary-soft: #dff0ff; /*  Açıq mavi fon tonlarından biri. */
  --sky: #f4faff; /*  Çox açıq mavi-ağ arxa fon. */
  --white: #ffffff; /*  Ağ rəng. */
  --text: #15304f; /*  Oxunaqlı əsas mətn rəngi. */
  --muted: #6d7f95; /*  Köməkçi açıq mətn rəngi. */
  --line: rgba(10, 111, 232, 0.12); /*  Xətt və çərçivə üçün şəffaf mavi. */
  --shadow: 0 20px 60px rgba(9, 77, 176, 0.12); /*  Kart kölgəsi. */
  --radius-xl: 28px; /*  Böyük radius. */
  --radius-lg: 22px; /*  Orta radius. */
  --radius-md: 16px; /*  Kiçik radius. */
  --container: 1240px; /*  Məzmunun maksimum eni. */
}

/*  Bütün elementlərdə qutu hesablamasını sabitləşdirir. */
* {
  box-sizing: border-box; /*  Padding və border eni ümumi enə daxil edilir. */
}

/*  html hissəsi yumşaq sürüşmə üçün istifadə olunur. */
html {
  scroll-behavior: smooth; /*  Anchor keçidləri yumşaq hərəkət edir. */
}

/*  body səhifənin əsas görünüşünü qurur. */
body {
  margin: 0; /*  Brauzerin standart kənar boşluğunu silir. */
  font-family: "Segoe UI", Arial, sans-serif; /*  Oxunaqlı şrift ailəsi. */
  background:
    radial-gradient(circle at top left, rgba(10, 111, 232, 0.14), transparent 30%),
    radial-gradient(circle at top right, rgba(84, 183, 255, 0.16), transparent 26%),
    linear-gradient(180deg, #fafdff 0%, #edf6ff 100%); /*  Canlı mavi-ağ arxa fon. */
  color: var(--text); /*  Mətn rəngi. */
  min-height: 100vh; /*  Səhifə ən azı ekran boyu olsun. */
}

/*  Keçidli UI üçün ümumi görünüş. */
a,
button,
input,
select,
textarea {
  transition: 0.25s ease; /*  Hover və fokuslar daha yumşaq görünsün. */
}

/*  Linklərin standart alt xətlərini silirik. */
a {
  color: inherit; /*  Link mətni valideyn rəngini götürür. */
  text-decoration: none; /*  Alt xətt silinir. */
}

/*  Şəkillər daşmasın. */
img {
  max-width: 100%; /*  Konteynerdən böyük olmasın. */
  display: block; /*  Alt boşluqları sabitləşdirir. */
}

/*  Ümumi konteyner sinifi. */
.container {
  width: min(100% - 32px, var(--container)); /*  Kiçik ekranlarda yan boşluq saxlayır. */
  margin: 0 auto; /*  Ortalayır. */
}

/*  Saytın üst başlıq hissəsi. */
.site-header {
  position: sticky; /*  Yuxarıda yapışqan qalsın. */
  top: 0; /*  Tam yuxarıda dayansın. */
  z-index: 50; /*  Digər elementlərin üstündə görünsün. */
  backdrop-filter: blur(14px); /*  Arxa fonu şüşə effekti ilə yumşaldır. */
  background: rgba(255, 255, 255, 0.8); /*  Şəffaf ağ başlıq fonu. */
  border-bottom: 1px solid var(--line); /*  Nazik alt xətt. */
}

/*  Header iç düzülüşü. */
.header-row {
  display: flex; /*  Elementləri üfüqi düzür. */
  align-items: center; /*  Şaquli ortalayır. */
  justify-content: space-between; /*  Sol və sağ tərəfi ayırır. */
  gap: 18px; /*  Aralıq verir. */
  min-height: 82px; /*  Header hündürlüyü. */
}

/*  Logo və sayt adı hissəsi. */
.brand {
  display: flex; /*  Logo ilə adı yanaşı göstərir. */
  align-items: center; /*  Şaquli mərkəz. */
  gap: 14px; /*  Aradakı boşluq. */
  flex-shrink: 0; /*  Kiçilməsin. */
}

/*  Logo üçün qabıq. */
.brand-badge {
  width: 56px; /*  Logo blok eni. */
  height: 56px; /*  Logo blok hündürlüyü. */
  padding: 10px; /*  İç boşluq. */
  border-radius: 18px; /*  Yumru künc. */
  background: linear-gradient(180deg, #ffffff 0%, #dff0ff 100%); /*  Yumşaq mavi-ağ keçid. */
  box-shadow: var(--shadow); /*  Dərinlik effekti. */
  border: 1px solid var(--line); /*  Nazik çərçivə. */
}

/*  Sayt adı hissəsi. */
.brand-text h1 {
  margin: 0; /*  Default margin silinir. */
  font-size: 1.15rem; /*  Başlıq ölçüsü. */
  line-height: 1.2; /*  Sətir hündürlüyü. */
}

/*  Kiçik köməkçi mətn. */
.brand-text span {
  display: block; /*  Yeni sətrə keçir. */
  color: var(--muted); /*  Solğun mətn. */
  font-size: 0.9rem; /*  Köməkçi ölçü. */
}

/*  Header sağ hissəsi. */
.header-tools {
  display: flex; /*  Üfüqi düzülüş. */
  align-items: center; /*  Mərkəzlənmə. */
  gap: 12px; /*  Boşluq. */
  flex: 1; /*  Qalan eni tutsun. */
  justify-content: flex-end; /*  Sağa yığ. */
}

/*  Axtarış forması. */
.search-shell {
  display: flex; /*  İkon, input və düyməni yan-yana düzür. */
  align-items: center; /*  Şaquli mərkəz. */
  gap: 10px; /*  Aralıq. */
  min-width: 320px; /*  Çox kiçilməsin. */
  width: min(100%, 600px); /*  Böyük ekranlarda maksimum eni saxlayır. */
  background: var(--white); /*  Ağ fon. */
  border: 1px solid var(--line); /*  Nazik kontur. */
  border-radius: 999px; /*  Tam yumru kapsul forma. */
  padding: 10px 12px 10px 16px; /*  İç boşluqlar. */
  box-shadow: var(--shadow); /*  Kölgə. */
}

/*  Axtarış ikon sahəsi. */
.search-shell i {
  color: var(--primary); /*  Mavi ikon rəngi. */
}

/*  Axtarış input-u. */
.search-shell input {
  border: none; /*  Standart çərçivə silinir. */
  outline: none; /*  Klik zamanı sərt çərçivə silinir. */
  font-size: 0.98rem; /*  Mətn ölçüsü. */
  width: 100%; /*  Boş qalan sahəni doldurur. */
  background: transparent; /*  Şəffaf fon. */
  color: var(--text); /*  Mətn rəngi. */
}

/*  Ümumi düymə görünüşü. */
.btn {
  border: none; /*  Standart border silinir. */
  cursor: pointer; /*  Klik edilə bildiyini göstərir. */
  border-radius: 999px; /*  Yumru forma. */
  padding: 12px 18px; /*  İç boşluq. */
  font-weight: 700; /*  Qalın mətn. */
  display: inline-flex; /*  İkon və mətn yanaşı olsun. */
  align-items: center; /*  Mərkəzlənmə. */
  justify-content: center; /*  Ortala. */
  gap: 8px; /*  İkon və mətn arası. */
}

/*  Əsas düymə. */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #40a4ff 100%); /*  Mavi keçidli fon. */
  color: var(--white); /*  Ağ mətn. */
  box-shadow: 0 14px 30px rgba(10, 111, 232, 0.26); /*  Güclü parlaq kölgə. */
}

/*  Hover effekti. */
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.book-card:hover,
.author-card:hover,
.panel:hover {
  transform: translateY(-2px); /*  Yüngül yuxarı qalxma. */
}

/*  İkinci düymə. */
.btn-secondary {
  background: var(--white); /*  Ağ fon. */
  color: var(--primary-dark); /*  Tünd mavi mətn. */
  border: 1px solid var(--line); /*  Çərçivə. */
  box-shadow: var(--shadow); /*  Kölgə. */
}

/*  Xəyal düymə. */
.btn-ghost {
  background: rgba(255, 255, 255, 0.65); /*  Şəffaf-ağ fon. */
  color: var(--text); /*  Mətn rəngi. */
  border: 1px solid var(--line); /*  Nazik xətt. */
}

/*  Yuxarı naviqasiya linkləri. */
.nav-links {
  display: flex; /*  Yanaşı düzülüş. */
  align-items: center; /*  Mərkəzlənmə. */
  gap: 10px; /*  Boşluq. */
  flex-wrap: wrap; /*  Kiçik ekranlarda aşağı düşə bilər. */
}

/*  Naviqasiya link kapsulu. */
.nav-link {
  padding: 10px 14px; /*  İç boşluq. */
  border-radius: 999px; /*  Yumru forma. */
  color: var(--muted); /*  Solğun mətn. */
  font-weight: 600; /*  Oxunaqlı qalınlıq. */
}

/*  Aktiv və hover link görünüşü. */
.nav-link:hover,
.nav-link.active {
  background: rgba(10, 111, 232, 0.09); /*  Açıq mavi fon. */
  color: var(--primary-dark); /*  Mətn daha qabarıq olur. */
}

/*  Hero hissəsi. */
.hero {
  padding: 42px 0 22px; /*  Yuxarı və aşağı boşluq. */
}

/*  Hero iç kartı. */
.hero-shell {
  display: grid; /*  İki sütunlu quruluş. */
  grid-template-columns: 1.15fr 0.85fr; /*  Sol hissə daha genişdir. */
  gap: 26px; /*  Sütunlar arası boşluq. */
  align-items: center; /*  Mərkəzlənmə. */
  background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(223,240,255,0.92)); /*  Parlaq fon. */
  border: 1px solid var(--line); /*  Kontur. */
  border-radius: var(--radius-xl); /*  Yumru künc. */
  box-shadow: var(--shadow); /*  Kölgə. */
  overflow: hidden; /*  Daxili elementlər kənara daşmasın. */
}

/*  Sol hero mətn hissəsi. */
.hero-copy {
  padding: 42px; /*  İç boşluq. */
}

/*  Hero balaca etiket. */
.hero-chip {
  display: inline-flex; /*  İç məzmun qədər yer tutur. */
  align-items: center; /*  Şaquli ortalayır. */
  gap: 8px; /*  Aralıq. */
  padding: 10px 14px; /*  İç boşluq. */
  border-radius: 999px; /*  Kapsul forma. */
  background: rgba(10, 111, 232, 0.08); /*  Açıq mavi fon. */
  color: var(--primary-dark); /*  Tünd mavi mətn. */
  font-weight: 700; /*  Etiket vurğusu. */
}

/*  Hero başlıq. */
.hero-copy h2 {
  font-size: clamp(2rem, 3vw, 3.3rem); /*  Ekrana uyğun böyüyən başlıq. */
  line-height: 1.08; /*  Yığcam sətir hündürlüyü. */
  margin: 18px 0 14px; /*  Boşluqlar. */
}

/*  Hero mətn. */
.hero-copy p {
  color: var(--muted); /*  Oxunaqlı köməkçi ton. */
  line-height: 1.8; /*  Rahat oxunuş. */
  font-size: 1rem; /*  Bədən mətn ölçüsü. */
}

/*  Hero alt düymə və statistika qrupu. */
.hero-actions,
.stats-row {
  display: flex; /*  Üfüqi düzülüş. */
  align-items: center; /*  Mərkəzlənmə. */
  gap: 14px; /*  Boşluq. */
  flex-wrap: wrap; /*  Kiçik ekranda sətir dəyişə bilər. */
}

/*  Statistika kartları. */
.stat-pill {
  min-width: 120px; /*  Minimum en. */
  padding: 16px 18px; /*  İç boşluq. */
  background: rgba(255,255,255,0.7); /*  Yumşaq ağ fon. */
  border-radius: 18px; /*  Yumru künc. */
  border: 1px solid var(--line); /*  Kontur. */
}

/*  Hero sağ vizual hissə. */
.hero-visual {
  position: relative; /*  Daxili dekorlar üçün əsas koordinat sistemi. */
  min-height: 460px; /*  Hündürlük. */
  padding: 30px; /*  İç boşluq. */
  display: flex; /*  Daxildə ortalamaq üçün. */
  align-items: center; /*  Şaquli ortala. */
  justify-content: center; /*  Üfüqi ortala. */
}

/*  Üst-üstə duran kitab kartları. */
.hero-stack {
  position: relative; /*  Daxili kartların yerləşməsi üçün. */
  width: min(100%, 400px); /*  Maksimum vizual eni. */
  height: 380px; /*  Sabit görünüş hündürlüyü. */
}

/*  Hero dekor kartı. */
.floating-book {
  position: absolute; /*  Üst-üstə sərbəst yerləşir. */
  width: 240px; /*  Kart eni. */
  height: 320px; /*  Kart boyu. */
  border-radius: 24px; /*  Yumru künc. */
  overflow: hidden; /*  İç şəkil kənara çıxmasın. */
  box-shadow: 0 28px 40px rgba(8, 77, 176, 0.22); /*  Güclü kölgə. */
  border: 1px solid rgba(255,255,255,0.7); /*  Parlaq kontur. */
  animation: floatCard 5s ease-in-out infinite; /*  Yüngül yırğalanma. */
}

/*  Birinci kartın mövqeyi. */
.floating-book.book-a {
  left: 0; /*  Sol tərəf. */
  top: 20px; /*  Yuxarı məsafə. */
  transform: rotate(-9deg); /*  Azca sola əyim. */
}

/*  İkinci kartın mövqeyi. */
.floating-book.book-b {
  right: 0; /*  Sağ tərəf. */
  bottom: 10px; /*  Aşağı məsafə. */
  transform: rotate(8deg); /*  Azca sağa əyim. */
  animation-delay: 0.6s; /*  Animasiya fərqli zamanda başlasın. */
}

/*  Ümumi bölmə stilı. */
.section {
  padding: 24px 0 8px; /*  Bölmələr arası boşluq. */
}

/*  Bölmə başlığı. */
.section-heading {
  display: flex; /*  Başlıq və sağ düyməni yanaşı saxlayır. */
  align-items: end; /*  Alt xəttə yaxınlaşdırır. */
  justify-content: space-between; /*  Sol və sağı ayırır. */
  gap: 18px; /*  Aralıq. */
  margin-bottom: 18px; /*  Aşağı boşluq. */
}

/*  Başlıq mətni. */
.section-heading h3 {
  margin: 0; /*  Default margin silinir. */
  font-size: clamp(1.55rem, 2vw, 2.2rem); /*  Adaptiv ölçü. */
}

/*  Kiçik izah mətnləri. */
.section-heading p,
.muted {
  margin: 6px 0 0; /*  Yuxarıda az boşluq. */
  color: var(--muted); /*  Solğun mətn. */
  line-height: 1.7; /*  Rahat oxunuş. */
}

/*  Müəllif marqı hissəsinin çərçivəsi. */
.marquee-shell {
  position: relative; /*  Daxili kölgə overlay üçün. */
  overflow: hidden; /*  Hərəkət edən kartları çərçivədə saxlayır. */
  border-radius: var(--radius-lg); /*  Yumru künc. */
  border: 1px solid var(--line); /*  Kontur. */
  background: rgba(255,255,255,0.7); /*  Şəffaf ağ fon. */
  box-shadow: var(--shadow); /*  Kölgə. */
}

/*  Müəllif lentinin özü. */
.marquee-track {
  display: flex; /*  Kartları üfüqi düzür. */
  gap: 18px; /*  Aralıq verir. */
  padding: 18px; /*  İç boşluq. */
  width: max-content; /*  Daxili məzmun qədər genişlənir. */
  animation: scrollAuthors 32s linear infinite; /*  Davamlı hərəkət. */
  will-change: transform; /*  Performansı artırır. */
}

/*  Üzərinə gəldikdə hərəkət dayansın. */
.marquee-shell:hover .marquee-track {
  animation-play-state: paused; /*  Hover zamanı dayandırır. */
}

/*  Müəllif kartı. */
.author-card {
  width: 220px; /*  Kart eni. */
  min-height: 132px; /*  Kart minimum hündürlüyü. */
  padding: 18px; /*  İç boşluq. */
  border-radius: 24px; /*  Yumru forma. */
  background: linear-gradient(180deg, #ffffff 0%, #e8f4ff 100%); /*  Yüngül mavi kart fonu. */
  border: 1px solid var(--line); /*  Kontur. */
  box-shadow: var(--shadow); /*  Kölgə. */
  flex: 0 0 auto; /*  Kart eni sabit qalsın. */
}

/*  Kitablar şəbəkəsi. */
.book-grid {
  display: grid; /*  Grid sistemi. */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /*  Ekranda 4 kart. */
  gap: 22px; /*  Kartlar arası boşluq. */
}

/*  Kitab kartı. */
.book-card {
  display: flex; /*  Daxildə şaquli düzülüş. */
  flex-direction: column; /*  Yuxarıdan aşağı düz. */
  background: rgba(255,255,255,0.9); /*  Şüşəvari ağ fon. */
  border-radius: 26px; /*  Yumru künc. */
  border: 1px solid var(--line); /*  Kontur. */
  overflow: hidden; /*  Şəkil daşmasın. */
  box-shadow: var(--shadow); /*  Kölgə. */
  min-height: 100%; /*  Sütunlarda bərabər görünüş. */
}

/*  Kitab qabığı hissəsi. */
.book-cover {
  aspect-ratio: 4 / 5; /*  Qabıq nisbəti. */
  position: relative; /*  Üzərinə badge yerləşdirmək üçün. */
  overflow: hidden; /*  Şəkil daşmasın. */
  background: linear-gradient(135deg, #6fc5ff, #0a6fe8); /*  Şəkil yoxdursa fon göstərir. */
}

/*  Qabıq şəkli. */
.book-cover img {
  width: 100%; /*  Tam eni doldurur. */
  height: 100%; /*  Tam hündürlüyü doldurur. */
  object-fit: cover; /*  Şəkil gözəl kəsilsin. */
}

/*  Janr etiketi. */
.badge {
  position: absolute; /*  Şəklin üstündə sərbəst yerləşsin. */
  top: 16px; /*  Yuxarı məsafə. */
  left: 16px; /*  Sol məsafə. */
  padding: 8px 12px; /*  İç boşluq. */
  border-radius: 999px; /*  Kapsul forma. */
  background: rgba(255,255,255,0.92); /*  Parlaq etiket fonu. */
  color: var(--primary-dark); /*  Mətn rəngi. */
  font-size: 0.8rem; /*  Kiçik etiket ölçüsü. */
  font-weight: 700; /*  Qalın görünüş. */
}

/*  Kartın mətn hissəsi. */
.book-body {
  display: flex; /*  Şaquli düzülüş. */
  flex-direction: column; /*  Yuxarıdan aşağı. */
  gap: 10px; /*  Aralıq. */
  padding: 18px; /*  İç boşluq. */
  height: 100%; /*  Kart boyunu doldursun. */
}

/*  Kiçik meta məlumat. */
.meta-row {
  display: flex; /*  Üfüqi. */
  align-items: center; /*  Mərkəz. */
  justify-content: space-between; /*  Sol və sağ aralanır. */
  gap: 12px; /*  Aralıq. */
  color: var(--muted); /*  Solğun mətn. */
  font-size: 0.92rem; /*  Kiçik ölçü. */
}

/*  Kart başlığı. */
.book-title {
  margin: 0; /*  Default margin silinir. */
  font-size: 1.15rem; /*  Başlıq ölçüsü. */
  line-height: 1.35; /*  Oxunaqlı hündürlük. */
}

/*  Kart izahı. */
.book-desc {
  color: var(--muted); /*  Solğun mətn. */
  line-height: 1.75; /*  Rahat oxunuş. */
  flex: 1; /*  Boşluq qalsa uzansın. */
}

/*  Panel tipləri. */
.panel {
  background: rgba(255,255,255,0.92); /*  Ağ panel fonu. */
  border-radius: var(--radius-lg); /*  Yumru künc. */
  border: 1px solid var(--line); /*  Kontur. */
  box-shadow: var(--shadow); /*  Kölgə. */
  padding: 24px; /*  İç boşluq. */
}

/*  Form şəbəkəsi. */
.form-grid {
  display: grid; /*  Grid düzülüşü. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /*  İki sütun. */
  gap: 18px; /*  Boşluq. */
}

/*  Form tam sütun sahəsi. */
.full-span {
  grid-column: 1 / -1; /*  Bütün sütunları əhatə edir. */
}

/*  Form qrupları. */
.field {
  display: flex; /*  Şaquli düzülüş. */
  flex-direction: column; /*  Yuxarıdan aşağı. */
  gap: 8px; /*  Boşluq. */
}

/*  Etiket. */
.field label {
  font-weight: 700; /*  Başlıq vurğusu. */
  font-size: 0.95rem; /*  Etiket ölçüsü. */
}

/*  Input, select, textarea görünüşü. */
.field input,
.field select,
.field textarea {
  width: 100%; /*  Tam eni tut. */
  border: 1px solid rgba(10, 111, 232, 0.16); /*  Yumşaq sərhəd. */
  border-radius: 16px; /*  Yumru künc. */
  background: rgba(250, 252, 255, 0.98); /*  Açıq fon. */
  padding: 14px 16px; /*  İç boşluq. */
  font: inherit; /*  Valideyn şriftini götürür. */
  color: var(--text); /*  Mətn rəngi. */
  outline: none; /*  Default outline silinir. */
}

/*  Fokus görünüşü. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(10, 111, 232, 0.46); /*  Fokusda daha tünd xətt. */
  box-shadow: 0 0 0 5px rgba(10, 111, 232, 0.08); /*  Parlaq fokus halqası. */
}

/*  Textarea minimum hündürlüyü. */
.field textarea {
  min-height: 140px; /*  Daha rahat mətn yazmaq üçün. */
  resize: vertical; /*  Yalnız şaquli böyüsün. */
}

/*  Detal səhifə quruluşu. */
.detail-layout {
  display: grid; /*  İki sütunlu görünüş. */
  grid-template-columns: 0.85fr 1.15fr; /*  Sol qabıq, sağ məlumat. */
  gap: 26px; /*  Aralıq. */
}

/*  Böyük qabıq kartı. */
.detail-cover {
  border-radius: 28px; /*  Yumru künc. */
  overflow: hidden; /*  Şəkil çölə çıxmasın. */
  border: 1px solid var(--line); /*  Kontur. */
  box-shadow: var(--shadow); /*  Kölgə. */
  background: linear-gradient(180deg, #e8f4ff 0%, #ffffff 100%); /*  Fon. */
}

/*  Detal məlumat kartı. */
.detail-info {
  display: flex; /*  Şaquli düzülüş. */
  flex-direction: column; /*  Yuxarıdan aşağı. */
  gap: 16px; /*  Aralıq. */
}

/*  Məlumat cədvəli kimi görünən sətirlər. */
.info-list {
  display: grid; /*  Kiçik kart grid. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /*  İki sütun. */
  gap: 12px; /*  Aralıq. */
}

/*  Kiçik info blokları. */
.info-item {
  padding: 16px; /*  İç boşluq. */
  border-radius: 18px; /*  Yumru künc. */
  background: rgba(10, 111, 232, 0.05); /*  Açıq mavi fon. */
  border: 1px solid rgba(10, 111, 232, 0.08); /*  Yumşaq kontur. */
}

/*  Statistik siyahı. */
.inline-list {
  display: flex; /*  Üfüqi düzülüş. */
  gap: 10px; /*  Aralıq. */
  flex-wrap: wrap; /*  Kiçik ekranda qırılsın. */
}

/*  Kiçik kapsullar. */
.tag {
  padding: 8px 12px; /*  İç boşluq. */
  border-radius: 999px; /*  Kapsul forma. */
  background: rgba(10, 111, 232, 0.08); /*  Açıq mavi fon. */
  color: var(--primary-dark); /*  Tünd mavi mətn. */
  font-size: 0.88rem; /*  Kiçik ölçü. */
  font-weight: 700; /*  Qalın mətn. */
}

/*  Cədvəl üçün wrapper. */
.table-wrap {
  overflow-x: auto; /*  Dar ekranda üfüqi sürüşmə olsun. */
}

/*  Ümumi cədvəl görünüşü. */
table {
  width: 100%; /*  Tam eni tut. */
  border-collapse: collapse; /*  Xətlər birləşsin. */
}

/*  Cədvəl xanalari. */
th,
td {
  text-align: left; /*  Mətni sola düzür. */
  padding: 14px 12px; /*  İç boşluq. */
  border-bottom: 1px solid rgba(10, 111, 232, 0.08); /*  Sətiraltı xətt. */
  vertical-align: top; /*  Məzmun yuxarıdan başlasın. */
}

/*  Cədvəl başlığı. */
th {
  color: var(--primary-dark); /*  Tünd mavi. */
  font-size: 0.92rem; /*  Kiçik başlıq ölçüsü. */
}

/*  Footer görünüşü. */
.site-footer {
  margin-top: 40px; /*  Yuxarı boşluq. */
  padding: 28px 0 50px; /*  İç boşluq. */
}

/*  Footer kartı. */
.footer-card {
  display: grid; /*  Grid quruluş. */
  grid-template-columns: 1.1fr 0.9fr; /*  İki sütun. */
  gap: 24px; /*  Aralıq. */
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(223,240,255,0.95)); /*  Ağ-mavi fon. */
  border: 1px solid var(--line); /*  Kontur. */
  border-radius: var(--radius-xl); /*  Yumru künc. */
  box-shadow: var(--shadow); /*  Kölgə. */
  padding: 28px; /*  İç boşluq. */
}

/*  Xəritə düyməsi və əlaqə hissələri. */
.contact-list {
  display: grid; /*  Grid düzülüş. */
  gap: 12px; /*  Aralıq. */
}

/*  Toast bildiriş. */
.toast {
  position: fixed; /*  Ekrana sabit yapışır. */
  right: 20px; /*  Sağ məsafə. */
  bottom: 20px; /*  Alt məsafə. */
  z-index: 90; /*  Üstdə görünsün. */
  min-width: 260px; /*  Minimum eni. */
  max-width: 360px; /*  Maksimum eni. */
  padding: 14px 16px; /*  İç boşluq. */
  border-radius: 18px; /*  Yumru künc. */
  color: var(--white); /*  Ağ mətn. */
  background: linear-gradient(135deg, #0a6fe8, #084db0); /*  Mavi bildiriş fonu. */
  box-shadow: 0 20px 40px rgba(8, 77, 176, 0.28); /*  Kölgə. */
  opacity: 0; /*  Başda görünməsin. */
  pointer-events: none; /*  Klik tutmasın. */
  transform: translateY(14px); /*  Aşağıdan çıxış effekti. */
}

/*  Aktiv toast görünüşü. */
.toast.show {
  opacity: 1; /*  Görünür olur. */
  transform: translateY(0); /*  Yerinə gəlir. */
}

/*  Yükləmə spineri. */
.spinner {
  width: 48px; /*  En. */
  height: 48px; /*  Hündürlük. */
  border: 4px solid rgba(10, 111, 232, 0.15); /*  Xarici açıq halqa. */
  border-top-color: var(--primary); /*  Hərəkət edən tünd hissə. */
  border-radius: 50%; /*  Dairə forma. */
  animation: spin 0.9s linear infinite; /*  Fırlanma animasiyası. */
  margin: 24px auto; /*  Ortalanma. */
}

/*  Kiçik boş vəziyyət qutusu. */
.empty-state {
  text-align: center; /*  Mətni ortala. */
  padding: 34px 18px; /*  İç boşluq. */
  color: var(--muted); /*  Solğun rəng. */
  background: rgba(255,255,255,0.75); /*  Açıq panel fonu. */
  border: 1px dashed rgba(10, 111, 232, 0.18); /*  Kəsik xəttli kontur. */
  border-radius: 22px; /*  Yumru künc. */
}

/*  Mətnin limitlə qısaldılması. */
.clamp-2 {
  display: -webkit-box; /*  WebKit əsaslı sətir məhdudiyyəti. */
  -webkit-line-clamp: 2; /*  2 sətrə qədər göstər. */
  -webkit-box-orient: vertical; /*  Şaquli istiqamət. */
  overflow: hidden; /*  Artıq mətn gizlənsin. */
}

/*  Hərəkət animasiyası. */
@keyframes scrollAuthors {
  from { transform: translateX(0); } /*  Başlanğıc nöqtəsi. */
  to { transform: translateX(-50%); } /*  Track yarısı qədər sola gedir. */
}

/*  Hero kartlarının yırğalanması. */
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } /*  Baş və son hal. */
  50% { transform: translateY(-10px) rotate(var(--tilt, 0deg)); } /*  Ortada yuxarı qalxır. */
}

/*  Yükləmə spinerinin dönməsi. */
@keyframes spin {
  to { transform: rotate(360deg); } /*  Bir tam dövr edir. */
}

/*  Planşet üçün uyğunlaşma. */
@media (max-width: 1080px) {
  .hero-shell,
  .detail-layout,
  .footer-card {
    grid-template-columns: 1fr; /*  Tək sütuna düşür. */
  }

  .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /*  2 kart görünür. */
  }

  .header-row {
    flex-wrap: wrap; /*  Elementlər sətir dəyişə bilər. */
    padding: 14px 0; /*  İç boşluq. */
  }

  .header-tools {
    width: 100%; /*  Tam genişlik alsın. */
    justify-content: space-between; /*  Aralı görünsün. */
    flex-wrap: wrap; /*  Sətir qırıla bilər. */
  }

  .search-shell {
    min-width: 100%; /*  Tam en tutsun. */
  }
}

/*  Telefon üçün uyğunlaşma. */
@media (max-width: 700px) {
  .book-grid,
  .form-grid,
  .info-list {
    grid-template-columns: 1fr; /*  Tək sütun olur. */
  }

  .hero-copy,
  .panel,
  .footer-card {
    padding: 18px; /*  Boşluqlar azalır. */
  }

  .hero-visual {
    min-height: 320px; /*  Daha kompakt görünüş. */
  }

  .floating-book {
    width: 180px; /*  Kart eni kiçilir. */
    height: 250px; /*  Kart boyu kiçilir. */
  }

  .nav-links {
    width: 100%; /*  Tam enə yayılsın. */
  }

  .nav-link {
    flex: 1 1 auto; /*  Linklər balanslı böyüsün. */
    text-align: center; /*  Mərkəzlə. */
  }
}



/* =======================================================
   HEADER DESKTOP YENİ KOMPAKT QURULUŞ
   1) LOGO + SAYT ADI SOLDA
   2) MENU ORTADA
   3) SEARCH + AUTH SAĞDA
   4) HEADER HÜNDÜRLÜYÜ AZALDILIR
   5) BOOK CARD HÜNDÜRLÜYÜ SƏLİQƏLİLƏŞDİRİLİR
   ======================================================= */

@media (min-width: 981px) {

  /*  Header ümumi görünüşü daha kompakt və səliqəli olsun. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(90, 145, 220, 0.12);
    box-shadow: 0 8px 22px rgba(31, 78, 146, 0.07);
  }

  /*  Header artıq tək sətirli quruluşa keçir. */
  .header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 18px;
    min-height: 74px;
    padding: 10px 0;
  }

  /*  Logo və sayt adı solda dayanır. */
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
  }

  /*  Logo qabığını daha təmiz və kiçik edirik. */
  .brand-badge {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    padding: 6px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    border: 1px solid rgba(88, 144, 226, 0.16);
    box-shadow:
      0 8px 18px rgba(35, 83, 155, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.90);
  }

  /*  Logo şəkli qabığın içində səliqəli otursun. */
  .brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 10px;
  }

  /*  Sayt adı hissəsini yığcam saxlayırıq. */
  .brand-text {
    min-width: 0;
  }

  .brand-text h1 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.1;
    color: #153f79;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .brand-text span {
    display: block;
    margin-top: 3px;
    font-size: 0.77rem;
    color: #6882a7;
    line-height: 1.25;
    white-space: nowrap;
  }

  /*  Header sağ hissədə olan elementləri bir sırada saxlayırıq. */
  .header-tools {
    display: contents;
  }

  /*  Əsas menu ortada dayansın. */
  .nav-links {
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f4f9ff);
    border: 1px solid rgba(91, 146, 228, 0.12);
    box-shadow: 0 6px 14px rgba(31, 72, 131, 0.04);
    flex-wrap: nowrap;
    width: max-content;
    justify-self: center;
  }

  /*  Home və ERD kimi linklərin görünüşü. */
  .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #1a4f97;
    font-size: 0.90rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.22s ease;
    background: transparent;
  }

  .nav-link:hover {
    background: linear-gradient(180deg, #eaf3ff, #dcecff);
    color: #0e3f82;
    transform: translateY(-1px);
  }

  /*  Aktiv səhifə seçili görünsün. */
  body[data-page="home"] .nav-link[href*="index.html"],
  body[data-page="favorites"] .nav-link[href*="favorites.html"],
  body[data-page="profile"] .nav-link[href*="profile.html"],
  body[data-page="diagram"] .nav-link[href*="diagrams.html"],
  body[data-page="admin"] .nav-link[href*="admin.html"] {
    background: linear-gradient(180deg, #0b73ea, #0a5fca);
    color: #ffffff;
    box-shadow: 0 8px 14px rgba(11, 105, 220, 0.16);
  }

  /*  Search və auth hissəsi birlikdə sağda dayansın. */
  .search-shell {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 46px;
    padding: 0 10px 0 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f4f9ff);
    border: 1px solid rgba(94, 147, 226, 0.14);
    box-shadow: 0 8px 18px rgba(31, 72, 131, 0.05);
    justify-self: end;
    margin-right: 182px;
  }

  /*  Search ikon görünüşü. */
  .search-shell i {
    color: #5d7faa;
    font-size: 0.92rem;
    flex: 0 0 auto;
  }

  /*  Search input görünüşü. */
  .search-shell input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #173f7a;
    font-size: 0.90rem;
  }

  .search-shell input::placeholder {
    color: #7d97b8;
  }

  /*  Search düyməsini kiçik və yığcam saxlayırıq. */
  .search-shell .btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    flex: 0 0 auto;
  }

  /*  Auth düymələri sağın ən kənarında ayrıca dayansın. */
  #authActions.nav-links {
    grid-column: 3 / 4;
    justify-self: end;
    margin-left: 12px;

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 8px;

    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /*  Auth düymələrinin görünüşü. */
  #authActions .btn {
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 0.87rem;
  }

  /*  Desktop-da təkrar görünməsin deyə bu nav linkləri gizlədirik.
     Bunlar auth hissəsində ayrıca görünəcək. */
  .header-row > .nav-links .nav-link[href*="favorites.html"],
  .header-row > .nav-links .nav-link[href*="profile.html"],
  .header-row > .nav-links .nav-link[href*="admin.html"] {
    display: none !important;
  }

  /*  Header konteynerinə relative veririk ki, auth düymələrini sağa sabitləyə bilək. */
  .site-header .container.header-row {
    position: relative;
  }

  /* =======================================================
     BOOK CARD DESKTOP DÜZƏLİŞİ
     1) KARTLAR ÇOX UZUN GÖRÜNMƏSİN
     2) AÇIQLAMA MAKSİMUM 5 SƏTR OLSUN
     ======================================================= */

  /*  Kitab gridində kartlar daha kompakt qalsın. */
  .book-grid {
    gap: 20px;
  }

  /*  Kart ümumi görünüşünü yüngülcə yığcamlaşdırırıq. */
  .book-card {
    border-radius: 22px;
  }

  /*  Şəkil hissəsinin hündürlüyünü bir az azaldırıq. */
  .book-cover {
    aspect-ratio: 4 / 4.6;
  }

  /*  Kart içi boşluqları azaldırıq. */
  .book-body {
    gap: 8px;
    padding: 16px;
  }

  /*  Kart başlığı bir az yığcam olsun. */
  .book-title {
    font-size: 1.05rem;
    line-height: 1.32;
  }

  /*  Açıqlama maksimum 5 sətir görünsün. */
  .book-desc {
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.93rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6em * 5);
    max-height: calc(1.6em * 5);
  }

  /*  Kartdakı alt düymələr də daha səliqəli olsun. */
  .book-body .btn {
    min-height: 38px;
    padding: 10px 14px;
    font-size: 0.86rem;
  }
}

/* =======================================================
   HEADER TƏKRAR DÜYMƏLƏRİN GİZLƏDİLMƏSİ
   Ortadakı Favorites və Profile qalsın,
   sağdakı auth hissəsində təkrar görünməsin
   ======================================================= */

@media (min-width: 981px) {
  /*  Sağdakı auth hissəsində Favorites düyməsini gizlədirik. */
  #authActions a[href*="favorites.html"] {
    display: none !important;
  }

  /*  Sağdakı auth hissəsində Profile düyməsini gizlədirik. */
  #authActions a[href*="profile.html"] {
    display: none !important;
  }

  /*  Sağdakı auth hissəsində Admin də ortada qalırsa bunu da gizlət. 
  #authActions a[href*="admin.html"] {
    display: none !important;
  }*/
}

/* =======================================================
   BOOK CARD HÜNDÜRLÜK DÜZƏLİŞİ
   Kartın arxa fonu çox uzanmasın
   ======================================================= */

@media (min-width: 981px) {
  .book-card {
    height: auto;
    min-height: unset;
  }

  .book-body {
    height: auto;
  }

  .book-desc {
    flex: unset;
    min-height: auto;
    max-height: calc(1.6em * 5);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =======================================================
   LOAD MORE BOOKS BUTTON
   1) KİTABLARIN ALTINDA DÜYMƏ ORTADA GÖRÜNSÜN
   2) GÖRÜNÜŞÜ SƏLİQƏLİ OLSUN
   ======================================================= */

/*  Bu wrapper düyməni ortalamaq üçündür. */
.load-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

/*  Show More Books düyməsinin görünüşü. */
#loadMoreBooksBtn {
  min-width: 190px;
  height: 46px;
  border-radius: 14px;
  font-weight: 700;
}