/* ===============================
   ROOT
=============================== */

.mainPage {
   width: 100%;
   overflow: hidden;
   font-family: 'Rubik', sans-serif;
   background: #ffffff;
   color: #111827;
}

.mainPage * {
   box-sizing: border-box;
   transition:
      transform .35s ease,
      box-shadow .35s ease,
      background .35s ease,
      color .35s ease,
      filter .35s ease,
      opacity .35s ease;
}

/* ===============================
   WRAPPER
=============================== */

.mainPage .wrapper {
   max-width: 1280px;
   width: 92%;
   margin: auto;
}

/* ===============================
   SCROLL ANIMATION (YUMUŞATILDI)
=============================== */

.mainPage .targets {
   opacity: 0;
   transform: translateY(60px);
   filter: blur(6px);
}

.mainPage .targets.active {
   opacity: 1;
   transform: translateY(0);
   filter: blur(0);
}

/* ===============================
   HERO
=============================== */

.mainPage .hero {
   padding: 80px 0 120px;
   position: relative;
   overflow: hidden;
}

.mainPage .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at 20% 30%, rgba(31, 64, 104, .15), transparent 60%),
      radial-gradient(circle at 80% 60%, rgba(22, 36, 71, .12), transparent 65%);
   z-index: 0;
}

.mainPage .hero .wrapper {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 80px;
   align-items: center;
   position: relative;
   z-index: 1;
}

.mainPage .heroBadge {
   display: inline-block;
   padding: 8px 18px;
   border-radius: 999px;
   background: rgba(31, 64, 104, .08);
   font-size: .75rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 18px;
}

.mainPage .heroBadge:hover {
   transform: scale(1.05);
   background: rgba(31, 64, 104, .15);
   cursor: pointer;
}

.mainPage .hero h2 {
   font-family: 'Audiowide';
   font-size: 3rem;
   line-height: 1.15;
   margin-bottom: 20px;
}

.mainPage .hero h2 span {
   color: #1f4068;
}

.mainPage .heroDesc {
   font-size: 1.05rem;
   line-height: 1.9;
   max-width: 520px;
   margin-bottom: 28px;
   margin: 10px auto 28px 30px;
}

.mainPage .heroDesc:hover {
   transform: translateY(-3px);
}

.mainPage .heroHighlights {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   justify-content: center;
}

.mainPage .heroHighlights span {
   padding: 10px 18px;
   border-radius: 14px;
   background: linear-gradient(135deg, #162447, #1f4068);
   color: #fff;
   font-size: .85rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
   cursor: pointer;
}

.mainPage .heroHighlights span:hover {
   transform: translateY(-6px) scale(1.05);
   box-shadow: 0 20px 50px rgba(31, 64, 104, .45);
}

/* ===============================
   HERO VISUAL
=============================== */

.mainPage .hero .visual {
   position: relative;
   display: flex;
   justify-content: center;
}

.mainPage .hero .visual .glow {
   position: absolute;
   inset: -20%;
   background: radial-gradient(circle, rgba(31, 64, 104, .45), transparent 60%);
   filter: blur(70px);
   z-index: 0;
}

.mainPage .hero img {
   position: relative;
   width: 90%;
   max-width: 600px;
   border-radius: 32px;
   z-index: 1;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.mainPage .hero img:hover {
   transform: scale(1.05);
   box-shadow: 0 80px 160px rgba(31, 64, 104, .5);
}

/* ===============================
   STATS
=============================== */

.mainPage .stats {
   padding: 100px 0;
   background: #0f172a;
   color: #fff;
}

.mainPage .stats .wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
   text-align: center;
}

.mainPage .statItem {
   padding: 30px;
   border-radius: 24px;
   cursor: default;
}

.mainPage .statItem:hover {
   transform: translateY(-8px);
   background: rgba(255, 255, 255, .05);
}

.mainPage .statItem strong {
   font-family: 'Audiowide';
   font-size: 2rem;
}

.mainPage .statItem span {
   display: block;
   margin-top: 10px;
   font-size: .9rem;
   opacity: .85;
}

/* ===============================
   ABOUT
=============================== */

.mainPage .about {
   padding: 140px 0;
   text-align: center;
   transition: all 0.3s;
   opacity: 0;
}

.mainPage .about h2 {
   font-family: 'Audiowide';
   font-size: 1.7rem;
   text-shadow: 2px 3px 4px rgba(0, 0, 0, .25);
}

.mainPage .about p {
   padding: 10px;
   font-size: 1.1rem;
   font-family: 'Montserrat';
   font-weight: 700;
}


/* ===============================
   FEATURES
=============================== */

.mainPage .features {
   padding: 140px 0;
   background: #f8fafc;
}

.mainPage .features .wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 40px;
}

.mainPage .featureItem {
   background: #fff;
   padding: 22px 30px;
   border-radius: 28px;
   box-shadow: 5px 10px 10px rgba(31, 64, 104, .25), 5px 10px 20px rgba(31, 64, 104, .25), 5px 10px 30px rgba(31, 64, 104, .25);
   display: flex;
   flex-direction: column;
   gap: 20px;
   cursor: pointer;
}

.mainPage .featureItem svg {
   width: 50px;
   height: 50px;
   fill: rgb(255, 88, 88);
   margin: 0px auto;
}



.mainPage .featureItem:nth-child(2) svg {
   fill: rgb(255, 185, 73);
}

.mainPage .featureItem:nth-child(3) svg {
   fill: rgb(68, 117, 201);
}

.mainPage .featureItem:nth-child(4) svg {
   fill: rgb(240, 128, 163);
}

.mainPage .featureItem h3 {
   font-family: 'Audiowide';
   text-align: center;
   color: black;
   transition: all 0.3s;
   font-size: 1.3rem;
}

.mainPage .featureItem:hover h3 {
   color: #3666a0;
}

.mainPage .featureItem:hover {
   transform: translateY(-12px);
   box-shadow: 0 50px 120px rgba(31, 64, 104, .25);
}

/* ===============================
   SECTORS
=============================== */

.mainPage .sectors {
   padding: 140px 0;
}

.mainPage .sectors .wrapper {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 90px;
   align-items: center;
}

.mainPage .sectors img {
   width: 90%;
   max-width: 700px;
   border-radius: 30px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.mainPage .sectors img:hover {
   transform: scale(1.05);
}

.mainPage .sectors .content {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.mainPage .sectors ul {
   width: max-content;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
   margin-top: 10px;
   font-family: 'GoogleSans';
}

.mainPage .sectors li {
   transform: translateX(8px);
}

.mainPage .sectors ul li span {
   color: green;
   font-weight: 700;
}

/* ===============================
   FINAL
=============================== */

.mainPage .final {
   padding: 100px 0;
   background: #020617;
   color: #fff;
   text-align: center;
}

.mainPage .final .wrapper {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.mainPage .final h2 {
   font-family: 'Audiowide';
}

/* ===============================
   RESPONSIVE IMAGE CONTROL
=============================== */

@media (max-width: 991px) {

   .mainPage .hero .wrapper,
   .mainPage .sectors .wrapper {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .mainPage img {
      width: 75%;
   }

   .mainPage .features .wrapper,
   .mainPage .stats .wrapper {
      grid-template-columns: repeat(2, 1fr);
   }

   .mainPage .heroDesc {
      margin: 10px auto 28px 0px;
   }
}

@media (max-width: 600px) {

   .mainPage img {
      width: 90%;
   }

   .mainPage .features .wrapper,
   .mainPage .stats .wrapper {
      grid-template-columns: 1fr;
   }
}