/* ═══════════════════════════════════════
   CAUCASICA.EARTH - MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  /* 1. Naviqasiya Paneli */
  nav {
    padding: 12px 20px !important; /* Kənar boşluqları azaltdıq */
    background: rgba(
      18,
      13,
      10,
      0.98
    ) !important; /* Daha tünd və oxunaqlı fon */
    backdrop-filter: blur(15px);
    justify-content: space-between;
  }

  /* Logonu bir az kiçildirik ki, yanındakı düyməyə yer qalsın */
  .nav-brand {
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
  }

  /* Desktop menyusunu tamamilə gizlədirik */
  .nav-links {
    display: none !important;
  }

  /* "Begin Journey" düyməsini mobilə uyğunlaşdırırıq */
  .nav-cta {
    padding: 6px 12px !important;
    font-size: 0.6rem !important;
    letter-spacing: 1px !important;
    border-radius: 2px;
  }

  /* 2. WhatsApp Düyməsi (UX Təkmilləşdirməsi) */
  .wa-float {
    bottom: 15px !important;
    right: 15px !important;
    transform: scale(0.9); /* Mobildə bir az kiçik daha yaxşı görünür */
  }

  /* Mobildə "Chat on WhatsApp" yazısı çox yer tutur, onu gizlədib yalnız ikon saxlayırıq */
  .wa-label {
    display: none !important;
  }

  /* 3. Kursor Problemi */
  /* Mobildə fiziki kursor olmadığı üçün bu elementlər toxunuş zamanı problem yarada bilər */
  .cursor,
  .cursor-ring {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  /* 4. Ümumi Kontent Uyğunluğu */
  section {
    padding: 60px 20px !important; /* Bölmələr arası boşluqları mobildə daraldırıq */
  }

  h1 {
    font-size: 2rem !important; /* Başlıqları mobildə oxunaqlı ölçüyə salırıq */
    line-height: 1.2;
  }

  p {
    font-size: 0.9rem !important;
    line-height: 1.6;
  }
}

/* ═══════════════════════════════════════
   ƏLAVƏ: Cihaz çox kiçikdirsə (iPhone SE və s.)
═══════════════════════════════════════ */

/* Çox kiçik ekranlarda ".EARTH" hissəsini gizlədirik ki, logo sığsın */
/* @media only screen and (max-width: 380px) {
  .nav-brand span {
    display: none; 
  }
  
  .nav-cta {
    font-size: 0.55rem !important;
  }
} */

/* ═══════════════════════════════════════
   FEE MODEL MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #fee-model {
    padding: 60px 20px !important; /* Kənar boşluqları daraldırıq */
  }

  /* Başlıq hissəsini alt-alta yığırıq */
  .fee-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 40px;
  }

  .fee-top p {
    text-align: left !important; /* Mobildə sağa meyilli mətn oxunuşu çətinləşdirir */
    max-width: 100% !important;
    font-size: 0.95rem;
  }

  /* 2 sütunlu kartları tək sütuna salırıq */
  .fee-layout {
    grid-template-columns: 1fr !important;
    gap: 15px; /* Kartlar arasında nəfəs almaq üçün boşluq */
  }

  .fee-card {
    padding: 40px 30px !important;
  }

  .fee-pct {
    font-size: 3.5rem !important; /* Rəqəmləri bir az kiçildirik */
  }

  /* Narıncı Hero blokunu (80%) səliqəyə salırıq */
  .fee-hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 25px !important;
    gap: 20px;
  }

  .fee-hero-num {
    font-size: 3.5rem !important;
  }

  .fee-hero-text h3 {
    font-size: 1rem !important;
    line-height: 1.4;
  }

  /* Alt hissədəki 3 sütunlu breakdown-u tək sütuna salırıq */
  .fee-breakdown {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 15px;
  }

  .fb-item {
    padding: 25px 20px !important;
  }

  .fb-pct {
    font-size: 1.8rem !important;
  }

  .fb-label {
    font-size: 0.6rem !important;
    letter-spacing: 1.5px !important;
  }
}

