@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Manrope:wght@500;700;800;900&display=swap');

.led-ekran-screen,
.led-ekran-screen * {
	box-sizing: border-box;
}

.led-ekran-screen {
	width: 320px;
	height: 800px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #111;
	color: #fff;
	font-family: 'Inter', system-ui, sans-serif;
	--ledk-top: #E10600;
	--ledk-price: #E10600;
}

/* ================= ÜST BANT (yüzen kart) ================= */
.ledk-top-card {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	z-index: 3;
	background: var(--ledk-top);
	border-radius: 16px;
	padding: 16px 18px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ledk-top-row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 13px;
}
.ledk-dt {
	font-size: 13.5px;
	font-weight: 600;
	color: #ffe1dc;
}
.ledk-weather {
	display: flex;
	align-items: center;
	gap: 7px;
}
.ledk-weather-icon {
	font-size: 22px;
	line-height: 1;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ================= ANİMASYONLU HAVA DURUMU İKONLARI ================= */
.ledk-wicon {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}
.ledk-wicon-sun-core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	background: #ffd23f;
	border-radius: 50%;
	animation: ledkSunPulse 2.4s ease-in-out infinite;
}
.ledk-wicon-sun-core.small {
	width: 9px;
	height: 9px;
	margin: -8px 0 0 -3px;
}
@keyframes ledkSunPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .55); }
	50% { box-shadow: 0 0 6px 4px rgba(255, 210, 63, .55); }
}
.ledk-wicon-cloud {
	position: absolute;
	left: 2px;
	top: 8px;
	width: 16px;
	height: 7px;
	background: #eef2f7;
	border-radius: 8px;
}
.ledk-wicon-cloud::before,
.ledk-wicon-cloud::after {
	content: '';
	position: absolute;
	background: #eef2f7;
	border-radius: 50%;
}
.ledk-wicon-cloud::before { width: 9px; height: 9px; left: 1px; top: -5px; }
.ledk-wicon-cloud::after { width: 7px; height: 7px; left: 8px; top: -4px; }
.ledk-wicon-bob {
	animation: ledkCloudBob 3s ease-in-out infinite;
}
@keyframes ledkCloudBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-2px); }
}
.ledk-wicon-drop {
	position: absolute;
	top: 15px;
	width: 2px;
	height: 5px;
	border-radius: 1px;
	background: #4fa3ff;
	opacity: 0;
	animation: ledkDropFall 1s linear infinite;
}
@keyframes ledkDropFall {
	0% { opacity: 0; transform: translateY(0); }
	20% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; transform: translateY(6px); }
}
.ledk-wicon-drop.d1 { left: 4px; animation-delay: 0s; }
.ledk-wicon-drop.d2 { left: 9px; animation-delay: .3s; }
.ledk-wicon-drop.d3 { left: 14px; animation-delay: .6s; }
.ledk-wicon-flake {
	position: absolute;
	top: 15px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	animation: ledkFlakeFall 2.2s linear infinite;
}
@keyframes ledkFlakeFall {
	0% { opacity: 0; transform: translate(0, 0); }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translate(3px, 7px); }
}
.ledk-wicon-flake.d1 { left: 3px; animation-delay: 0s; }
.ledk-wicon-flake.d2 { left: 9px; animation-delay: .7s; }
.ledk-wicon-flake.d3 { left: 14px; animation-delay: 1.4s; }
.ledk-wicon-snowflake {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #bfe3ff;
	animation: ledkSpin 6s linear infinite;
}
@keyframes ledkSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.ledk-weather-temp {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.ledk-top-row2 {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, .25);
	padding: 18px 4px 20px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	line-height: 1.3;
}
.ledk-top-row2.show {
	display: block;
}
.ledk-top-card.ledk-hidden,
.ledk-price-card.ledk-hidden,
.ledk-weather.ledk-hidden {
	display: none !important;
}

/* ================= KAMPANYA ALANI ================= */
.ledk-campaign-wrap {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
}
.ledk-campaign {
	width: 100%;
	height: 100%;
	position: relative;
}
.ledk-campaign img,
.ledk-campaign video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ledk-campaign-empty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #7d8494;
	padding: 20px;
	background: repeating-linear-gradient(135deg, #1c1f26, #1c1f26 12px, #262a33 12px, #262a33 24px);
}

