/* =========================================================
   PRECISION — Mimari blok (teknoloji · hizmet ağı · metrikler)
   İzometrik ızgara zemin, beyaz mimari kart blokları.
   ========================================================= */
.arch-section {
  position: relative;
  z-index: 3;
  background: #f5f6f8;
  padding: clamp(70px, 10vh, 120px) 0;
  overflow: hidden;
}
.arch-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(30deg, rgba(20, 23, 28, .045) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(20, 23, 28, .045) 1px, transparent 1px);
  background-size: 80px 46.188px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 85%);
          mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 85%);
}
.arch-container {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  position: relative;
  display: flex; flex-direction: column; gap: 32px;
}
.arch-card {
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 14px;
  box-shadow: 0 16px 40px -20px rgba(20, 23, 28, .1);
  overflow: hidden;
  position: relative;
}

/* 01 · Üst blok */
.arch-hero {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 30px;
  padding: clamp(32px, 5vw, 64px);
}
.arch-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.arch-hero__title {
  font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.03em; color: var(--ink); text-transform: uppercase;
}
.arch-hero__lead { font-size: clamp(15px, 1.2vw, 18px); color: var(--ink-2); line-height: 1.5; max-width: 520px; }
.arch-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.arch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #e0262d; color: #fff;
  font: 700 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 24px; border-radius: 8px; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(224, 38, 45, .55);
  transition: transform .25s var(--ease), background .3s, box-shadow .3s;
}
.arch-btn:hover { background: #c81d24; transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(224, 38, 45, .7); }
.arch-track-box {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid #cfd5db; border-radius: 8px;
  overflow: hidden; padding: 3px 3px 3px 14px;
  transition: border-color .3s, box-shadow .3s;
}
.arch-track-box:focus-within { border-color: #e0262d; box-shadow: 0 0 0 3px rgba(224, 38, 45, .12); }
.arch-track-box.is-error { border-color: #e0262d; background: #fff6f6; box-shadow: 0 0 0 3px rgba(224, 38, 45, .16); }
.arch-track-box input {
  border: 0; outline: none; background: transparent; width: 190px;
  font: 600 12.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.arch-track-box input::placeholder { color: #8a9099; font-weight: 500; }
.arch-track-btn {
  background: #e0262d; color: #fff;
  font: 700 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 6px; border: 0; cursor: pointer;
  transition: background .25s;
}
.arch-track-btn:hover { background: #c81d24; }
.arch-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.arch-hero__visual img { width: 100%; height: auto; border-radius: 8px; object-fit: contain; }

/* 02 · Teknoloji kartları */
.arch-block { padding: clamp(28px, 4vw, 48px); }
.arch-label {
  display: block; margin-bottom: 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.arch-heading {
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; line-height: 1.15;
  letter-spacing: -.025em; color: var(--ink); text-transform: uppercase; margin-bottom: 28px;
}
.arch-solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.arch-sol-card {
  background: #fff; border: 1px solid #e5e9ec; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.arch-sol-card:hover { border-color: #cbd3da; transform: translateY(-3px); box-shadow: 0 14px 30px -15px rgba(20, 23, 28, .14); }
.arch-sol-media { border-radius: 8px; overflow: hidden; background: #14171c; aspect-ratio: 16 / 9; }
.arch-sol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.arch-sol-card:hover .arch-sol-media img { transform: scale(1.03); }
.arch-sol-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 6px; }
.arch-sol-title { font-size: clamp(14px, 1.2vw, 17px); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.arch-sol-badge {
  flex: none; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-ink); background: rgba(224, 38, 45, .08); padding: 6px 10px; border-radius: 99px;
}

/* 03 · Hizmet ağı + metrikler */
.arch-partners-wrap { display: flex; flex-direction: column; gap: 28px; }
.arch-partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.arch-partner-item {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 22px;
  background: #fafbfc; border: 1px solid #e8ecf0; border-radius: 10px;
  font-size: 14px; font-weight: 750; letter-spacing: .04em; color: #2b313a; text-transform: uppercase;
  transition: all .3s var(--ease);
}
.arch-partner-item svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.arch-partner-item:hover { background: #fff; border-color: #e0262d; color: #c01c23; transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(224, 38, 45, .25); }
.arch-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 14px; border-top: 1px solid #edf1f4; }
.arch-metric { padding: 12px 14px; }
.arch-metric b {
  display: block; font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.04em;
  color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.arch-metric > span { display: block; margin-top: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Dokunmatik cihazlarda 16 px altı yazı, iOS'ta odaklanınca sayfayı büyütür */
@media (hover: none) and (pointer: coarse) {
  .arch-track-box input { font-size: 16px; width: min(260px, 62vw); }
}

/* Duyarlı */
@media (max-width: 980px) {
  .arch-hero, .arch-solutions-grid { grid-template-columns: 1fr; }
  .arch-partners-grid, .arch-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .arch-hero { padding: 24px 20px; }
  .arch-block { padding: 24px 20px; }
  .arch-hero__actions { flex-direction: column; align-items: stretch; }
  .arch-track-box { width: 100%; justify-content: space-between; }
  .arch-track-box input { width: 100%; }
  .arch-partners-grid { grid-template-columns: 1fr; }
  .arch-partner-item { justify-content: flex-start; }
}