/* Geliştirici: İXİRPOS - www.ixirpos.com.tr */
/* =========================================================
   İXİRPaket - Modern SaaS Hero
   Mevcut HTML yapısına göre hazırlanmıştır
   ========================================================= */

:root {
  --orange-2: #ffae24;
  --orange-dark: #f47d00;

  --blue-1: #020d2d;
  --blue-2: #04184a;
  --blue-3: #06358d;
  --blue-light: #287cff;

  --text-white: #ffffff;
  --text-muted: rgba(255,255,255,.72);

  --container: 1400px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: min(calc(100% - 48px), var(--container));
  margin: 0 auto;
}


/* =========================================================
   BUTONLAR
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;

  padding: 0 28px;

  border-radius: 14px;

  font-weight: 800;
  font-size: .92rem;

  letter-spacing: -.01em;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease,
    border-color .3s ease;

  border: none;
  cursor: pointer;

  text-decoration: none;
}


.btn-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      #ffb52c 0%,
      #ff920d 55%,
      #f47700 100%
    );

  box-shadow:
    0 12px 30px rgba(255,145,15,.28);
}


.btn-primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 40px rgba(255,145,15,.40);
}


.btn-lg {
  min-height: 58px;

  padding: 0 32px;

  font-size: .95rem;
}


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

.hero {
  position: relative;

  overflow: hidden;

  padding: 72px 0 0;

  color: #fff;

  background:

    /* Sağdaki mavi ışık */
    radial-gradient(
      circle at 78% 38%,
      rgba(40,124,255,.28),
      transparent 27%
    ),

    /* Mor ışık */
    radial-gradient(
      circle at 85% 75%,
      rgba(110,75,255,.20),
      transparent 25%
    ),

    /* Sol üst ışık */
    radial-gradient(
      circle at 12% 10%,
      rgba(34,105,255,.16),
      transparent 28%
    ),

    /* Ana zemin */
    linear-gradient(
      135deg,
      #020b27 0%,
      #031642 38%,
      #052d78 72%,
      #031b50 100%
    );
}


/* =========================================================
   ARKA PLAN GLOWLARI
   ========================================================= */

.hero-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(80px);

  opacity: .65;
}


.hero-glow-1 {
  width: 520px;
  height: 520px;

  top: 5%;
  right: 5%;

  background:
    radial-gradient(
      circle,
      rgba(38,116,255,.32),
      rgba(38,116,255,0)
    );

  animation: heroGlow 8s ease-in-out infinite;
}


.hero-glow-2 {
  width: 400px;
  height: 400px;

  bottom: 10%;
  left: -100px;

  background:
    radial-gradient(
      circle,
      rgba(15,100,255,.18),
      transparent 70%
    );
}


@keyframes heroGlow {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.12);
    opacity: .8;
  }

}


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

.hero-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, .94fr)
    minmax(0, 1.06fr);

  gap: 55px;

  align-items: center;

  padding-bottom: 70px;
}


/* =========================================================
   SOL TARAF
   ========================================================= */

.hero-copy {
  position: relative;

  min-width: 0;

  padding-top: 5px;

  color: #fff;
}


/* =========================================================
   BADGE
   ========================================================= */

.hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin: 0 0 22px;

  padding: 9px 17px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(20,91,215,.25),
      rgba(64,102,255,.12)
    );

  border:
    1px solid rgba(74,143,255,.65);

  box-shadow:
    0 0 25px rgba(30,112,255,.12);

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .075em;

  text-transform: uppercase;

  color: rgba(255,255,255,.94);
}


.hero-badge-star {
  display: grid;

  place-items: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #ffc34d,
      #ff8b00
    );

  color: white;

  font-size: .72rem;

  box-shadow:
    0 4px 12px rgba(255,153,0,.25);
}


/* =========================================================
   H1
   ========================================================= */

.hero-copy h1 {
  margin: 0 0 24px;

  max-width: 720px;

  font-size:
    clamp(
      3.2rem,
      5.2vw,
      5.25rem
    );

  line-height: .98;

  letter-spacing: -.055em;

  font-weight: 900;

  color: #fff;
}


/* =========================================================
   MAVİ VURGULU BAŞLIK
   ========================================================= */

