/* Akasya Lojistik — Canlı Sevkiyat Takibi
   Tüm stiller .akasya-tracker-wrap altında kapsanmıştır.
   Kritik özellikler !important ile tema stillerini geçer.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------ */
/*  Kapsayıcı & değişkenler                                             */
/* ------------------------------------------------------------------ */
.akasya-tracker-wrap {
	--akt-brand:    #0f3a2a;
	--akt-b700:     #14513a;
	--akt-b600:     #1d6b4a;
	--akt-b500:     #2a8459;
	--akt-b400:     #3f9b5b;
	--akt-b300:     #7fc28a;
	--akt-b100:     #d8ecd8;
	--akt-b50:      #ecf5ec;
	--akt-bg:       #faf8f3;
	--akt-bg2:      #f3efe6;
	--akt-paper:    #ffffff;
	--akt-ink:      #0c1612;
	--akt-ink2:     #1d2a23;
	--akt-muted:    #5b6a62;
	--akt-muted2:   #8a9690;
	--akt-line:     #e3ddcf;
	--akt-line2:    #d4ccba;
	--akt-navy:     #06121f;
	--akt-navy5:    #15436e;
	--akt-shadow:   0 32px 80px -20px rgba(0,0,0,.42);
	--akt-font:     "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--akt-mono:     "JetBrains Mono", ui-monospace, monospace;

	font-family: var(--akt-font) !important;
	-webkit-font-smoothing: antialiased !important;
	box-sizing: border-box !important;
}
.akasya-tracker-wrap *, .akasya-tracker-wrap *::before, .akasya-tracker-wrap *::after {
	box-sizing: inherit !important;
}

/* ------------------------------------------------------------------ */
/*  Sekme navigasyonu (birden fazla sevkiyat)                           */
/* ------------------------------------------------------------------ */
.akt-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 18px !important;
}

