/* ALTARON V46 — İleri Mühendislik / aynı geometri üzerinde teknik çizimden fiziksel ürüne geçiş */

.eng41-transition {
  position: relative;
  padding: clamp(88px, 9vw, 148px) 0 clamp(100px, 10vw, 164px);
  background: #10191c;
  border-top: 1px solid rgba(191, 213, 219, .10);
  overflow: hidden;
}

.eng41-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 32%, rgba(82, 133, 147, .07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 30%);
}

.eng41-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .72fr);
  gap: clamp(48px, 8vw, 136px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.eng41-head h2 {
  margin: 0;
  max-width: 760px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.044em;
  color: #f1f1ec;
}

.eng41-head p {
  margin: 0 0 .25rem;
  max-width: 670px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.75;
  color: rgba(199, 214, 218, .66);
}

.eng41-compare {
  --split: 50%;
  --feather: 4.2%;
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 8.25;
  min-height: 480px;
  max-height: 760px;
  overflow: hidden;
  isolation: isolate;
  background: #061014;
  border: 1px solid rgba(174, 201, 209, .18);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .24);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}

.eng41-layer,
.eng41-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eng41-layer img {
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Teknik çizim ve gerçek fotoğraf aynı kaynak geometriden üretildiği için
   sürükleme sırasında parça eksenleri ve detayları piksel düzeyinde üst üste kalır. */
.eng41-blueprint {
  z-index: 1;
  background: #061419;
}

.eng41-blueprint img {
  filter: saturate(1.02) contrast(1.055) brightness(.97);
}

.eng41-blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 14, 18, .08), transparent 31%, transparent 74%, rgba(3, 14, 18, .10)),
    radial-gradient(circle at 48% 47%, transparent 0 48%, rgba(1, 8, 10, .13) 100%);
}

.eng41-real {
  z-index: 3;
  /* Hard clip yerine geniş bir mask geçişi: çizgi katmanı gerçek metal yüzeye yavaşça karışır. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--split) - var(--feather)),
    rgba(0,0,0,.18) calc(var(--split) - 2.4%),
    rgba(0,0,0,.58) var(--split),
    #000 calc(var(--split) + var(--feather)),
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--split) - var(--feather)),
    rgba(0,0,0,.18) calc(var(--split) - 2.4%),
    rgba(0,0,0,.58) var(--split),
    #000 calc(var(--split) + var(--feather)),
    #000 100%
  );
  will-change: -webkit-mask-image, mask-image;
}

.eng41-real img {
  filter: contrast(1.02) saturate(.94) brightness(.98);
}

.eng41-real::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 24, 29, .09), transparent 18%, transparent 86%, rgba(0,0,0,.08));
}

/* Ayırıcının çevresinde teknik tarama / malzeme çözünmesi hissi veren dar optik bant. */
.eng41-transition-band {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: clamp(110px, 10vw, 180px);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(69, 138, 157, .025) 18%,
      rgba(126, 192, 207, .075) 42%,
      rgba(221, 239, 242, .07) 50%,
      rgba(156, 190, 197, .035) 60%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.eng41-transition-band::before,
.eng41-transition-band::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  opacity: .32;
  background: linear-gradient(90deg, transparent, rgba(199,226,233,.8), transparent);
}
.eng41-transition-band::before { top: 24%; }
.eng41-transition-band::after { bottom: 23%; }
.eng41-transition-band img { display: none; }

.eng41-mode {
  position: absolute;
  z-index: 8;
  top: 22px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  background: rgba(5, 13, 16, .66);
  border: 1px solid rgba(178, 205, 212, .17);
  backdrop-filter: blur(10px);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(220, 232, 235, .78);
}

.eng41-mode--left { left: 22px; }
.eng41-mode--right { right: 22px; }

.eng41-scan {
  position: absolute;
  z-index: 10;
  left: var(--split);
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(226, 241, 244, .78);
  box-shadow:
    0 0 0 1px rgba(112, 156, 168, .17),
    0 0 22px rgba(115, 174, 190, .18);
  pointer-events: none;
}

.eng41-handle {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: var(--split);
  transform: translate(-50%, -50%);
}

.eng41-handle button {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(209, 229, 234, .30);
  border-radius: 50%;
  background: rgba(21, 39, 45, .94);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.07);
  color: #e5eef0;
  font-size: 18px;
  cursor: ew-resize;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.eng41-compare:hover .eng41-handle button,
.eng41-handle button:focus-visible {
  transform: scale(1.055);
  background: rgba(32, 56, 63, .98);
  border-color: rgba(222, 239, 243, .48);
  outline: none;
}

.eng41-footer {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 58px;
  background: linear-gradient(180deg, transparent, rgba(4, 10, 12, .82));
  pointer-events: none;
}

.eng41-footer span {
  display: flex;
  align-items: end;
  padding: 0 20px 17px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(202, 219, 223, .56);
}

.eng41-footer span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 10px 3px 0;
  border: 1px solid rgba(152, 192, 202, .5);
  border-radius: 50%;
}

.eng41-help {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  text-align: right;
  font-size: 12px;
  color: rgba(184, 204, 209, .43);
}

@media (max-width: 980px) {
  .eng41-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .eng41-head h2 { max-width: 680px; }
  .eng41-compare {
    min-height: 420px;
    aspect-ratio: 4 / 3;
    --feather: 6%;
  }
  .eng41-footer span { padding-inline: 12px; font-size: 8px; }
}

@media (max-width: 640px) {
  .eng41-transition { padding: 70px 0 92px; }
  .eng41-head h2 { font-size: clamp(28px, 7.8vw, 36px); }
  .eng41-head p { font-size: 14px; line-height: 1.65; }
  .eng41-compare {
    min-height: 360px;
    aspect-ratio: 3 / 4;
    --feather: 8%;
  }
  .eng41-layer img { object-position: 45% center; }
  .eng41-mode { top: 14px; font-size: 8px; min-height: 30px; padding-inline: 9px; }
  .eng41-mode--left { left: 14px; }
  .eng41-mode--right { right: 14px; }
  .eng41-handle button { width: 50px; height: 50px; }
  .eng41-footer { grid-template-columns: 1fr 1fr; min-height: 76px; }
  .eng41-footer span:nth-child(3),
  .eng41-footer span:nth-child(4) { display: none; }
  .eng41-help { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .eng41-handle button { transition: none; }
}