/* Deneyimlerin ortak stili (doğum günü iskeleti). Her deneyimin css/style.css dosyası yalnızca temasını ve eklerini taşır. */
:root {
  --bg: #1B1530;
  --bg-deep: #0F0B1E;
  --pink: #F7B8D0;
  --pink-deep: #F49AC1;
  --mint: #A8E6D4;
  --lilac: #C9B6F2;
  --cream: #FFF4E0;
  --gold: #FFD98A;
  --text: #FFF7FB;
  --muted: rgba(255, 240, 248, .68);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- atmosfer katmanları ---------- */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 85% at 50% 58%, transparent 50%, rgba(6, 3, 14, .72) 100%);
  opacity: .75;
}
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(circle at 50% 56%, #FFFFFF 0%, #FFE1EE 32%, rgba(255, 214, 232, .35) 60%, rgba(255, 214, 232, 0) 80%);
  mix-blend-mode: screen;
}

/* ---------- üst çubuk ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(14px + var(--st)) 18px 0;
  pointer-events: none;
}
/* Logo sitedekiyle aynı boyda (assets/css/site.css .brand: 800, 19px); renkler temaya göre */
.brand { font-weight: 800; font-size: 19px; letter-spacing: -.02em; opacity: .92; }
.brand em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); }
/* Logo bağlantı olduğunda (kendine niyet /lumi): üst çubuk tıklamayı sahneye geçirir, logo kendisi alır */
a.brand.is-link { color: inherit; text-decoration: none; pointer-events: auto; padding: 8px 6px; margin: -8px -6px; border-radius: 10px; }
a.brand.is-link:hover { opacity: 1; }
.icon-btn {
  pointer-events: auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.icon-btn .off { display: none; }
.icon-btn.muted .on { display: none; }
.icon-btn.muted .off { display: block; }

/* ---------- metin bloğu ---------- */
.copy {
  position: fixed; left: 0; right: 0; z-index: 10;
  top: calc(max(64px, 8.5vh) + var(--st));
  padding: 0 22px; text-align: center; pointer-events: none;
}
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .32em; color: var(--mint);
  margin-bottom: 14px; min-height: 1em;
}
.headline {
  font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(34px, 9.4vw, 74px);
  text-wrap: balance;
}
.headline .plain { display: block; }
.headline .accent {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 500;
  letter-spacing: -.015em; font-size: 1.1em; line-height: 1.08; color: var(--pink);
  text-shadow: 0 0 28px rgba(244, 154, 193, .45), 0 0 2px rgba(255, 220, 235, .5);
  padding-bottom: .06em;
}
.headline.big .accent { font-size: 1.75em; line-height: 1.02; }
.headline .w, .headline .ch { display: inline-block; will-change: transform, opacity, filter; }
.headline .w { white-space: pre; }
.headline .wd { display: inline-block; white-space: nowrap; }
.sub {
  margin: 14px auto 0; max-width: 30ch; font-size: 15.5px; line-height: 1.5; color: var(--muted);
  min-height: 1.5em;
}

@media (min-aspect-ratio: 1/1) {
  .copy { top: calc(6.5vh + var(--st)); }
  .headline { font-size: clamp(34px, 5.2vw, 70px); }
}

