#hizmetler {
  --services-ink: #18181b;
  --services-muted: #52525b;
  --services-primary: #ffd700;
  --services-primary-deep: #5a4b00;
  --services-primary-soft: #fff7c2;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 215, 0, 0.32), transparent 25rem),
    radial-gradient(circle at 8% 86%, rgba(239, 0, 85, 0.05), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #fffdf2 46%, #fff8d8 100%) !important;
  color: var(--services-ink);
}

#hizmetler::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: min(40vw, 34rem);
  height: min(40vw, 34rem);
  background:
    radial-gradient(ellipse at center, rgba(255, 215, 0, 0.24), transparent 62%),
    repeating-conic-gradient(from 18deg, rgba(90, 75, 0, 0.07) 0deg 7deg, transparent 7deg 18deg);
  filter: blur(18px);
  opacity: 0.45;
  pointer-events: none;
  transform: translate(14%, -22%) rotate(-10deg);
}

#hizmetler .content-wrap {
  position: relative;
  z-index: 1;
}

#hizmetler .content-wrap > div:first-child {
  align-items: flex-start;
  gap: 2rem;
}

#hizmetler .content-wrap > div:first-child > div {
  max-width: 44rem;
}

#hizmetler .content-wrap > div:first-child span:first-child {
  color: var(--services-primary-deep) !important;
  letter-spacing: 0.22em;
}

#hizmetler .content-wrap > div:first-child span:first-child span {
  background: var(--services-primary) !important;
}

#hizmetler .content-wrap > div:first-child h2 {
  max-width: 48rem;
  font-size: clamp(2.6rem, 4.8vw, 4.85rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--services-ink) !important;
  text-wrap: balance;
}

#hizmetler .content-wrap > div:first-child p {
  max-width: 48rem;
  color: var(--services-muted) !important;
  font-size: 1.08rem;
  line-height: 1.8;
}

#hizmetler .content-wrap > div:first-child > a {
  margin-top: 8.5rem;
  border: 1px solid rgba(90, 75, 0, 0.24) !important;
  border-radius: 0.45rem !important;
  background: rgba(255, 215, 0, 0.15) !important;
  color: var(--services-primary-deep) !important;
  box-shadow: 0 12px 28px rgba(255, 215, 0, 0.13) !important;
  padding-inline: 1.55rem !important;
}

#hizmetler .content-wrap > div:first-child > a:hover {
  background: var(--services-primary) !important;
  color: var(--services-ink) !important;
  border-color: var(--services-primary) !important;
  box-shadow: 0 18px 38px rgba(255, 215, 0, 0.2) !important;
}

#hizmetler .mt-10.grid {
  display: grid !important;
  grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}

#hizmetler .mt-10.grid > .reveal {
  min-height: 10.5rem;
}

#hizmetler .mt-10.grid > .reveal:nth-child(1) {
  grid-column: span 8;
}

#hizmetler .mt-10.grid > .reveal:nth-child(2) {
  grid-column: span 4;
}

#hizmetler .mt-10.grid > .reveal:nth-child(3),
#hizmetler .mt-10.grid > .reveal:nth-child(4) {
  grid-column: span 4;
}

#hizmetler .mt-10.grid > .reveal:nth-child(5),
#hizmetler .mt-10.grid > .reveal:nth-child(6),
#hizmetler .mt-10.grid > .reveal:nth-child(7),
#hizmetler .mt-10.grid > .reveal:nth-child(8) {
  grid-column: span 5;
}

#hizmetler .mt-10.grid > .reveal:nth-child(9),
#hizmetler .mt-10.grid > .reveal:nth-child(10) {
  grid-column: span 10;
}

#hizmetler .mt-10.grid a {
  height: 100%;
}

