:root {
--primary: #ffc40e;
/* Lüks Altın */
--dark: #111111;
/* Tam Siyah */
--white: #ffffff;
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* --- MAIN SLIDER --- */
.main-slider {
width: 100%;
height: 100vh;
}.swiper-slide {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
}/* Koyu Katman (Soldan Sağa) */
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000081;
z-index: 1;
opacity: 100%;
}.bg-overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.8) 100%
);
z-index: 1;
}/* İçerik Alanı */
.hero-content-text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 99;
}.hero-content {
z-index: 10;
max-width: 650px;
}/* Sektör Etiketi */
.badge {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 16px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
backdrop-filter: blur(5px);
opacity: 0;
animation: fadeIn 1s forwards 0.5s;
}/* Ana Başlık */
.hero-title {
font-size: 38px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
text-transform: uppercase;
color: #fff;
opacity: 0;
transform: translateY(50px);
transition: all 1s ease;
}/* İnce Font Vurgusu */
.hero-title b {
display: block;
font-weight: 500;
/* Montserrat'ın ince hali çok şıktır */
color: var(--primary);
-webkit-text-fill-color: var(--primary);
}.hero-desc {
font-weight: 500;
font-size: 15px;
line-height: 1.5;
color: #fff;
margin-bottom: 40px;
border-left: 3px solid var(--primary);
padding-left: 20px;
opacity: 0;
transform: translateY(30px);
transition: all 1s ease 0.3s;
}/* Buton */
.btn-discover {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: white;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
opacity: 0;
transform: translateY(30px);
transition: all 1s ease 0.5s;
}.btn-discover .icon {
width: 40px;
height: 40px;
background: var(--white);
color: var(--dark);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}.btn-discover .icon svg {
width: 20px;
height: 20px;
}.btn-discover:hover .icon {
background: var(--primary);
transform: rotate(-45deg);
}/* Aktif Slide Animasyon Tetikleyicileri */
.swiper-slide-active .hero-title,
.swiper-slide-active .hero-desc,
.swiper-slide-active .btn-discover {
opacity: 1;
transform: translateY(0);
}/* --- THUMBS (ALT KUTULAR) --- */
.thumbs-container-bg {
position: absolute;
bottom: 40px;
width: 100%;
z-index: 20;
display: flex;
}.thumbs-container .container {
display: flex;
justify-content: end;
}.thumbs-container {
margin-left: auto;
max-width: 700px;
}
.thumbs-slider {
overflow: visible;
}.thumbs-slider .swiper-slide {
height: 80px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 15px 0;
transition: all 0.4s;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}.thumbs-slider .swiper-slide:hover {
opacity: 1;
}.thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
border-bottom: 3px solid var(--primary);
transform: translateY(-10px);
color: var(--primary);
}.thumbs-slider .swiper-slide-thumb-active {
}.t-num {
font-size: 0.8rem;
color: var(--primary);
font-weight: 700;
}.t-title {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
margin-top: 5px;
}/* --- MOBİL --- *//* Swiper okları beyaz ve şık */
.swiper-button-next,
.swiper-button-prev {
color: #fff; /* Beyaz renk */
width: 40px !important;
height: 40px !important;
border-radius: 50%; /* Yuvarlak oklar */
background-color: transparent; /* Hafif şeffaf siyah arka plan */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
top: 50%;
transform: translateY(-50%);
border: solid 2px #ffc40e;
}.swiper-button-next svg,
.swiper-button-prev svg {
stroke: #ffc40e; /* Beyaz renk */
width: 14px !important;
height: 14px !important;
}.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #ffc40e /* Hoverda daha belirgin */;
stroke: #fff !important; /* Beyaz renk */
}.swiper-button-next:hover svg,
.swiper-button-prev:hover svg {
stroke: #fff !important; /* Beyaz renk */
}.swiper-button-next::after,
.swiper-button-prev::after {
display: none !important;
}.swiper-button-next {
right: 20px !important;
}.swiper-button-prev {
left: 20px !important;
}@media (max-width: 1200px) {
.counter-item {
min-width: 100% !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
text-align: center !important;
justify-content: space-around !important;
}.counter-item .label::before {
display: none !important;
}
.counter-item .number {
font-size: 38px !important;
}
.counters-wrapper .container {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 40px;
max-width: 900px;
}.counters-wrapper {
margin: 40px auto 0px !important;
background: #27356f;
padding: 40px 0px !important;
}.sektorler {
padding: 40px 0px 40px!important;
}.hakkimizda-section {
padding: 40px 0px 0px;
}
.text-2 img {
height: 260px;
margin-top: 50px;
}
.thumbs-container-bg {
display: none;
}
.hero-content {
max-width: 100%;
text-align: center;
}.main-slider {
width: 100%;
height: 70vh;
}.hero-desc {
border: none;
}.hero-title {
font-size: 3rem;
}.hero-title b {
font-size: 2rem;
}.thumbs-container {
width: 100%;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
}.thumbs-slider .swiper-slide {
height: 80px;
border: none;
opacity: 0.4;
}.thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
border-top: 2px solid var(--primary);
border-bottom: none;
transform: none;
background: rgba(255, 255, 255, 0.05);
}
}