/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
  background: radial-gradient(1200px 600px at 70% -10%, #e9f3ff 0%, #f7fbff 40%, #ffffff 100%);
}

.app { min-height: 100%; display: flex; flex-direction: column; align-items: center; }
.header { padding: 28px 16px 0; }
.title { margin: 0; font-weight: 700; letter-spacing: 0.3px; font-size: 28px; }
.header-icons { display: flex; gap: 8px; margin-top: 8px; color: #f59e0b; }
.header-icons .ico.heart { color: #ef4444; }
.header-icons .ico.star { color: #fbbf24; }
.header-icons .ico.sparkle { color: #60a5fa; }
.footer { padding: 24px; color: #64748b; width: 100%; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-bottom { display: grid; gap: 8px; margin-top: 12px; }
.contact, .social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef2ff; border: 1px solid #e2e8f0; }
.legal { color: #94a3b8; font-size: 12px; }

.stage { width: 100%; max-width: 920px; padding: 16px; display: grid; place-items: center; gap: 24px; }

.prompt { text-align: center; display: grid; gap: 12px; }
.prompt p { margin: 8px 0 0; font-size: 18px; color: #334155; }

.btn { cursor: pointer; appearance: none; border: 1px solid #cfe0ff; background: #eef5ff; color: #0b1324; padding: 14px 20px; border-radius: 16px; font-weight: 700; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; letter-spacing: .2px; min-height: 44px; min-width: 44px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(66,135,245,0.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.primary { background: linear-gradient(180deg, #6366f1, #3b82f6); color: #fff; border: none; }
.btn.outline { background: transparent; border-color: #cbd5e1; }
.btn.fun { position: relative; overflow: hidden; }
.btn.fun:after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 40px at var(--rx, -20%) 10%, rgba(255,255,255,.35), transparent 60%); transition: .25s; }
.btn.fun:hover { transform: translateY(-2px) scale(1.01); }
.btn.fun:active { transform: translateY(0) scale(0.99); }
.btn.fun.boop { animation: boop .35s ease; }
@keyframes boop { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04) rotate(-1deg);} 100% { transform: translateY(0) scale(1);} }

/* Fanus */
.fanus { position: relative; width: min(420px, 90vw); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.fanus-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(64,112,211,0.12)); }
.shine { animation: shine-sweep 3.8s linear infinite; }
.shine2 { animation: shine-sweep 5.2s linear infinite; animation-delay: 1.2s; opacity: .5; }
@keyframes shine-sweep {
  0% { transform: translateX(0) rotate(20deg); opacity: .0; }
  10% { opacity: .7; }
  60% { opacity: .25; }
  100% { transform: translateX(320px) rotate(20deg); opacity: 0; }
}

.slips { position: absolute; inset: 16% 16% 22% 16%; perspective: 900px; overflow: hidden; }
.snow { position: absolute; inset: 16% 16% 22% 16%; pointer-events: none; overflow: hidden; }
.snow .flake { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 10px rgba(255,255,255,.6); opacity: 0; }
@keyframes snowfall { from { transform: translateY(-10px); opacity: 1; } to { transform: translateY(170px); opacity: 0; } }

.slip { position: absolute; top: 50%; left: 50%; width: 64px; height: 22px; background: #fffaf0; border: 1px solid #f1d7a6; border-radius: 3px; transform-style: preserve-3d; box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transform: translate(-50%, -50%) translate(var(--x,0px), var(--y,0px)) rotate(var(--r,0deg)); }
.slip:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fffef6, #fff8e1); opacity: .6; border-radius: 3px; }
.slips.idle .slip { animation: bob 2.6s ease-in-out infinite; animation-delay: calc(var(--d,0s)); }
.slips.drift .slip { animation: drift 5.5s ease-in-out infinite; animation-delay: calc(var(--d,0s)); }
@keyframes drift { 0%,100% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); } 25% { transform: translate(-50%, -50%) translate(calc(var(--x) + 6px), calc(var(--y) + 2px)) rotate(calc(var(--r) + .6deg)); } 50% { transform: translate(-50%, -50%) translate(calc(var(--x) - 4px), calc(var(--y) + 6px)) rotate(calc(var(--r) - .8deg)); } 75% { transform: translate(-50%, -50%) translate(calc(var(--x) + 3px), calc(var(--y) - 2px)) rotate(calc(var(--r) + .4deg)); } }
@keyframes bob { 0%,100% { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + 0px)) rotate(calc(var(--r))); } 50% { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + 4px)) rotate(calc(var(--r) + 1deg)); } }
.slips.gravity .slip { animation: jiggle 0.6s ease-in-out 2; }
@keyframes jiggle { 0% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); } 50% { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + 6px)) rotate(calc(var(--r) + 3deg)); } 100% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); } }

