/* ============================================================
   SERVICES
   ============================================================ */
.services { padding:110px 0; background:var(--off-white); }

/* "Ve daha fazlası" link below the grid */
.svc-more {
  text-align:center; margin-top:52px;
}
.svc-more-link {
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-sans); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); border-bottom:1.5px solid var(--text);
  padding-bottom:4px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.svc-more-link:hover { color:var(--gold); border-color:var(--gold); }
.svc-more-arrow {
  display:inline-block; width:28px; height:1px;
  background:var(--text); position:relative;
  transition:width .28s var(--ease), background .25s;
}
.svc-more-arrow::after {
  content:''; position:absolute; right:0; top:-3px;
  width:6px; height:6px;
  border-right:1.5px solid var(--text); border-top:1.5px solid var(--text);
  transform:rotate(45deg);
  transition:border-color .25s;
}
.svc-more-link:hover .svc-more-arrow { width:40px; background:var(--gold); }
.svc-more-link:hover .svc-more-arrow::after { border-color:var(--gold); }

.svc-hd {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:40px;
  margin-bottom:72px;
}
.svc-h2 {
  font-family:var(--f-disp);
  font-size:clamp(38px,4.2vw,62px);
  font-weight:900; line-height:1.05;
  letter-spacing:-.025em; color:var(--text);
  margin-top:14px;
}
.svc-h2 em { font-style:italic; color:var(--gold); }
.svc-note {
  max-width:320px; font-size:14px; line-height:1.75;
  color:var(--muted); text-align:right;
}

/* Grid: 4 columns with black outlines */
.svc-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.svc-card {
  background:#fff; padding:44px 30px 38px;
  border:1.5px solid var(--text);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:color .5s var(--ease);
}

/* Salmon fill slides up on hover */
.svc-card::before {
  content:''; position:absolute; inset:0;
  background:var(--gold);
  transform:translateY(100%);
  transition:transform .52s var(--ease);
}
.svc-card:hover::before { transform:translateY(0); }
.svc-card > * { position:relative; z-index:1; }

.svc-num {
  font-family:var(--f-disp); font-size:12px;
  color:var(--gold); letter-spacing:.1em;
  margin-bottom:36px; transition:color .4s;
}

.svc-ico {
  width:100%; aspect-ratio:1;
  overflow:hidden; margin-bottom:24px;
  border-radius:2px; background:var(--gold-lt);
}
.svc-ico img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .52s var(--ease);
}
.svc-card:hover .svc-ico img { transform:scale(1.06); }

.svc-name {
  font-family:var(--f-disp); font-size:21px; font-weight:700;
  color:var(--text); line-height:1.2; margin-bottom:12px;
  transition:color .4s;
}
.svc-card:hover .svc-name { color:#fff; }

.svc-desc {
  font-size:13px; line-height:1.7; color:var(--muted);
  flex:1; transition:color .4s;
}
.svc-card:hover .svc-desc { color:rgba(255,255,255,.55); }

.svc-arrow {
  display:inline-flex; align-items:center; gap:9px;
  margin-top:28px;
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
  transition:color .4s, gap .25s;
}
.svc-arrow-line {
  display:inline-block; width:22px; height:1px;
  background:var(--gold); position:relative;
  transition:width .28s var(--ease), background .4s;
}
.svc-arrow-line::after {
  content:''; position:absolute; right:0; top:-3px;
  width:6px; height:6px;
  border-right:1px solid var(--gold); border-top:1px solid var(--gold);
  transform:rotate(45deg); transition:border-color .4s;
}
.svc-card:hover .svc-arrow { color:#fff; gap:14px; }
.svc-card:hover .svc-arrow-line { width:36px; background:#fff; }
.svc-card:hover .svc-arrow-line::after { border-color:#fff; }