/* ==========================================================================
   "Uygulama Alanlarımız" section
   ========================================================================== */

.areas { padding: 40px 20px; background: #f6f6f6; }

.areas__title { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: 0; color: var(--c-brown); }
.areas__title span { display: block; }
.areas__intro p { margin-top: 12px; max-width: 420px; font-size: 15px; line-height: 1.6; color: #2c2c2e; }

.areas__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.area-card__link { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #222; }
.area-card__media,
.area-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-card__link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 19, 0) 45%, rgba(18, 18, 19, .9) 100%); }
.area-card__caption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 8px; color: #fff; }
.area-card__slash { flex: none; width: 3px; height: 24px; background: var(--c-orange); transform: skewX(-18deg); }
.area-card__name { font-size: 14px; font-weight: 600; line-height: 1.3; }

@media (min-width: 640px) and (max-width: 991px) {
  .areas__list { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 992px) {
  .areas { position: relative; margin-top: 2.4rem; height: 13.8rem; padding: 0; background: #f6f6f6; }

  .areas__intro { position: absolute; left: 5.7rem; top: 2.3rem; width: 14rem; }
  .areas__title { font-size: 1.68rem; line-height: 1.75rem; letter-spacing: 0; }
  .areas__intro p { margin-top: 1.9rem; max-width: none; font-size: 1.05rem; line-height: 1.42rem; letter-spacing: 0; }

  .areas__list {
    position: absolute;
    left: 18.8rem;
    top: .1rem;
    display: flex;
    gap: 0;
    height: 13.1rem;
    margin: 0;
  }
  .area-card { flex: 0 0 21.3rem; margin-right: -4.95rem; height: 100%; }
  .area-card__link {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: polygon(5rem 0, 100% 0, calc(100% - 5rem) 100%, 0 100%);
  }
  .area-card__link::after { background: linear-gradient(180deg, rgba(18, 18, 19, 0) 52%, rgba(18, 18, 19, .94) 100%); }
  .area-card__caption { left: 2.4rem; right: auto; bottom: 1.4rem; gap: 1rem; }
  .area-card__slash { width: .3rem; height: 2.3rem; transform: skewX(-16deg); }
  .area-card__name { font-size: 1.12rem; line-height: 1.45rem; letter-spacing: 0; }
}