/* Karıştırma animasyonu */
.shuffling { animation: wobble 1.6s ease-in-out infinite; }
.shake-strong { animation: shakeStrong 0.5s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes shakeStrong { 10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); } 20%, 80% { transform: translate3d(2px, 0, 0) rotate(1deg);} 30%, 50%, 70% { transform: translate3d(-3px, 0, 0) rotate(-2deg);} 40%, 60% { transform: translate3d(3px, 0, 0) rotate(2deg);} }
@keyframes wobble {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
  75% { transform: rotate(0.8deg); }
}
.shuffling .slip { animation: swirl 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.06s); }
@keyframes swirl {
  0%,100% { transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(-80px) translateX(0) rotateY(0); }
  50% { transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg + 20deg)) translateY(-50px) translateX(10px) rotateY(22deg); }
}

/* Sonuç kağıdı */
.result { display: grid; justify-items: center; gap: 16px; margin-top: 8px; }
.paper { width: min(520px, 92vw); background: var(--paperBg, linear-gradient(180deg, #ffffff, #fbfdff)); border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 12px 40px rgba(15,23,42,0.08); transform-origin: center; transform: scale(0.9) translateY(10px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; overflow: hidden; position: relative; }
.paper:before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; padding: 10px; background:
  repeating-linear-gradient( 45deg, var(--borderA, rgba(255,0,124,.12)) 0 8px, var(--borderB, rgba(66,135,245,.12)) 8px 16px ),
  linear-gradient(180deg, #ffffff, #fbfdff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.paper.open { opacity: 1; transform: scale(1) translateY(0); }
.paper:after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background:
  radial-gradient(circle at 22% 28%, var(--texA, #f0f9ff) 0 22%, transparent 23% 100%),
  radial-gradient(circle at 72% 62%, var(--texB, #fff0f6) 0 18%, transparent 19% 100%);
  transform: rotate(var(--texAngle, 0deg)); }

/* Yırtık kenar maskesi */
.paper.torn { position: relative; }
.paper.torn:before { padding: 14px; }
.paper.torn .paper-inner { position: relative; z-index: 1; }
.paper.torn:after {
  mask-image: radial-gradient(12px 12px at 10px 10px, black 60%, transparent 61%),
               radial-gradient(14px 14px at calc(100% - 10px) 14px, black 60%, transparent 61%),
               radial-gradient(12px 12px at 14px calc(100% - 10px), black 60%, transparent 61%),
               radial-gradient(14px 14px at calc(100% - 12px) calc(100% - 12px), black 60%, transparent 61%);
  -webkit-mask-image: radial-gradient(12px 12px at 10px 10px, black 60%, transparent 61%),
                      radial-gradient(14px 14px at calc(100% - 10px) 14px, black 60%, transparent 61%),
                      radial-gradient(12px 12px at 14px calc(100% - 10px), black 60%, transparent 61%),
                      radial-gradient(14px 14px at calc(100% - 12px) calc(100% - 12px), black 60%, transparent 61%);
  mask-composite: exclude;
}
.paper-inner { padding: 24px; display: grid; place-items: center; min-height: 120px; }
.quote { margin: 0; font-size: clamp(18px, 3.6vw, 26px); line-height: 1.55; text-align: center; color: #0b1324; letter-spacing: .1px; }
.hashtag { margin: 8px 0 0; font-size: 14px; color: #64748b; }

.actions { display: none; gap: 10px; }
.actions.show { display: flex; }

/* Fly-out animasyonu için başlangıç konumu */
.paper.fly-in { animation: flyIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes flyIn {
  0% { transform: translateY(-120px) scale(.6) rotate(-3deg); opacity: 0; }
  60% { transform: translateY(10px) scale(1.03) rotate(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

/* Konfeti */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti .piece { position: absolute; width: 10px; height: 14px; opacity: 0; transform: translateY(-20px) rotate(0); border-radius: 2px; }
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(240px) rotate(360deg); }
}

/* Durum görselleştirmeleri */
.state-prompt #fanus { filter: none; }
.state-shuffle #fanus { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.state-result #prompt { display: none; }

/* Ek görsel dokunuşlar */
.paper { background: linear-gradient(180deg, #ffffff, #fbfdff); }
.fanus-svg { opacity: .96; }
.slip { background: linear-gradient(180deg, #fffaf0, #fffef9); }

/* Rim glow animation */
.rim-glow { stroke-linecap: round; animation: rim 4s linear infinite; transform-origin: 50% 50%; }
@keyframes rim { to { stroke-dashoffset: -80; transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 520px) {
  .title { font-size: 22px; }
  .prompt p { font-size: 16px; }
  .fanus { width: min(360px, 96vw); }
  .paper { width: min(480px, 94vw); }
  .btn { width: 100%; }
  .footer-top { align-items: flex-start; }
}

/* Tablet uyarlamaları */
@media (min-width: 521px) and (max-width: 900px) {
  .fanus { width: min(420px, 90vw); }
  .paper { width: min(560px, 92vw); }
}

/* Dokunmatik erişilebilirlik */
@media (hover: none) and (pointer: coarse) {
  .btn { padding: 16px 22px; border-radius: 18px; min-height: 48px; }
}