/* Kiçik mobil cihazlar üçün incə ayar */
@media only screen and (max-width: 480px) {
  .fee-top h2 {
    font-size: 1.6rem !important;
  }

  .fee-pct {
    font-size: 3rem !important;
  }
}

/* ═══════════════════════════════════════
   FOOTER MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  footer {
    padding: 60px 20px 30px !important; /* Kənar boşluqları azaltdıq */
    text-align: center; /* Mobildə mərkəzləşdirilmiş dizayn daha premium görünür */
  }

  .footer-top {
    grid-template-columns: 1fr !important; /* Bütün sütunları alt-alta yığırıq */
    gap: 40px !important;
    margin-bottom: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Brend və Tagline hissəsi */
  .footer-brand {
    font-size: 1rem !important;
    justify-content: center;
    display: flex;
    gap: 5px;
  }

  .footer-tagline {
    max-width: 100% !important; /* Mətni tam enə yayırıq */
    margin: 0 auto 25px !important;
    font-size: 0.9rem !important;
    padding: 0 10px;
  }

  .footer-social {
    justify-content: center; /* Sosial ikonları mərkəzə çəkirik */
    margin-bottom: 10px;
  }

  /* Link sütunları */
  .footer-col h4 {
    margin-bottom: 15px !important;
    font-size: 0.8rem !important;
    color: var(--gold-lt); /* Mobildə başlıqları daha nəzərəçarpan etdik */
  }

  .footer-col a {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }

  /* Footer alt hissəsi */
  .footer-bottom {
    flex-direction: column; /* Copy və Earth yazısını alt-alta qoyuruq */
    gap: 20px;
  }

  .footer-copy {
    order: 2; /* Müəllif hüquqları yazısını aşağı salırıq */
    font-size: 0.65rem !important;
    opacity: 0.5;
  }

  .footer-earth {
    order: 1; /* Böyük "CAUCASICA · EARTH" yazısını yuxarı qaldırırıq */
    font-size: 0.75rem !important;
    letter-spacing: 5px !important;
  }
}

/* Çox kiçik ekranlar üçün incə toxunuş */
@media only screen and (max-width: 480px) {
  .footer-top {
    gap: 35px !important;
  }

  .fsoc {
    width: 40px; /* Mobildə klikləmək daha rahat olsun deyə ikonları bir az böyütdük */
    height: 40px;
  }
}

/* ═══════════════════════════════════════
   THREE PILLARS MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  /* Header hissəsinin tənzimlənməsi */
  .pillars-header {
    padding: 60px 20px 40px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
  }

  .pillars-header-right {
    text-align: left !important;
    max-width: 100% !important;
    padding-left: 0;
    font-size: 0.95rem !important;
  }

  /* Grid-i tək sütuna keçiririk */
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }

  .pillar {
    padding: 50px 25px 60px !important;
    border-right: none !important; /* Sağdakı xətti silirik */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Aşağıya xətt əlavə edirik */
  }

  .pillar:last-child {
    border-bottom: none;
  }

  /* Roma rəqəmlərinin (I, II, III) mobildəki mövqeyi */
  .pillar-num {
    font-size: 4rem !important;
    margin-bottom: 20px !important;
    position: absolute; /* Rəqəmi sağ yuxarı küncə çəkirik ki, yer tutmasın */
    right: 20px;
    top: 40px;
    opacity: 0.4;
  }

  .pillar-title {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
    position: relative;
    z-index: 2;
  }

  /* "Hook line" hissəsi - Sitat kimi görünən yer */
  .pillar-hook-line {
    font-size: 1.1rem !important;
    margin-bottom: 18px !important;
    line-height: 1.4 !important;
  }

  .pillar-text {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .pillar-cta {
    margin-top: 30px !important;
    padding: 10px 0; /* Mobildə klikləmək sahəsini böyüdürük */
  }
}

