/*
 * Web Geliştirme — tarayıcı dünyası.
 * Motif: pencere çubuğu (üç nokta + adres), sekmeler, yükleme çubukları, skor halkaları.
 */
.world-web {
	--wb-blue: #155eef;
	--wb-green: #16a34a;
	--wb-chrome: #f1f5f9;
	--wb-line: #e2e8f0;
	--wb-dots: radial-gradient(circle, rgba(15, 39, 69, .1) 1px, transparent 1.5px) 0 0 / 22px 22px;
	--w-card-radius: 14px;
	--w-card-border: 1px solid var(--wb-line);
	--w-card-shadow: 0 22px 38px -30px rgba(15, 39, 69, .5);
	--w-step-radius: 12px;
}
.world-web .service-types,
.world-web .service-page > .section--muted { background: var(--wb-dots), #f6f8fb; }
.world-web .service-capabilities,
.world-web .service-included { background: #fff; }

/* ---------- 1) Kartlar: tarayıcı penceresi ---------- */
.world-web .service-page .pressgpt-pipeline.service-capabilities__list li {
	overflow: hidden;
	padding-top: 52px;
}
.world-web .service-capabilities__list li::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 30px;
	border-bottom: 1px solid var(--wb-line);
	content: "";
	background:
		radial-gradient(circle, #ff5f57 4px, transparent 4.5px) 10px 50% / 10px 10px no-repeat,
		radial-gradient(circle, #febc2e 4px, transparent 4.5px) 24px 50% / 10px 10px no-repeat,
		radial-gradient(circle, #28c840 4px, transparent 4.5px) 38px 50% / 10px 10px no-repeat,
		var(--wb-chrome);
}
.world-web .service-page .pressgpt-pipeline.service-capabilities__list li::after {
	position: absolute;
	top: 8px;
	right: 14px;
	left: 60px;
	display: block;
	width: auto;
	height: 14px;
	border: 1px solid var(--wb-line);
	border-radius: 7px;
	content: "";
	background: #fff;
	transform: none;
}

/* ---------- 2) Tür kartları: tarayıcı sekmeleri ---------- */
.world-web .service-page .services-approach__grid--four { margin-top: 14px; }
.world-web .service-page .services-approach__grid--four article { border-top-left-radius: 0; }
.world-web .services-approach__grid--four article::before {
	position: absolute;
	bottom: calc(100% - 1px);
	left: -1px;
	width: 96px;
	height: 14px;
	border: 1px solid var(--wb-line);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	content: "";
	background: #fff;
}

/* ---------- 3) Liste: performans halkaları ---------- */
.world-web .service-included__list li { padding-left: 34px; }
.world-web .service-included__list li::before {
	top: -1px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2.5px solid var(--wb-green);
	border-radius: 50%;
	color: var(--wb-green);
	background: #f0fdf4;
	font-size: .6rem;
}

/* ---------- 4) Süreç: yükleme çubuğu ---------- */
.world-web .service-delivery .process-list li {
	--p: 25%;
	padding-bottom: 22px;
}
.world-web .service-delivery .process-list li:nth-child(2) { --p: 50%; }
.world-web .service-delivery .process-list li:nth-child(3) { --p: 75%; }
.world-web .service-delivery .process-list li:nth-child(4) { --p: 100%; }
.world-web .service-delivery .process-list li::after {
	position: absolute;
	right: 18px;
	bottom: 10px;
	left: 70px;
	height: 4px;
	border-radius: 2px;
	content: "";
	background: linear-gradient(90deg, var(--wb-blue), #38bdf8) 0 0 / var(--p) 100% no-repeat, var(--wb-line);
}
.world-web .service-delivery .process-list li:last-child::after { background: linear-gradient(90deg, #22c55e, var(--wb-green)); }
.world-web .service-delivery .process-list li:last-child span { border-color: rgba(22, 163, 74, .25); color: var(--wb-green); background: #f0fdf4; }

/* ---------- 5) İletişim: form da bir pencere ---------- */
.world-web #contact-form .contact-form-panel { padding-top: 58px; }
.world-web .contact-form-panel::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 34px;
	border-bottom: 1px solid var(--wb-line);
	content: "";
	background:
		radial-gradient(circle, #ff5f57 4.5px, transparent 5px) 14px 50% / 12px 12px no-repeat,
		radial-gradient(circle, #febc2e 4.5px, transparent 5px) 30px 50% / 12px 12px no-repeat,
		radial-gradient(circle, #28c840 4.5px, transparent 5px) 46px 50% / 12px 12px no-repeat,
		var(--wb-chrome);
}