/* ===================================================================
   SERVİSLER — TEMEL SAYFA
   (Grid/kart/tipografi kurallarına DOKUNMADAN yalnız randevu butonu
   değişkenlerinin tek noktadan çalışmasını sağladık.)
   =================================================================== */

/* Arkaplan (core.css ile uyumlu) */
.servisler-page{
  background-image: url('../medias/back-ground-3.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  color:#e8e9ec;
}

/* Başlık alanı */
.services-hero{
  max-width: clamp(960px, 88vw, 1200px);
  margin: 0 auto 8px;
  padding: 20px; /* üst boşluk: core ile uyumlu */
  text-align: center;
}
.services-hero .muted{ opacity:.7; margin:4px 0 0; }

/* 2x2 servis grid’i (mevcut tasarım) */
.services-grid{
  max-width: clamp(960px, 88vw, 1200px);
  margin: 16px auto 72px;
  padding: 0 clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 13%;
}


/* Servis kartı — transparan, bordersiz */
.service-card{
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: clamp(320px, 40vw, 520px);
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--fg, #e7e9ec);
  text-decoration: none;
  overflow: hidden;
  transition: background .20s ease;
}
.service-card:hover{ background: rgba(255,255,255,.06); border: 0; }

/* Kart başlığı & ikon yerleşimi (mevcut) */
.svc-title{
  position: relative; z-index: 2; left: 50%; top: 23%;
  transform: translateX(-50%); margin: 0; font-weight: 800;
  letter-spacing: .3px; font-size: 250%; text-align: center;
}
.svc-icon{
  position: relative; z-index: 2; left: 50%; top: 40%;
  transform: translate(-50%, -40%);
  width: 160%; height: auto; object-fit: contain;
  opacity: .50; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
  transition: opacity .20s ease, filter .20s ease;
}
.service-card:hover .svc-icon{
  opacity: .80; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

html { scroll-behavior: auto !important; }