.jRatingAverage {
	background-color:#ee961b;
	position:relative;
	top:0;
	left:0;
	z-index:2;
	height:100%;
}

.jRatingColor {
	background-color:#ede31b;
	position:relative;
	top:0;
	left:0;
	z-index:2;
	height:100%;
}

.jStar {
	position:relative;
	left:0;
	z-index:3;
}

p.jRatingInfos {
	position:absolute;
	z-index:9999;
	background:transparent url('/images/bg_jRatingInfos.png') no-repeat;
	color:#FFF;
	display:none;
	width:91px;
	height:29px;	
	font-size:16px;
	text-align:center;
	padding-top:5px;
}

p.jRatingInfos span.maxRate {
	color:#c9c9c9;
	font-size:14px;
}/* Renkleri ve temel değerleri tanımlıyoruz */
:root {
	--rating-primary-color: #4caf50; /* Aktif puan rengi (yeşil) */
	--rating-secondary-color: #e0e0e0; /* Varsayılan puan rengi (açık gri) */
	--info-bg-color: rgba(33, 33, 33, 0.9); /* Bilgi kutusu arka plan rengi */
	--info-text-color: #f5f5f5; /* Bilgi kutusu yazı rengi */
	--hover-color: #ff9800; /* Hover sırasında yıldız rengi (turuncu) */
	--font-primary: 'Roboto', sans-serif; /* Modern yazı tipi */
	--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Gölgeler için ortak tanım */
}

/* Aktif puanı temsil eden çubuk */
.jRatingAverage {
	background-color: var(--rating-primary-color);
	position: relative;
	z-index: 2;
	height: 100%;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Daha akıcı bir geçiş efekti */
}

/* Varsayılan puanı temsil eden çubuk */
.jRatingColor {
	background-color: var(--rating-secondary-color);
	position: relative;
	z-index: 1;
	height: 100%;
	border-radius: 8px;
	transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Yıldızlar */
.jStar {
	position: relative;
	z-index: 3;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease-in-out;
	color: var(--rating-secondary-color);
	font-size: 24px; /* Daha büyük yıldızlar */
}

.jStar:hover {
	transform: scale(1.2); /* Yıldız büyüme efekti */
	color: var(--hover-color); /* Hover rengi */
}

/* Bilgi kutusu */
p.jRatingInfos {
	position: absolute;
	z-index: 9999;
	background: var(--info-bg-color);
	color: var(--info-text-color);
	display: none;
	width: 120px; /* Daha geniş kutu */
	height: 40px; /* Daha büyük yükseklik */
	font-size: 16px;
	font-family: var(--font-primary);
	text-align: center;
	line-height: 40px; /* Tam ortalı */
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	opacity: 0; /* Geçiş efekti için başlangıç */
	transition: opacity 0.3s ease-in-out;
}

p.jRatingInfos span.maxRate {
	color: #9e9e9e;
	font-size: 14px;
}

/* Bilgi kutusu hover durumunda görünür */
.jStar:hover + p.jRatingInfos {
	display: block;
	opacity: 1; /* Yumuşak görünme */
}

/* Ek görsel detaylar */
body {
	font-family: var(--font-primary);
	background-color: #f9f9f9; /* Arka planı yumuşak bir gri yaptık */
	color: #333;
}