/* ----- Tüm Dolmuş Hatlarının css */
       	.page-hero {
       		position: relative;
       		background-size: cover;
       		background-position: center;
       		background-repeat: no-repeat;
       		display: flex;
       		align-items: flex-end;
       		justify-content: flex-start;
       		text-align: left;
       		color: white;
       		font-family: 'Poppins', sans-serif;
            padding-bottom: 4rem;
            min-height: 480px;
       	}

       	.page-hero-overlay {
       		position: absolute;
       		top: 0;
       		left: 0;
       		width: 100%;
       		height: 100%;
       		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
       		z-index: 1;
       	}

       	.page-hero-content {
       		position: relative;
       		z-index: 2;
            padding: 0 6%;
            width: 100%;
       	}

       	.page-hero-title {
       		font-size: clamp(1.3rem, 3vw, 2.2rem);
       		font-weight: 600;
       		text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
       		margin-bottom: 15px;
       		line-height: 1.2;
       	}

       	.breadcrumbs {
       		display: flex;
       		align-items: center;
       		justify-content: flex-start;
       		gap: 10px;
       		font-size: 0.9rem;
       		font-weight: 600;
       		opacity: 0.9;
       	}

       	.breadcrumbs a:hover {
       		text-decoration: underline;
       	}

       	.weather-card {
       		background: linear-gradient(135deg, #444, #1e293b);
       		color: white;
       		padding: 20px;
       		border-radius: 20px;
       		display: flex;
       		justify-content: space-between;
       		align-items: center;
       		margin-bottom: 15px;
       		text-transform: capitalize;
       	}

       	.temp {
       		font-size: 28px;
       		font-weight: 600;
       		color: #fbbf24;
       	}

       	.direction-grid {
       		display: grid;
       		grid-template-columns: 1fr 1fr;
       		gap: 10px;
       		margin-bottom: 20px;
       	}

       	.dir-btn {
       		background: white;
       		border: 0;
       		padding: 18px 5px;
       		border-radius: 14px;
       		font-weight: 600;
       		font-size: 14px;
       		cursor: pointer;
       		text-align: center;
       		color: #1e293b;
       		box-shadow: 0 0 6px #aaa;
       		transition: 0.3s;
       	}

       	.dir-btn.active {
       		background: #1e90ff;
       		color: #ffffff;
               box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
       	}

       	.next-bus-focus {
       		background: #0f172a;
       		color: white;
       		padding: 16px;
       		border-radius: 16px;
       		text-align: center;
       		border-bottom: 5px solid #fbbf24;
       		margin-bottom: 15px;
       	}

       	.focus-time {
       		font-size: 56px;
       		font-weight: 600;
       		color: #ffffff;
       		margin: 5px 0;
       		line-height: 1;
       		text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
       	}

       	.info-list {
       		display: block;
       		gap: 12px;
       		border-top: 1px solid rgba(255, 255, 255, 0.1);
       		padding-top: 20px;
       		margin-top: 20px;
       		text-align: center;
       	}

       	.info-row {
       		display: block;
       		font-size: 14px;
       		color: #cbd5e1;
       		margin: 8px 0;
       	}

       	.info-row b {
       		font-size: 16px;
       		color: #fff;
       	}

       	/* SEÇİM VE FİYATLAR */
       	.yon_sec {
       		text-align: center;
       		padding: 10px 0;
       		font-size: 16px;
       		font-weight: 600;
       	}

       	.main-card {
       		background: white;
       		padding: 15px;
       		border-radius: 20px;
       		border: 1px solid #e2e8f0;
       		margin-bottom: 15px;
       	}

       	select {
       		width: 100%;
       		padding: 12px;
       		border-radius: 12px;
       		border: 2px solid #f1f5f9;
       		font-size: 14px;
       		font-weight: 600;
       		margin-bottom: 8px;
       		background: #fff;
       		color: #1e293b;
       	}

       	.price-grid {
       		display: grid;
       		grid-template-columns: repeat(4, 1fr);
       		gap: 10px;
       		box-sizing: border-box;
       		margin-bottom: 20px;
       	}

       	.price-box {
       		background: #f8fafc;
       		padding: 10px;
       		border-radius: 12px;
       		box-sizing: border-box;
       	}

       	@media (max-width: 768px) {
       		.price-grid {
       			grid-template-columns: repeat(2, 1fr);
       		}

       	}

       	.price-label {
       		font-size: 8px;
       		font-weight: 600;
       		color: #64748b;
       		text-transform: uppercase;
       		margin-bottom: 3px;
       	}

       	.price-val {
       		font-size: 13px;
       		font-weight: 600;
       		color: #1e293b;
       	}

       	.table-title {
       		font-family: 'Poppins', sans-serif;
       		font-weight: 600;
       		font-size: 18px;
       		color: #1e293b;
       		margin: 25px 0 10px 5px;
       		letter-spacing: 1px;
       		text-transform: uppercase;
       		text-align: center;
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 10px;
       	}
           .table-title::before, .table-title::after {
               content: '';
               flex: 1;
               height: 1px;
               background: #e2e8f0;
           }

       	.bus-list {
       		display: grid;
       		gap: 10px;
       		grid-template-columns: repeat(8, 1fr);
       		margin-bottom: 20px;
       	}

       	.bus-item {
       		background: white;
       		padding: 12px 8px;
       		border-radius: 10px;
       		border: 1px solid #e2e8f0;
       		text-align: center;
       		font-size: 16px;
       		font-weight: 600;
       		color: #1e293b;
       		box-shadow: 0 2px 4px rgba(0,0,0,0.04);
       		transition: all 0.2s ease;
       	}

       	.bus-item:hover {
       		border-color: #3b82f6;
       		background: #f0f7ff;
       		transform: translateY(-2px);
       	}

       	.past-bus {
       		opacity: 0.5;
       		background: #f8fafc;
       		color: #94a3b8;
       		border-style: solid;
       		box-shadow: none;
       	}

       	/* Dolmuş ikonu pulse (nabız) efekti */
       	.bus-pulse-marker {
       		animation: busPulse 2s infinite;
       		transform-origin: center bottom;
       	}

       	.pulse-icon {
       		width: 16px;
       		height: 16px;
       		background-color: #22c55e;
       		border: 4px solid #fff;
       		border-radius: 50%;
       		display: inline-block;
       		animation: pulse 1s infinite;
       		vertical-align: middle;
       		margin-right: 4px;
       	}

       	@keyframes pulse {
       		0% {
       			box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
       		}

       		70% {
       			box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
       		}

       		100% {
       			box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
       		}
       	}

       	@keyframes busPulse {
       		0% {
       			transform: scale(1);
       			box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
       		}

       		50% {
       			transform: scale(1.05);
       		}

       		70% {
       			box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
       		}

       		100% {
       			transform: scale(1);
       			box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
       		}
       	}

       	#map {
       		font-family: 'Poppins', sans-serif;
       		height: 450px;
       		width: 100%;
       		border-radius: 18px;
       		margin-top: 10px;
       	}

        .leaflet-popup-content-wrapper, .leaflet-popup-content {
            font-family: 'Poppins', sans-serif !important;
        }
       	.map {
       		height: 600px;
       	}

       	.live-status-bar {
       		background: #0f172a;
       		color: white;
       		padding: 14px;
       		border-radius: 12px;
       		margin-top: 10px;
       		font-size: 14px;
       		text-align: center;
       		border-left: 4px solid #10b981;
               font-weight: 600;
       		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
       	}

       	/* İnaktif tablo genel görünüm */
       	.inactive-table {
       		opacity: 0.3;
       		pointer-events: none;
       		filter: grayscale(0.4);
       	}

       	/* Rozet */
       	.inactive-badge {
       		margin-left: 10px;
       		padding: 3px 8px;
       		font-size: 11px;
       		font-weight: 600;
       		border-radius: 999px;
       		background: rgba(220, 38, 38, 0.15);
       		color: #dc2626;
       		vertical-align: middle;
       		white-space: nowrap;
       		cursor: help;
       	}

       	/* İnaktif tablodaki seferler kendi opacity mantığını çalıştırmasın */
       	.inactive-table .bus-item,
       	.inactive-table .past-bus {
       		opacity: 1 !important;
       		text-decoration: none !important;
       		border: 1px dotted #555;
       	}

       	/* Opsiyonel: Hafif giriş animasyonu */
       	.bus-entry {
       		animation: busEntry 1s ease-out;
       	}

       	@keyframes busEntry {
       		0% {
       			opacity: 0;
       			transform: translateY(-30px) scale(0.6);
       		}

       		100% {
       			opacity: 1;
       			transform: translateY(0) scale(1);
       		}
       	}

       	/* Hareketli Rota Çizgisi Animasyonu */
       	.animated-route {
       		stroke-dasharray: 15, 15;
       		stroke-dashoffset: 0;
       		animation: dash 4s linear infinite;
       	}

       	@keyframes dash {
       		to {
       			stroke-dashoffset: -30;
       		}
       	}

       	.inactive-day {
       		opacity: 0.3;
       	}

       	/* 100 px ile 380 px arası */
       	@media only screen and (min-width: 100px) and (max-width: 380px) {
       		.price-grid {
       			grid-template-columns: 1fr 1fr;
       		}

       		.focus-time {
       			font-size: 40px;
       		}

       		.bus-list {
       			display: grid;
       			gap: 10px;
       			grid-template-columns: repeat(2, 1fr);
       			margin-bottom: 20px;
       		}

       		.bus-item {
       			font-size: 11px;
       		}

       		#map {
       			height: 300px;
       		}

       		.map {
       			height: 400px;
       		}
       	}

       	/* 380.1 px ile 580 px arası */
       	@media only screen and (min-width: 380.1px) and (max-width: 580px) {
       		.price-grid {
       			grid-template-columns: 2, 1fr;
       		}

       		.focus-time {
       			font-size: 42px;
       		}

       		.bus-list {
       			display: grid;
       			gap: 10px;
       			grid-template-columns: repeat(3, 1fr);
       			margin-bottom: 20px;
       		}

       		.bus-item {
       			font-size: 12px;
       		}

       		#map {
       			height: 360px;
       		}

       		.map {
       			height: 380px;
       		}
       	}

       	/* 580.1 px ile 780 px arası */
       	@media only screen and (min-width: 580.1px) and (max-width: 780px) {
       		.bus-list {
       			display: grid;
       			gap: 10px;
       			grid-template-columns: repeat(4, 1fr);
       			margin-bottom: 20px;
       		}

       		.bus-item {
       			font-size: 13px;
       		}

       		#map {
       			height: 360px;
       		}

       		.map {
       			height: 380px;
       		}
       	}

       	/* 780.1 px ile 1080 px arası */
       	@media only screen and (min-width: 780.1px) and (max-width: 1080px) {
       		.bus-list {
       			display: grid;
       			gap: 10px;
       			grid-template-columns: repeat(4, 1fr);
       			margin-bottom: 20px;
       		}

       		.bus-item {
       			font-size: 14px;
       		}

       		#map {
       			height: 380px;
       		}

       		.map {
       			height: 440px;
       		}
       	}

       	/* 1080.1 px ile 1280 px arası */
       	@media only screen and (min-width: 1080.1px) and (max-width: 1280px) {
       		.bus-item {
       			font-size: 15px;
       		}
       	}

       	/* 1280.1 px ile 1480 px arası */
       	@media only screen and (min-width: 1280.1px) and (max-width: 1480px) {
       		.bus-item {
       			font-size: 16px;
       		}
       	}

       	.custom-popup {
       		max-width: 240px;
       	}

       	/* Durak Arası Bilgileri (Info Grid) */
       	.info-grid {
       		display: grid;
       		grid-template-columns: 1fr 1fr 1fr;
       		gap: 10px;
       		margin-top: 10px;
       	}

       	.info-item {
       		background: #f8fafc;
       		padding: 15px 10px;
       		border-radius: 12px;
       		border: 1px solid #e2e8f0;
       		text-align: center;
       	}

       	.info-item .label {
       		font-size: 10px;
       		font-weight: 600;
       		color: #64748b;
       		text-transform: uppercase;
       		margin-bottom: 5px;
       	}

       	.info-item .value {
       		font-size: 18px;
       		font-weight: 600;
       		color: #2563eb;
       	}

       	/* Timeline (Durak Listesi) */
       	.timeline {
       		position: relative;
       		padding: 20px 0;
       		max-width: 450px;
       		margin: 0 auto;
       	}

       	.timeline::before {
       		content: '';
       		position: absolute;
       		left: 20px;
       		top: 30px;
       		bottom: 30px;
       		width: 2px;
       		background: #e2e8f0;
       	}

       	.timeline-item {
       		position: relative;
       		padding-left: 50px;
       		margin-bottom: 25px;
       		text-align: left;
       	}

       	.t-dot {
       		position: absolute;
       		left: 15px;
       		top: 5px;
       		width: 12px;
       		height: 12px;
       		border-radius: 50%;
       		background: #2563eb;
       		border: 3px solid #fff;
       		box-shadow: 0 0 0 2px #e2e8f0;
       		z-index: 2;
       	}

       	.timeline-item:first-child .t-dot,
       	.timeline-item:last-child .t-dot {
       		background: #10b981;
       	}

       	.t-info {
       		display: flex;
       		flex-direction: column;
       	}

       	.t-name {
       		font-size: 14px;
       		font-weight: 600;
       		color: #1e293b;
       		margin-bottom: 2px;
       	}

       	.t-time {
       		font-size: 12px;
       		color: #64748b;
       		font-weight: 600;
       	}

       	/* Sefer Saatleri Tablosu */
       	.schedule-table {
       		width: 100%;
       		border-collapse: collapse;
       		margin-top: 5px;
       	}

       	.schedule-table th {
       		background: #f8fafc;
       		text-align: left;
       		padding: 12px 15px;
       		color: #64748b;
       		font-size: 11px;
       		font-weight: 600;
       		text-transform: uppercase;
       		border-bottom: 2px solid #e2e8f0;
       	}

       	.schedule-table td {
       		padding: 12px 15px;
       		border-bottom: 1px solid #f1f5f9;
       		color: #1e293b;
       		font-size: 14px;
       	}

       	.schedule-table tr:hover {
       		background: #f8fafc;
       	}

       	.schedule-table b {
       		font-weight: 600;
       		color: #2563eb;
       	}

       	/* Weather Card Hiding if empty */
       	#weather-card:empty {
       		display: none;
       	}

       	#weather-card {
       		font-size: 13px;
       		font-weight: 600;
       		margin-bottom: 20px;
       	}

       	/* SEO Content Card Modernizations */
       	.seo-info-card {
       		transition: all 0.3s ease;
       		border: 1px solid #e2e8f0;
       	}

       	.seo-info-card:hover {
       		transform: translateY(-3px);
       		box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
       	}

       	.seo-text-content h1 {
       		font-size: 1.25rem;
       		font-weight: 600;
       		color: #0f172a;
       		margin-top: 5px;
       		margin-bottom: 12px;
       		line-height: 1.4;
       		border-bottom: 2px dashed #e2e8f0;
       		padding-bottom: 8px;
       	}

       	.seo-text-content h2,
       	.seo-text-content h3 {
       		font-size: 1.1rem;
       		font-weight: 600;
       		color: #1e293b;
       		margin-top: 15px;
       		margin-bottom: 10px;
       	}

       	.seo-text-content p {
       		margin-bottom: 15px;
       		text-align: justify;
       	}

       	.seo-text-content ul {
       		padding-left: 20px;
       		margin-bottom: 15px;
       	}

       	.seo-text-content li {
       		margin-bottom: 8px;
       		position: relative;
       		list-style-type: none;
       	}

       	.seo-text-content li::before {
       		content: "•";
       		color: #3b82f6;
       		font-weight: 600;
       		position: absolute;
       		left: -1em;
       	}

       	/* Premium Pop-up Design */
       	.premium-popup .leaflet-popup-content-wrapper {
       		background: rgba(255, 255, 255, 0.95);
       		backdrop-filter: blur(10px);
       		border-radius: 16px;
       		padding: 0;
       		overflow: hidden;
       		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
       		border: 1px solid rgba(255, 255, 255, 0.3);
       	}

       	.premium-popup .leaflet-popup-content {
       		margin: 0;
       		width: 220px !important;
       	}

       	.popup-header {
       		background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
       		color: white;
       		padding: 12px 15px;
       		font-weight: 600;
       		font-size: 13px;
       		display: flex;
       		justify-content: space-between;
       		align-items: center;
       	}

       	.popup-body {
       		padding: 15px;
       	}

       	.popup-row {
       		display: flex;
       		align-items: center;
       		gap: 10px;
       		margin-bottom: 10px;
       		font-size: 13px;
       		color: #475569;
       	}

       	.popup-row i {
       		font-size: 18px;
       		color: #3b82f6;
       	}

       	.popup-progress-container {
       		margin-top: 15px;
       	}

       	.popup-progress-label {
       		display: flex;
       		justify-content: space-between;
       		font-size: 11px;
       		font-weight: 600;
       		color: #64748b;
       		margin-bottom: 5px;
       	}

       	.popup-progress-bar {
       		height: 8px;
       		background: #f1f5f9;
       		border-radius: 10px;
       		overflow: hidden;
       		position: relative;
       	}

       	.popup-progress-fill {
       		height: 100%;
       		background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
       		transition: width 0.5s ease-out;
       	}

       	/* Live Badge with Pulse */
       	.live-badge {
       		display: inline-flex;
       		align-items: center;
       		gap: 5px;
       		background: rgba(16, 185, 129, 0.1);
       		color: #10b981;
       		padding: 2px 8px;
       		border-radius: 50px;
       		font-size: 10px;
       		font-weight: 600;
       		text-transform: uppercase;
       		letter-spacing: 0.5px;
       	}

       	.pulse-dot {
       		width: 6px;
       		height: 6px;
       		background: #10b981;
       		border-radius: 50%;
       		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
       		animation: simplePulse 2s infinite;
       	}

       	@keyframes simplePulse {
       		0% {
       			box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
       		}

       		70% {
       			box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
       		}

       		100% {
       			box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
       		}
       	}

       	.premium-focus-card {
       		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       		border: 1px solid rgba(255, 255, 255, 0.08);
       		border-radius: 24px;
       		padding: 25px;
       		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       		position: relative;
       		overflow: hidden;
       		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       	}

       	/* Border-top removed as requested */

       	@keyframes premiumPop {
       		0% {
       			opacity: 0;
       			transform: translateY(20px) scale(0.95);
       			filter: blur(5px);
       		}

       		100% {
       			opacity: 1;
       			transform: translateY(0) scale(1);
       			filter: blur(0);
       		}
       	}

       	/* Radar/Scanning Animation */
       	@keyframes scanning {
       		0% {
       			transform: translateY(-100%);
       			opacity: 0;
       		}

       		50% {
       			opacity: 0.5;
       		}

       		100% {
       			transform: translateY(100%);
       			opacity: 0;
       		}
       	}

       	.radar-scan {
       		position: absolute;
       		top: 0;
       		left: 0;
       		width: 100%;
       		height: 100%;
       		background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.1), transparent);
       		animation: scanning 2s linear infinite;
       		pointer-events: none;
       		z-index: 1;
       	}

       	.measuring-dot {
       		display: inline-block;
       		width: 4px;
       		height: 4px;
       		background: #10b981;
       		border-radius: 50%;
       		margin-left: 2px;
       		animation: dotPulse 1.5s infinite;
       	}

       	.measuring-dot:nth-child(2) {
       		animation-delay: 0.2s;
       	}

       	.measuring-dot:nth-child(3) {
       		animation-delay: 0.4s;
       	}

       	@keyframes dotPulse {

       		0%,
       		100% {
       			opacity: 0;
       			transform: scale(0.5);
       		}

       		50% {
       			opacity: 1;
       			transform: scale(1.2);
       		}
       	}

       	/* Popup Data Reveal Sequence */
       	@keyframes revealData {

       		0%,
       		82% {
       			opacity: 0;
       			transform: translateY(12px);
       			visibility: hidden;
       		}

       		100% {
       			opacity: 1;
       			transform: translateY(0);
       			visibility: visible;
       		}
       	}

       	@keyframes hideMeasuring {

       		0%,
       		75% {
       			opacity: 1;
       			visibility: visible;
       			transform: scale(1);
       		}

       		82%,
       		100% {
       			opacity: 0;
       			visibility: hidden;
       			transform: scale(0.95);
       		}
       	}

       	.popup-data-reveal {
       		animation: revealData 2.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
       	}

       	.popup-measuring-hide {
       		animation: hideMeasuring 2.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
       		position: absolute;
       		width: 100%;
       		z-index: 2;
       	}

       	.measuring-container {
       		position: relative;
       		height: auto;
min-height: 85px;
       		/* Updated to match JS change */
       		display: flex;
       		align-items: center;
       		justify-content: center;
       	}

       	/* Fluid Bus Movement */
       	.leaflet-marker-icon.bus-marker {
       		transition: transform 15s linear, opacity 0.5s ease;
       		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
       		will-change: transform, left, top;
       	}

       	.bus-appear {
       		animation: busAppear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       	}

       	@keyframes busAppear {
       		0% {
       			transform: scale(0) rotate(var(--bus-angle, 0deg));
       			opacity: 0;
       		}

       		100% {
       			transform: scale(1) rotate(var(--bus-angle, 0deg));
       			opacity: 1;
       		}
       	}

       	.premium-focus-card {
       		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       	}