:root {
    --bg: #f6f3f3;
    --menutxtcl: 48,48,50;
    --menutxtweight: 600;
    --intlinear: 74,75,80;
    --txtall: 70,72,89;
    --cl1: 78,148,179;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 192,128,223;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

 .serviceList { flex-wrap: wrap !important; gap: 20px width: 100% !important; box-sizing: border-box !important; } /* Her bir .item, 300×80 piksel sabit boyutta bir konteyner olsun */ .serviceList .item { width: 300px !important; height: 80px !important; position: relative !important; margin: 0 auto !important; } /* .box, bu .item alanını tamamen kaplasın (arka plan) */ .serviceList .item .box { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 10px !important; background: #f0f0f0 !important; box-sizing: border-box !important; } /* İkonu kutunun sol tarafına mutlak konumlandırma ile yerleştiriyoruz */ .serviceList .item .box i { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 40px !important; color: #fff !important; } /* Metin (.serviceName) de aynı kutu içinde, ikondan sonra sağ kısma yerleşsin */ .serviceList .item .serviceName { position: absolute !important; left: 75px !important; /* İkon ve boşluk için pay bırakıyoruz */ right: 10px !important; /* Kutunun sağ kenarından 10px içeride */ top: 50% !important; transform: translateY(-60%) !important; /* Dikey ortalama */ font-size: 18px !important; font-weight: 600 !important; color: #ffff !important; z-index: 1 !important; /* İçerik öne çıkacak */ overflow: visible !important; text-overflow: clip !important; } /* Metnin sonuna "Hizmetleri" ifadesi eklenir */ .serviceList .item .serviceName:after { content: " Hizmetleri" !important; } .serviceList { /* Eski kurallarını koruyarak display:flex ekliyoruz */ display: flex; flex-wrap: wrap; gap: 20px; width: 100%; box-sizing: border-box; } /* Her .item genişliği 300px olsun, ancak yüksekliği içeriğe göre uzasın */ .serviceList .item { width: 300px; box-sizing: border-box; margin: 0 auto; /* Ortalamak istersen */ } /* .box artık mutlak konumlu değil, içindeki icon ve metni flex ile yatayda ortalayacağız */ .serviceList .item .box { display: flex; align-items: center; padding: 10px; border-radius: 10px; background: #B96A94; box-sizing: border-box; } /* İkonun solunda boşluk bırakıp, metinden ayırıyoruz */ .serviceList .item .box i { font-size: 40px; color: #666; margin-right: 20px; } /* Servis adı da normal konumda (relative) ve flex içinde kendi boyutu kadar alan kaplasın */ .serviceList .item .serviceName { font-size: 18px; font-weight: 600; color: #444; white-space: nowrap; /* Metnin tek satırda kalmasını istersen */ overflow: hidden; text-overflow: ellipsis; /* Taşarsa üç nokta gösterir */ } /* Metnin sonuna "Hizmetleri" ifadesi eklenir */ .serviceList .item .serviceName:after { content: " Hizmetleri"; } @media (max-width: 768px) { .serviceList .item { width: 90% !important; /* Kutular ekranın tamamını kaplasın */ } } @media (max-width: 768px) { .serviceList { margin-top: 20px !important; } .serviceList .item { width: 90% !important; /* Kutular ekranın tamamını kaplasın */ } } /* 1. kutu */ .serviceList .item:nth-child(1) .box { background: #ce2192 !important; /* Mavi ton */ } /* 2. kutu */ .serviceList .item:nth-child(2) .box { background: #3f3357 !important; /* Kırmızı */ } /* 3. kutu */ .serviceList .item:nth-child(3) .box { background: #d23826 !important; /* Sarı */ } /* 4. kutu */ .serviceList .item:nth-child(4) .box { background: #4285f4 !important; /* Yeşil */ } /* 5. kutu */ .serviceList .item:nth-child(5) .box { background: #3b4a90 !important; /* Mor */ } /* 6. kutu */ .serviceList .item:nth-child(6) .box { background: #1da1f2 !important; /* Turuncu */ } /* 7. kutu */ .serviceList .item:nth-child(7) .box { background: #0088cc !important; /* Turkuaz */ } /* 8. kutu */ .serviceList .item:nth-child(8) .box { background: #1ed760 !important; /* Koyu Mavi/Gri */ } /* 9. kutu */ .serviceList .item:nth-child(9) .box { background: #0077b5 !important; /* Yeşil ton */ } /* 10. kutu */ .serviceList .item:nth-child(10) .box { background: #DC2087 !important; /* Açık Yeşil */ } /* 11. kutu */ .serviceList .item:nth-child(11) .box { background: #2980b9 !important; /* Mavi ton */ } /* 12. kutu */ .serviceList .item:nth-child(12) .box { background: #8e44ad !important; /* Mor ton */ } .serviceList { margin-top: 20px !important; display: flex; flex-wrap: wrap; gap: 20px; width: 100%; box-sizing: border-box; } /* Mobil görünüm için ek ayarlar */ @media (max-width: 768px) { .serviceList { margin-top: 20px !important; /* Mobilde de üstte 20px boşluk */ } .serviceList .item { width: 90% !important; /* Kutular ekranın tamamını kaplasın */ } } *, *::before, *::after { transition: none !important; animation: none !important; } .serviceList .item:nth-child(11) .box { /* Örnek: Mavi rengin yarı saydam hâli */ background: rgba(52, 152, 219, 0.75) !important; /* veya */ /* background: rgb(52 152 219 / 75%) !important; */ } /* .serviceName (başlık/yazı) ve .box içindeki ikonlar için opaklık ayarı */ .serviceList .item .serviceName, .serviceList .item .box i { opacity: 1 !important; } .platList { display: grid; grid-template-columns: repeat(3,1fr); grid-column-gap: 25px; grid-row-gap: 25px; margin-bottom: 70px; } .blogList { display: grid; grid-template-columns: repeat(3,1fr); grid-column-gap: 25px; grid-row-gap: 25px; margin-bottom: 25px; }