/* Ekran çox kiçikdirsə (məs. 380px altı) */
@media only screen and (max-width: 380px) {
  .pillars-header-left h2 {
    font-size: 1.5rem !important;
  }

  .pillar-num {
    font-size: 3rem !important;
  }
}

/* ═══════════════════════════════════════
   FIRE PHILOSOPHY MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #fire {
    min-height: auto !important;
    display: block !important; /* Flex-i ləğv edirik */
  }

  .fire-inner {
    grid-template-columns: 1fr !important; /* Sütunları alt-alta yığırıq */
  }

  .fire-text {
    padding: 60px 25px !important;
    text-align: left;
  }

  .fire-text h2 {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
  }

  /* Sitat hissəsi mobildə daha yığcam */
  .fire-quote {
    margin: 30px 0 !important;
    padding-left: 20px !important;
  }

  .fire-quote p {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
  }

  .fire-body {
    max-width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
  }

  /* Sağ tərəfdəki vizual blokun mobildəki halı */
  .fire-visual {
    padding: 60px 25px !important;
    background: linear-gradient(180deg, #1a0a04 0%, #3a1808 100%) !important;
  }

  /* Arxa fondakı böyük alov simvolu */
  .fire-symbol {
    font-size: 40vw !important; /* Mobildə daha böyük və atmosferik */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.08;
  }

  .fire-facts {
    padding: 0 !important;
    width: 100%;
    gap: 40px !important;
  }

  .fire-fact {
    padding-bottom: 25px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .ff-num {
    font-size: 2rem !important;
    margin-bottom: 5px;
  }

  .ff-label {
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
  }

  .ff-text {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

/* Kiçik ekranlar üçün h2 ölçüsü */
@media only screen and (max-width: 480px) {
  .fire-text h2 {
    font-size: 1.8rem !important;
  }
}

/* ═══════════════════════════════════════
   HOST VOICES MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #hosts {
    padding: 60px 20px !important;
  }

  /* Başlıq hissəsini mobilə uyğunlaşdırırıq */
  .hosts-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 40px !important;
  }

  /* HTML daxilindəki inline stili (text-align: right) mobildə ləğv edirik */
  .hosts-head p[style*="text-align: right"] {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }

  /* Grid-i tək sütuna keçiririk */
  .hosts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .host-card {
    padding: 35px 25px !important;
    background: #fff !important; /* Mobildə təmiz ağ fon daha oxunaqlıdır */
    border: 1px solid rgba(184, 74, 26, 0.1) !important;
  }

  /* Hover effektini (xətti) mobildə hər zaman görünən edə bilərik və ya sadə saxlaya bilərik */
  .host-card::before {
    transform: scaleX(1) !important; /* Mobildə o rəngli xətt həmişə görünsün */
    opacity: 0.6;
  }

  .host-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }

  .host-quote {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    color: var(--ink) !important;
  }

  .host-name {
    font-size: 0.85rem !important;
    letter-spacing: 1.5px !important;
  }

  .host-role,
  .host-loc {
    font-size: 0.75rem !important;
    line-height: 1.4;
  }
}

