/* Uzayspor Kargo Takip — renkler uzayspor.com style.css ile aynı */
:root {
	--us-dark: #070D15;
	--us-navy: #020F22;
	--us-yellow: #FFAD00;
	--us-yellow-hover: #EAA005;
	--us-green: #00B55E;
	--us-green-hover: #00DC72;
	--us-orange: #FF8515;
	--us-red: #FA4B00;
	--us-bg: #F5F8FA;
	--us-line: #DCE2E5;
	--us-line-2: #CBD5E4;
	--us-muted: #576375;
	--us-white: #FFFFFF;
	--radius: 16px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
	font-family: "Manrope", sans-serif;
	background: var(--us-bg);
	color: var(--us-dark);
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--us-dark); }
a:hover { color: var(--us-yellow-hover); }

[hidden] { display: none !important; }

/* ---------- Header ---------- */
.kt-header {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 64px;
	padding: 0 40px;
	background: var(--us-white);
	border-bottom: 1px solid var(--us-line);
}
.kt-logo img { width: 150px; display: block; }
.kt-header-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--us-muted);
	padding-left: 16px;
	border-left: 1px solid var(--us-line);
}
.kt-header-tel {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
}

/* ---------- Hero ---------- */
.kt-hero {
	background: var(--us-dark);
	color: var(--us-white);
	padding: 48px 0 88px;
	position: relative;
	overflow: hidden;
}
.kt-hero::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -160px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	border: 60px solid var(--us-yellow);
	opacity: .08;
	pointer-events: none;
}
.kt-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--us-yellow);
	margin-bottom: 10px;
}
.kt-hero h1 {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 8px;
}
.kt-hero-sub { color: var(--us-line-2); font-size: 16px; margin: 0; }
.kt-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--us-line-2);
}
.kt-hero-meta b { color: var(--us-white); font-weight: 700; }

.kt-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 40px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255, 173, 0, .15);
	color: var(--us-yellow);
	vertical-align: middle;
}
.kt-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kt-badge.is-done { background: rgba(0, 181, 94, .15); color: var(--us-green-hover); }
.kt-badge.is-wait { background: rgba(203, 213, 228, .15); color: var(--us-line-2); }

.kt-search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin-top: 28px;
	padding: 6px;
	background: var(--us-white);
	border-radius: 40px;
}
.kt-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 0 18px;
	font: 600 15px "Manrope", sans-serif;
	color: var(--us-dark);
	background: transparent;
}
.kt-search .kt-btn { width: auto; padding: 0 28px; margin: 0; }
.kt-hero.is-compact { padding: 32px 0 80px; }
.kt-hero.is-compact .kt-search { margin-top: 20px; max-width: 420px; }

/* ---------- Buttons (site: btn-type-1 / btn-type-2) ---------- */
.kt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 40px;
	font: 700 15px "Manrope", sans-serif;
	letter-spacing: .15px;
	color: var(--us-white) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: .3s all;
	outline: none !important;
}
.kt-btn-primary { background: var(--us-yellow); }
.kt-btn-primary:hover { background: var(--us-yellow-hover); }
.kt-btn-primary:active { background: var(--us-dark); }
.kt-btn-green { background: var(--us-green); }
.kt-btn-green:hover { background: var(--us-green-hover); }
.kt-btn-dark { background: var(--us-dark); }
.kt-btn-dark:hover { background: var(--us-navy); color: var(--us-yellow) !important; }
.kt-btn-orange { background: var(--us-orange); }
.kt-btn-orange:hover { background: #FF9E44; }
.kt-btn-block { width: 100%; }

/* ---------- Main ---------- */
.kt-main { flex: 1; margin-top: -56px; padding-bottom: 56px; position: relative; z-index: 1; }

.kt-card {
	background: var(--us-white);
	border-radius: var(--radius);
	border: 1px solid var(--us-line);
	padding: 24px;
	margin-bottom: 20px;
}
.kt-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.kt-card h3 { font-size: 17px; font-weight: 800; margin: 0; }
.kt-muted { color: var(--us-muted); font-size: 13px; font-weight: 500; }

/* ---------- States ---------- */
.kt-state { text-align: center; padding: 48px 24px; }
.kt-state h2 { font-size: 22px; font-weight: 800; margin: 16px 0 8px; }
.kt-state p { color: var(--us-muted); max-width: 440px; margin: 0 auto 20px; }
.kt-state-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 173, 0, .14);
	color: var(--us-yellow-hover);
	font-size: 30px;
	font-weight: 800;
}
.kt-state-icon-warn { background: rgba(250, 75, 0, .1); color: var(--us-red); }
.kt-spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 4px solid var(--us-line);
	border-top-color: var(--us-yellow);
	animation: kt-spin .8s linear infinite;
}
#stateLoading { background: var(--us-white); border-radius: var(--radius); border: 1px solid var(--us-line); }
@keyframes kt-spin { to { transform: rotate(360deg); } }