/* ================= FİYAT KARTI (yüzen) ================= */
.ledk-price-card {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	background: var(--ledk-price);
	border-radius: 16px;
	padding: 20px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	overflow: hidden;
}
/* Işıltı (shimmer): kartın üzerinden periyodik olarak geçen yumuşak ışık şeridi. */
.ledk-price-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .32), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: ledkShimmer 5.5s ease-in-out infinite;
}
@keyframes ledkShimmer {
	0% { left: -60%; }
	20% { left: 130%; }
	100% { left: 130%; }
}
.ledk-price-label {
	display: block;
	font-size: 12px;
	letter-spacing: 2px;
	color: #ffd2cc;
	text-transform: uppercase;
	margin-bottom: 2px;
}
.ledk-price-value {
	/* KÖK SEBEP (bulundu): bu eleman bir <span>, yani varsayılan olarak display:inline.
	   CSS "transform" (scale/translateY) inline elemanlarda GÖRSEL OLARAK HİÇ ETKİ ETMEZ
	   (spesifikasyon gereği) — tarayıcı değeri hesaplasa/saklasa bile hiçbir zaman çizilmez.
	   Nabız/zıplama animasyonlarının "hiç çalışmıyor" görünmesinin gerçek sebebi buydu.
	   inline-block, transform'un normal şekilde uygulanmasını sağlar. */
	display: inline-block;
	font-size: var(--ledk-price-size, 44px);
	font-weight: 900;
	color: #fff;
	line-height: 1;
	/* Animasyon CSS @keyframes ile değil, JavaScript ile (frontend.js'teki
	   startPriceAnimation()) doğrudan inline stil olarak uygulanıyor — bazı cihazların
	   (kiosk oynatıcılar vb.) CSS animasyon/compositor desteği güvenilmez olabildiği için
	   bu yöntem, tarayıcının animasyon motoruna bağımlı olmadan her yerde çalışır. */
}
.ledk-price-updated {
	display: block;
	font-size: 10px;
	color: rgba(255, 255, 255, .6);
	margin-top: 4px;
}
.ledk-price-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.ledk-chev {
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	color: #22c55e;
	animation: ledkChevDrop 1.3s infinite;
}
.ledk-chev:nth-child(1) { animation-delay: 0s; }
.ledk-chev:nth-child(2) { animation-delay: .15s; }
.ledk-chev:nth-child(3) { animation-delay: .3s; }
@keyframes ledkChevDrop {
	0% { opacity: 0; transform: translateY(-10px); }
	35% { opacity: 1; transform: translateY(0); }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translateY(16px); }
}
/* ================= QR ROZETİ ================= */
.ledk-qr-badge {
	position: absolute;
	top: 90px;
	right: 12px;
	z-index: 2;
	background: #fff;
	padding: 5px;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ledk-qr-badge img {
	display: block;
	width: 64px;
	height: 64px;
}

/* ================= GERİ SAYIM ROZETİ ================= */
.ledk-countdown-badge {
	position: absolute;
	top: 90px;
	left: 12px;
	z-index: 2;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 20px;
}

/* ================= ACİL DUYURU ================= */
.ledk-emergency-overlay {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	background: var(--ledk-emergency, #E10600);
}
.ledk-emergency-overlay.show {
	display: flex;
}
.ledk-emergency-text {
	color: #fff;
	font-size: 30px;
	font-weight: 900;
	line-height: 1.3;
	animation: ledkBlink 1.4s ease-in-out infinite;
}

/* ================= MEVSİMSEL DEKORATİF KATMAN (kar / konfeti) ================= */
.ledk-seasonal-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
	display: none;
}
.ledk-seasonal-layer.show {
	display: block;
}
.ledk-particle {
	position: absolute;
	top: -20px;
	left: var(--x, 50%);
	opacity: 0;
	animation-name: ledkParticleFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.ledk-particle.ledk-snow {
	width: var(--size, 6px);
	height: var(--size, 6px);
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
}
.ledk-particle.ledk-confetti {
	width: 6px;
	height: 10px;
	background: var(--c, #E10600);
}
@keyframes ledkParticleFall {
	0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: .9; }
	100% { transform: translate(var(--drift, 20px), 830px) rotate(var(--spin, 180deg)); opacity: 0; }
}

/* Trafik ekranı aktifken üst/fiyat kartlarını ve mevsimsel katmanı gizle — trafik
   artık ayrı bir katman olarak üste binmiyor, normal akışta sıradaki "slayt" gibi
   gösteriliyor (bkz. .ledk-traffic-overlay). */
.led-ekran-screen.ledk-traffic-active .ledk-top-card,
.led-ekran-screen.ledk-traffic-active .ledk-price-card,
.led-ekran-screen.ledk-traffic-active .ledk-seasonal-layer,
.led-ekran-screen.ledk-traffic-active .ledk-campaign-wrap {
	display: none !important;
}

/* ================= TRAFİK EKRANI (kampanya döngüsünün bir parçası olarak, sırayla) ================= */
.ledk-traffic-overlay {
	flex: 1 1 auto;
	min-height: 0;
	display: none;
	flex-direction: column;
	background: #f4f1ea;
	font-family: 'Manrope', sans-serif;
	transition: background .6s ease;
}
.ledk-traffic-overlay.show {
	display: flex;
}
.ledk-traffic-overlay.night {
	background: #0d0d0d;
}
.ledk-traffic-overlay.night .ledk-traffic-info-strip {
	background: #161616;
	border-bottom-color: #262626;
}
.ledk-traffic-overlay.night .ledk-weather-temp {
	color: #f0f0f0;
}
.ledk-traffic-overlay.night .ledk-traffic-marquee {
	background: #000;
}

.ledk-traffic-header {
	background: var(--ledk-top);
	padding: 10px 12px 8px;
}
.ledk-traffic-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ledk-traffic-brand {
	display: flex;
	align-items: center;
	gap: 7px;
}
.ledk-traffic-logo-wrap {
	background: #fff;
	padding: 3px 6px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
}
.ledk-traffic-logo-wrap img {
	height: 13px;
	display: block;
}
.ledk-traffic-title {
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.ledk-traffic-live {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.ledk-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
	animation: ledkPulse 1.8s infinite;
}
@keyframes ledkPulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
	70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.ledk-traffic-map-wrap {
	position: relative;
	height: 110px;
	border-bottom: 3px solid var(--ledk-top);
}
#ledkTrafficMap {
	width: 100%;
	height: 100%;
	background: #e5e2d9;
}
/* Google Maps JS yüklenemezse frontend.js buraya sunucuda önbelleklenmiş sabit bir
   harita görseli (<img>) enjekte ediyor — o durumda da düzgün kaplasın. */
#ledkTrafficMap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .6s ease;
}
.ledk-traffic-overlay.night #ledkTrafficMap img {
	filter: brightness(.55) saturate(.8);
}
/* Canlı Google Haritası yüklendiğinde: kiosk ekranında kimse etkileşime girmeyeceği için
   Google'ın varsayılan arayüz kırıntılarını (info balonu kapatma ikonu, telif hakkı linki vb.) gizle. */