.akt-tab {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 16px !important;
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.14) !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	font-family: var(--akt-mono) !important;
	font-size: 12px !important;
	color: rgba(255,255,255,.75) !important;
	letter-spacing: .04em !important;
	transition: background .15s, border-color .15s !important;
}
.akt-tab:hover {
	background: rgba(255,255,255,.1) !important;
	border-color: rgba(255,255,255,.25) !important;
}
.akt-tab.active {
	background: var(--akt-b700) !important;
	border-color: var(--akt-b700) !important;
	color: #ffffff !important;
}
.akt-tab-ref { font-weight: 600 !important; }
.akt-tab-badge {
	font-size: 10px !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,.12) !important;
	color: rgba(255,255,255,.8) !important;
}
.akt-tab.active .akt-tab-badge {
	background: rgba(255,255,255,.18) !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/*  Ana dashboard kartı                                                 */
/* ------------------------------------------------------------------ */
.akt-dash {
	display: grid !important;
	grid-template-columns: 360px 1fr !important;
	background: var(--akt-paper) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: var(--akt-shadow) !important;
	color: var(--akt-ink) !important;
	min-height: 540px !important;
}
@media (max-width: 900px) {
	.akt-dash { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------ */
/*  Sol panel: sevkiyat detayları                                       */
/* ------------------------------------------------------------------ */
.akt-sidebar {
	background: var(--akt-bg) !important;
	border-right: 1px solid var(--akt-line) !important;
	padding: 26px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

/* Header (ref no + badge) */
.akt-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid var(--akt-line) !important;
}
.akt-ref-label {
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	color: var(--akt-muted) !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	margin-bottom: 4px !important;
}
.akt-ref-code {
	font-family: var(--akt-mono) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: var(--akt-brand) !important;
	letter-spacing: .04em !important;
}

/* Durum badge */
.akt-badge {
	padding: 4px 10px !important;
	border-radius: 999px !important;
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
.akt-badge::before {
	content: "" !important;
	display: inline-block !important;
	width: 6px !important; height: 6px !important;
	border-radius: 50% !important;
	background: currentColor !important;
	margin-right: 6px !important;
	vertical-align: 1px !important;
}
.akt-badge.transit   { background: rgba(63,155,91,.14) !important;   color: var(--akt-b700) !important; }
.akt-badge.exit      { background: rgba(176,138,58,.14) !important;  color: #8a6818 !important; }
.akt-badge.loaded    { background: rgba(21,67,110,.14) !important;   color: var(--akt-navy5) !important; }
.akt-badge.arrival   { background: rgba(176,138,58,.14) !important;  color: #8a6818 !important; }
.akt-badge.delivered { background: rgba(15,58,42,.85) !important;    color: #fff !important; }

/* Güzergah */
.akt-route { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.akt-ep {
	display: grid !important;
	grid-template-columns: 20px 1fr !important;
	gap: 12px !important;
	align-items: flex-start !important;
}
.akt-marker {
	width: 14px !important; height: 14px !important;
	border-radius: 50% !important;
	border: 2px solid var(--akt-b700) !important;
	background: #fff !important;
	margin-top: 3px !important;
}
.akt-dest .akt-marker { background: var(--akt-b700) !important; }
.akt-k {
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	color: var(--akt-muted) !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	margin-bottom: 2px !important;
}
.akt-v  { font-weight: 600 !important; font-size: 14px !important; color: var(--akt-ink) !important; }
.akt-sub { font-size: 12px !important; color: var(--akt-muted) !important; margin-top: 2px !important; }
.akt-connector {
	margin-left: 8px !important;
	padding-left: 18px !important;
	border-left: 2px dashed var(--akt-b100) !important;
	padding-block: 2px !important;
	font-family: var(--akt-mono) !important;
	font-size: 11px !important;
	color: var(--akt-b700) !important;
	letter-spacing: .04em !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

/* Meta bilgi */
.akt-meta {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--akt-line) !important;
}
.akt-mi .akt-v   { font-size: 13px !important; }
.akt-mono { font-family: var(--akt-mono) !important; font-size: 12px !important; }

/* İlerleme çubuğu */
.akt-prog-bar {
	height: 5px !important;
	background: var(--akt-line) !important;
	border-radius: 99px !important;
	overflow: hidden !important;
}
.akt-prog-fill {
	height: 100% !important;
	background: linear-gradient(90deg, var(--akt-b700), var(--akt-b400)) !important;
	border-radius: 99px !important;
	transition: width 1s ease !important;
}
.akt-prog-label {
	font-family: var(--akt-mono) !important;
	font-size: 11px !important;
	color: var(--akt-b700) !important;
	letter-spacing: .05em !important;
	margin-top: -8px !important;
}

/* ETA kutusu */
.akt-eta {
	background: var(--akt-brand) !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 18px !important;
	margin-top: auto !important;
}
.akt-eta .akt-k { color: rgba(255,255,255,.55) !important; }
.akt-eta-v {
	font-family: var(--akt-font) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	margin-top: 6px !important;
	color: #fff !important;
}
.akt-eta-sub {
	font-size: 12px !important;
	color: rgba(255,255,255,.6) !important;
	margin-top: 4px !important;
	font-family: var(--akt-mono) !important;
}

/* ------------------------------------------------------------------ */
/*  Sağ alan: harita + timeline + log                                   */
/* ------------------------------------------------------------------ */
.akt-maparea {
	background: var(--akt-bg2) !important;
	background-image:
		linear-gradient(rgba(15,58,42,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,58,42,.05) 1px, transparent 1px) !important;
	background-size: 32px 32px !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Harita görünümü */
.akt-mapview {
	flex: 1 !important;
	position: relative !important;
	min-height: 300px !important;
}
.akt-mapview svg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important; height: 100% !important;
}

/* Overlay etiketler */
.akt-moverlay-l {
	position: absolute !important;
	top: 16px !important; left: 16px !important;
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	color: var(--akt-brand) !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	background: rgba(255,255,255,.88) !important;
	padding: 5px 10px !important;
	border-radius: 3px !important;
	z-index: 3 !important;
}
.akt-moverlay-r {
	position: absolute !important;
	top: 16px !important; right: 16px !important;
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	color: var(--akt-brand) !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	background: rgba(255,255,255,.88) !important;
	padding: 5px 10px !important;
	border-radius: 3px !important;
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	z-index: 3 !important;
}
.akt-dot-live {
	display: inline-block !important;
	width: 6px !important; height: 6px !important;
	border-radius: 50% !important;
	background: var(--akt-b400) !important;
	animation: aktPulse 1.4s infinite !important;
}
@keyframes aktPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .3; }
}

/* Rota pinleri */
.akt-pin {
	position: absolute !important;
	transform: translate(-50%, -100%) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 5px !important;
	z-index: 2 !important;
}
.akt-pin-lbl {
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	background: #fff !important;
	padding: 3px 9px !important;
	border-radius: 3px !important;
	border: 1px solid var(--akt-line) !important;
	white-space: nowrap !important;
	font-weight: 600 !important;
	color: var(--akt-brand) !important;
	box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
.akt-pin-dot {
	display: block !important;
	width: 14px !important; height: 14px !important;
	border-radius: 50% !important;
	background: var(--akt-brand) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 0 0 1px var(--akt-brand), 0 4px 12px rgba(0,0,0,.2) !important;
}
.akt-pin--dest .akt-pin-dot {
	background: var(--akt-b400) !important;
	box-shadow: 0 0 0 1px var(--akt-b400), 0 4px 12px rgba(0,0,0,.2) !important;
}

/* Araç ikonu — yuvarlak, ortalanmış, %10 büyük */
.akt-vehicle {
	position: absolute !important;
	transform: translate(-50%, -50%) !important;
	background: #fff !important;
	border: 2.5px solid var(--akt-b700) !important;
	border-radius: 50% !important;
	width: 42px !important;   /* %10 büyük: orijinal ~38px */
	height: 42px !important;
	padding: 0 !important;    /* boyut SVG kuralıyla kontrol ediliyor */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--akt-b700) !important;
	box-shadow: 0 8px 24px rgba(15,58,42,.28) !important;
	z-index: 4 !important;
	transition: left 1.2s ease, top 1.2s ease !important;
}
.akt-vehicle::after {
	content: "" !important;
	position: absolute !important;
	inset: -7px !important;
	border-radius: 50% !important;
	border: 2px solid var(--akt-b400) !important;
	opacity: 0 !important;
	animation: aktVehiclePulse 2s infinite !important;
}
@keyframes aktVehiclePulse {
	0%   { transform: scale(1); opacity: .55; }
	100% { transform: scale(1.7); opacity: 0; }
}
.akt-vehicle svg {
	position: absolute !important;   /* flex'e bağımlılığı kaldır, geometrik olarak kilitle */
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 22px !important;          /* tema svg{width:100%} kuralını ezer */
	height: 22px !important;
	pointer-events: none !important;
}

/* ------------------------------------------------------------------ */
/*  Timeline (5 adım)                                                   */
/* ------------------------------------------------------------------ */
.akt-timeline {
	border-top: 1px solid var(--akt-line) !important;
	padding: 22px 26px !important;
	background: #fff !important;
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 0 !important;
	position: relative !important;
}
@media (max-width: 700px) {
	.akt-timeline { grid-template-columns: 1fr !important; gap: 14px !important; }
	.akt-tl-step::before { display: none !important; }
}

.akt-tl-step { position: relative !important; padding-right: 14px !important; }
.akt-tl-num {
	font-family: var(--akt-mono) !important;
	font-size: 10px !important;
	line-height: 1 !important;       /* sabit yükseklik: 10px — dot pozisyonunu öngörülebilir yapar */
	color: var(--akt-muted) !important;
	letter-spacing: .08em !important;
	margin-bottom: 8px !important;
}
.akt-tl-dot {
	width: 14px !important; height: 14px !important;
	border-radius: 50% !important;
	background: var(--akt-line) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 0 0 1px var(--akt-line) !important;
	margin-bottom: 10px !important;
	position: relative !important;
	z-index: 2 !important;
}
.akt-tl-lab { font-weight: 600 !important; font-size: 12px !important; margin-bottom: 4px !important; color: var(--akt-muted2) !important; }
.akt-tl-ts  { font-family: var(--akt-mono) !important; font-size: 10px !important; color: var(--akt-muted) !important; }

.akt-tl-step[data-state="done"]   .akt-tl-dot { background: var(--akt-b700) !important; box-shadow: 0 0 0 1px var(--akt-b700) !important; }
.akt-tl-step[data-state="active"] .akt-tl-dot { background: var(--akt-b400) !important; box-shadow: 0 0 0 1px var(--akt-b400), 0 0 0 6px rgba(63,155,91,.18) !important; }
.akt-tl-step[data-state="done"]   .akt-tl-lab { color: var(--akt-ink) !important; }
.akt-tl-step[data-state="active"] .akt-tl-lab { color: var(--akt-b700) !important; }
.akt-tl-step[data-state="pending"] .akt-tl-ts { color: var(--akt-muted2) !important; }

/* Bağlantı çizgileri */
.akt-tl-step::before {
	content: "" !important;
	position: absolute !important;
	left: 7px !important;
	top: 24px !important;   /* dot merkezi: num(10px line-height:1) + margin(8px) + dot-yarıçap(7px) = 25px → çizgi merkezi 24+1=25px */
	width: calc(100% - 7px) !important;
	height: 2px !important;
	background: var(--akt-line) !important;
	z-index: 1 !important;
}
.akt-tl-step:last-child::before { display: none !important; }
.akt-tl-step[data-state="done"]::before   { background: var(--akt-b700) !important; }
.akt-tl-step[data-state="active"]::before { background: linear-gradient(to right, var(--akt-b400) 0%, var(--akt-line) 50%) !important; }

/* ------------------------------------------------------------------ */
/*  Olay günlüğü                                                        */
/* ------------------------------------------------------------------ */
.akt-log { padding: 0 26px 24px !important; background: #fff !important; }
.akt-log-head {
	font-family: var(--akt-mono) !important;
	font-size: 11px !important;
	color: var(--akt-muted) !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 14px 0 !important;
	border-top: 1px solid var(--akt-line) !important;
	display: flex !important;
	justify-content: space-between !important;
}
.akt-log-empty { color: var(--akt-muted2) !important; font-size: 13px !important; padding: 8px 0 !important; }
.akt-log-row {
	display: grid !important;
	grid-template-columns: 110px 1fr auto !important;
	gap: 12px !important;
	padding: 7px 0 !important;
	font-size: 13px !important;
	border-bottom: 1px solid var(--akt-line) !important;
	align-items: baseline !important;
}
.akt-log-row:last-child { border-bottom: none !important; }
.akt-log-ts  { font-family: var(--akt-mono) !important; font-size: 11px !important; color: var(--akt-muted) !important; letter-spacing: .03em !important; white-space: nowrap !important; }
.akt-log-ev  { color: var(--akt-ink2) !important; }
.akt-log-loc { font-family: var(--akt-mono) !important; font-size: 11px !important; color: var(--akt-b700) !important; letter-spacing: .03em !important; text-align: right !important; white-space: nowrap !important; }

/* ------------------------------------------------------------------ */
/*  Boş durum                                                           */
/* ------------------------------------------------------------------ */
.akt-empty {
	background: rgba(255,255,255,.06) !important;
	border: 1px dashed rgba(255,255,255,.2) !important;
	border-radius: 8px !important;
	padding: 48px !important;
	text-align: center !important;
	color: rgba(255,255,255,.5) !important;
	font-family: var(--akt-mono) !important;
	font-size: 13px !important;
	letter-spacing: .06em !important;
}

/* ------------------------------------------------------------------ */
/*  Mobil uyumu                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.akt-meta { grid-template-columns: 1fr 1fr !important; }
	.akt-log-row {
		grid-template-columns: 28% 1fr !important;  /* ~%30 tarih / ~%70 açıklama */
		align-items: flex-start !important;
	}
	.akt-log-ts {
		font-size: 9px !important;
		white-space: normal !important;   /* iki satıra bölünsün: "26 May" + "06:43" */
		line-height: 1.4 !important;
	}
	.akt-log-loc { display: none !important; }
	.akt-moverlay-r .akt-dot-live { display: inline-block !important; }
}
@media (max-width: 480px) {
	.akt-tabs { gap: 6px !important; }
	.akt-tab  { padding: 6px 12px !important; font-size: 11px !important; }
	.akt-sidebar, .akt-maparea { padding: 20px !important; }
	.akt-eta-v { font-size: 22px !important; }
}