#hizmetler .mt-10.grid a > div {
  position: relative;
  height: 100%;
  min-height: 10.5rem;
  overflow: hidden;
  border: 1px solid rgba(90, 75, 0, 0.14) !important;
  border-radius: 0.62rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 242, 0.88)) !important;
  box-shadow: 0 20px 55px rgba(24, 24, 27, 0.08), 0 8px 24px rgba(255, 215, 0, 0.08) !important;
  color: var(--services-ink) !important;
  gap: 1.15rem !important;
  padding: 1.45rem !important;
  backdrop-filter: blur(10px);
}

#hizmetler .mt-10.grid a > div:hover {
  border-color: rgba(255, 215, 0, 0.78) !important;
  box-shadow: 0 26px 70px rgba(24, 24, 27, 0.11), 0 12px 34px rgba(255, 215, 0, 0.18) !important;
  transform: translateY(-2px);
}

#hizmetler .mt-10.grid a > div > span:first-child {
  width: 3.35rem !important;
  height: 3.35rem !important;
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-radius: 50% !important;
  background: var(--services-primary-soft) !important;
  color: var(--services-primary-deep) !important;
  box-shadow: inset 0 0 0 0.45rem rgba(255, 255, 255, 0.55);
}

#hizmetler .mt-10.grid h3 {
  color: var(--services-ink) !important;
  font-size: clamp(1.18rem, 1.6vw, 1.55rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em;
}

#hizmetler .mt-10.grid p {
  max-width: 21rem;
  color: var(--services-muted) !important;
  line-height: 1.65 !important;
}

#hizmetler .mt-10.grid a > div > span:last-child {
  color: var(--services-primary-deep) !important;
  font-weight: 700 !important;
}

#hizmetler .mt-10.grid > .reveal:nth-child(1) a > div,
#hizmetler .mt-10.grid > .reveal:nth-child(10) a > div {
  padding-right: min(46%, 15rem) !important;
}

#hizmetler .mt-10.grid > .reveal:nth-child(1) a > div::after,
#hizmetler .mt-10.grid > .reveal:nth-child(10) a > div::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  background-position: center;
  background-size: cover;
  opacity: 0.94;
}

#hizmetler .mt-10.grid > .reveal:nth-child(1) a > div::after {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255, 247, 194, 0.1) 38%), url("https://images.unsplash.com/photo-1628009368231-7bb7cfcb0def?q=80&w=900&auto=format&fit=crop");
}

#hizmetler .mt-10.grid > .reveal:nth-child(9) a > div::after {
  content: "";
  position: absolute;
  right: 2rem;
  bottom: -4.2rem;
  width: 13rem;
  height: 13rem;
  border: 0.65rem solid rgba(255, 215, 0, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, rgba(255, 215, 0, 0.12), transparent 55%);
}

#hizmetler .mt-10.grid > .reveal:nth-child(10) a > div::after {
  width: 52%;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255, 247, 194, 0.14) 34%), url("https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?q=80&w=900&auto=format&fit=crop");
}

@media (max-width: 1180px) {
  #hizmetler .mt-10.grid > .reveal:nth-child(n) {
    grid-column: span 10;
  }

  #hizmetler .mt-10.grid > .reveal:nth-child(1),
  #hizmetler .mt-10.grid > .reveal:nth-child(10) {
    grid-column: span 20;
  }
}

@media (max-width: 760px) {
  #hizmetler {
    padding-block: 4rem !important;
  }

  #hizmetler .content-wrap > div:first-child > a {
    margin-top: 0;
  }

  #hizmetler .mt-10.grid {
    grid-template-columns: 1fr !important;
  }

  #hizmetler .mt-10.grid > .reveal:nth-child(n) {
    grid-column: auto;
  }

  #hizmetler .mt-10.grid > .reveal:nth-child(1) a > div,
  #hizmetler .mt-10.grid > .reveal:nth-child(10) a > div {
    min-height: 18rem;
    padding-right: 1.45rem !important;
    padding-bottom: 10rem !important;
  }

  #hizmetler .mt-10.grid > .reveal:nth-child(1) a > div::after,
  #hizmetler .mt-10.grid > .reveal:nth-child(10) a > div::after {
    inset: auto 0 0 0;
    width: 100%;
    height: 10rem;
    background-position: center;
  }
}