#ledkTrafficMap .gm-style-iw,
#ledkTrafficMap .gm-style-iw-tc,
#ledkTrafficMap .gm-ui-hover-effect,
#ledkTrafficMap .gmnoprint,
#ledkTrafficMap a[href^="https://maps.google.com"] {
	display: none !important;
}
#ledkTrafficMap .gm-style > div:first-child > div:last-child {
	font-size: 0 !important;
}
.ledk-traffic-map-label {
	position: absolute;
	top: 6px;
	left: 6px;
	background: rgba(26, 26, 26, .85);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 6px;
	z-index: 5;
}

.ledk-traffic-info-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-bottom: 1px solid #e5e0d5;
	padding: 10px 12px;
	transition: background .6s ease, border-color .6s ease;
}
.ledk-traffic-info-strip .ledk-weather-temp {
	color: #1a1a1a;
	font-size: 15px;
}
.ledk-traffic-price {
	background: var(--ledk-price);
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	padding: 8px 12px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.ledk-traffic-price .ledk-tag {
	font-size: 10px;
	font-weight: 700;
	background: rgba(255, 255, 255, .25);
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: .5px;
}
.ledk-traffic-price .ledk-price-arrow {
	flex-direction: row;
	gap: 0;
}
.ledk-traffic-price .ledk-chev {
	font-size: 16px;
}

.ledk-traffic-grid {
	flex: 1;
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	gap: 6px;
	padding: 8px;
	min-height: 0;
}
.ledk-traffic-card {
	border-radius: 12px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	gap: 8px;
	background: #e5e5e5;
}
.ledk-traffic-card .ledk-info {
	flex: 1 1 auto;
	min-width: 0;
}
.ledk-traffic-card .ledk-dest {
	min-width: 0;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ledk-traffic-card .ledk-km {
	font-size: 9px;
	font-weight: 600;
	margin-top: 2px;
	color: rgba(255, 255, 255, .75);
}
.ledk-traffic-card .ledk-time-block {
	flex: 0 0 auto;
	text-align: right;
	min-width: 60px;
}
.ledk-traffic-card .ledk-time {
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
	color: #fff;
}
.ledk-traffic-card .ledk-time span {
	font-size: 10px;
	font-weight: 700;
	opacity: .75;
	margin-left: 1px;
}
.ledk-traffic-card .ledk-status-label {
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-top: 2px;
	color: #fff;
}
.ledk-status-akici { background: #16a34a; }
.ledk-status-orta { background: #d97706; }
.ledk-status-yogun { background: #dc2626; }
.ledk-status-yukleniyor { background: #e5e5e5; }
.ledk-status-yukleniyor .ledk-dest,
.ledk-status-yukleniyor .ledk-time { color: #999; }
.ledk-status-yukleniyor .ledk-status-label { color: #aaa; }

.ledk-traffic-marquee {
	background: #1a1a1a;
	overflow: hidden;
	white-space: nowrap;
	padding: 6px 0;
}
.ledk-traffic-marquee-track {
	display: inline-block;
	animation: ledkScrollLeft 22s linear infinite;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}
.ledk-traffic-marquee-track span {
	margin-right: 40px;
}
.ledk-traffic-marquee-track .ledk-accent {
	color: #22c55e;
}
@keyframes ledkScrollLeft {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}