/* styles.css */
:root{
  --bg:#0f0e17;
  --text:#fffffe;
  --muted:#a7a9be;
  --primary:#ff4d6d;
  --primary-2:#ff758f;
  --accent:#f9c74f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, #1f1039 0%, #0b0a12 50%, #06060a 100%);
  overflow:hidden;
}

/* Süzülen kalpler dekoru */
.decor{position:fixed; inset:0; pointer-events:none}
.float-heart{position:absolute; color:rgba(255,77,109,0.35)}
.h1{top:10%; left:5%; width:40px; animation:float 8s linear infinite}
.h2{top:60%; left:80%; width:28px; animation:float 9.6s linear infinite reverse}
.h3{top:35%; left:40%; width:24px; animation:float 8.8s linear infinite}
.h4{top:15%; left:75%; width:34px; animation:float 10.4s linear infinite}
.h5{top:80%; left:25%; width:22px; animation:float 8.4s linear infinite reverse}
.h6{top:50%; left:10%; width:26px; animation:float 10s linear infinite}
.h7{top:30%; left:90%; width:30px; animation:float 10.8s linear infinite reverse}
.h8{top:70%; left:60%; width:24px; animation:float 9.2s linear infinite}
.h9{top:40%; left:20%; width:28px; animation:float 10.24s linear infinite reverse}
.h10{top:20%; left:30%; width:22px; animation:float 7.2s linear infinite reverse}
.h11{top:85%; left:70%; width:26px; animation:float 9.6s linear infinite}
.h12{top:5%; left:50%; width:20px; animation:float 8.8s linear infinite reverse}
.h13{top:45%; left:5%; width:28px; animation:float 10.4s linear infinite}
.h14{top:75%; left:85%; width:24px; animation:float 8.4s linear infinite reverse}
.h15{top:25%; left:55%; width:18px; animation:float 7.6s linear infinite}
.h16{top:65%; left:15%; width:30px; animation:float 10s linear infinite reverse}
@keyframes float{
  0%{transform:translate(0,0)}
  25%{transform:translate(18px,-15px)}
  50%{transform:translate(0,-30px)}
  75%{transform:translate(-18px,-15px)}
  100%{transform:translate(0,0)}
}

/* Kart */
.card{
  position:relative; width:min(900px, 96vw); margin:8vh auto; padding:48px 32px; border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.heart-wrap{position:absolute; right:-64px; top:-64px}
.big-heart{width:140px; height:auto; color:var(--primary); filter: drop-shadow(0 0 18px rgba(255,77,109,0.5));}
.glow{position:absolute; inset:auto auto -16px -16px; width:160px; height:160px; background:radial-gradient(60px 60px at 70% 30%, rgba(255,77,109,.45), transparent 70%)}

.title{
  font-family:"Great Vibes", cursive; font-size:64px; line-height:1; margin:0 0 10px; letter-spacing:0.5px;
}
.subtitle{color:var(--muted); margin:0 0 24px; font-weight:300}

.label{display:block; margin-bottom:10px; color:#e6e6f0; text-align:center}
.input-row{display:flex; gap:12px; align-items:center; justify-content:center}
.input-row input{
  flex:0 0 auto; width:240px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06); color:var(--text); outline:none;
}
.input-row input::placeholder{color:#cfcfe8}
.input-row input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(249,199,79,0.15)}

.btn{
  padding:12px 18px; border:none; border-radius:14px; background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white; font-weight:700; cursor:pointer; transition:transform .15s ease, filter .2s;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

.message{margin-top:14px; min-height:24px; color:#ffd6dd; font-weight:500; text-align:center}
.format-hint{margin:8px auto 0; width:240px; color:#e6e6f0; text-align:left; font-size:14px}
.hint{margin-top:28px; color:#ffb3c1}

/* Shake effect */
@keyframes shake{
  0%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}
  60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
  100%{transform:translateX(0)}
}
.card.shake{
  animation:shake 360ms ease;
}

/* Responsive */
@media (max-width:520px){
  .title{font-size:44px}
  .heart-wrap{right:-40px; top:-40px}
  .big-heart{width:100px; filter:none}
  .card{margin:6vh auto; padding:32px 20px; border-radius:22px; backdrop-filter:none; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22)}
  .glow{display:none}
  .input-row{flex-direction:column; gap:10px}
  .btn{width:240px}
  .format-hint{width:240px; text-align:left}
  body{background: radial-gradient(1400px 700px at 20% 10%, #24113d 0%, #0b0a12 50%, #06060a 100%)}
}

@media (max-width:360px){
  .title{font-size:36px}
  .input-row input{width:200px}
  .btn{width:200px; padding:12px 16px}
  .format-hint{width:200px}
  body{background: radial-gradient(1600px 800px at 25% 15%, #24113d 0%, #0b0a12 50%, #06060a 100%)}
}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}