.hero-accent {
  display: block;

  margin-top: 6px;

  background:
    linear-gradient(
      90deg,
      #4f96ff 0%,
      #2775ff 45%,
      #6b79ff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

  text-shadow: none;
}


/* =========================================================
   AÇIKLAMA
   ========================================================= */

.hero-desc {
  max-width: 680px;

  margin: 0 0 27px;

  font-size: 1.05rem;

  line-height: 1.7;

  letter-spacing: -.01em;

  color:
    rgba(255,255,255,.74);
}


/* =========================================================
   ÖZELLİKLER
   ========================================================= */

.hero-features {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  max-width: 720px;

  margin: 0 0 25px;
}


.hero-feature-item {
  position: relative;

  display: block;

  min-width: 0;

  padding: 15px 13px;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  border:
    1px solid rgba(115,160,255,.16);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.hero-feature-item:hover {
  transform: translateY(-5px);

  background:
    linear-gradient(
      145deg,
      rgba(40,113,255,.13),
      rgba(255,255,255,.035)
    );

  border-color:
    rgba(81,145,255,.45);

  box-shadow:
    0 15px 35px rgba(0,0,0,.18);
}


/* İkon */

.hero-feature-icon {
  width: 42px;
  height: 42px;

  margin-bottom: 12px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(35,120,255,.22),
      rgba(102,77,255,.16)
    );

  border:
    1px solid rgba(72,145,255,.32);

  font-size: 1rem;

  box-shadow:
    inset 0 0 15px rgba(55,130,255,.08);
}


.hero-feature-item strong {
  display: block;

  margin-bottom: 5px;

  font-size: .86rem;

  font-weight: 800;

  color: #fff;
}


.hero-feature-item span {
  display: block;

  font-size: .72rem;

  line-height: 1.45;

  color:
    rgba(255,255,255,.62);
}


/* =========================================================
   PLATFORM KARTLARI
   ========================================================= */

.platform-strip {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 9px;

  max-width: 720px;

  padding: 8px;

  margin: 0 0 25px;

  border-radius: 19px;

  background:
    rgba(255,255,255,.075);

  border:
    1px solid rgba(255,255,255,.13);

  box-shadow:
    0 18px 45px rgba(0,0,0,.18);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);
}


.platform-pill {
  min-height: 67px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 9px;

  border-radius: 13px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 3px 10px rgba(0,0,0,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.platform-pill:hover {
  transform: translateY(-3px);

  box-shadow:
    0 10px 24px rgba(0,0,0,.18);
}


.platform-logo {
  display: block;

  width: auto;

  max-width: 100%;

  max-height: 38px;

  object-fit: contain;
}


/* =========================================================
   BUTONLAR
   ========================================================= */

.hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;
}


/* Eğer ikinci buton varsa */

.hero-actions .btn:not(.btn-primary) {
  min-height: 58px;

  padding: 0 27px;

  border:
    1px solid rgba(87,145,255,.65);

  background:
    rgba(5,29,77,.40);

  color: #fff;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);
}


.hero-actions .btn:not(.btn-primary):hover {
  transform: translateY(-3px);

  background:
    rgba(33,89,180,.28);

  border-color:
    rgba(100,164,255,.9);
}


/* =========================================================
   GÜVEN MESAJLARI
   ========================================================= */

.hero-trust-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px 20px;

  margin: 16px 0 0;

  padding: 0;

  list-style: none;
}


.hero-trust-list li {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: .78rem;

  font-weight: 500;

  color:
    rgba(255,255,255,.68);
}


.hero-trust-check {
  width: 19px;
  height: 19px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(35,111,255,.25);

  border:
    1px solid rgba(73,145,255,.35);

  color: #69a1ff;

  font-size: .67rem;

  font-weight: 900;
}


/* =========================================================
   SAĞ TARAF - DASHBOARD
   ========================================================= */

