/* Animations */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.animate-fadeInUp{ animation:fadeInUp .6s ease-out forwards }
.animate-slideInLeft{ animation:slideInLeft .6s ease-out forwards }
.animate-slideInRight{ animation:slideInRight .6s ease-out forwards }
.animate-delay-100{ animation-delay:.1s } .animate-delay-200{ animation-delay:.2s } .animate-delay-300{ animation-delay:.3s }

/* Cards & tags */
.card-hover{ transition:all .3s ease }
.card-hover:hover{
  transform:translateY(-10px);                 /* ↑ hover'da biraz daha kalksın */
  box-shadow:0 15px 30px rgba(16,185,129,.35);
}
.tag-hover{ transition:all .3s ease }
.tag-hover:hover{ background-color:#0d9488; color:#fff }

/* Particles container */
#particles-js {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;               /* Arka plana at */
  pointer-events: none;      /* Etkileşim window üzerinden */
}

/* Header scroll (blur cam efekti) */
.header-scrolled{
  background-color:rgba(15,23,42,.5);          /* biraz daha şeffaf */
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);          /* Safari */
  padding:.5rem 0;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  transition:background-color .2s ease, backdrop-filter .2s ease;
}

/* Lightbox */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:1000; justify-content:center; align-items:center }
.lightbox.open{ display:flex }
.lightbox-content{ max-width:90%; max-height:90% }
.lightbox-close{ position:absolute; top:20px; right:30px; color:#fff; font-size:35px; cursor:pointer }

/* === Utilities (Tailwind @apply YOK) === */
.section-title{ font-weight:700; font-size:1.5rem; line-height:2rem; }
@media (min-width:768px){ .section-title{ font-size:1.875rem; line-height:2.25rem; } }
.muted{ color:#94a3b8 }
.card{
  background:rgba(30,41,59,.6);
  border:1px solid #334155;
  border-radius:.75rem;
}

/* ---- FORM GÖRÜNÜRLÜĞÜ: BEYAZ ZEMİN + SİYAH YAZI (UA darkening'e karşı) ---- */
:root { color-scheme: light; }  /* Tarayıcının otomatik koyu temasını kapatır */

.input{
  width:100%;
  background:#ffffff !important;                 /* Zemin beyaz */
  border:1px solid #334155 !important;
  border-radius:.5rem;
  padding:.75rem 1rem;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
  color:#000000 !important;                      /* Yazı siyah */
  caret-color:#000000 !important;                /* İmleç siyah */
}
.input:focus{
  border-color:#10b981 !important;
  background:#ffffff !important;
}
.input::placeholder{
  color:#64748b !important;                      /* Placeholder gri */
  opacity:1 !important;
}

/* Chrome/Edge/Safari otomatik doldurma (autofill) düzeltmesi */
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color:#000000 !important;    /* Yazı siyah */
  box-shadow:0 0 0 1000px #ffffff inset !important; /* Zemin beyaz */
  transition:background-color 9999s ease-out 0s !important;
}

/* Label & diğerleri */
.label{ display:block; font-size:.875rem; color:#d1d5db; margin-bottom:.5rem }
.btn{
  display:inline-block; background:#059669; color:#fff; font-weight:500;
  padding:.75rem 1.5rem; border:0; border-radius:9999px; transition:all .3s ease; text-decoration:none; cursor:pointer;
}
.btn:hover{ background:#10b981 }
.skills{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; color:#e5e7eb }

.filter-chip{
  background:rgba(16,185,129,.15);
  color:#a7f3d0;
  border:1px solid rgba(16,185,129,.35);
  padding:.4rem .8rem;
  border-radius:9999px;
  font-size:.875rem;
  transition:all .2s ease;
}
.filter-chip:hover{ background:rgba(16,185,129,.25) }
.filter-chip.active{ background:#10b981; color:#0b1f1a; border-color:#10b981 }

/* Responsive tweaks */
@media (max-width:768px){
  .hero-title{ font-size:2.5rem }
  .hero-subtitle{ font-size:1.2rem }
}

/* WhatsApp stili buton */
.btn-whatsapp {
  display: inline-block;
  width: 100%;
  background-color: #25D366;           /* WhatsApp yeşili */
  color: #ffffff;
  font-weight: 500;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s ease, transform .2s ease;
}
.btn-whatsapp:hover {
  background-color: #1ebe5d;           /* daha koyu yeşil */
  transform: scale(1.03);
}