/* Çox kiçik ekranlar üçün h2 ayarı */
@media only screen and (max-width: 480px) {
  .hosts-head h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════
   CRAFT LINEAGES MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #crafts {
    padding: 60px 20px !important;
  }

  /* Başlıq hissəsini tənzimləyirik */
  .crafts-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 40px !important;
  }

  /* HTML daxilindəki sağa meyilli mətni sola çəkirik */
  .crafts-top p[style*="text-align: right"] {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  /* 4 sütunlu grid-i tək sütuna keçiririk */
  .crafts-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .craft-item {
    padding: 35px 25px !important;
    background: rgba(
      255,
      255,
      255,
      0.05
    ) !important; /* Bir az daha nəzərəçarpan fon */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: default !important; /* Mobildə "cursor: none" olmamalıdır */
  }

  .craft-glyph {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
  }

  .craft-name {
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
  }

  .craft-age {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
  }

  .craft-desc {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .craft-tag {
    margin-top: 20px !important;
    font-size: 0.55rem !important;
    padding: 6px 12px !important;
  }
}

/* Kiçik mobil ekranlar üçün h2 ölçüsü */
@media only screen and (max-width: 480px) {
  .crafts-top h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════
   HOST ACADEMY MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #academy {
    padding: 60px 20px !important;
  }

  .academy-grid {
    grid-template-columns: 1fr !important; /* Sol və sağ hissəni alt-alta yığırıq */
    gap: 50px !important;
  }

  .academy-left {
    text-align: left;
  }

  .academy-left h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .academy-left .rule {
    width: 60px !important; /* Xətti bir az uzatdıq */
  }

  .academy-left p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 30px !important;
  }

  /* Sertifikat nişanı (Badge) mobildə */
  .badge-example {
    display: flex !important; /* inline-flex-dən flex-ə */
    width: 100%; /* Tam eni tutsun */
    justify-content: flex-start;
    padding: 18px !important;
    gap: 15px !important;
  }

  .badge-text {
    font-size: 0.65rem !important;
    letter-spacing: 1px !important;
  }

  /* Həftəlik proqram grid-i */
  .weeks-grid {
    grid-template-columns: 1fr !important; /* 2 sütunu tək sütuna salırıq */
    gap: 10px !important;
  }

  .week-block {
    padding: 25px 20px !important;
    background: #fff !important; /* Mobildə daha təmiz görüntü üçün birbaşa ağ */
    border-left: 3px solid rgba(184, 74, 26, 0.1) !important; /* Sabit sol xətt */
  }

  /* Hover effektini mobildə sabitləyirik */
  .week-block::before {
    transform: scaleY(1) !important;
    opacity: 0.3;
  }

  .wb-weeks {
    font-size: 0.7rem !important;
    margin-bottom: 10px !important;
  }

  .wb-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .wb-desc {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* Kiçik mobil cihazlar üçün h2 ayarı */
@media only screen and (max-width: 480px) {
  .academy-left h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════
   HOST ACADEMY MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #academy {
    padding: 60px 20px !important;
  }

  .academy-grid {
    grid-template-columns: 1fr !important; /* Sol və sağ hissəni alt-alta yığırıq */
    gap: 50px !important;
  }

  .academy-left {
    text-align: left;
  }

  .academy-left h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .academy-left .rule {
    width: 60px !important; /* Xətti bir az uzatdıq */
  }

  .academy-left p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 30px !important;
  }

  /* Sertifikat nişanı (Badge) mobildə */
  .badge-example {
    display: flex !important; /* inline-flex-dən flex-ə */
    width: 100%; /* Tam eni tutsun */
    justify-content: flex-start;
    padding: 18px !important;
    gap: 15px !important;
  }

  .badge-text {
    font-size: 0.65rem !important;
    letter-spacing: 1px !important;
  }

  /* Həftəlik proqram grid-i */
  .weeks-grid {
    grid-template-columns: 1fr !important; /* 2 sütunu tək sütuna salırıq */
    gap: 10px !important;
  }

  .week-block {
    padding: 25px 20px !important;
    background: #fff !important; /* Mobildə daha təmiz görüntü üçün birbaşa ağ */
    border-left: 3px solid rgba(184, 74, 26, 0.1) !important; /* Sabit sol xətt */
  }

  /* Hover effektini mobildə sabitləyirik */
  .week-block::before {
    transform: scaleY(1) !important;
    opacity: 0.3;
  }

  .wb-weeks {
    font-size: 0.7rem !important;
    margin-bottom: 10px !important;
  }

  .wb-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }

  .wb-desc {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* Kiçik mobil cihazlar üçün h2 ayarı */
@media only screen and (max-width: 480px) {
  .academy-left h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════
   TECH DIPLOMACY MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #tech-diplomacy {
    padding: 60px 20px !important;
  }

  /* Arxa fondakı dairələri mobildə kiçildirik və mövqeyini düzəldirik */
  #tech-diplomacy::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
    opacity: 0.3;
  }

  #tech-diplomacy::after {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    opacity: 0.2;
  }

  /* Başlıq hissəsi */
  .td-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 40px !important;
  }

  .td-top h2 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .td-top p {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    padding-left: 0 !important;
  }

  /* Kartlar grid-i */
  .td-cards {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .td-card {
    padding: 30px 25px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* Roma rəqəmi kimi görünən o böyük nömrələr */
  .td-num {
    font-size: 2.8rem !important;
    margin-bottom: 15px !important;
    opacity: 0.15 !important;
  }

  .td-title {
    font-size: 0.95rem !important;
    letter-spacing: 1.5px !important;
  }

  .td-text {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
  }

  /* Alt Banner hissəsi */
  .td-banner {
    flex-direction: column; /* Yazı və rəqəm nişanını alt-alta qoyuruq */
    text-align: center;
    padding: 40px 25px !important;
    gap: 30px !important;
    margin-top: 30px !important;
  }

  .td-banner-text {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .td-banner-badge {
    width: 100% !important; /* Mobildə tam eni tutsun */
    padding: 20px !important;
  }
}

/* Çox kiçik ekranlar üçün */
@media only screen and (max-width: 480px) {
  .td-top h2 {
    font-size: 1.6rem !important;
  }

  .td-banner-badge .big {
    font-size: 1.2rem !important;
  }
}

/* ═══════════════════════════════════════
   CBT-AI TOOLKIT MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #toolkit {
    padding: 60px 20px !important;
  }

  /* Arxa fondakı nəhəng emojini mobildə kiçildirik və ya gizlədirik */
  #toolkit::before {
    font-size: 50vw !important;
    right: -10vw !important;
    opacity: 0.03 !important;
  }

  .toolkit-inner {
    grid-template-columns: 1fr !important; /* Sol mətn və sağ form alt-alta */
    gap: 50px !important;
  }

  .toolkit-left h2 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .toolkit-left p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  /* Siyahı hissəsi (✦ olan sətirlər) */
  .toolkit-includes {
    gap: 15px !important;
    margin-bottom: 40px !important;
  }

  .ti-row {
    font-size: 0.88rem !important; /* Mobildə bir az böyük ki, rahat oxunsun */
    line-height: 1.5;
    align-items: flex-start !important; /* Uzun sətirlər olanda ulduz yuxarıda qalsın */
  }

  /* Form hissəsi */
  .toolkit-form {
    padding: 40px 25px !important;
    width: 100%;
  }

  .toolkit-form h3 {
    font-size: 1.1rem !important;
    text-align: center;
  }

  .toolkit-form p {
    text-align: center;
    font-size: 0.85rem !important;
  }

  /* Input və Select elementləri mobildə daha rahat toxunulmalıdır (min-height: 48px) */
  .toolkit-form input,
  .toolkit-form select {
    padding: 14px !important;
    font-size: 1rem !important; /* iOS-da input-a klikləyəndə avtomatik zoom olmasın deyə 16px (1rem) idealdır */
    margin-bottom: 15px !important;
    border-radius: 0 !important; /* Dizayna uyğun iti künclər */
  }

  .btn-toolkit {
    padding: 18px !important; /* Barmaqla rahat basmaq üçün */
    font-size: 0.85rem !important;
    cursor: pointer !important; /* Mobildə kursoru pointer edirik */
  }

  .toolkit-note {
    font-size: 0.75rem !important;
    line-height: 1.4;
  }
}