.kt-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.kt-demo small { width: 100%; color: var(--us-muted); font-weight: 600; }
.kt-demo a {
	padding: 6px 14px;
	border-radius: 40px;
	border: 1px solid var(--us-line);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.kt-demo a:hover { border-color: var(--us-yellow); color: var(--us-dark); background: rgba(255, 173, 0, .08); }

/* ---------- Shipment tabs ---------- */
.kt-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	overflow-x: auto;
}
.kt-tab {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-radius: 40px;
	border: 1px solid var(--us-line);
	background: var(--us-white);
	font: 700 14px "Manrope", sans-serif;
	color: var(--us-dark);
	cursor: pointer;
	transition: .2s all;
}
.kt-tab small { font-weight: 600; color: var(--us-muted); }
.kt-tab.is-active { background: var(--us-yellow); color: var(--us-dark); border-color: var(--us-yellow); }
.kt-tab.is-active small { color: var(--us-dark); }

/* ---------- Stepper ---------- */
.kt-stepper { display: flex; position: relative; }
.kt-step {
	flex: 1;
	text-align: center;
	position: relative;
	color: var(--us-muted);
}
.kt-step::before {
	content: "";
	position: absolute;
	top: 22px;
	left: calc(-50% + 26px);
	right: calc(50% + 26px);
	height: 4px;
	border-radius: 4px;
	background: var(--us-line);
}
.kt-step:first-child::before { display: none; }
.kt-step-dot {
	width: 48px;
	height: 48px;
	margin: 0 auto 10px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--us-bg);
	border: 2px solid var(--us-line);
	color: var(--us-line-2);
	position: relative;
	z-index: 1;
	transition: .3s all;
}
.kt-step-dot svg { width: 22px; height: 22px; }
.kt-step-label { font-size: 13px; font-weight: 700; line-height: 1.3; }
.kt-step-date { display: block; font-size: 11px; font-weight: 500; margin-top: 2px; }

.kt-step.is-done { color: var(--us-dark); }
.kt-step.is-done::before { background: var(--us-green); }
.kt-step.is-done .kt-step-dot { background: var(--us-green); border-color: var(--us-green); color: var(--us-white); }
.kt-step.is-current { color: var(--us-dark); }
.kt-step.is-current::before { background: linear-gradient(90deg, var(--us-green), var(--us-yellow)); }
.kt-step.is-current .kt-step-dot {
	background: var(--us-yellow);
	border-color: var(--us-yellow);
	color: var(--us-white);
	box-shadow: 0 0 0 6px rgba(255, 173, 0, .18);
}
.kt-stepper.is-complete .kt-step.is-current .kt-step-dot {
	background: var(--us-green);
	border-color: var(--us-green);
	box-shadow: 0 0 0 6px rgba(0, 181, 94, .16);
}
.kt-stepper.is-complete .kt-step.is-current::before { background: var(--us-green); }

.kt-estimate {
	margin-top: 24px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--us-bg);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--us-muted);
}
.kt-estimate b { color: var(--us-dark); font-size: 15px; }
.kt-estimate svg { flex: none; color: var(--us-yellow-hover); }
.kt-estimate.is-done svg { color: var(--us-green); }
.kt-estimate.is-warn { background: rgba(250, 75, 0, .08); }
.kt-estimate.is-warn svg { color: var(--us-red); }
.kt-estimate-sub { display: block; font-size: 13px; margin-top: 2px; }
.kt-track-sub { display: block; font-size: 12px; font-weight: 500; color: var(--us-muted); margin-top: 2px; }