/* ---------- butonlar ---------- */
.actions {
  position: fixed; left: 0; right: 0; z-index: 15;
  bottom: calc(30px + var(--sb));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 22px; pointer-events: none;
}
.btn {
  pointer-events: auto; cursor: pointer;
  font: 700 16px/1 var(--sans); letter-spacing: -.01em;
  border: 0; border-radius: 999px; padding: 17px 28px; min-width: 228px;
  display: inline-flex; gap: 10px; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .2s ease;
  touch-action: none;
}
.btn:active { transform: scale(.96); }
.btn .ico { font-size: 18px; line-height: 1; }
.btn.primary {
  background: linear-gradient(180deg, #FFD6E6 0%, #F49AC1 100%); color: #3A1430;
  box-shadow: 0 12px 34px -10px rgba(244, 154, 193, .75), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn.mint {
  background: linear-gradient(180deg, #D4F7EC 0%, #A8E6D4 100%); color: #12382F;
  box-shadow: 0 12px 34px -10px rgba(168, 230, 212, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn.ghost {
  background: rgba(255, 255, 255, .07); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn.small { min-width: 0; padding: 13px 20px; font-size: 14px; }
.btn.pulse { animation: pulse 2.4s ease-in-out infinite; }
.btn.holding { transform: scale(.94); box-shadow: 0 0 0 10px rgba(168, 230, 212, .18), 0 0 40px rgba(168, 230, 212, .5); }
.btn:disabled { opacity: .45; cursor: default; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(244, 154, 193, .75), 0 0 0 0 rgba(247, 184, 208, .45), inset 0 1px 0 rgba(255, 255, 255, .7); }
  50% { box-shadow: 0 12px 34px -10px rgba(244, 154, 193, .75), 0 0 0 14px rgba(247, 184, 208, 0), inset 0 1px 0 rgba(255, 255, 255, .7); }
}
.hint { font-size: 13px; color: var(--muted); text-align: center; max-width: 30ch; line-height: 1.45; pointer-events: none; }

/* ---------- mikrofon göstergesi ---------- */
.mic {
  position: fixed; left: 50%; z-index: 14; width: 72px; height: 72px;
  bottom: calc(118px + var(--sb)); margin-left: -36px;
  display: none; pointer-events: none;
}
.mic-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--mint);
  transform: scale(calc(1 + var(--lvl, 0) * .95));
  opacity: calc(.22 + var(--lvl, 0) * .78);
  transition: transform .06s linear, opacity .06s linear;
}
.mic-ring.r2 { border-color: var(--pink); transform: scale(calc(1 + var(--lvl, 0) * 1.6)); opacity: calc(var(--lvl, 0) * .6); }
.mic-core {
  position: absolute; inset: 10px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(168, 230, 212, .16); color: var(--mint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mic-note {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: 250px; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.4;
}

/* ---------- mesaj kartı ---------- */
.card {
  position: fixed; left: 12px; right: 12px; z-index: 25;
  bottom: calc(12px + var(--sb));
  max-width: 520px; margin: 0 auto; padding: 22px 22px 16px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(52, 38, 92, .58) 0%, rgba(24, 18, 44, .82) 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  visibility: hidden; transform: translateY(115%);
}
.card-from { font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--mint); text-transform: uppercase; }
.card-msg {
  font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 5.1vw, 24px); line-height: 1.4;
  margin: 12px 0 8px; text-wrap: pretty;
}
.card-msg .w { display: inline-block; white-space: pre; }
.card-sign { font-family: var(--serif); font-style: italic; color: var(--pink); font-size: 19px; }
.card-row { display: flex; gap: 10px; margin-top: 18px; }
.card-row .btn { flex: 1; min-width: 0; padding: 15px 10px; font-size: 15px; }
.emoji-row { display: none; justify-content: space-around; margin-top: 12px; padding: 8px 4px; border-radius: 18px; background: rgba(255, 255, 255, .05); }
.emoji-row button { font-size: 30px; background: none; border: 0; cursor: pointer; transition: transform .15s; padding: 4px 6px; }
.emoji-row button:active { transform: scale(1.3); }
.card-create {
  display: block; margin-top: 14px; text-align: center; color: var(--muted);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.card-create span { color: var(--pink); }

/* ---------- reklam (prototip) ---------- */
.ad {
  position: fixed; inset: 0; z-index: 60; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(9, 6, 18, .94); padding: 24px;
}
.ad-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .3em; color: #12382F;
  background: var(--mint); padding: 6px 12px; border-radius: 999px;
}
.ad-slot {
  width: min(86vw, 340px); aspect-ratio: 6 / 5; border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, .28); display: grid; place-items: center;
  color: var(--muted); font-size: 14px; text-align: center; padding: 20px; line-height: 1.5; white-space: pre-line;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px);
}
.ad-sub { color: var(--muted); font-size: 14px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; z-index: 70; top: calc(66px + var(--st));
  opacity: 0; pointer-events: none;
  background: rgba(30, 22, 55, .86); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}

.float-emoji { position: fixed; z-index: 65; font-size: 34px; pointer-events: none; will-change: transform, opacity; }

/* ---------- yükleme ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(90% 70% at 50% 45%, #2A1F4A 0%, #0F0B1E 70%);
}
.loader-mark { font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.loader-mark em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--pink); }
.loader-dots { display: flex; gap: 8px; justify-content: center; }
.loader-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: dot 1s ease-in-out infinite; }
.loader-dots i:nth-child(2) { background: var(--mint); animation-delay: .15s; }
.loader-dots i:nth-child(3) { background: var(--lilac); animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }

.preview-pill {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 31; top: calc(20px + var(--st));
  max-width: calc(100vw - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: #12382F; background: rgba(168, 230, 212, .92); pointer-events: none;
}
.preview-pill[hidden] { display: none; }
/* Logo (solda ~95 px) ve düğmeler (sağda ~100 px) arasına sığsın: dar ekranda metin "…" ile kısalır */
@media (max-width: 440px) { .preview-pill { max-width: calc(100vw - 216px); padding: 7px 10px; font-size: 11px; } }

.fps { position: fixed; left: 8px; bottom: 8px; z-index: 99; font: 11px/1.3 ui-monospace, monospace; color: #fff; opacity: .7; pointer-events: none; white-space: pre; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .btn.pulse { animation: none; }
}

/* Bildir: üst çubukta küçük bayrak + bildirim kartı */
.topbar .report-btn { margin-left: auto; margin-right: 8px; pointer-events: auto; opacity: .7; }
.topbar .report-btn:hover { opacity: 1; }
.topbar .report-btn.is-done { opacity: .3; }
.topbar .quality-btn { margin-left: auto; margin-right: 8px; pointer-events: auto; opacity: .75; }
.topbar .quality-btn:hover { opacity: 1; }
.topbar .report-btn + .quality-btn { margin-left: 0; }
.quality-sheet .report-reasons span { display: grid; gap: 2px; }
.quality-sheet .report-reasons small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.report-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; padding: 16px; background: rgba(8, 5, 18, .6); backdrop-filter: blur(6px); }
.report-sheet[hidden] { display: none; }
.report-card {
  width: min(100%, 420px); padding: 22px 20px 18px; border-radius: 22px; color: var(--text);
  background: linear-gradient(180deg, #2A2140, #17112B); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); margin-bottom: max(8px, env(safe-area-inset-bottom));
}
.report-card h2 { margin: 0 0 6px; font-size: 19px; }
.report-card p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.report-reasons { display: grid; gap: 8px; }
.report-reasons label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); cursor: pointer; font-size: 15px; }
.report-reasons input { accent-color: var(--pink); width: 18px; height: 18px; }
.report-card textarea {
  width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05); color: var(--text); font: 14px/1.4 var(--sans); resize: none;
}
.report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
@media (min-aspect-ratio: 11/10) { .report-sheet { align-items: center; } }