/* Slider Ana Konteyner */
.home-slider {
width: 100%;
height: 100vh;
min-height: 700px;
position: relative;
/* Görseldeki gibi alt köşeleri hafif yuvarlatmak isterseniz: */
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
overflow: hidden;
}.home-slider .swiper-slide {
position: relative;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
/* Örnek Arka Plan Görseli - Buraya kendi görselinizi ekleyin */
}/* Soldan sağa doğru kararan gradient efekti (Yazıların okunması için) */
.home-slider .slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(15, 15, 15, 0.95) 0%,
rgba(15, 15, 15, 0.8) 40%,
rgba(15, 15, 15, 0) 100%
);
z-index: 1;
opacity: 80%;
}/* İçerik Konteyneri */
.home-slider .slider-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}.home-slider .content-inner {
max-width: 671px;
}/* Üstteki Rozet (Badge) */
.home-slider .top-badge {
display: inline-flex;
align-items: center;
background-color: #2a2a2a;
border-radius: 50px;
padding: 6px 16px 6px 6px;
margin-bottom: 30px;
}.home-slider .play-icon-circle {
width: 28px;
height: 28px;
background-color: var(--renk1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
}.home-slider .play-icon-circle svg {
width: 10px;
height: 10px;
fill: white;
margin-left: 2px;
/* Üçgeni ortalamak için optik ayar */
}.home-slider .top-badge span {
color: #ffffff;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
}/* Başlıklar */
.home-slider .slider-title {
color: #ffffff;
font-size: 50px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -1px;
}.home-slider .slider-desc {
color: #e0e0e0;
font-size: 16px;
line-height: 1.6;
margin-bottom: 40px;
font-weight: 400;
}/* --- 2. GÖRSELDEKİ BUTON ALANI --- */
.home-slider .action-area {
display: flex;
flex-direction: column;
gap: 20px;
}/* Alt Metin (Questions? Talk to an expert) */
.expert-text {
font-size: 15px;
margin-top: 10px;
}.expert-text .question {
color: #8c8c8c;
}.expert-text .link {
color: #ffffff;
text-decoration: underline;
font-weight: 500;
margin-left: 4px;
cursor: pointer;
}.expert-text .link:hover {
color: #e0e0e0;
}/* En alttaki küçük link (10'dan az çalışanı mı var?) */
.bottom-small-link {
margin-top: 40px;
display: inline-flex;
align-items: center;
color: #ffffff;
font-size: 14px;
text-decoration: none;
font-weight: 500;
}.bottom-small-link span {
margin-left: 6px;
text-decoration: underline;
}.bottom-small-link svg {
margin-left: 6px;
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}/* Swiper Okları için opsiyonel ayar */
.home-slider .swiper-button-next,
.home-slider .swiper-button-prev {
color: rgba(255, 255, 255, 0.5) !important;
}.home-slider .swiper-button-next:hover,
.home-slider .swiper-button-prev:hover {
color: rgba(255, 255, 255, 1) !important;
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.home-slider .slider-title {
font-size: 30px;
}.buttons-wrapper {
flex-direction: column;
align-items: flex-start;
}.btn-dark,
.btn-light {
width: 100%;
justify-content: space-between;
}.home-slider .slide-overlay {
background: linear-gradient(
to right,
rgba(15, 15, 15, 0.95) 0%,
rgba(15, 15, 15, 0.9) 100%
);
}
}/**//* Logo Bandı Ana Taşıyıcı */
.slider-logo-announcement {
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
z-index: 15;
pointer-events: none;
}/* Beyaz Bar ve Wrapper */
.slider-logo-wrapper {
max-width: 1160px;
background: white;
margin: 0 auto;
display: flex;
align-items: center;
border-radius: 50px; /* Oval şık tasarım */
padding: 5px 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
pointer-events: auto; /* Gerektiğinde tıklanabilir */
}/* Sol Sabit Etiket */
.slider-logo-label {
background: var(
--renk1,
#2a2a2a
); /* Kendi ana renginizi çekebilir veya manuel verebilirsiniz */
color: white;
padding: 8px 20px;
border-radius: 40px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
z-index: 2;
margin-right: 15px;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}/* Logo Alanı Konteyner */
.slider-logo-container {
flex: 1;
overflow: hidden;
position: relative;
/* Sağ tarafa hafif fade efekti */
mask-image: linear-gradient(to right, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}/* Kayan Track */
.slider-logo-track {
display: flex;
align-items: center;
gap: 30px;
width: max-content;
animation: sliderLogoScroll 35s linear infinite;
padding: 7px 0 5px 0;
}.s-logo-item {
flex-shrink: 0;
overflow: hidden;
border-radius: 5px;
height: 35px;
}.s-logo-item img {
height: 35px; /* Logo boyutu */
width: auto;
object-fit: contain;
transition: all 0.3s ease;
}/* Hover'da logoları canlandırır */
.s-logo-item:hover img {
filter: grayscale(0);
opacity: 1;
}@keyframes sliderLogoScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.33%);
} /* 3 kez tekrar ettiğimiz için */
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.slider-logo-wrapper {
max-width: 90%;
padding: 4px 8px;
}
.slider-logo-label {
font-size: 11px;
padding: 6px 12px;
margin-right: 10px;
}
.s-logo-item img {
height: 22px;
}
.slider-logo-track {
gap: 20px;
}
}/* =========================================
PREMİUM KAMPANYA & FİYAT KUTUSU
========================================= */
.ym-premium-campaign {
position: relative;
max-width: 700px;
margin-bottom: 0px;
border-radius: 20px;
/* Hover yapıldığında içindeki ışıltı canlanır */
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}.ym-premium-campaign:hover {
transform: translateY(-4px);
}/* Kutu Arkası Işıltı (Glow) Efekti */
.ym-pc-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(
circle,
rgba(1, 84, 217, 0.3) 0%,
rgba(0, 0, 0, 0) 70%
);
filter: blur(30px);
z-index: 0;
opacity: 0.6;
transition: opacity 0.4s ease;
}.ym-premium-campaign:hover .ym-pc-glow {
opacity: 1;
width: 110%;
height: 120%;
}/* Cam Efektli Ana Kart */
.ym-pc-inner {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
/* Gümüşümsü cam efekti */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 24px 30px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}/* Sol Alan: Metinler */
.ym-pc-content {
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 30px;
}/* Rozet (Hap Tasarımı) */
.ym-pc-badge {
display: inline-flex;
align-items: center;
width: fit-content;
gap: 8px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
padding: 4px 12px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
color: #fca5a5; /* Soluk Pastel Kırmızı */
text-transform: uppercase;
letter-spacing: 0.5px;
}/* Nabız Noktası */
.ym-pulse-dot {
width: 6px;
height: 6px;
background-color: #ef4444;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
animation: pulseRedDot 2s infinite;
}@keyframes pulseRedDot {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}/* Kart Başlığı */
.ym-pc-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 20px;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: -0.5px;
}.ym-pc-title svg {
width: 18px;
height: 18px;
color: #eab308; /* Altın Yıldız Rengi */
}/* Kart Açıklaması */
.ym-pc-desc {
font-size: 14px;
color: #a1a1aa;
margin: 0;
line-height: 1.4;
}/* Sağ Alan: Fiyatlandırma */
.ym-pc-pricing {
border-left: 1px solid rgba(255, 255, 255, 0.1);
padding-left: 30px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 290px;
align-items: center;
}/* Eski Fiyat ve Yeşil Rozet Satırı */
.ym-pc-old-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 2px;
}.ym-pc-old-price {
font-size: 15px;
color: #718096;
text-decoration: line-through;
font-weight: 500;
}/* İndirim / Kazanç Rozeti */
.ym-pc-discount-pill {
background: rgba(16, 185, 129, 0.15);
color: #34d399; /* Zümrüt Yeşili */
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
letter-spacing: 0.3px;
}/* Yeni Fiyat (Gümüş / Metalik Gradient Metin) */
/* Yeni Fiyat (Gümüş / Metalik Gradient Metin) - GÜNCELLENDİ */
.ym-pc-new-price {
font-size: 42px;
font-weight: 800;
letter-spacing: -2px;
line-height: 1;
background: linear-gradient(to right, #ffffff 30%, #a1a1aa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: baseline;
gap: 6px; /* Etiketlerin arası biraz açıldı */
flex-wrap: wrap; /* Mobilde sıkışma olursa KDV alt satıra şıkça kaysın */
align-items: center;
margin-top: 6px;
}/* YENİ EKLENEN: KDV Rozeti (SaaS Tarzı Premium Badge) */
.ym-pc-tax {
font-size: 11px;
font-weight: 700;
color: #94a3b8; /* Zarif, soluk bir gri/mavi */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 3px 7px;
border-radius: 6px;
align-self: center; /* Flex yapısında yatay/dikey ortalar */
-webkit-text-fill-color: #94a3b8; /* Üst div'deki gradient efektini bu alanda ezer */
letter-spacing: 0.5px;
margin-left: 2px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Üstten çok ince bir cam ışığı */
}.ym-pc-period {
font-size: 15px;
font-weight: 500;
color: #a1a1aa;
letter-spacing: 0;
-webkit-text-fill-color: #a1a1aa; /* Gradienti ezer, gri kalır */
}/* Mobil Uyumluluk (Telefon Ekranları) */
@media (max-width: 768px) {
.ym-pc-inner {
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 20px;
}.ym-pc-content {
padding-right: 0;
}.ym-pc-pricing {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-left: 0;
padding-top: 20px;
width: 100%;
align-items: flex-start;
}.ym-pc-title {
font-size: 18px;
}.ym-pc-new-price {
font-size: 36px;
}
}@media (max-width: 1024px) {
.slider-logo-announcement {
display: none;
}.home-slider {
margin-top: 100px;
height: 50vh;
min-height: 450px;
}.ym-premium-campaign {
display: none;
}.home-slider .content-inner {
text-align: center;
}
}