/* Genel Sayfa Stilleri */
body {
    font-family: 'Inter', sans-serif;
    /* background-color: #0a0a0a; -> Yeni gradient ile değiştirildi */
    color: #e5e7eb;
    overflow-x: hidden;
}

#tsparticles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* İstenen yeni, daha aydınlık ve mavi tonlu arka plan */
.gradient-bg {
    background-color: #0f172a; /* Fallback color */
    background-image: radial-gradient(circle at top left, rgba(30, 27, 75, 0.8) 0%, #0f172a 30%), radial-gradient(circle at bottom right, rgba(76, 29, 149, 0.7) 0%, #0f172a 40%);
}

/* Genel Kart ve Efekt Stilleri */
.glass-effect {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-effect:hover {
    background: rgba(17, 24, 39, 0.8);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    transform: translateY(-5px);
}

/* Animasyon Stilleri */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Teknoloji İkonları Stili */
.tech-icon {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.tech-icon:hover {
    transform: scale(1.1) translateY(-5px);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
}

/* Referans Logoları Stili */
.reference-logo {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(90%) opacity(50%);
}

.reference-logo:hover {
    transform: scale(1.1);
    filter: grayscale(0%) opacity(100%) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: #38bdf8;
    animation: blink 0.8s infinite;
    vertical-align: bottom;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* GÜNCELLENMİŞ BUTON STİLLERİ */
.glow-button {
    box-shadow: 0 0 15px 5px rgba(56, 189, 248, 0.4), 0 0 30px 10px rgba(139, 92, 246, 0.3);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease;
}

.glow-button:hover {
    box-shadow: 0 0 25px 8px rgba(56, 189, 248, 0.6), 0 0 40px 15px rgba(139, 92, 246, 0.4);
}

/* Header Logo Boyutu Ayarları */
#header a img {
    height: 3rem; /* 48px - Masaüstü logo boyutu */
    transition: height 0.3s ease;
}

@media (max-width: 767px) {
    #header a img {
        height: 2.75rem; /* 44px - Mobil logo boyutu */
    }
}

/* Sağ Alt Hızlı İletişim Butonları Ayarları */
.hizli-iletisim-container a {
    width: 50px !important;
    height: 50px !important;
}

@media (max-width: 767px) {
    .hizli-iletisim-container {
        right: 1rem !important;  /* 16px - Sağdan boşluk */
        bottom: 1rem !important; /* 16px - Alttan boşluk */
    }
}

/* =================================================================
   TEKNOLOJİK REFERANSLAR BÖLÜMÜ STİLLERİ
   ================================================================= */

.scroller {
  max-width: 90%;
  margin: auto;
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 3rem; /* Logolar arası boşluk */
}

.scroller[data-animated="true"] {
  overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll 40s linear infinite;
}

.scroller__inner:hover {
    animation-play-state: paused;
}

.scroller__inner li {
    list-style: none;
}

.scroller__inner img {
    height: 4rem; /* Logo yüksekliği */
    max-width: 12rem; /* Logo genişliği */
    object-fit: contain;
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease;
}

.scroller__inner img:hover {
    filter: grayscale(0%) opacity(100%);
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 1.5rem)); /* Gap değerinin yarısı kadar ek kaydırma */
  }
}