/* 1) RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* 2) ARKA PLAN & OVERLAY */
html, body {
  width: 100%;
  min-height: 100%;
  overflow: auto;
  position: relative;
}
.background {
  background: url('../img/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  inset: 0;
  z-index: 0;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* 3) KONTEYNER */
.container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100vh;
  perspective: 1200px;
}

/* 4) FORM KARTLARI */
.form-card {
  position: relative;
  width: 320px;
  max-width: 90%;
  padding: 40px;
  background: linear-gradient(135deg, #f5e6d0, #ebd2ac);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
  0%,100% { transform: translateY(0) rotateY(0); }
  50%     { transform: translateY(-15px) rotateY(15deg); }
}
.wave {
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  background:#d7954d;
  clip-path: polygon(0 0,0 100%,50% 85%,100% 100%,100% 0);
  z-index:-1;
}

/* 5) BAŞLIK ve MÜZİK */
.form-card h2 {
  font-size: 1.8rem; color:#5e3d1c;
  text-transform: uppercase; margin-bottom:1rem;
  transform: translateZ(50px);
  display: flex; align-items: center;
}
.music-icon {
  margin-left:10px; cursor:pointer;
  font-size:1.4rem; user-select:none;
  transform: translateZ(50px);
  display:inline-block;
  animation: pulse 2s ease-in-out infinite, glow 3s ease-in-out infinite;
}
@keyframes pulse {0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes glow  {0%,100%{text-shadow:0 0 2px rgba(227,10,23,0.5)}50%{text-shadow:0 0 12px rgba(227,10,23,1)}}

/* 6) GOOGLE BTN */
.google-btn {
  width:100%; padding:10px; margin-bottom:20px;
  background:#E30A17; color:#fffaf0;
  border:none; border-radius:5px; font-weight:bold;
  cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.2);
  transform: translateZ(40px);
}
.google-btn:hover { background:#c20c14; }

/* 7) INPUT */
.input-group {
  display:flex; align-items:center;
  background:#fffaf0; padding:10px;
  border-radius:5px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom:15px; transform: translateZ(30px);
}
.input-group .icon { margin-right:10px; color:#d7954d; font-size:1.2rem }
.input-group input {
  width:100%; border:none; outline:none;
  background:transparent; font-size:1rem; color:#5e3d1c;
}

/* 8) SUBMIT */
button[type="submit"] {
  width:100%; padding:12px;
  background:#7a522b; color:#fffaf0;
  border:none; border-radius:5px; font-weight:bold;
  cursor:pointer; transform: translateZ(40px);
}
button[type="submit"]:hover { background:#8c5a17; }

/* 9) ALT PARAGRAF */
.form-card p {
  margin-top:18px; font-size:0.9rem; color:#6e1e1e;
  transform: translateZ(10px);
}
.form-card p a { color:#7a522b; font-weight:bold; text-decoration:none; }

/* 10) BALON */
.balloon-container { position:absolute; top:10px; left:0; width:100%; height:100%; }
.balloon {
  position:absolute; border-radius:50%; background:#E30A17;
  width:20px; height:20px; animation:gentleFloat 5s ease-in-out infinite;
}
.balloon:nth-child(2){width:25px;height:25px;left:30px;top:15px;animation-duration:4.5s}
.balloon:nth-child(3){width:15px;height:15px;left:10px;top:50px;animation-duration:4s}
.balloon:nth-child(4){width:18px;height:18px;right:20px;top:25px;animation-duration:5.5s}
.balloon:nth-child(5){width:22px;height:22px;right:40px;top:10px;animation-duration:6s}
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)rotateZ(2deg)}}

/* 11) SOSYAL İKONLAR */
.social-icons {
  position: fixed; right:20px; top:50%;
  transform: translateY(-50%);
  display:flex; flex-direction:column; gap:15px;
  z-index:10;
}
.social-icons img {
  width:48px; height:48px; cursor:pointer;
  animation: floatSocial 3s ease-in-out infinite;
  transition: transform 0.3s; border-radius:10px;
}
.social-icons img:hover{transform:scale(1.1)}
@keyframes floatSocial{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 12) RESP */
@media screen and (max-width:768px){
  .container{flex-direction:column;height:auto;padding:20px}
  .form-card{width:95%;padding:30px 20px;animation:none}
  .form-card h2{font-size:1.4rem}
  .input-group input{font-size:0.95rem}
  .google-btn,button[type="submit"]{font-size:0.95rem;padding:10px}
  .balloon-container,.wave{display:none}
  .form-card p{font-size:0.85rem}
}