
/* Metalik servis süreci: site geneline dokunmadan tek bölümlük tasarım. */
.metalproc-section {
  position:relative;
  padding: 68px 24px 80px;
  overflow:hidden;
  color:#102233;
  background:radial-gradient(ellipse at 80% 10%, rgba(78,110,139,.26),transparent 50%),linear-gradient(145deg,#0e1d2b 0%,#16293a 45%,#0d1d2c 100%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.metalproc-section *, .metalproc-section *::before, .metalproc-section *::after{box-sizing:border-box}
.metalproc-shell{max-width:1550px;margin:0 auto;}
.metalproc-panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:30px;border:1px solid rgba(251,252,252,.9);
  background:
    repeating-linear-gradient(0deg,transparent 0px, rgba(34,56,76,.025) 1px, transparent 2px, transparent 4px),
    linear-gradient(106deg,#eceff1 0%,#d0d5d9 16%,#f5f6f7 34%,#d8dde1 55%,#eef1f3 78%,#c3cad0 100%);
  box-shadow:0 26px 52px rgba(5,11,16,.38),inset 0 2px 2px rgba(255,255,255,.82),inset 0 -3px 8px rgba(64,90,114,.23);
  padding:58px clamp(28px,4.2vw,68px) 52px;
}
.metalproc-panel::before{content:"";position:absolute;pointer-events:none;z-index:0;left:16%;right:16%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),transparent)}
.metalproc-panel::after{content:"";position:absolute;pointer-events:none;z-index:0;inset:0;border-radius:inherit;box-shadow:inset 0 0 44px rgba(255,255,255,.23)}
.metalproc-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.06fr);gap:clamp(28px,3.15vw,50px);align-items:start}
.metalproc-left{min-width:0;}
.metalproc-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:25px;padding:10px 21px;border-radius:999px;border:1px solid #4384c0;color:#102335;background:linear-gradient(160deg,#eceff2,#5992c8 53%,#dde2e6);box-shadow:inset 0 1px 2px white,0 3px 7px rgba(38,74,108,.13);font-size:15px;font-weight:800;line-height:1.25}
.metalproc-eyebrow svg{width:21px;height:21px;color:#1c3954;flex:none}
.metalproc-section h2{margin:0 0 12px;color:#0d1c2a;font-family:Inter,system-ui,sans-serif;font-size:clamp(26px,2.45vw,42px);font-weight:850;letter-spacing:-.042em;line-height:1.18}
.metalproc-intro{margin:0;max-width:610px;color:#2c3d4e;font-family:Inter,system-ui,sans-serif;font-size:clamp(14px,.96vw,16px);font-weight:450;line-height:1.7}
.metalproc-accent{display:block;width:78px;height:5px;margin:19px 0 26px;border-radius:6px;background:linear-gradient(90deg,#2d5b86,#4686c1);box-shadow:0 1px 1px #fff}
.metalproc-timeline{position:relative;list-style:none;margin:0;padding:0 0 0 42px;display:grid;gap:16px;counter-reset:phase}
.metalproc-timeline::before{content:"";position:absolute;left:25px;top:23px;bottom:43px;width:2px;background:#417ab0;opacity:.96}
.metalproc-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:18px;min-height:108px;padding:14px 17px 14px 34px;border-radius:19px;border:1px solid rgba(255,255,255,.95);background:linear-gradient(125deg,rgba(255,255,255,.76),rgba(228,232,236,.63));box-shadow:0 6px 16px rgba(47,66,83,.12),inset 0 1px 2px #fff}
.metalproc-number{position:absolute;left:-43px;top:50%;transform:translateY(-50%);width:55px;height:55px;display:grid;place-items:center;border-radius:14px;border:1px solid #4585c1;color:#142a3e;background:linear-gradient(145deg,#eff2f4 0%,#5992c8 85%);box-shadow:0 3px 8px rgba(38,77,113,.15),inset 0 1px 2px #fff;font-size:20px;font-weight:850;line-height:1;font-variant-numeric:tabular-nums;z-index:2}
.metalproc-step-icon{display:grid;place-items:center;border-right:1px solid #628bb2;color:#1c3954;width:65px;height:68px;padding-right:12px}
.metalproc-step-icon svg{width:38px;height:38px;max-width:100%;stroke-width:1.75}
.metalproc-step-copy{display:block;min-width:0;padding-left:7px}
.metalproc-step-copy strong{display:block;margin:0 0 4px;color:#13212d;font-size:17px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.metalproc-step-copy span{display:block;color:#263544;font-size:13.5px;font-weight:450;line-height:1.56}
.metalproc-right{min-width:0;padding-top:24px;}
.metalproc-main-image{overflow:hidden;width:100%;margin:0;border-radius:27px;border:2px solid #fdfdfd;background:#c8cdd1;box-shadow:0 3px 8px rgba(31,54,75,.12);aspect-ratio: 1.37 / 1}
.metalproc-main-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.metalproc-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:19px}
.metalproc-feature{display:flex;flex-direction:column;align-items:flex-start;min-height:151px;padding:18px 19px 15px;border:1px solid #fff;border-radius:20px;color:#142638;background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(224,229,233,.78));box-shadow:0 5px 13px rgba(42,64,84,.11),inset 0 1px 2px rgba(255,255,255,.95)}
.metalproc-feature-icon{display:block;margin:0 0 9px;color:#1c3a55}.metalproc-feature-icon svg{width:33px;height:33px}
.metalproc-feature strong{display:block;margin:0 0 5px;font-weight:800;font-size:15px;letter-spacing:-.03em;line-height:1.3}
.metalproc-feature>span:last-child{display:block;font-size:12.5px;color:#2c3e4f;line-height:1.55}
@media(min-width:1600px){.metalproc-section{padding:75px 24px 92px}.metalproc-panel{padding-top:62px;padding-bottom:60px}.metalproc-step{min-height:114px}.metalproc-features{margin-top:22px}.metalproc-feature{min-height:164px}}
@media(max-width:1199px){.metalproc-panel{padding:40px 34px}.metalproc-layout{gap:28px}.metalproc-section h2{font-size:30px}.metalproc-step{grid-template-columns:40px 1fr;gap:8px;padding:12px 13px 12px 28px;min-height:110px}.metalproc-step-icon{width:43px;height:64px;padding-right:8px}.metalproc-step-icon svg{width:30px;height:30px}.metalproc-step-copy strong{font-size:15px}.metalproc-step-copy span{font-size:12px}.metalproc-feature{padding:14px 12px;min-height:150px}.metalproc-feature strong{font-size:13px}.metalproc-feature>span:last-child{font-size:11px}}
@media(max-width:850px){.metalproc-section{padding:44px 18px 54px}.metalproc-panel{padding:30px 24px 33px;border-radius:22px}.metalproc-layout{grid-template-columns:1fr;gap:26px}.metalproc-right{padding-top:0}.metalproc-main-image{aspect-ratio:1.65/1}.metalproc-step{min-height:99px}.metalproc-section h2{font-size:32px}.metalproc-step-copy strong{font-size:16px}.metalproc-step-copy span{font-size:13px}.metalproc-feature{min-height:125px}.metalproc-feature strong{font-size:14px}.metalproc-feature>span:last-child{font-size:12px}}
@media(max-width:480px){.metalproc-section{padding:30px 12px 43px}.metalproc-panel{padding:23px 17px 24px;border-radius:18px}.metalproc-eyebrow{font-size:12px;margin-bottom:16px;padding:9px 14px}.metalproc-section h2{font-size:clamp(23px,7vw,29px);letter-spacing:-.045em}.metalproc-desktop-break{display:none}.metalproc-intro{font-size:13px;line-height:1.65}.metalproc-accent{margin:14px 0 18px}.metalproc-timeline{padding-left:29px;gap:11px}.metalproc-timeline::before{left:16px;top:26px;bottom:25px}.metalproc-step{grid-template-columns:32px minmax(0,1fr);gap:8px;min-height:109px;padding:11px 10px 11px 16px;border-radius:13px}.metalproc-number{left:-30px;width:36px;height:36px;font-size:14px;border-radius:10px}.metalproc-step-icon{width:32px;height:49px;padding-right:5px}.metalproc-step-icon svg{width:25px;height:25px}.metalproc-step-copy{padding-left:2px}.metalproc-step-copy strong{font-size:13px}.metalproc-step-copy span{font-size:11px;line-height:1.48}.metalproc-main-image{border-radius:16px;aspect-ratio:1.28/1}.metalproc-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}.metalproc-feature{padding:11px 9px 10px;min-height:123px;border-radius:12px}.metalproc-feature-icon{margin-bottom:6px}.metalproc-feature-icon svg{width:26px;height:26px}.metalproc-feature strong{font-size:11px;line-height:1.25}.metalproc-feature>span:last-child{font-size:10px;line-height:1.35}}
@media(max-width:340px){.metalproc-panel{padding-left:12px;padding-right:12px}.metalproc-step-copy span{font-size:10.5px}.metalproc-feature{padding:9px 6px}.metalproc-feature>span:last-child{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.metalproc-section *{scroll-behavior:auto}}