/* Çox kiçik ekranlar üçün h2 ölçüsü */
@media only screen and (max-width: 480px) {
  .toolkit-left h2 {
    font-size: 1.6rem !important;
  }
}

/* ═══════════════════════════════════════
   IMPACT SECTION MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #impact {
    padding: 60px 20px !important;
  }

  /* Fon dairələrini mobildə kiçildirik */
  #impact::before {
    width: 250px;
    height: 250px;
    top: -50px;
    right: -50px;
  }

  #impact::after {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
  }

  /* Əsas grid-i tək sütuna salırıq */
  .impact-inner {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }

  .impact-left h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .impact-left p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
    color: rgba(
      255,
      255,
      255,
      0.7
    ) !important; /* Mobildə oxunaqlılıq üçün rəngi bir az açdıq */
  }

  /* İmpakt maddələri (Vədələr) */
  .impact-promises {
    gap: 15px !important;
  }

  .ip-item {
    padding: 15px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .ip-icon {
    font-size: 1.1rem !important;
    width: 35px !important;
    height: 35px !important;
  }

  .ip-text h4 {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }

  .ip-text p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  /* Statistika grid-i - Mobildə 2x2 saxlaya bilərik, ya da tək sütun. 
     Amma 2x2 daha simmetrik görünür. */
  .impact-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; /* Aradakı 2px-lik boşluğu bir az artırdıq */
  }

  .i-stat {
    padding: 30px 15px !important;
  }

  .i-stat-num {
    font-size: 2.2rem !important;
  }

  .i-stat-num span {
    font-size: 1.5rem !important;
  }

  .i-stat-label {
    font-size: 0.6rem !important;
    letter-spacing: 1.5px !important;
    line-height: 1.3 !important;
  }
}