/* ---------- Timeline ---------- */
.kt-timeline { list-style: none; margin: 0; padding: 0; }
.kt-timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 0 28px;
	padding-bottom: 22px;
}
.kt-timeline li:last-child { padding-bottom: 0; }
.kt-timeline li::before {
	content: "";
	position: absolute;
	left: 123px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--us-white);
	border: 3px solid var(--us-line-2);
	z-index: 1;
}
.kt-timeline li::after {
	content: "";
	position: absolute;
	left: 128px;
	top: 18px;
	bottom: -6px;
	width: 2px;
	background: var(--us-line);
}
.kt-timeline li:last-child::after { display: none; }
.kt-timeline li:first-child::before { border-color: var(--us-yellow); background: var(--us-yellow); box-shadow: 0 0 0 4px rgba(255, 173, 0, .2); }
.kt-timeline.is-complete li:first-child::before { border-color: var(--us-green); background: var(--us-green); box-shadow: 0 0 0 4px rgba(0, 181, 94, .18); }
.kt-tl-date { text-align: right; font-size: 13px; font-weight: 700; line-height: 1.35; }
.kt-tl-date small { display: block; color: var(--us-muted); font-weight: 500; }
.kt-tl-body { padding-left: 4px; }
.kt-tl-body strong { display: block; font-size: 15px; font-weight: 700; }
.kt-tl-body span { font-size: 13px; color: var(--us-muted); }
.kt-timeline li:not(:first-child) .kt-tl-body strong { font-weight: 600; color: #2a3340; }
.kt-tl-empty { color: var(--us-muted); font-size: 14px; display: block !important; text-align: center; padding: 12px 0; }
.kt-tl-empty::before, .kt-tl-empty::after { display: none; }

/* ---------- Carrier card ---------- */
.kt-carrier { border-top: 4px solid var(--carrier-color, var(--us-yellow)); }
.kt-carrier-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.kt-carrier-logo {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 16px;
	color: var(--us-white);
	background: var(--carrier-color, var(--us-dark));
	overflow: hidden;
}
.kt-carrier-logo img { max-width: 100%; max-height: 100%; }
.kt-carrier-name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.kt-carrier-name small { display: block; font-size: 13px; font-weight: 500; color: var(--us-muted); }
.kt-track-no {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 8px 12px 16px;
	border: 1px dashed var(--us-line-2);
	border-radius: 12px;
	margin-bottom: 14px;
}
.kt-track-no small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--us-muted); }
.kt-track-no b { font-size: 16px; font-weight: 800; letter-spacing: .04em; word-break: break-all; }
.kt-copy {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 0;
	background: var(--us-bg);
	color: var(--us-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .2s all;
}
.kt-copy:hover { background: var(--us-yellow); color: var(--us-white); }
.kt-carrier-note { font-size: 12px; color: var(--us-muted); text-align: center; margin: 10px 0 0; }
.kt-carrier-wait { font-size: 14px; color: var(--us-muted); margin: 0; }

/* ---------- Info list ---------- */
.kt-info { margin: 0; }
.kt-info div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--us-bg); font-size: 14px; }
.kt-info div:last-child { border-bottom: 0; padding-bottom: 0; }
.kt-info div:first-child { padding-top: 0; }
.kt-info dt { font-weight: 500; color: var(--us-muted); }
.kt-info dd { margin: 0; font-weight: 700; text-align: right; }

/* ---------- Items ---------- */
.kt-items { list-style: none; margin: 0; padding: 0; }
.kt-items li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--us-bg); }
.kt-items li:first-child { padding-top: 0; }
.kt-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.kt-item-img {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 12px;
	background: var(--us-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--us-line-2);
	overflow: hidden;
}
.kt-item-img img { width: 100%; height: 100%; object-fit: cover; }
.kt-item-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.kt-item-name small { display: block; font-size: 12px; font-weight: 500; color: var(--us-muted); margin-top: 2px; }

/* ---------- Help ---------- */
.kt-help { background: var(--us-dark); border-color: var(--us-dark); color: var(--us-white); }
.kt-help h3 { margin-bottom: 8px; }
.kt-help p { font-size: 14px; color: var(--us-line-2); margin-bottom: 16px; }
.kt-help .kt-btn { width: 100%; }

/* ---------- Footer ---------- */
.kt-footer { background: var(--us-dark); color: var(--us-muted); font-size: 13px; padding: 28px 0; }
.kt-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kt-footer-logo { height: 26px; }
.kt-footer a { margin-left: auto; color: var(--us-yellow); font-weight: 700; text-decoration: none; }
.kt-footer a:hover { color: var(--us-white); }

/* ---------- Toast ---------- */
.kt-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 20px);
	padding: 12px 20px;
	border-radius: 40px;
	background: var(--us-dark);
	color: var(--us-white);
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: .25s all;
	z-index: 10;
}
.kt-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.kt-header { padding: 0 16px; }
}
@media (max-width: 575px) {
	.container { padding-left: 16px; padding-right: 16px; }
	.kt-header { height: 56px; gap: 10px; }
	.kt-logo img { width: 112px; }
	.kt-header-label { font-size: 11px; padding-left: 10px; }
	.kt-header-tel span { display: none; }
	.kt-hero { padding: 32px 0 76px; }
	.kt-hero h1 { font-size: 26px; }
	.kt-search .kt-btn { padding: 0 18px; font-size: 14px; }
	.kt-card { padding: 20px 16px; }
	.kt-step-dot { width: 38px; height: 38px; }
	.kt-step-dot svg { width: 18px; height: 18px; }
	.kt-step::before { top: 17px; left: calc(-50% + 21px); right: calc(50% + 21px); height: 3px; }
	.kt-step-label { font-size: 10px; }
	.kt-step-date { display: none; }
	.kt-timeline li { grid-template-columns: 1fr; padding-left: 28px; }
	.kt-timeline li::before { left: 0; }
	.kt-timeline li::after { left: 5px; }
	.kt-tl-date { text-align: left; order: 2; margin-top: 2px; font-weight: 600; }
	.kt-tl-date small { display: inline; margin-left: 6px; }
	.kt-tl-body { padding-left: 0; }
	.kt-footer a { margin-left: 0; }
}