/* Genel Stil ve Font */
body { font-family: 'Poppins', sans-serif; background-color: #1a1a1a; color: #e0e0e0; scroll-behavior: smooth; overflow-x: hidden; }
.nav-link { color: #b0b0b0; transition: color 0.3s ease; }
.nav-link:hover { color: #fff; }
/* Hero */
.hero-bg { background: linear-gradient(to bottom, #1a1a1a 0%, #0d0d0d 100%); position: relative; overflow: hidden; }
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hero-content { position: relative; z-index: 2; }
/* Hizmet Kutuları */
.service-box { background-color: #212121; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.service-box:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
/* İletişim Formu */
.contact-form { background-color: #212121; }
.contact-input { background-color: #333; border: 1px solid #444; color: #fff; }
.contact-input:focus { outline: none; border-color: #0088cc; box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.2); }
/* Sertifika Logoları */
.cert-logo { filter: brightness(0.55); opacity: 0.78; transition: all 0.3s ease; } /* biraz daha soluk */
.cert-logo:hover { filter: brightness(1); opacity: 1; }
/* CTA Butonları */
.cta-primary { background-color: #0088cc; box-shadow: 0 4px 10px rgba(0, 136, 204, 0.2); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.cta-primary:hover { background-color: #006699; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 136, 204, 0.3); }
.cta-secondary { background-color: transparent; border: 2px solid #555; color: #b0b0b0; transition: background-color 0.3s ease, transform 0.3s ease; }
.cta-secondary:hover { background-color: #282828; transform: translateY(-2px); }
/* Fade-in */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
/* Slider */
.slider-container { overflow: hidden; }
.slider-wrapper { display: flex; transition: transform 0.5s ease-in-out; }
.slider-wrapper > div { flex: 0 0 100%; }
@media (min-width: 768px) { .slider-wrapper > div { flex: 0 0 50%; } }
@media (min-width: 1024px) { .slider-wrapper > div { flex: 0 0 25%; } }