/* Çox kiçik ekranlar üçün h2 ayarı */
@media only screen and (max-width: 480px) {
  .impact-left h2 {
    font-size: 1.7rem !important;
  }

  /* Çox balaca ekranlarda statistikanı tək sütun edirik */
  .impact-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════
   TESTIMONIALS MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #testimonials {
    padding: 60px 20px !important;
  }

  /* Arxa fondakı dırnaq işarəsini mobildə kiçildirik */
  #testimonials::before {
    font-size: 60vw !important;
    top: -5% !important;
    left: -10vw !important;
  }

  .test-header {
    margin-bottom: 40px !important;
  }

  /* Əsas Rəy (Featured) - Mobildə alt-alta düzülür */
  .test-featured {
    grid-template-columns: 1fr !important;
    padding: 40px 25px !important;
    gap: 30px !important;
    text-align: center;
  }

  .tf-quote {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
  }

  .tf-person {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tf-stars {
    justify-content: center !important;
    margin-top: 5px;
  }

  /* Rəy Grid-i - Kartları alt-alta düzürük */
  .test-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    margin-top: 15px;
  }

  .test-card {
    padding: 30px 25px !important;
  }

  .test-quote {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  /* Etimad Paneli (Trust Bar) */
  .trust-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2-2 düzülüş */
    gap: 30px 10px !important;
    margin-top: 40px !important;
    padding: 40px 0 !important;
  }

  .trust-sep {
    display: none !important; /* Mobildə ayırıcı xətləri gizlədirik, grid boşluğu kifayətdir */
  }

  .trust-num {
    font-size: 1.5rem !important;
  }

  .trust-label {
    font-size: 0.6rem !important;
    letter-spacing: 1px !important;
    max-width: 140px;
  }

  /* Sonuncu tək qalan elementi mərkəzləyirik (0 unresolved rəqəmi) */
  .trust-item:last-child {
    grid-column: span 2;
    margin-top: 10px;
  }
}

