/* =========================================================
		   Iletisim.html — Tasimaks "Rota" Tasarım Sistemi Entegrasyonu
		   ========================================================= */

		:root {
			/* --- Brand tokens --- */
			--primary-color: #2754C5;      /* Rota Mavisi */
			--secondary-color: #14224A;    /* Gece Lacivert */
			--accent-amber: #FB8B24;       /* Durak Turuncu */
			--success: #18A999;            
			--ink: #0E1B2C;                
			--mist: #F5F7FB;               
			--dark-text: #101826;
			--light-text: #5B6B82;
			--shadow: 0 20px 45px -18px rgba(14, 27, 44, 0.28);
			--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			--font-display: 'Sora', 'Inter', sans-serif;
			--font-body: 'Inter', sans-serif;
		}

		body {
			font-family: var(--font-body);
			color: #000000;
			background-color: var(--mist);
		}

		h1, h2, h3, h4, h5, h6 {
			font-family: var(--font-display);
		}

		/* Eyebrow & Live Dot */
		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 0.55rem;
			font-family: var(--font-body);
			font-size: 0.78rem;
			font-weight: 700;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			color: var(--primary-color);
		}
		
		.eyebrow-light {
			color: rgba(255, 255, 255, 0.9);
		}

		.live-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--accent-amber);
			flex-shrink: 0;
			animation: livePulse 2s infinite;
		}

		@keyframes livePulse {
			0% { box-shadow: 0 0 0 0 rgba(251, 139, 36, 0.55); }
			70% { box-shadow: 0 0 0 8px rgba(251, 139, 36, 0); }
			100% { box-shadow: 0 0 0 0 rgba(251, 139, 36, 0); }
		}

		/* --- Page Hero --- */
		.page-hero {
			position: relative;
			background: var(--ink); /* Koyu index teması */
			padding: 140px 0 120px;
			text-align: center;
			overflow: hidden;
		}

		.page-hero::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, rgba(20, 34, 74, 0.9) 0%, rgba(14, 27, 44, 0.95) 100%);
			z-index: 1;
		}

		.page-hero .container {
			position: relative;
			z-index: 2;
			max-width: 800px;
			margin: 0 auto;
			display: flex; 
			flex-direction: column; 
			align-items: center;
		}

		.page-hero h1 {
			color: #ffffff;
			font-size: clamp(2.5rem, 5vw, 3.5rem);
			font-weight: 700;
			margin: 1rem 0;
			text-wrap: balance;
		}

		.page-hero p {
			color: #d1d5db;
			font-size: 1.15rem;
			line-height: 1.6;
		}

		/* --- Contact Overlapping Card --- */
		.contact-section {
			position: relative;
			z-index: 15;
			margin-top: -80px;
			padding: 0 20px 80px;
		}

		.contact-card {
			max-width: 1200px;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 20px;
			box-shadow: var(--shadow);
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			overflow: hidden;
		}

		/* Form Side */
		.contact-form-side {
			padding: 3.5rem;
			background: #ffffff;
		}

		.contact-form-side h2 {
			font-size: 2rem;
			margin-bottom: 0.5rem;
			color: var(--ink);
		}
		
		.contact-form-side > p {
			color: #333333;
			margin-bottom: 2.5rem;
		}

		.form-group {
			margin-bottom: 1.5rem;
			display: flex;
			flex-direction: column;
		}

		.form-group label {
			margin-bottom: 0.5rem;
			font-weight: 600;
			color: var(--ink);
			font-size: 0.9rem;
		}

		.form-group input,
		.form-group textarea,
		.form-group select {
			padding: 14px 16px;
			border: 1px solid #e5e7eb;
			border-radius: 10px;
			font-family: inherit;
			font-size: 1rem;
			color: var(--dark-text);
			background: #f9fafb;
			transition: var(--transition);
		}

		.form-group input:focus,
		.form-group textarea:focus,
		.form-group select:focus {
			outline: none;
			border-color: var(--primary-color);
			background: #ffffff;
			box-shadow: 0 0 0 4px rgba(39, 84, 197, 0.12);
		}

		.bot-field {
			position: absolute !important;
			left: -10000px !important;
			width: 1px !important;
			height: 1px !important;
			overflow: hidden !important;
		}

		.recaptcha-wrap {
			min-height: 78px;
			margin-top: 0.25rem;
			overflow-x: auto;
		}

		.submit-btn {
			width: 100%;
			padding: 16px;
			background: var(--primary-color);
			color: #fff;
			border: none;
			border-radius: 10px;
			font-size: 1.05rem;
			font-weight: 600;
			font-family: var(--font-display);
			cursor: pointer;
			transition: var(--transition);
			margin-top: 1rem;
		}

		.submit-btn:hover {
			background: var(--secondary-color);
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(39, 84, 197, 0.25);
		}

		/* Info Side */
		.contact-info-side {
			background: var(--mist);
			padding: 3.5rem;
			border-left: 1px solid #e5e7eb;
			display: flex;
			flex-direction: column;
		}

		.contact-info-side h3 {
			font-size: 1.5rem;
			margin-bottom: 2rem;
			color: var(--ink);
		}

		.info-list {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			margin-bottom: 3rem;
		}

		.info-item {
			display: flex;
			gap: 1.25rem;
			align-items: flex-start;
		}

		.info-icon {
			width: 48px;
			height: 48px;
			background: #ffffff;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary-color);
			flex-shrink: 0;
			box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		}

		.info-icon svg {
			width: 24px;
			height: 24px;
		}

		.info-content h4 {
			font-size: 1.05rem;
			margin-bottom: 0.25rem;
			color: var(--ink);
		}

		.info-content p, 
		.info-content a {
			color: #333333;
			font-size: 0.95rem;
			text-decoration: none;
			line-height: 1.5;
			transition: var(--transition);
		}

		.info-content a:hover {
			color: var(--primary-color);
			font-weight: 500;
		}

		.office-map {
			overflow: hidden;
			background: #ffffff;
			border: 1px solid #e5e7eb;
			border-radius: 14px;
			box-shadow: 0 8px 24px rgba(14, 27, 44, 0.08);
		}

		.office-map iframe {
			display: block;
			width: 100%;
			height: 230px;
			border: 0;
		}

		.office-map a {
			display: block;
			padding: 0.75rem 1rem;
			color: var(--primary-color);
			font-size: 0.88rem;
			font-weight: 600;
			text-align: center;
			text-decoration: none;
		}

		.office-map a:hover {
			background: rgba(39, 84, 197, 0.06);
		}

		/* Social Links aligned with Index */
		.social-section {
			margin-top: auto;
			padding-top: 2rem;
			border-top: 1px solid #e5e7eb;
		}

		.social-section h4 {
			margin-bottom: 1rem;
			color: var(--ink);
		}

		.social-links {
			display: flex;
			gap: 1rem;
		}

		.social-links a {
			width: 44px;
			height: 44px;
			background: #e9edf2;
			border: 1px solid #d8dee7;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #364152 !important;
			transition: var(--transition);
			box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		}

		.social-links a:hover {
			color: #ffffff !important;
			border-color: transparent;
			transform: translateY(-3px);
			box-shadow: 0 8px 16px rgba(39, 84, 197, 0.2);
		}

		.social-links a:nth-child(1):hover {
			background: linear-gradient(135deg, #833ab4, #e1306c, #f77737);
			box-shadow: 0 8px 18px rgba(225, 48, 108, 0.28);
		}

		.social-links a:nth-child(2):hover {
			background: #0a66c2;
			box-shadow: 0 8px 18px rgba(10, 102, 194, 0.28);
		}

		.social-links a:nth-child(3):hover {
			background: #1877f2;
			box-shadow: 0 8px 18px rgba(24, 119, 242, 0.28);
		}

		.social-links svg {
			width: 20px;
			height: 20px;
		}

		.social-links i {
			font-size: 1.25rem;
			line-height: 1;
			color: inherit !important;
		}

		/* --- CTA Section --- */
		.cta-section {
			position: relative;
			padding: 80px 0;
			background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
			color: #fff;
			text-align: center;
			overflow: hidden;
		}
		
		.cta-section::before {
			content: '';
			position: absolute;
			inset: 0;
			background-image:
				radial-gradient(circle at 14% 20%, rgba(255,255,255,0.16) 0, transparent 38%),
				radial-gradient(circle at 86% 78%, rgba(255,255,255,0.12) 0, transparent 42%);
			pointer-events: none;
		}

		.cta-section .container {
			position: relative;
			z-index: 1;
		}

		.cta-section h2 {
			color: #fff;
			margin-bottom: 1rem;
			font-size: 2.2rem;
		}

		.cta-section p {
			color: rgba(255, 255, 255, 0.9);
			font-size: 1.15rem;
			margin-bottom: 2rem;
		}

		.btn-white {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 1rem 2.5rem;
			background: #ffffff;
			color: var(--primary-color);
			font-weight: 700;
			font-family: var(--font-display);
			text-decoration: none;
			border-radius: 10px;
			transition: var(--transition);
		}

		.btn-white:hover {
			background: var(--mist);
			transform: translateY(-2px);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		}

		/* --- Responsive --- */
		@media (max-width: 992px) {
			.contact-card {
				grid-template-columns: 1fr;
			}
			.contact-info-side {
				border-left: none;
				border-top: 1px solid #e5e7eb;
			}
		}

		@media (max-width: 768px) {
			.page-hero {
				padding: 102px 0 58px;
			}

			.page-hero h1 {
				font-size: 2rem;
			}

			.page-hero p {
				font-size: 1rem;
				max-width: 34ch;
			}

			.contact-section {
				margin-top: -42px;
				padding: 0 16px 56px;
			}

			.contact-card {
				grid-template-columns: 1fr;
				border-radius: 22px;
			}

			.contact-form-side, .contact-info-side {
				padding: 1.5rem;
			}

			.contact-form-side h2 {
				font-size: 1.5rem;
			}

			.contact-form-side > p,
			.info-content p,
			.info-content a {
				font-size: 0.95rem;
			}

			.contact-inline-grid {
				display: grid;
				grid-template-columns: 1fr;
				gap: 1rem;
			}

			.info-list {
				gap: 1.25rem;
				margin-bottom: 2rem;
			}

			.info-item {
				gap: 0.9rem;
			}

			.info-icon {
				width: 42px;
				height: 42px;
			}

			.social-section {
				padding-top: 1.25rem;
			}

			.btn-white {
				width: 100%;
				padding: 0.95rem 1.25rem;
			}
			.cta-section h2 {
				font-size: 1.75rem;
			}
		}

		.consent-group label {
			display: flex;
			align-items: flex-start;
			gap: 0.65rem;
			font-size: 0.86rem;
			line-height: 1.5;
		}

		.consent-group input {
			width: auto;
			margin-top: 0.25rem;
		}

		.form-status {
			min-height: 1.5em;
			margin-top: 0.75rem;
			font-size: 0.9rem;
			color: #176b3a;
		}

		.form-status.is-error {
			color: #b42318;
		}

		.submit-btn:disabled {
			cursor: wait;
			opacity: 0.72;
			transform: none;
		}