/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* ========== Temel değişkenler ========== */
:root{
  --bg1:#ffe0ee;
  --bg2:#ffd6ea;
  --bg3:#fff1f8;

  --card-bg: #ffffff;
  --glass-bg: rgba(255,255,255,0.55);
  --shadow-strong: 0 10px 28px rgba(255,47,91,0.18);
  --shadow-soft:   0 8px 22px  rgba(0,0,0,.08);
  --accent: #ff6b8b;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

/* Arkaplan */
html,body{
  overflow:hidden;
  background:
    radial-gradient(1000px 700px at 15% -10%, var(--bg3), transparent 55%),
    radial-gradient(900px 600px at 110% 0%, var(--bg2), transparent 60%),
    linear-gradient(180deg, var(--bg1), #ffc7e1);
}
html.allow-scroll, body.allow-scroll { overflow:auto !important; }
@supports (-webkit-touch-callout:none){
  html.allow-scroll, body.allow-scroll { -webkit-overflow-scrolling:touch; }
}
#bg{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }

/* ========== Login görünümü ========== */
.center{
  position:relative;
  min-height:100dvh;
  display:flex; justify-content:center; align-items:center;
  padding:20px; z-index:1;
}
.login-form{ width:min(92vw,520px); display:grid; place-items:center; gap:12px; }

.glass-input{
  width:100%; padding:16px 18px; font-size:18px; line-height:1.2; font-weight:600;
  color:#3a2a2f; background:var(--glass-bg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:2px solid rgba(255,75,110,.25); border-radius:16px; outline:none;
  box-shadow:0 18px 40px rgba(255,47,91,.18), 0 6px 14px rgba(0,0,0,.04);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.glass-input::placeholder{ color:rgba(58,42,47,.55); font-weight:500; }
.glass-input:focus{
  background:rgba(255,255,255,.65);
  border-color:var(--accent);
  box-shadow:0 22px 46px rgba(255,47,91,.22), 0 0 0 3px rgba(255,107,139,.18);
}
@supports (-webkit-touch-callout:none){ .glass-input{ font-size:17px; } }

.login-btn{
  margin-top:4px; padding:14px 28px; font-size:18px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,#ff6b8b,#ff2f5b);
  border:none; border-radius:14px; cursor:pointer;
  box-shadow:0 8px 20px rgba(255,47,91,.25), 0 3px 8px rgba(0,0,0,.06);
  transition:transform .15s, box-shadow .15s, opacity .2s;
}
.login-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,47,91,.32), 0 4px 10px rgba(0,0,0,.08); }
.login-btn:active{ transform:none; box-shadow:0 6px 14px rgba(255,47,91,.24), 0 2px 6px rgba(0,0,0,.05); opacity:.9; }
.login-btn.is-loading,.login-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

/* ========== Zarf animasyonu ========== */
.envelope-container{
  position:relative; cursor:pointer;
  animation:breathe 2.5s ease-in-out infinite;
  transition:transform .3s ease;
  display:flex; justify-content:center; align-items:center;
}
.envelope-container:hover{ transform:scale(1.05); }
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

.envelope{
  position:relative; width:0; height:0;
  border-top:120px solid #f5f5f5;
  border-right:200px solid #ececec;
  border-bottom:120px solid #e8e8e8;
  border-left:200px solid #ececec;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.15));
}
.envelope-heart{
  position:absolute; width:40px; height:40px; background:#ff3838;
  transform:translate(-50%,-50%) rotate(45deg);
  animation:heartbeat 1.4s ease-in-out infinite;
  top:50%; left:50%; z-index:10;
}
.envelope-heart::before,
.envelope-heart::after{
  content:""; width:100%; height:100%; background:#ff3838; border-radius:50%;
  position:absolute; top:0; left:0;
}
.envelope-heart::before{ transform:translateX(-50%); }
.envelope-heart::after{ transform:translateY(-50%); }

@keyframes heartbeat{
  0%,25%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
  30%,70%{transform:translate(-50%,-50%) rotate(45deg) scale(1.4)}
  50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}
  100%{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
}

.envelope-flap{
  position:absolute; top:-120px; left:-200px; width:0; height:0;
  border-top:120px solid #e0e0e0;
  border-right:200px solid transparent;
  border-left:200px solid transparent;
  transform-origin:top center;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
  z-index:5;
}
.envelope-container.opening .envelope-flap{ transform:rotateX(180deg); }

.click-hint{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  font-family:'Great Vibes', cursive; font-size:24px; color:#c92a60; letter-spacing:1px;
  opacity:.9; text-shadow:0 2px 4px rgba(0,0,0,.15);
  animation:fadeInOut 2s ease-in-out infinite;
}
@keyframes fadeInOut{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* Mobile zarf oranları */
@media (max-width:768px){
  .envelope-container{ width:100%; padding:0 24px; display:flex; justify-content:center; align-items:center; }
  .envelope{
    border-right-width:32vw; border-left-width:32vw;
    border-top-width:18vw;   border-bottom-width:18vw;
  }
  .envelope-flap{
    top:calc(-18vw); left:50%; transform:translateX(-50%);
    border-top-width:18vw; border-right-width:32vw; border-left-width:32vw;
    transform-origin:top center;
  }
  .envelope-container.opening .envelope-flap{ transform:translateX(-50%) rotateX(180deg); }
}

/* ========== İçerik alanı ========== */
.content-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:28px; padding:56px 16px 64px; min-height:100dvh; z-index:1;
  opacity:0; animation:fadeInContent .6s ease forwards;
}
@keyframes fadeInContent{ to{opacity:1} }

/* Not kartı */
.note-paper{
  flex:0 0 auto; width:min(94vw,560px); background:var(--card-bg);
  padding:40px 32px; border-radius:12px; box-shadow:var(--shadow-soft);
  border-left:4px solid var(--accent); text-align:left; line-height:1.85; color:#333;
}
.note-paper h2{ margin:0 0 14px; font-size:24px; font-weight:700; color:#d43d6e; }
.note-paper p{
  font-family:'Shadows Into Light', cursive;
  font-size:21px; color:#d43d6e; margin:0;
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto;
}
.signature{ text-align:right; font-family:'Shadows Into Light', cursive; font-size:24px; color:#d43d6e; margin-top:28px; margin-right:8px; opacity:.8; font-style:italic; }
@media (max-width:768px){ .signature{ margin-right:250px; font-size:22px; } }

/* Teklif kutusu */
.offer-box{
  flex:0 0 auto; width:min(94vw,520px); padding:20px 22px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:16px; box-shadow:var(--shadow-strong); text-align:center;
}
.offer-box p{ font-family:"Arial Black", Arial, sans-serif; font-size:20px; font-weight:700; color:#000; margin:0 0 16px; }
.offer-gif-wrapper{ margin-top:8px; display:flex; justify-content:center; align-items:center; padding:4px; background:transparent; border-radius:12px; max-width:200px; margin-left:auto; margin-right:auto; }
.offer-gif{ width:auto; height:150px; display:block; margin:6px auto 0; object-fit:contain; }

/* Butonlar */
.btn-group{ display:flex; justify-content:center; gap:14px; }
.btn-group button{
  padding:12px 26px; font-size:17px; font-weight:600; border:none; border-radius:12px; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.btn-group button:hover{ transform:translateY(-2px); }
.btn-group button{ min-width:120px; text-align:center; }

.yes-btn{ background:linear-gradient(135deg,#42d77d,#1db954); color:#fff; box-shadow:0 6px 18px rgba(29,185,84,.25); }
.no-btn { background:linear-gradient(135deg,#ff6b8b,#ff2f5b); color:#fff; box-shadow:0 6px 18px rgba(255,47,91,.25); }

/* Sıralama ve boşluklar */
.offer-box{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.offer-box > p{ order:0; }
.offer-box .offer-gif-wrapper{ order:1; margin:2px 0 16px; }
.offer-box .btn-group{ order:2; margin-top:6px; }

/* “Hayır” kaybolurken */
.fade-away{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease; }

/* Ok kare düzeni (Hayır kalkınca) */
.btn-group.arrow-square{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,auto);
  gap:clamp(8px,2.5vw,18px);
  align-items:center; justify-items:center;
  padding:clamp(8px,2vw,16px);
  position:relative;
}
.yes-centerpiece{
  grid-area:2 / 2; justify-self:center; align-self:center; z-index:2;
  min-width:clamp(160px,42vw,260px);
}
.btn-group.arrow-square .arrow{
  z-index:1; width:clamp(56px,14vw,110px); height:auto; opacity:.95; pointer-events:none;
  animation:floaty 1.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
}
.btn-group.arrow-square .slot1{ grid-area:1 / 1; }
.btn-group.arrow-square .slot2{ grid-area:1 / 2; }
.btn-group.arrow-square .slot3{ grid-area:1 / 3; }
.btn-group.arrow-square .slot4{ grid-area:2 / 1; }
.btn-group.arrow-square .slot5{ grid-area:2 / 3; }
.btn-group.arrow-square .slot6{ grid-area:3 / 1; }
.btn-group.arrow-square .slot7{ grid-area:3 / 2; }
.btn-group.arrow-square .slot8{ grid-area:3 / 3; }

@keyframes floaty{ from{transform:translateY(0) scale(1)} to{transform:translateY(-4px) scale(1.03)} }

@media (max-width:768px){
  .btn-group.arrow-square{ gap:clamp(10px,4vw,24px); padding:clamp(12px,4vw,24px); }
  .btn-group.arrow-square .arrow{ width:clamp(70px,22vw,130px); }
  .yes-centerpiece{ min-width:clamp(180px,60vw,280px); font-size:1.2rem; padding:18px 26px; }
}
@media (max-width:420px){
  .btn-group.arrow-square .arrow{ width:clamp(65px,26vw,110px); }
  .yes-centerpiece{ min-width:clamp(160px,70vw,260px); font-size:1.1rem; }
}

/* Gönderim animasyonu (💌) */
.letter-fly{
  position:fixed; bottom:60px; left:50%;
  transform:translateX(-50%) scale(.85);
  font-size:48px; opacity:0; pointer-events:none; z-index:9999;
  transition:transform 1.4s cubic-bezier(.45,0,.55,1),
             bottom 1.4s cubic-bezier(.45,0,.55,1),
             opacity .35s ease;
}
.letter-fly.fly{ opacity:1; bottom:120%; transform:translateX(-50%) scale(1.35) rotate(-12deg); }

/* GIF konteyneri */
.gif-container{ display:flex; justify-content:center; align-items:center; min-height:60dvh; padding:16px; }
.result-gif{ width:min(90vw,360px); height:auto; border-radius:12px; display:block; }

/* Desktop düzeni */
@media (min-width:1024px){
  html,body{ overflow:hidden; }
  .content-wrap{ flex-direction:row; justify-content:center; align-items:center; gap:72px; padding:0; min-height:100vh; }
  .note-paper{ width:560px; }
  .offer-box{ width:520px; }
}

/* Tablet / Mobil ayarları */
@media (max-width:768px){
  .note-paper{ padding:28px 18px; }
  .note-paper h2{ font-size:22px; margin-bottom:10px; }
  .note-paper p{ font-size:19px; line-height:1.8; }
  .offer-box{ padding:18px 16px; }
  .btn-group{ gap:10px; }
  .btn-group button{ padding:12px 20px; font-size:16px; }
  .offer-gif{ height:140px; }
}
@media (max-width:480px){
  .content-wrap{ gap:22px; padding:56px 16px 64px; }
  .offer-gif{ height:130px; }
}
@media (prefers-reduced-motion:reduce){ #bg{ display:none; } }

/* Toast */
.toast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-14px);
  z-index:9999; padding:12px 16px; border-radius:12px; color:#fff;
  background:rgba(204,25,86,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-weight:700; letter-spacing:.2px; opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){ .toast,.toast.show{ transition:none; } }

/* Fade altyapısı */
.center.fade{ transition:opacity .22s ease, transform .22s ease; }
.center.fade.hide{ opacity:0; transform:translateY(4px); }

/* Son gönderim kutusu (send-box) */
.send-box {
  flex: 0 0 auto;
  width: min(94vw, 520px);
  padding: 20px 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.send-box p {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0 0 16px;
}

.send-box .offer-gif-wrapper {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  background: transparent;
  border-radius: 12px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.send-box .offer-gif {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px auto 0;
  object-fit: contain;
}

.send-box .ty-sub {
  font-size: 18px;
  font-weight: 500;
  color: #d43d6e;
  margin-top: 10px;
}


/* 📱 Mobil ve tablet için send-box ortalama */
@media (max-width: 1024px){
  /* DİKKAT: başına nokta eklendi */
  .content-wrap{
    min-height: 100svh;           /* iOS için daha güvenli vh */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* Y ekseni ortalama */
    align-items: center;          /* X ekseni ortalama */
    padding: 0;                   /* üstteki büyük padding’i ez */
    gap: 12px;                    /* ister küçük bırak */
  }

  .send-box{
    width: min(94vw, 520px);
    margin: 0 auto;               /* X ekseni ortalama */
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* içerik dikeyde de ortalansın */
    text-align: center;
    gap: 12px;
    position: static;
    top: auto;
    transform: none;
  }

  .send-box p{ margin: 0; line-height: 1.35; }
  .send-box .offer-gif-wrapper{ margin: 6px 0 8px; padding: 0; }
  .send-box .offer-gif{ height: clamp(180px, 28vw, 240px); width: auto; }
}