/* Çox kiçik ekranlar üçün font tənzimləməsi */
@media only screen and (max-width: 480px) {
  .tf-quote {
    font-size: 1.05rem !important;
  }

  .test-header h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════
   INQUIRY SECTION MOBILE OPTIMIZATION
═══════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  #inquiry {
    padding: 60px 20px !important;
  }

  /* Fon dırnaq işarəsini mobildə tənzimləyirik */
  #inquiry::before {
    font-size: 60vw !important;
    right: -10vw !important;
    top: 5% !important;
    opacity: 0.03 !important;
  }

  .inquiry-grid {
    grid-template-columns: 1fr !important; /* Sol mətn və sağ form alt-alta */
    gap: 50px !important;
  }

  .inq-left h2 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .inq-left p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
  }

  /* Maddə-maddə vədlər hissəsi */
  .inq-promises {
    gap: 18px !important;
    margin-bottom: 20px;
  }

  .inq-p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    align-items: flex-start !important; /* Uzun sətirlərdə nöqtə yuxarıda qalsın */
  }

  .inq-p::before {
    margin-top: 6px; /* Nöqtəni mətnlə eyni səviyyəyə gətiririk */
  }

  /* Form hissəsi */
  .inq-form {
    padding: 40px 25px !important;
    width: 100%;
    box-shadow: 0 10px 40px rgba(184, 74, 26, 0.1) !important;
  }

  /* Yan-yana olan inputları mobildə alt-alta salırıq */
  .form-row-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important; /* Aradakı boşluğu input-un öz margin-i təmin edəcək */
  }

  label {
    font-size: 0.75rem !important; /* Mobildə daha oxunaqlı etiketlər */
    margin-bottom: 10px !important;
  }

  input,
  select,
  textarea {
    padding: 15px 14px !important; /* Barmaq üçün daha geniş toxunma sahəsi */
    font-size: 1rem !important; /* iOS zoom probleminin qarşısını almaq üçün 16px */
    margin-bottom: 25px !important; /* Elementlər arası nəfəs alma sahəsi */
  }

  textarea {
    height: 120px !important; /* Mobildə yazı yazmaq üçün daha geniş sahə */
  }

  .btn-submit {
    padding: 20px !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    cursor: pointer !important; /* Mobildə kursoru göstəririk */
    margin-top: 10px;
  }
}

/* Çox kiçik ekranlar (məsələn: iPhone SE) üçün əlavə kiçiltmə */
@media only screen and (max-width: 480px) {
  .inq-left h2 {
    font-size: 1.6rem !important;
  }

  .inq-form {
    padding: 30px 15px !important;
  }
}
/* ═══════════════════════════════════════
   MOBILE RESPONSIVENESS (Media Queries)
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  /* Ümumi Section Ayarları */
  #planner {
    padding: 60px 20px;
  }

  /* Header hissəsi */
  .planner-header h2 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .planner-header p {
    font-size: 1rem;
  }

  /* Düymələr və İnput */
  .planner-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .btn-plan {
    width: 100%;
    text-align: center;
    padding: 16px;
  }

  .planner-hint {
    text-align: center;
  }

  /* Nəticə (Result) Kartları */
  .result-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .rr-card {
    grid-template-columns: 1fr; /* Sütunları alt-alta yığır */
    gap: 15px;
    padding: 20px;
  }

  .rr-day {
    min-width: auto;
    border-bottom: 1px solid rgba(184, 74, 26, 0.2);
    padding-bottom: 5px;
  }

  .rr-meal {
    text-align: left;
    min-width: auto;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(200, 150, 42, 0.2);
  }

  /* Highlights (Önə çıxanlar) */
  .result-highlights {
    grid-template-columns: 1fr; /* İki sütundan bir sütuna keçid */
  }

  /* CTA (Fəaliyyət düymələri) */
  .result-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-send,
  .btn-reset {
    width: 100%;
    text-align: center;
  }

  /* Testimonial (Rəy) hissəsi */
  #testimonial {
    padding: 60px 20px;
  }

  .testi-featured {
    grid-template-columns: 1fr; /* Şəkli/Mətni və Müəllifi alt-alta yığır */
    padding: 30px 20px;
    text-align: center;
    gap: 30px;
  }

  .tf-person {
    text-align: center;
    min-width: auto;
  }

  .tf-stars {
    justify-content: center;
  }
}

/* Kiçik telefonlar üçün əlavə düzəliş */
@media (max-width: 480px) {
  .planner-prompts {
    justify-content: center;
  }

  .pp {
    font-size: 0.6rem;
    padding: 6px 10px;
  }
}