:root {
--s1-bg: #050574;
/* İstediğin 1. Renk */
--s1-accent: #5dac12;
/* İstediğin 2. Renk (Yeşil) */
--s1-white: #ffffff;
--s1-glass: rgba(255, 255, 255, 0.04);
--s1-glass-border: rgba(255, 255, 255, 0.12);
--s1-transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
}.s1-hero {
position: relative;
width: 100%;
height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
}/* Arka Plan Slider */
.s1-bg-swiper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}.s1-bg-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
/* filter: brightness(0.35); */
/* Yazıların okunması için karartma */
}.s1-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
var(--s1-bg) 30%,
rgba(5, 5, 116, 0.03) 100%
);
z-index: 2;
opacity: 0;
display: none;
}/* İçerik Alanı */
.s1-container {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
margin-top: 30px;
}.s1-container {
position: relative;
z-index: 10; /* Diğer her şeyden üstte olmalı */
}
.s1-overlay {
z-index: 1; /* Arka planda kalmalı */
}.s1-left {
max-width: 510px;
}.s1-tag {
display: inline-block;
color: var(--header1-accent);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}.s1-title {
color: var(--s1-accent);
font-size: 50px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
}.s1-title span {
color: var(--header1-accent);
}.s1-desc {
font-size: 16px;
color: rgb(255, 255, 255);
margin-bottom: 40px;
font-weight: 500;
line-height: 1.4;
}/* Hizmet Seçici */
.s1-services {
margin-bottom: 35px;
}.s1-services-grid {
display: grid;
grid-template-columns: repeat(6, 1fr); /* Yan yana tam 5 adet */
gap: 4px; /* Aralarındaki boşluk tam 4px */
width: 100%;
user-select: none;
}.s1-card {
cursor: pointer;
padding: 15px 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
transition: 0.3s;
}.s1-card.active {
background: #ff7a00;
color: #fff;
border-color: #ff7a00;
}.s1-card {
background: var(--s1-glass);
border: 1px solid var(--s1-glass-border);
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: var(--s1-transition);
width: 80px !important;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
backdrop-filter: blur(10px);
}.s1-card:hover {
border-color: var(--s1-accent);
}.s1-card.active {
background: var(--s1-accent);
border-color: var(--s1-accent);
box-shadow: 0 15px 30px rgba(93, 172, 18, 0.3);
}.s1-card svg {
width: 19px;
height: 19px;
fill: #fff;
}.s1-card span {
font-size: 13px;
font-weight: 600;
}/* Form */
.s1-form {
display: flex;
background: white;
padding: 8px;
border-radius: 8px;
max-width: 100%;
gap: 10px;
font-family: var(--font1);
}.s1-input-wrap {
flex: 1;
padding: 0 20px;
display: flex;
align-items: center;
}.s1-input {
width: 100%;
border: none;
outline: none;
font-size: 16px;
font-weight: 600;
font-family: var(--font1);color: var(--s1-bg);
}.s1-btn {
background: var(--s1-accent);
color: white;
border: none;
padding: 16px 40px;
border-radius: 8px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: 0.3s;
font-family: var(--font1);
}.s1-btn:hover {
filter: brightness(1.1);
transform: scale(1.02);
}/* NAVİGASYON OKLARI (Sağ Alt/Orta) */
.s1-nav-wrap {
position: absolute;
right: 50px;
bottom: 50px;
display: flex;
gap: 15px;
z-index: 100;
}.s1-nav-btn {
width: 54px;
height: 54px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
color: white;
}.s1-nav-btn:hover {
background: var(--s1-accent);
border-color: var(--s1-accent);
}.s1-nav-btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}@media (max-width: 1100px) {
.s1-container {
grid-template-columns: 1fr;
padding: 0 20px;
text-align: center;
}.s1-left {
margin: 0 auto;
}.s1-form {
flex-direction: column;
background: transparent;
padding: 0;
}.s1-input-wrap {
background: white;
padding: 22px;
border-radius: 16px;
margin-bottom: 12px;
}.s1-btn {
width: 100%;
justify-content: center;
padding: 20px;
}.s1-nav-wrap {
right: 50%;
bottom: 20px;
transform: translateX(50%);
}
}/* Ana kapsayıcıyı dışarı taşanlardan koru */
.page-resimler-liste {
overflow: hidden;
width: 100%;
padding: 10px 0;
position: relative;
}/* Şeridin kendisi */
.resim-kaydirici {
display: flex;
width: max-content; /* İçerik kadar uzasın */
animation: logoKaydir 60s linear infinite; /* 30s hız ayarıdır, yükseltirseniz yavaşlar */
}/* Mouse gelince durdurma */
.resim-kaydirici:hover {
animation-play-state: paused;
}/* Yan yana duran resim grupları */
.resim-grubu {
display: flex;
align-items: center;
gap: 50px; /* Resimler arası boşluk */
padding-right: 50px; /* Gruplar arası boşluk (gap ile aynı olmalı) */
}.resim-grubu img {
height: 90px; /* Resim yüksekliği */
width: auto;
object-fit: contain;
display: block;
}/* KAYMA ANİMASYONU */
@keyframes logoKaydir {
from {
transform: translateX(0);
}
to {
/* Toplam genişliğin yarısı kadar (bir grup boyu) sola kaydır */
transform: translateX(-50%);
}
}/* ============================================================
HERO VE LOGO SLIDER MOBİL ÖZELLEŞTİRME
============================================================ */@media (max-width: 991px) {
.s1-hero .swiper-slide,
.s1-hero {
height: auto;
min-height: 40vh;
padding: 100px 0 60px 0; /* Header payı ve alt boşluk */
}.s1-container {
margin-top: 0;
}.s1-title {
font-size: 34px;
}
}@media (max-width: 768px) {
/* Arka plan karartmasını mobilde biraz daha artır ki yazılar net okunsun */
.s1-bg-swiper .swiper-slide img {
}/* Başlık ve Açıklama */
.s1-title {
font-size: 28px !important;
margin-bottom: 15px;
}.s1-desc {
font-size: 15px;
margin-bottom: 30px;
padding: 0 10px;
}/* Hizmet Kartları Gridi (6 taneyi mobilde 3 sütun yapıyoruz) */
.s1-services-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px;
max-width: 340px;
margin: 0 auto 30px auto;
}.s1-card {
width: 100% !important; /* 80px sabit genişliği mobilde esnetiyoruz */
height: 90px; /* Mobilde biraz daha dikey alan kazandırıyoruz */
padding: 10px;
}.s1-card span {
font-size: 11px;
line-height: 1.2;
}/* Form Alanı */
.s1-form {
background: transparent;
gap: 12px;
}.s1-input-wrap {
background: white;
border-radius: 12px;
padding: 18px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}.s1-input {
text-align: center;
font-size: 15px;
}.s1-btn {
width: 100%;
padding: 18px;
border-radius: 12px;
font-size: 16px;
justify-content: center;
}/* Okları mobilde gizle veya çok küçült (Genelde mobilde swipe kullanılır) */
.s1-nav-wrap {
display: none;
}/* Logo Slider (Partner Logoları) */
.resim-grubu img {
height: 50px; /* Mobilde logolar dev gibi durmasın */
}
.resim-grubu {
gap: 30px;
padding-right: 30px;
}
}@media (max-width: 480px) {
.s1-title {
font-size: 26px !important;
}/* Çok küçük ekranlarda kartlar 2'li de olabilir ama 3'lü daha kompakttır */
.s1-services-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.s1-card {
height: 85px;
}.s1-tag {
font-size: 12px;
margin-bottom: 10px;
}
}/* Dokunmatik iyileştirmesi: Kartlara basıldığında efekt ver */
@media (hover: none) {
.s1-card:active {
background: var(--s1-accent);
transform: scale(0.95);
}
}