/* =========================================================
   Index.html — Tasimaks
   Design system: "Rota" (Route) — the page is structured as
   stops along a route, echoing the product itself.
   ========================================================= */

:root {
	/* --- Brand tokens (override base) --- */
	--primary-color: #2754C5;      /* Rota Mavisi — trust, action */
	--secondary-color: #14224A;    /* Gece Lacivert — depth, gradients */
	--accent-amber: orange;       /* Durak Turuncu — the route/wayfinding accent */
	--success: #4caf50;            /* Turizm / canlı durum rengi */
	--ink: #0E1B2C;                /* near-black, hero/footers */
	--mist: #F5F7FB;               /* soft section background */
	--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: 'Poppins', 'Inter', sans-serif;
	--font-body: 'Inter', sans-serif;
}

body {
	margin: 0;
	background: #ffffff;
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

button,
input,
select,
textarea {
	font: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--accent-amber);
	outline-offset: 3px;
	border-radius: 6px;
}

.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);
}

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

.route-pin-mini {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-amber);
	flex-shrink: 0;
}

@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); }
}

/* ===== Hero Section ===== */
.hero {
	position: relative;
	min-height: 100vh;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

.home-page .modern-nav:not(.nav-scrolled) {
	background-color: transparent !important;
	border-bottom-color: rgba(14, 27, 44, 0.1) !important;
	backdrop-filter: none;
}

.home-page .modern-nav:not(.nav-scrolled) .logo-dark {
	opacity: 1 !important;
}

.home-page .modern-nav:not(.nav-scrolled) .logo-white {
	opacity: 0 !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-menu li a,
.home-page .modern-nav:not(.nav-scrolled) .nav-menu li .dropdown-trigger {
	color: var(--ink) !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-menu li a:hover,
.home-page .modern-nav:not(.nav-scrolled) .nav-menu li .dropdown-trigger:hover,
.home-page .modern-nav:not(.nav-scrolled) .nav-menu li a.active {
	color: var(--primary-color) !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-toggle span {
	background: var(--ink) !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-btn-secondary {
	background-color: var(--mist);
	border-color: #e5e7eb;
	color: var(--ink) !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-menu li .nav-btn-primary {
	background-color: var(--primary-color);
	color: #ffffff !important;
}

.home-page .modern-nav:not(.nav-scrolled) .nav-menu li .nav-btn-primary:hover {
	color: #ffffff !important;
}

.hero .container {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(90px, 12vh, 140px) 20px 70px;
}

.hero-content {
	max-width: 540px;
}

.hero-eyebrow {
	color: var(--ink);
	opacity: 0.95;
	margin-bottom: 1.1rem;
}

.hero-content h1 {
	font-family: var(--font-display);
	color: var(--ink);
	font-size: clamp(2.1rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin-bottom: 1.5rem;
	text-wrap: balance;
	text-shadow: none;
}

.hero-content > p {
	color: #374151;
	font-size: 1.25rem;
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 520px;
	text-shadow: none;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 2.75rem;
}

.hero-buttons a,
.hero-buttons button {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px; /* Daha yuvarlak (hap şeklinde) görünüm */
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.hero-metrics {
	display: flex;
	gap: 2.25rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(14, 27, 44, 0.16);
}

.metric {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.metric:not(:first-child)::before {
	content: '';
	position: absolute;
	left: -1.125rem;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background: rgba(14, 27, 44, 0.18);
}

.metric-value {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ink);
	text-shadow: none;
}

.metric-label {
	font-size: 0.9rem;
	color: #4b5563;
}

.myHeroSwiper {
	width: 100%;
	height: 100vh;
	border-radius: 0;
	box-shadow: none;
	background: #ffffff;
	position: relative;
}

.myHeroSwiper .swiper-wrapper {
	background: #ffffff;
}

.myHeroSwiper .swiper-slide {
	position: relative;
	display: flex;
	align-items: center;
	background: #ffffff;
	overflow: hidden;
}

/* Slaytlar arasında tutarlı kalan, sakin dekoratif arka plan. */
.myHeroSwiper .swiper-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 74% 14%, rgba(226, 232, 240, .58) 0 28px, transparent 29px),
		radial-gradient(circle at 93% 57%, rgba(241, 245, 249, .92) 0 46px, transparent 47px),
		radial-gradient(circle at 56% 86%, rgba(226, 232, 240, .48) 0 17px, transparent 18px),
		radial-gradient(circle at 83% 21%, transparent 0 88px, rgba(148, 163, 184, .13) 89px 91px, transparent 92px),
		radial-gradient(circle at 87% 76%, transparent 0 148px, rgba(148, 163, 184, .09) 149px 151px, transparent 152px),
		radial-gradient(circle at 63% 90%, transparent 0 52px, rgba(148, 163, 184, .11) 53px 55px, transparent 56px),
		radial-gradient(circle at 18% 77%, rgba(148, 163, 184, .13) 0 2px, transparent 2.7px) 0 0 / 23px 23px;
	opacity: .7;
	z-index: 0;
}

.myHeroSwiper .swiper-slide img {
	position: absolute;
	top: 52%;
	right: max(20px, calc((100vw - 1200px) / 2));
	left: auto;
	width: min(50vw, 620px);
	height: min(72vh, 650px);
	object-fit: contain;
	object-position: center;
	background: transparent;
	box-shadow: none;
	filter: none;
	transform: translateY(-50%);
	z-index: 1;
}

.myHeroSwiper .swiper-slide::after {
	display: none;
}

@media (min-width: 769px) {
	.myHeroSwiper,
	.myHeroSwiper .swiper-wrapper,
	.myHeroSwiper .swiper-slide {
		height: 100vh !important;
		background: #ffffff;
	}

	.myHeroSwiper .hero-slide-general {
		align-items: flex-start;
	}

	.myHeroSwiper .hero-slide-general .container {
		padding-top: max(120px, calc(var(--nav-height, 80px) + 32px), 12vh) !important;
	}
}

@media (min-width: 769px) and (max-height: 760px) {
	.myHeroSwiper .hero-slide-general .hero-content h1 {
		font-size: clamp(2rem, 3.4vw, 2.75rem);
		margin-bottom: 1rem;
	}

	.myHeroSwiper .hero-slide-general .hero-content > p {
		font-size: 1.08rem;
		margin-bottom: 1.25rem;
	}

	.myHeroSwiper .hero-slide-general .hero-buttons {
		margin-bottom: 1.5rem;
	}

	.myHeroSwiper .hero-slide-general .hero-metrics {
		padding-top: 1rem;
	}
}

/* Soft vignette so the photo blends into the floating route card below */
.hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 110px;
	background: transparent;
	z-index: 3;
	pointer-events: none;
}

.myHeroSwiper .swiper-pagination {
	z-index: 20;
	text-align: center;
	padding-left: 0;
	max-width: 1200px;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 130px;
}

.myHeroSwiper .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(14, 27, 44, 0.28);
	opacity: 1;
	transition: 0.3s;
}

.myHeroSwiper .swiper-pagination-bullet-active {
	width: 30px;
	border-radius: 5px;
	background: var(--accent-amber);
}

.myHeroSwiper .swiper-button-next,
.myHeroSwiper .swiper-button-prev {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.78);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(14, 27, 44, 0.14);
	transition: all 0.3s ease;
	z-index: 20;
}

.myHeroSwiper .swiper-button-next:hover,
.myHeroSwiper .swiper-button-prev:hover {
	background: var(--accent-amber);
	border-color: var(--accent-amber);
	transform: scale(1.1);
}

.myHeroSwiper .swiper-button-next::after,
.myHeroSwiper .swiper-button-prev::after {
	font-size: 1.2rem;
	font-weight: bold;
}

/* Scroll cue — a tiny route, traveled by a single dot */
.hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 84px;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

.hero-scroll-track {
	width: 2px;
	height: 34px;
	background: rgba(14, 27, 44, 0.22);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}

.hero-scroll-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--accent-amber);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-scroll-dot { animation: scrollDot 1.8s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-scroll-dot { top: 14px; opacity: 0.85; }
}

@keyframes scrollDot {
	0% { top: 0; opacity: 0; }
	15% { opacity: 1; }
	50% { top: 26px; opacity: 1; }
	85% { opacity: 0; }
	100% { top: 26px; opacity: 0; }
}

/* ===== Ghost button (used on dark backgrounds: hero + CTA) ===== */
.btn-ghost-white {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 2.1rem;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: var(--transition);
}

.btn-ghost-white:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	transform: translateY(-2px);
}
.btn-lg {
    padding: 0.95rem 2.4rem; /* Yuvarlak köşeli butonlarda yan boşlukları biraz artırmak daha dengeli gösterir */
    font-size: 1rem;
}

/* ===== Route Card (floating bridge between hero and content) ===== */
.route-card-wrap {
	position: relative;
	z-index: 15;
	margin-top: -92px;
	padding: 0 20px;
	background: linear-gradient(to bottom, transparent 0, transparent 92px, #ffffff 92px, #ffffff 100%);
}

.route-card {
	max-width: 1200px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: var(--shadow);
	padding: 1.85rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.route-card-eyebrow {
	color: #000000;
}

.route-card-stops {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.route-card-stops::before {
	content: '';
	position: absolute;
	top: 7px;
	left: 7%;
	right: 7%;
	height: 2px;
	background-image: linear-gradient(to right, var(--light-text) 0 7px, transparent 7px 16px);
	background-size: 16px 2px;
	opacity: 0.3;
	z-index: 0;
}

.route-stop {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	text-align: center;
	color: #000000;
}

.route-pin {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--primary-color);
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px rgba(39, 84, 197, 0.16);
	transition: var(--transition);
}

/* Cycles every 3 stops so the system holds up no matter how many services are listed */
.route-stop:nth-child(4n+2) .route-pin {
	background: var(--accent-amber);
	box-shadow: 0 0 0 4px rgba(251, 139, 36, 0.16);
}

.route-stop:nth-child(4n+3) .route-pin {
	background: var(--success);
	box-shadow: 0 0 0 4px rgba(24, 169, 153, 0.16);
}

.route-stop:nth-child(4n+4) .route-pin {
	background: red;
	box-shadow: 0 0 0 4px rgba(240, 50, 2, 0.16);
}

.route-stop:hover .route-pin {
	transform: scale(1.3);
}

.route-stop-label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.98rem;
}

.route-stop small {
	color: #000000;
	font-size: 0.8rem;
}

/* ===== Features Section ===== */
.features {
	padding: 110px 0 80px;
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#ffffff calc(100% - 240px),
		#f5f7fa 100%
	);
}

.features h2,
.benefits h2,
.cta-section h2,
.how-it-works h2 {
	font-family: var(--font-display);
}

.features h2 {
	text-align: center;
	margin-bottom: 0.5rem;
	color: #000000;
}

.features .eyebrow,
.how-it-works .eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.section-subtitle {
	text-align: center;
	font-size: 1.1rem;
	color: #000000;
	margin-bottom: 3rem;
}

/* Hero altı program seçici */
.product-tabs { padding: 5.5rem 0; background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--primary-color) 5%, #fff) 100%); }.product-tabs .container { max-width: 1120px; }.product-tabs-heading { margin-bottom: 2.25rem; }.product-tabs-heading h2 { max-width: 560px; margin: .65rem 0 0; color: var(--ink); font: 800 clamp(1.85rem, 3vw, 2.55rem)/1.18 var(--font-display); }.product-tabs-shell { padding: 1rem; border: 1px solid color-mix(in srgb, var(--primary-color) 17%, #e5e7eb); border-radius: 28px; background: rgba(255,255,255,.82); box-shadow: 0 18px 40px rgba(20, 33, 51, .09); }.product-tabs-layout { display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.55fr); gap: 1rem; align-items: stretch; }.product-tab-list { display: grid; align-content: stretch; gap: .65rem; padding: .35rem; border-radius: 20px; background: color-mix(in srgb, var(--primary-color) 5%, #fff); }.product-tab { --tab-accent: #2754c5; --tab-accent-dark: #14224a; display: grid; grid-template-columns: 46px 1fr auto; gap: .9rem; align-items: center; width: 100%; min-height: 82px; padding: 1rem; border: 1px solid transparent; border-radius: 16px; background: transparent; color: #4f6177; text-align: left; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.product-tab-servis { --tab-accent: #2754c5; --tab-accent-dark: #14224a; }.product-tab-tur { --tab-accent: #c37911; --tab-accent-dark: #955907; }.product-tab-transfer { --tab-accent: #25866b; --tab-accent-dark: #186850; }.product-tab-filo { --tab-accent: #bf5b57; --tab-accent-dark: #9d423e; }.product-tab > i:first-child { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--tab-accent) 13%, white); color: var(--tab-accent); }.product-tab span { display: grid; gap: .25rem; color: #182638; font-size: .92rem; font-weight: 800; }.product-tab small { color: #607084; font-size: .72rem; font-weight: 500; }.product-tab > i:last-child { color: #a2afbe; font-size: .75rem; }.product-tab:hover { background: rgba(255,255,255,.74); }.product-tab.is-active { border-color: transparent; background: linear-gradient(140deg, var(--tab-accent), var(--tab-accent-dark)); box-shadow: 0 12px 24px color-mix(in srgb, var(--tab-accent) 28%, transparent); }.product-tab.is-active > i:first-child { background: rgba(255,255,255,.18); color: #fff; }.product-tab.is-active span, .product-tab.is-active small, .product-tab.is-active > i:last-child { color: #fff; }.product-tab.is-active small { color: rgba(255,255,255,.78); }.product-tab:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 2px; }
.product-tab-panels { min-height: 390px; }.product-tab-panel { display: grid; grid-template-columns: minmax(210px, .82fr) minmax(250px, 1.18fr); align-items: center; gap: 1.2rem; min-height: 390px; padding: clamp(1.5rem, 3vw, 3rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary-color) 14%, #e5e7eb); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(20, 33, 51, .05); animation: tabPanelIn .25s ease; }.product-tab-panel[hidden] { display: none !important; }.product-tab-panel > div { position: relative; z-index: 1; }.product-panel-kicker { color: var(--primary-color); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }.product-tab-panel h3 { margin: .8rem 0; color: #182638; font: 800 clamp(1.55rem, 2.3vw, 2.2rem)/1.2 var(--font-display); }.product-tab-panel p { margin: 0 0 1.4rem; color: #607084; line-height: 1.7; }.product-tab-panel a { display: inline-flex; gap: .5rem; align-items: center; color: var(--primary-color); font-size: .9rem; font-weight: 800; text-decoration: none; }.product-tab-panel img { width: 100%; max-height: 310px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(20, 44, 78, .15)); }.product-tab-panel a:hover { gap: .75rem; }@keyframes tabPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Çözüm haritası: dört ürünün tek bakışta anlaşılabildiği bento düzeni */
.solution-map {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem;
	margin-top: 3rem;
}

.solution-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr);
	min-height: 350px;
	overflow: hidden;
	border: 1px solid var(--solution-border, #dfe7f8);
	border-radius: 26px;
	background: var(--solution-bg, #f4f7ff);
	box-shadow: 0 16px 36px rgba(14, 27, 44, .08);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease;
}

.solution-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(14, 27, 44, .15); }
.solution-card:focus-visible { outline: 3px solid var(--solution-accent, #2754c5); outline-offset: 4px; }
.solution-card-copy { position: relative; z-index: 1; padding: 2rem 0 2rem 2rem; }
.solution-card h3 { margin: .85rem 0 .65rem; color: #13243b; font: 700 clamp(1.25rem, 2vw, 1.7rem)/1.2 var(--font-display); }
.solution-card p { margin: 0 0 1rem; color: #4f6177; font-size: .93rem; line-height: 1.6; }
.solution-card img { align-self: center; width: 100%; max-height: 280px; object-fit: contain; border-radius: 24px; background: transparent; filter: drop-shadow(0 20px 16px rgba(20, 44, 78, .15)); transition: transform .35s ease; }
.solution-card:hover img { transform: scale(1.05) translateX(3px); }
.product-preview { align-self: center; justify-self: center; position: relative; width: min(100%, 285px); margin: 1.5rem 1.5rem 1.5rem 0; padding: .9rem; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 30px rgba(22, 44, 76, .18); color: #263752; font-size: .69rem; transition: transform .35s ease; }
.solution-card:hover .product-preview { transform: translateY(-5px) rotate(-1deg); }
.preview-topbar, .preview-stat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 800; }
.preview-topbar { padding-bottom: .7rem; color: #1b2e4c; }.preview-topbar > i { color: var(--solution-accent); }
.preview-day { padding: .22rem .45rem; border-radius: 99px; background: color-mix(in srgb, var(--solution-accent) 12%, white); color: var(--solution-accent); font-size: .6rem; }
.preview-map { position: relative; height: 132px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #dcebf0 0 37%, #f8f3e6 37% 62%, #dbe8dc 62%); }.preview-map::before, .preview-map::after { content: ''; position: absolute; border: 8px solid rgba(255,255,255,.8); border-radius: 50%; }.preview-map::before { width: 150px; height: 90px; left: -43px; top: 29px; }.preview-map::after { width: 120px; height: 160px; right: -75px; top: -36px; }
.map-route { position: absolute; z-index: 1; width: 126px; height: 70px; left: 55px; top: 30px; border: 4px solid var(--solution-accent); border-color: var(--solution-accent) transparent var(--solution-accent) transparent; border-radius: 50%; transform: rotate(-24deg); }.map-pin { position: absolute; z-index: 2; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: var(--solution-accent); box-shadow: 0 2px 6px rgba(0,0,0,.22); }.pin-start { left: 49px; top: 82px; }.pin-end { right: 46px; top: 33px; }.preview-vehicle { position: absolute; z-index: 3; left: 111px; top: 59px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--solution-accent); color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.preview-stat { margin-top: .8rem; color: #53647b; }.preview-stat i { color: var(--solution-accent); }.preview-stat strong { color: var(--solution-accent); font-size: .64rem; }
.preview-timeline { position: relative; display: grid; gap: .58rem; padding: .3rem .2rem .3rem 1rem; }.preview-timeline > div { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: .4rem; position: relative; z-index: 1; }.preview-timeline b { color: var(--solution-accent); font-size: .61rem; }.preview-timeline div::before { content: ''; position: absolute; left: -1.17rem; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--solution-accent); }.timeline-line { position: absolute; left: .18rem; top: .45rem; bottom: .45rem; width: 2px; background: color-mix(in srgb, var(--solution-accent) 28%, white); }
.booking-route { display: grid; gap: .55rem; padding: .85rem; border-radius: 12px; background: #eaf7f1; font-weight: 700; }.booking-route > span { display: flex; gap: .45rem; align-items: center; }.booking-route span i { color: var(--solution-accent); }.booking-route > i { margin-left: .15rem; color: #83a99a; font-size: .65rem; }
.fleet-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }.fleet-summary div { display: grid; gap: .15rem; padding: .7rem; border-radius: 11px; background: #fff0ee; }.fleet-summary strong { color: var(--solution-accent); font: 700 1.35rem/1 var(--font-display); }.fleet-summary span { color: #6d6870; font-size: .58rem; font-weight: 700; }.fleet-bars { display: grid; gap: .35rem; margin: .75rem 0; }.fleet-bars span { height: 6px; border-radius: 10px; background: color-mix(in srgb, var(--solution-accent) 65%, white); }.fleet-bars span:nth-child(2) { opacity: .7; }.fleet-bars span:nth-child(3) { opacity: .45; }

/* Programlar: dekoratif illüstrasyonlardan ayrı, ürün deneyimini anlatan ekran turu */
.program-preview-header, .screen-nav, .screen-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.program-preview-header { margin-bottom: .9rem; color: #243954; font-size: .79rem; font-weight: 800; }.program-preview-header span { display: inline-flex; gap: .45rem; align-items: center; }.program-preview-header span i, .program-preview-header > i { color: var(--program-color); }.program-preview-card > p { min-height: 3.6em; margin: .9rem .1rem 0; font-size: .78rem; line-height: 1.55; }
.program-screen { padding: .75rem; overflow: hidden; border-radius: 13px; background: #eef4ff; color: #31445f; font-size: .64rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }.screen-nav { padding-bottom: .65rem; font-weight: 800; }.screen-nav b { padding: .2rem .35rem; border-radius: 20px; background: rgba(255,255,255,.75); color: var(--program-color); font-size: .58rem; }.screen-map { position: relative; height: 130px; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg, #d9eceb 0 35%, #f7f0df 35% 62%, #dcead9 62%); }.screen-map::before, .screen-map::after { content: ''; position: absolute; border: 6px solid rgba(255,255,255,.75); border-radius: 50%; }.screen-map::before { width: 100px; height: 70px; left: -32px; top: 38px; }.screen-map::after { width: 95px; height: 140px; right: -54px; top: -33px; }.screen-route { position: absolute; z-index: 1; width: 105px; height: 56px; left: 45px; top: 34px; border: 3px solid var(--program-color); border-color: var(--program-color) transparent var(--program-color) transparent; border-radius: 50%; transform: rotate(-23deg); }.screen-bus { position: absolute; z-index: 2; left: 91px; top: 57px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--program-color); color: #fff; }.screen-dot { position: absolute; z-index: 2; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--program-color); }.dot-one { left: 42px; top: 80px; }.dot-two { right: 37px; top: 32px; }.screen-footer { padding-top: .7rem; font-weight: 700; }.screen-footer strong { color: var(--program-color); font-size: .59rem; }
.screen-tur { background: #fff6e7; }.screen-agenda { display: grid; gap: .55rem; position: relative; padding: .25rem 0 .25rem .85rem; }.screen-agenda::before { content: ''; position: absolute; left: .22rem; top: .4rem; bottom: .4rem; width: 2px; background: rgba(195,121,17,.25); }.screen-agenda div { display: grid; grid-template-columns: 33px 1fr; gap: .35rem; position: relative; }.screen-agenda div::before { content: ''; position: absolute; left: -.9rem; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--program-color); }.screen-agenda b { color: var(--program-color); font-size: .57rem; }
.screen-transfer { background: #edf9f4; }.screen-trip { display: grid; gap: .48rem; padding: .75rem; border-radius: 9px; background: rgba(255,255,255,.72); font-weight: 800; }.screen-trip span { display: flex; align-items: center; gap: .4rem; }.screen-trip span i, .screen-trip > i { color: var(--program-color); }.screen-trip > i { margin-left: .1rem; font-size: .57rem; }
.screen-filo { background: #fff1ef; }.screen-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }.screen-kpis div { display: grid; gap: .18rem; padding: .7rem; border-radius: 9px; background: rgba(255,255,255,.7); }.screen-kpis strong { color: var(--program-color); font: 700 1.2rem/1 var(--font-display); }.screen-kpis span { font-size: .55rem; font-weight: 700; }.screen-bars { display: grid; gap: .35rem; margin: .8rem 0; }.screen-bars i { display: block; height: 5px; border-radius: 10px; background: var(--program-color); }.screen-bars i:nth-child(1) { width: 87%; }.screen-bars i:nth-child(2) { width: 65%; opacity: .7; }.screen-bars i:nth-child(3) { width: 76%; opacity: .45; }
.solution-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; background: var(--solution-accent, #2754c5); color: #fff; font-size: 1.05rem; box-shadow: 0 8px 16px color-mix(in srgb, var(--solution-accent, #2754c5) 32%, transparent); }
.solution-kicker { display: block; margin-top: 1rem; color: var(--solution-accent, #2754c5); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.solution-card ul { display: grid; gap: .35rem; margin: 0 0 1.15rem; padding: 0; list-style: none; color: #40536b; font-size: .8rem; font-weight: 600; }.solution-card li i { margin-right: .3rem; color: var(--solution-accent, #2754c5); }
.solution-card-cta { display: inline-flex; align-items: center; gap: .45rem; color: var(--solution-accent, #2754c5); font-size: .87rem; font-weight: 800; transition: gap .2s ease, color .2s ease; }.solution-card:hover .solution-card-cta { gap: .65rem; color: var(--solution-accent-dark, #1d3f9d); }
.solution-servis { --solution-accent: #2754c5; --solution-accent-dark: #1d3f9d; --solution-border: #dce6ff; --solution-bg: #f2f6ff; }.solution-servis img { max-height: 280px; }
.solution-tur { --solution-accent: #c37911; --solution-accent-dark: #955907; --solution-border: #f1dfbb; --solution-bg: #fffaf0; }.solution-transfer { --solution-accent: #25866b; --solution-accent-dark: #186850; --solution-border: #d2ebe2; --solution-bg: #f2fbf7; }.solution-filo { --solution-accent: #bf5b57; --solution-accent-dark: #9d423e; --solution-border: #f0d7d5; --solution-bg: #fff6f5; }
.solution-servis img,
.solution-transfer img { order: -1; }

/* Eski uzun akış ve sabit yan menü, çözüm haritasının yerini alır. */
.features .feature-sidebar,
.features .stacked-features-wrapper { display: none !important; }

@media (max-width: 820px) {
	.product-tabs { padding: 4.5rem 0; }.product-tabs-layout { grid-template-columns: 1fr; gap: 1.25rem; }.product-tab-list { grid-template-columns: repeat(2, 1fr); }.product-tab { grid-template-columns: 36px 1fr; padding: .8rem; }.product-tab > i:first-child { width: 36px; height: 36px; }.product-tab > i:last-child { display: none; }.product-tab-panel { min-height: 320px; }
	.solution-map { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
	.solution-card, .solution-servis { grid-column: auto; grid-template-columns: minmax(0, 1fr) minmax(145px, .75fr); min-height: 300px; }
	.solution-card-copy { padding: 1.5rem 0 1.5rem 1.5rem; }.solution-card img, .solution-servis img { max-height: 220px; }.product-preview { width: min(100%, 240px); margin: 1rem 1rem 1rem 0; }.solution-card p { font-size: .86rem; }.solution-card ul { display: none; }
}

@media (max-width: 520px) {
	.product-tabs { padding: 3.7rem 0; }.product-tabs-heading { text-align: center; }.product-tabs-heading h2 { margin-inline: auto; }.product-tab-list { grid-template-columns: 1fr; }.product-tab-panel { grid-template-columns: 1fr; min-height: 0; padding: 1.5rem; }.product-tab-panel img { width: min(88%, 330px); margin: 0 auto; order: -1; }
	.solution-card, .solution-servis { grid-template-columns: 1fr; min-height: 0; }
	.solution-card-copy { padding: 1.45rem; }.solution-card img { width: min(78%, 280px); margin: -1rem auto 1.2rem; order: -1; }.product-preview { width: min(78%, 280px); margin: 1.2rem auto -1rem; order: -1; }.solution-card h3 { font-size: 1.35rem; }
}

/* ===== Interactive Features Card ===== */

/* Yüzen Yan Navigasyon */
.feature-sidebar {
    position: fixed;
    top: 50%;
    left: 20px;
    z-index: 998;
    opacity: 0;
    transform: translateY(-50%) translateX(-100px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.feature-sidebar.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.feature-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    width: 48px;
    height: 52px;
    border-radius: 12px; /* Kenarları yumuşak dikdörtgen */
    background: rgba(14, 27, 44, 0.3); /* Yarı saydam koyu arka plan */
    color: rgba(255, 255, 255, 0.9); /* Net beyaz ikon rengi */
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
    box-sizing: border-box;
}

.sidebar-link i {
    font-size: 1.2rem;
    flex-shrink: 0; /* İkonun küçülmesini engelle */
}

.sidebar-link span {
    font-weight: 600;
    padding-left: 12px; /* İkon ile yazı arasına boşluk */
    padding-right: 16px;
    font-size: 0.9rem;
    opacity: 0; /* Başlangıçta yazıyı gizle */
    transition: opacity 0.2s ease;
}

.sidebar-link:hover {
    width: 230px;
    color: #ffffff !important; /* Üzerine gelince rengin beyaz kalmasını garantile */
}

.sidebar-link:hover span {
    opacity: 1; /* Üzerine gelince yazıyı göster */
    transition-delay: 0.1s; /* Hafif gecikmeyle gelsin */
}

.sidebar-link.active {
    background: var(--primary-color);
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(39, 84, 197, 0.3);
}

/* Renk Kodları */
.sidebar-link[data-feature="servis"]:hover, .sidebar-link[data-feature="servis"].active {
    background: var(--primary-color); /* Mavi */
}
.sidebar-link[data-feature="tur"]:hover, .sidebar-link[data-feature="tur"].active {
    background: var(--accent-amber); /* Turuncu */
}
.sidebar-link[data-feature="transfer"]:hover, .sidebar-link[data-feature="transfer"].active {
    background: var(--success); /* Yeşil */
}
.sidebar-link[data-feature="filo"]:hover, .sidebar-link[data-feature="filo"].active {
    background: #E63946; /* Kırmızı */
}

/* Alt Alta Hizmet Bölümleri */
.stacked-features-wrapper {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.stacked-feature {
    padding: 4rem 0;
}

.stacked-feature:nth-child(odd) {
    background: var(--mist);
}

.feature-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Soldaki sabit hizmet kısayolları içeriklerin üzerine gelmesin. */
@media (min-width: 993px) {
	.stacked-feature .feature-container {
		width: 100%;
		max-width: 1280px;
		margin-right: auto;
		margin-left: auto;
		padding-right: clamp(88px, 8vw, 112px);
		padding-left: clamp(88px, 8vw, 112px);
	}
}

/* Tek sayılı bölümlerde sıralamayı ayarla (text-image) */
.stacked-feature:nth-child(odd) .feature-container {
    grid-template-areas: "text image";
}
.stacked-feature:nth-child(odd) .feature-text {
    grid-area: text;
}
.stacked-feature:nth-child(odd) .feature-image {
    grid-area: image;
}
/* Her ikinci bölümde sıralamayı tersine çevir */
.stacked-feature:nth-child(even) .feature-container {
    grid-template-areas: "image text";
}

.stacked-feature:nth-child(even) .feature-text {
    grid-area: text;
}

.stacked-feature:nth-child(even) .feature-image {
    grid-area: image;
}

.feature-text h3 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
	color: #000000;
}

.feature-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 2rem;
}

.feature-image img {
    width: 100%;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.feature-image img[src*="img/generated/"] {
	width: min(100%, 600px);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(14, 27, 44, 0.14);
}

/* Beyaz zeminli Tur ve Filo bölümlerinde daha yumuşak görsel geçişi */
.stacked-feature:nth-child(even) .feature-image {
	position: relative;
	isolation: isolate;
}

.stacked-feature:nth-child(even) .feature-image::before {
	content: '';
	position: absolute;
	inset: 10% 7%;
	z-index: -1;
	border-radius: 32%;
	background: rgba(44, 73, 112, 0.12);
	filter: blur(34px);
	pointer-events: none;
}

.stacked-feature:nth-child(even) .feature-image img[src*="img/generated/"] {
	box-shadow: none;
	-webkit-mask-image: radial-gradient(ellipse 98% 96% at center, #000 76%, rgba(0, 0, 0, 0.94) 84%, transparent 100%);
	mask-image: radial-gradient(ellipse 98% 96% at center, #000 76%, rgba(0, 0, 0, 0.94) 84%, transparent 100%);
}
.feature-image2 img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 15px 40px -15px rgba(14, 27, 44, 0.2);
    transition: transform 0.3s ease;
}

.feature-image img:hover {
    transform: scale(1.03);
}

/* ===== How it works (genuine sequence — numbering earns its place) ===== */
.how-it-works {
	padding: 90px 0;
	background: var(--mist);
}

.how-it-works h2 {
	text-align: center;
	margin-bottom: 0.5rem;
}

.steps-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 3.5rem;
}

.step-line {
	position: absolute;
	top: 27px;
	left: 9%;
	right: 9%;
	height: 2px;
	background-image: linear-gradient(to right, var(--primary-color) 0 12px, transparent 12px 24px);
	background-size: 24px 2px;
	background-repeat: repeat-x;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.step-line { animation: dashFlow 22s linear infinite; }
}

@keyframes dashFlow {
	from { background-position: 0 0; }
	to { background-position: 240px 0; }
}

.step {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 16px;
	padding: 2rem 1.75rem;
	box-shadow: 0 10px 30px -16px rgba(14, 27, 44, 0.14);
	transition: var(--transition);
}

.step:hover {
	transform: translateY(-4px);
}

.step-marker {
	display: inline-flex;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	margin-bottom: 1.1rem;
}

.step h3 {
	font-family: var(--font-display);
	margin-bottom: 0.6rem;
}

.step p {
	color: var(--light-text);
	font-size: 0.95rem;
}

/* ===== Benefits Section ===== */
.benefits {
	padding: 110px 0;
	background: #f5f7fa;
	position: relative;
	overflow: hidden;
}

.benefits::before {
	content: '';
	position: absolute;
	width: 680px;
	height: 680px;
	right: -285px;
	top: -390px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, rgba(26, 115, 232, 0.055) 0 42%, transparent 42.5%),
		radial-gradient(circle at center, transparent 0 55%, rgba(26, 115, 232, 0.08) 55.5% 56.5%, transparent 57%),
		radial-gradient(circle at center, transparent 0 69%, rgba(103, 125, 153, 0.08) 69.5% 70.5%, transparent 71%);
	pointer-events: none;
}

.benefits::after {
	content: '';
	position: absolute;
	width: 390px;
	height: 390px;
	left: -210px;
	bottom: -235px;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, rgba(26, 115, 232, 0.04) 0 34%, transparent 34.5%),
		radial-gradient(circle at center, transparent 0 51%, rgba(26, 115, 232, 0.07) 51.5% 53%, transparent 53.5%),
		radial-gradient(circle at center, transparent 0 70%, rgba(103, 125, 153, 0.07) 70.5% 72%, transparent 72.5%);
	pointer-events: none;
}

.benefits > .container {
	position: relative;
	z-index: 1;
}

.benefits-heading {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.benefits-heading .eyebrow {
	display: inline-flex;
	justify-content: center;
	margin-bottom: 0.85rem;
	color: var(--primary-color);
}

.benefits h2 {
	color: var(--ink);
	font-size: clamp(2rem, 3.5vw, 3rem);
	line-height: 1.15;
	margin-bottom: 1rem;
}

.benefits-heading > p {
	color: #526174;
	font-size: 1.08rem;
	line-height: 1.75;
	margin: 0;
}

.benefits-wrapper {
	display: grid;
	grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.35fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	margin-top: 4.5rem;
}

.benefits-image {
	position: relative;
	min-height: 590px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	border: 1px solid #dce8f8;
	border-radius: 32px;
	background: linear-gradient(145deg, #f7fbff 0%, #eaf3ff 100%);
	box-shadow: 0 28px 70px rgba(14, 27, 44, 0.1);
}

.benefits-image img {
	width: 100%;
	max-width: 390px;
	max-height: 530px;
	object-fit: contain;
	border-radius: 22px;
}

.benefits-image-badge {
	position: absolute;
	left: 50%;
	bottom: 1.35rem;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: max-content;
	max-width: calc(100% - 2rem);
	padding: 0.8rem 1rem;
	border: 1px solid rgba(26, 115, 232, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 12px 30px rgba(14, 27, 44, 0.12);
	color: var(--ink);
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
}

.benefits-image-badge i {
	color: var(--primary-color);
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	counter-reset: benefit;
}

.benefit-item {
	position: relative;
	padding: 1.6rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 35px rgba(14, 27, 44, 0.06);
	counter-increment: benefit;
}

.benefit-item::after {
	content: '0' counter(benefit);
	position: absolute;
	top: 1rem;
	right: 1.15rem;
	color: #b7c5d8;
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.benefit-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px rgba(14, 27, 44, 0.12);
	border-color: var(--primary-color);
}

.benefit-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.benefit-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--primary-color) 12%, white);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.benefit-icon i {
	font-size: 1.3rem;
}

.benefit-divider {
	display: none;
}

.benefit-item h3 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--dark-text);
	margin: 0;
}

.benefit-item p {
	color: var(--ink);
	font-size: 0.95rem;
	margin: 0;
	line-height: 1.6;
}

/* ===== CTA Section ===== */
.cta-section {
	position: relative;
	overflow: hidden;
	padding: 70px 0;
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	color: #fff;
	text-align: center;
}

.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;
}

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

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-primary {
    background-color: #E63946; /* Dinamik ve dikkat çekici bir kırmızı */
    color: #ffffff;
    border: 2px solid #E63946;
}

.btn-feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
    color: #ffffff;
}

/* Renkli Butonlar */
.btn-servis {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(39, 84, 197, 0.35);
}

.btn-tur {
    background-color: var(--accent-amber);
    border-color: var(--accent-amber);
    box-shadow: 0 4px 14px rgba(251, 139, 36, 0.35);
}

.btn-transfer {
    background-color: var(--success);
    border-color: var(--success);
    box-shadow: 0 4px 14px rgba(24, 169, 153, 0.35);
}

.btn-filo {
    background-color: #E63946;
    border-color: #E63946;
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}

.btn-feature:hover {
    color: #ffffff;
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background-color: #D62839; /* Üzerine gelindiğinde hafifçe koyulaşan kırmızı */
    border-color: #D62839;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 40, 57, 0.45);
    color: #ffffff;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(214, 40, 57, 0.3);
}

.hero .btn-hero-intro {
    background-color: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.38);
}

.hero .btn-hero-intro:hover {
    background-color: #6d28d9;
    border-color: #6d28d9;
    box-shadow: 0 6px 20px rgba(109, 40, 217, 0.45);
}

.hero .btn-hero-servis {
    background-color: #3f66c5;
    border-color: #3f66c5;
    box-shadow: 0 4px 14px rgba(63, 102, 197, 0.38);
}

.hero .btn-hero-servis:hover {
    background-color: #3154aa;
    border-color: #3154aa;
    box-shadow: 0 6px 20px rgba(49, 84, 170, 0.45);
}

.hero .btn-hero-tur {
    background-color: #b87a12;
    border-color: #b87a12;
    box-shadow: 0 4px 14px rgba(184, 122, 18, 0.38);
}

.hero .btn-hero-tur:hover {
    background-color: #96630e;
    border-color: #96630e;
    box-shadow: 0 6px 20px rgba(150, 99, 14, 0.45);
}

.hero .btn-hero-transfer {
    background-color: #3f9271;
    border-color: #3f9271;
    box-shadow: 0 4px 14px rgba(63, 146, 113, 0.38);
}

.hero .btn-hero-transfer:hover {
    background-color: #32765b;
    border-color: #32765b;
    box-shadow: 0 6px 20px rgba(50, 118, 91, 0.45);
}

.hero .btn-hero-filo {
    background-color: #bf5b57;
    border-color: #bf5b57;
    box-shadow: 0 4px 14px rgba(191, 91, 87, 0.38);
}

.hero .btn-hero-filo:hover {
    background-color: #a94744;
    border-color: #a94744;
    box-shadow: 0 6px 20px rgba(169, 71, 68, 0.45);
}

.btn-ghost-white {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.btn-ghost-white:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-ghost-white:active {
    transform: translateY(0);
}

.hero .btn-ghost-white {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(14, 27, 44, 0.32);
    color: var(--ink);
}

.hero .btn-ghost-white:hover {
    background: #ffffff;
    border-color: var(--ink);
    color: var(--ink);
}

.cta-section .btn-primary {
	background: #fff;
	color: var(--primary-color);
}

.cta-section .btn-primary:hover {
	background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
	.hero {
		min-height: 0;
		height: auto;
	}

	.myHeroSwiper {
		height: auto;
		min-height: 0;
	}

	.myHeroSwiper .swiper-slide {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		min-height: 0;
	}

	.myHeroSwiper .swiper-button-next,
	.myHeroSwiper .swiper-button-prev {
		display: none;
	}

	.hero .container {
		padding: 0 16px;
	}

	.hero-content {
		max-width: 100%;
		text-align: center;
		padding-top: 0;
	}

	.hero-eyebrow {
		justify-content: center;
	}

	.hero-content > p {
		font-size: 1rem;
		max-width: 100%;
		margin: 0 auto 1.25rem;
	}

	.hero-buttons {
		flex-direction: column;
		margin-bottom: 0;
	}

	.hero-buttons a,
.hero-buttons button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.hero-metrics {
		display: none;
	}

	.myHeroSwiper .swiper-slide::after {
		display: none;
	}

	.myHeroSwiper .swiper-slide img {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		flex: 0 0 auto;
		width: 100%;
		height: clamp(245px, 38svh, 340px);
		margin-top: 82px;
		object-fit: contain;
		object-position: center;
		transform: none;
	}

	.myHeroSwiper .swiper-pagination {
		display: none;
	}

	.hero-scroll-cue {
		display: none;
	}

	.route-card-wrap {
		display: none;
	}

	.route-card {
		padding: 1.1rem 1rem;
		border-radius: 16px;
	}

	.route-card-stops {
		flex-direction: column;
		gap: 1.25rem;
	}

	.route-card-stops::before {
		display: none;
	}

	.features {
		padding: 36px 0 32px;
	}

	.feature-sidebar {
		display: none; /* Mobilde yan menüyü gizle */
	}

	.stacked-features-wrapper {
		gap: 0;
	}

	.stacked-feature {
		padding: 1.25rem 0;
	}

	.stacked-feature .feature-container {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
		width: calc(100% - 2rem);
		margin-right: auto;
		margin-left: auto;
		background: #ffffff;
		border-radius: 18px;
		padding: 0.9rem 0.9rem 1.6rem;
		box-shadow: 0 12px 30px -18px rgba(14, 27, 44, 0.18);
	}

	.feature-text {
		order: 2;
		padding: 0 0.1rem 0.25rem;
	}

	.feature-text .btn-feature {
		margin-top: 0.35rem;
		margin-bottom: 1.25rem;
	}

	.feature-image,
	.feature-image2 {
		order: 1;
	}

	.feature-image img,
	.feature-image2 img {
		width: 100%;
		max-width: 100%;
		border-radius: 14px;
	}

	.feature-text h3 {
		font-size: 1.35rem;
		margin-bottom: 0.8rem;
	}

	.feature-text p {
		font-size: 0.95rem;
		line-height: 1.6;
	}

	.how-it-works {
		padding: 60px 0;
	}

	.steps-track {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.step-line {
		display: none;
	}

	.benefits {
		padding: 72px 0 60px;
		background: #f5f7fa;
		color: var(--ink);
	}

	.benefits::before {
		width: 420px;
		height: 420px;
		right: -220px;
		top: -245px;
	}

	.benefits .eyebrow,
	.benefits h2 {
		color: var(--ink);
	}

	.benefits .eyebrow {
		justify-content: center;
		color: var(--primary-color);
	}

	.benefits-heading > p {
		font-size: 1.05rem;
		line-height: 1.7;
		padding: 0 0.25rem;
	}

	.benefits-wrapper {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-top: 2.5rem;
	}

	.benefits-image {
		display: flex;
		min-height: 0;
		padding: 1rem 1rem 4rem;
		border-radius: 24px;
		background: linear-gradient(145deg, #f7fbff 0%, #eaf3ff 100%);
		border: 1px solid #dce8f8;
		box-shadow: 0 18px 40px rgba(14, 27, 44, 0.1);
	}

	.benefits-image img {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		border-radius: 16px;
	}

	.benefits-image-badge {
		bottom: 1rem;
		font-size: 0.88rem;
		padding: 0.72rem 0.9rem;
	}

	.benefits-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.benefit-item {
		padding: 1.5rem;
		background: #ffffff;
		border-color: #e2e8f0;
		box-shadow: 0 12px 28px rgba(14, 27, 44, 0.08);
		border-radius: 16px;
	}

	.benefit-item h3 {
		color: var(--ink);
		font-size: 1.15rem;
	}

	.benefit-item p {
		color: #273548;
		font-size: 1rem;
		line-height: 1.65;
	}

	.benefit-header {
		gap: 0.85rem;
		margin-bottom: 0.9rem;
	}

	.benefit-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
	}

	.benefit-divider {
		display: none;
	}

	.cta-section {
		padding: 42px 0;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 480px) {
	.hero .container {
		padding-top: 0;
	}

	.hero-content h1 {
		font-size: 1.45rem;
		line-height: 1.16;
	}

	.benefits h2 {
		font-size: 1.85rem;
		line-height: 1.2;
	}

	.benefits .section-subtitle {
		color: #526174;
	}

	.myHeroSwiper .hero-slide-general .hero-content > p {
		display: -webkit-box;
		line-clamp: 3;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.benefit-item {
		padding: 1.4rem;
	}

	.benefit-header {
		gap: 0.85rem;
		margin-bottom: 0.85rem;
	}

	.benefit-icon {
		width: 46px;
		height: 46px;
		border-radius: 12px;
	}

	.route-stop-label {
		font-size: 0.92rem;
	}

	.route-stop small {
		font-size: 0.75rem;
	}

	.features .container > h2,
	.benefits h2,
	.cta-section h2 {
		text-wrap: balance;
	}

	.cta-section p {
		font-size: 0.98rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.live-dot { animation: none; }
	.feature-card:hover,
	.benefit-item:hover,
	.step:hover,
	.btn-ghost-white:hover {
		transform: none;
	}
}

/* ===== Scroll To Top Button ===== */
.scroll-to-top {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: #fff;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	box-shadow: 0 8px 20px rgba(14, 27, 44, 0.25);
	opacity: 0;
	transform: translateY(20px);
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-to-top.visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* Ana sayfa ürün seçimi */
body.signup-picker-open { overflow: hidden; }
.signup-picker { width: min(760px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; padding: 30px; border: 0; border-radius: 24px; background: #fff; color: #0e1b2c; box-shadow: 0 24px 80px #07162955; }
.signup-picker::backdrop { background: #071629b8; backdrop-filter: blur(5px); }
.signup-picker-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.signup-picker-kicker { color: #53647a; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.signup-picker h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; margin: 8px 0 12px; }
.signup-picker > p { color: #596779; font-size: .95rem; margin-bottom: 24px; }
.signup-picker-close { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eef2f7; color: #20344c; font-size: 26px; line-height: 1; cursor: pointer; }
.signup-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.signup-choice { display: flex; flex-direction: column; padding: 22px; border: 1px solid #dce3ed; border-radius: 16px; color: #0e1b2c; text-decoration: none; }
.signup-choice > i { color: var(--choice-color); font-size: 24px; margin-bottom: 18px; }
.signup-choice h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.signup-choice p { font-size: .85rem; color: #596779; margin-bottom: 22px; }
.signup-choice > span { color: var(--choice-color); font-size: .88rem; font-weight: 700; margin-top: auto; }
.signup-choice b { float: right; }
.signup-choice:hover { border-color: var(--choice-color); background: #f8fafc; color: #0e1b2c; }
.signup-choice:focus-visible, .signup-picker-close:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }
button.btn-hero-intro { appearance: none; line-height: inherit; }
@media (max-width: 540px) { .signup-picker { padding: 22px; } .signup-picker-grid { grid-template-columns: 1fr; gap: 12px; } .signup-choice { padding: 18px; } .signup-choice > i { margin-bottom: 12px; } .signup-choice p { margin-bottom: 14px; } }