.hero-visual {
  position: relative;

  min-width: 0;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* Dashboard çevresindeki ışık */

.hero-visual::before {
  content: "";

  position: absolute;

  width: 80%;

  height: 70%;

  right: 5%;

  top: 15%;

  background:
    radial-gradient(
      ellipse,
      rgba(35,115,255,.35),
      transparent 68%
    );

  filter: blur(40px);

  pointer-events: none;
}


/* =========================================================
   DASHBOARD GÖRSELİ
   ========================================================= */

.hero-visual-img {
  position: relative;

  z-index: 2;

  width: 112%;

  max-width: 900px;

  margin-left: -5%;

  overflow: hidden;

  border-radius: 25px;

  background: #fff;

  border:
    1px solid rgba(112,168,255,.65);

  box-shadow:

    /* Ana gölge */
    0 40px 90px rgba(0,0,0,.42),

    /* Mavi glow */
    0 0 55px rgba(38,121,255,.32),

    /* İnce ışık */
    inset 0 0 0 1px rgba(255,255,255,.3);

  transform:
    perspective(1400px)
    rotateY(-4deg)
    rotateX(1deg);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}


.hero-visual-img:hover {
  transform:
    perspective(1400px)
    rotateY(0deg)
    rotateX(0deg)
    translateY(-6px);

  box-shadow:

    0 45px 100px rgba(0,0,0,.45),

    0 0 80px rgba(38,121,255,.42);
}


.hero-visual-img img {
  display: block;

  width: 100%;

  height: auto;
}


/* =========================================================
   SWIPER
   ========================================================= */

.hero-swiper-shell {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  min-height: 300px;

  overflow: visible;

  background: transparent;
}


.hero-swiper {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: 25px;

  --swiper-navigation-size: 36px;

  --swiper-navigation-color: #fff;

  --swiper-navigation-sides-offset: 12px;

  --swiper-pagination-color: #ff9d18;

  --swiper-pagination-bullet-inactive-color:
    rgba(255,255,255,.38);

  --swiper-pagination-bullet-inactive-opacity: 1;

  --swiper-pagination-bullet-size: 8px;

  --swiper-pagination-bullet-horizontal-gap: 5px;
}


.hero-swiper .swiper-slide {
  height: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  box-sizing: border-box;
}


.hero-swiper .swiper-slide img {
  display: block;

  width: 100%;

  height: 100%;

  max-height: 100%;

  object-fit: contain;

  object-position: center;

  border-radius: 25px;
}


.hero-swiper .swiper-wrapper {
  height: 100%;

  align-items: stretch;
}


/* =========================================================
   SWIPER OKLARI
   ========================================================= */

.hero-swiper .hero-swiper-prev,
.hero-swiper .hero-swiper-next {
  width: 42px;

  height: 42px;

  top: 50%;

  margin-top: -21px;

  z-index: 5;

  border-radius: 50%;

  background:
    rgba(4,24,63,.55);

  border:
    1px solid rgba(255,255,255,.20);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition:
    background .25s ease,
    transform .25s ease;
}


.hero-swiper .hero-swiper-prev:hover,
.hero-swiper .hero-swiper-next:hover {
  background:
    rgba(24,86,180,.75);

  transform: scale(1.08);
}


.hero-swiper .hero-swiper-prev::after,
.hero-swiper .hero-swiper-next::after {
  font-size: 15px;

  font-weight: 800;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.hero-swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 12px;

  z-index: 5;
}


/* =========================================================
   ALT PERKS BAR
   ========================================================= */

.hero-perks-bar {
  position: relative;

  z-index: 4;

  padding: 24px 0;

  background:
    linear-gradient(
      180deg,
      rgba(2,17,50,.70),
      rgba(1,13,39,.88)
    );

  border-top:
    1px solid rgba(100,153,255,.15);

  box-shadow:
    0 -15px 45px rgba(0,0,0,.08);
}


.hero-perks-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0;

  max-width: 1250px;

  margin: 0 auto;
}


/* =========================================================
   PERK
   ========================================================= */

.hero-perk {
  position: relative;

  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

  padding: 12px 30px;
}


.hero-perk:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;

  top: 12px;

  width: 1px;

  height: calc(100% - 24px);

  background:
    rgba(255,255,255,.10);
}


.hero-perk-icon {
  flex: 0 0 auto;

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(24,105,255,.23),
      rgba(99,75,255,.20)
    );

  border:
    1px solid rgba(70,142,255,.30);

  color: #6ea6ff;

  font-size: 1.2rem;

  box-shadow:
    inset 0 0 15px rgba(52,123,255,.08);
}


.hero-perk strong {
  display: block;

  margin-bottom: 4px;

  color: #fff;

  font-size: .87rem;

  font-weight: 800;
}


.hero-perk span {
  display: block;

  color:
    rgba(255,255,255,.58);

  font-size: .73rem;

  line-height: 1.45;
}


/* =========================================================
   MASAÜSTÜ HAFİF FLOAT ANİMASYONU
   ========================================================= */

@media (min-width: 1101px) {

  .hero-visual-img {
    animation:
      heroDashboardFloat 6s ease-in-out infinite;
  }

}


@keyframes heroDashboardFloat {

  0%,
  100% {
    transform:
      perspective(1400px)
      rotateY(-4deg)
      rotateX(1deg)
      translateY(0);
  }

  50% {
    transform:
      perspective(1400px)
      rotateY(-4deg)
      rotateX(1deg)
      translateY(-8px);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .container {
    width:
      min(
        calc(100% - 36px),
        var(--container)
      );
  }


  .hero {
    padding-top: 55px;
  }


  .hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .95fr);

    gap: 35px;
  }


  .hero-copy h1 {
    font-size:
      clamp(
        2.7rem,
        5vw,
        4.2rem
      );
  }


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


  .hero-visual-img {
    width: 108%;

    margin-left: -4%;
  }


  .hero-perk {
    padding-left: 18px;
    padding-right: 18px;
  }

}


