/*
  Web Geliştirme (hizmetler/web-gelistirme) — tasarımın isDev bloğu.
  Ortak bölümler (içindekiler, süreçler, uzman yazısı, senaryolar, SSS) service-common.css'te.
  Hero görselleri tasarım dekoru: public/assets/img/service-dev/.
*/

#page-service-dev .hero-area { position: relative; padding-top: 168px; overflow: hidden; }
#page-service-dev .hero-area .crumb { position: absolute; left: 7.002%; top: 150px; z-index: 6; font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; }
#page-service-dev .hero-area .head { position: relative; z-index: 5; margin: 0 auto; width: min(760px, 86%); text-align: center; }
#page-service-dev .hero-area .title { margin: 0; font-weight: 700; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: #151515; }
#page-service-dev .hero-area .texts { margin: 16px auto 0; max-width: 500px; font-weight: 400; font-size: 17px; line-height: 24px; color: rgba(21, 21, 21, 0.58); text-wrap: pretty; }
#page-service-dev .hero-area .cta { margin-top: 26px; display: flex; justify-content: center; }
#page-service-dev .hero-area .btn { height: 52px; border-radius: 50px; background: #151515; padding: 0 22px; display: flex; align-items: center; font-weight: 500; font-size: 16px; line-height: 16px; white-space: nowrap; color: #ffffff; transition: opacity .3s ease; }
#page-service-dev .hero-area .btn:hover { opacity: .84; }
#page-service-dev .hero-area .tech { margin-top: 30px; display: flex; justify-content: center; }
#page-service-dev .hero-area .tech img { display: block; width: min(300px, 100%); height: auto; }

#page-service-dev .visual { position: relative; margin: clamp(56px, 5vw, 84px) auto 0; width: min(1000px, 60%); }
#page-service-dev .visual .dash { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.10); }
#page-service-dev .visual .card-b { position: absolute; right: -14%; top: calc(20px - clamp(56px, 5vw, 84px)); width: clamp(180px, 18vw, 360px); height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.08)); animation: pkFloatA 7s ease-in-out infinite; }
#page-service-dev .visual .card-a { position: absolute; left: -16%; top: 30%; width: clamp(180px, 18vw, 360px); height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.08)); animation: pkFloatB 8s ease-in-out infinite; }
#page-service-dev .visual .badge { position: absolute; right: -9%; top: 28%; width: clamp(110px, 11vw, 220px); height: auto; animation: pkSway 9s ease-in-out infinite; }
#page-service-dev .visual .fade { position: absolute; left: -30%; right: -30%; bottom: -2px; height: 38%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 92%); pointer-events: none; }