/* =========================================================
   TABLET / MOBİL
   ========================================================= */

@media (max-width: 820px) {

  .hero {
    padding-top: 48px;
  }


  .hero-grid {
    grid-template-columns: 1fr;

    gap: 50px;

    padding-bottom: 50px;
  }


  .hero-copy {
    text-align: center;
  }


  .hero-badge {
    margin-left: auto;
    margin-right: auto;
  }


  .hero-copy h1 {
    margin-left: auto;
    margin-right: auto;

    font-size:
      clamp(
        2.8rem,
        9vw,
        4.2rem
      );
  }


  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }


  .hero-features {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
  }


  .platform-strip {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
  }


  .hero-actions {
    justify-content: center;
  }


  .hero-trust-list {
    justify-content: center;
  }


  .hero-visual {
    max-width: 850px;

    margin: 0 auto;
  }


  .hero-visual-img {
    width: 100%;

    margin-left: 0;

    transform: none;
  }


  .hero-visual-img:hover {
    transform: translateY(-4px);
  }


  .hero-swiper {
    border-radius: 22px;
  }


  .hero-swiper .swiper-slide img {
    border-radius: 22px;
  }


  .hero-perks-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .hero-perk {
    padding: 18px 20px;
  }


  .hero-perk:nth-child(2)::after {
    display: none;
  }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 600px) {

  .container {
    width:
      calc(100% - 28px);
  }


  .hero {
    padding-top: 38px;
  }


  .hero-grid {
    gap: 38px;
  }


  .hero-copy h1 {
    font-size: 2.65rem;

    line-height: 1.02;

    letter-spacing: -.045em;
  }


  .hero-accent {
    display: inline;
  }


  .hero-desc {
    font-size: .94rem;

    line-height: 1.65;
  }


  .hero-features {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 8px;
  }


  .hero-feature-item {
    padding: 13px 10px;

    text-align: left;
  }


  .hero-feature-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 9px;
  }


  .hero-feature-item strong {
    font-size: .78rem;
  }


  .hero-feature-item span {
    font-size: .66rem;
  }


  .platform-strip {
    gap: 7px;

    padding: 7px;

    border-radius: 16px;
  }


  .platform-pill {
    min-height: 55px;

    border-radius: 11px;
  }


  .platform-logo {
    max-height: 29px;
  }


  .hero-actions {
    flex-direction: column;

    width: 100%;
  }


  .hero-actions .btn,
  .hero-actions .btn-lg {
    width: 100%;

    min-height: 54px;
  }


  .hero-trust-list {
    gap: 9px 13px;
  }


  .hero-trust-list li {
    font-size: .70rem;
  }


  .hero-visual {
    width: 100%;
  }


  .hero-visual-img {
    border-radius: 18px;

    box-shadow:
      0 25px 55px rgba(0,0,0,.38),
      0 0 40px rgba(38,121,255,.25);
  }


  .hero-swiper {
    border-radius: 18px;
  }


  .hero-swiper .swiper-slide img {
    border-radius: 18px;
  }


  .hero-swiper .hero-swiper-prev,
  .hero-swiper .hero-swiper-next {
    width: 34px;
    height: 34px;

    margin-top: -17px;
  }


  .hero-swiper .hero-swiper-prev::after,
  .hero-swiper .hero-swiper-next::after {
    font-size: 12px;
  }


  .hero-perks-bar {
    padding: 15px 0;
  }


  .hero-perks-grid {
    grid-template-columns: 1fr;

    gap: 0;
  }


  .hero-perk {
    padding: 14px 8px;

    border-bottom:
      1px solid rgba(255,255,255,.08);
  }


  .hero-perk:last-child {
    border-bottom: none;
  }


  .hero-perk::after {
    display: none !important;
  }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFON
   ========================================================= */

@media (max-width: 390px) {

  .hero-copy h1 {
    font-size: 2.25rem;
  }


  .hero-features {
    gap: 6px;
  }


  .hero-feature-item {
    padding: 11px 8px;
  }


  .hero-feature-icon {
    width: 34px;
    height: 34px;

    font-size: .85rem;
  }


  .hero-feature-item strong {
    font-size: .73rem;
  }


  .hero-feature-item span {
    font-size: .61rem;
  }


  .hero-trust-list {
    flex-direction: column;

    align-items: center;
  }

}