/* KPSS Pusula — Merve'ye özel tema ve kutlama animasyonları */

body.merve-theme {
  --brand: #e11d48;
  --brand-strong: #be123c;
  --brand-soft: #fff1f2;
  --brand-ink: #9f1239;
  --accent: #db2777;
  --accent-soft: #fdf2f8;
}

@media (prefers-color-scheme: dark) {
  body.merve-theme {
    --brand: #fb7185;
    --brand-strong: #fda4af;
    --brand-soft: #2b141b;
    --brand-ink: #fecdd3;
    --accent: #f472b6;
    --accent-soft: #2a1220;
  }
}

body.merve-theme .hero::before {
  background:
    radial-gradient(600px 300px at 15% 0%, color-mix(in srgb, #e11d48 13%, transparent), transparent 70%),
    radial-gradient(500px 260px at 90% 10%, color-mix(in srgb, #db2777 11%, transparent), transparent 70%);
}

/* ---------- Giriş (kilit) ekranı ---------- */

.merve-gate {
  min-height: calc(100vh - 64px);
  display: grid; place-items: center; padding: 40px 20px;
}
.merve-gate .gate-card {
  max-width: 420px; width: 100%; text-align: center; padding: 40px 32px;
}
.merve-gate .gate-heart {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--rose-soft); color: var(--rose);
  display: grid; place-items: center;
  animation: heartbeat 1.6s ease-in-out infinite;
}
.merve-gate .gate-heart svg { width: 36px; height: 36px; fill: currentColor; }
.merve-gate h1 { font-size: 24px; margin-bottom: 8px; }
.merve-gate p { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.merve-gate input {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; text-align: center; outline: none;
  transition: border-color .15s;
}
.merve-gate input:focus { border-color: var(--rose); }
.merve-gate .gate-error { color: var(--bad); font-size: 13.5px; min-height: 20px; margin-top: 10px; }
.merve-gate .btn { width: 100%; margin-top: 12px; }

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.08); }
  40% { transform: scale(1); }
  60% { transform: scale(1.06); }
}

/* ---------- Merve paneli ---------- */

.merve-hello { padding: 44px 0 8px; }
.merve-hello .mh-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.merve-hello h1 { font-size: clamp(26px, 4vw, 36px); }
.mh-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--rose-soft); color: var(--rose);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.mh-badge svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.merve-hello p { color: var(--muted); margin-top: 6px; }

.love-note {
  position: relative;
  background: linear-gradient(135deg, var(--rose-soft), var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--rose) 25%, transparent);
  border-radius: var(--radius); padding: 26px 28px; margin-top: 24px;
  box-shadow: var(--shadow);
}
.love-note .ln-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--rose); font-weight: 700; font-family: var(--font-head); font-size: 14px;
  margin-bottom: 10px;
}
.love-note .ln-head svg { width: 18px; height: 18px; fill: currentColor; }
.love-note blockquote { font-size: 16.5px; line-height: 1.7; color: var(--ink); font-style: normal; }
.love-note .ln-sign { text-align: right; margin-top: 12px; color: var(--rose); font-weight: 700; font-size: 14.5px; }
.love-note .ln-refresh {
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; color: var(--rose); cursor: pointer; opacity: .7; padding: 6px;
}
.love-note .ln-refresh:hover { opacity: 1; }

/* Günlük hedef */
.goal-card .goal-track { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 14px 0 8px; }
.goal-card .goal-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose), var(--accent)); transition: width .5s ease; }
.goal-card .goal-nums { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.goal-card .goal-done { color: var(--good); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Kutlama overlay + kalp yağmuru ---------- */

.merve-celebrate {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, #881337 30%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; transition: opacity .3s ease;
}
.merve-celebrate.show { opacity: 1; }

.merve-celebrate .mc-card {
  background: var(--surface); border-radius: 24px; max-width: 420px; width: 100%;
  padding: 40px 32px; text-align: center; box-shadow: var(--shadow-lg);
  transform: scale(.85); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.merve-celebrate.show .mc-card { transform: scale(1); }

.merve-celebrate .mc-heart {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--rose-soft); color: var(--rose);
  display: grid; place-items: center;
  animation: heartbeat 1.2s ease-in-out infinite;
}
.merve-celebrate .mc-heart svg { width: 44px; height: 44px; }
.merve-celebrate h3 { font-size: 22px; margin-bottom: 10px; }
.merve-celebrate p { color: var(--ink-2); font-size: 16px; line-height: 1.65; margin-bottom: 6px; }
.merve-celebrate small { display: block; color: var(--rose); font-weight: 700; font-size: 14px; margin-bottom: 20px; }

.heart-drop {
  position: fixed; top: -40px; z-index: 101; color: var(--rose);
  animation: heart-fall linear forwards; pointer-events: none;
  opacity: .9;
}
@keyframes heart-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: .95; }
  100% { transform: translateY(110vh) rotate(320deg); opacity: .4; }
}

/* Dinamik cümle satırı */
.love-note .ln-dyn {
  margin-top: 10px; font-size: 14px; color: var(--ink-2);
  padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--rose) 30%, transparent);
}

/* Hedef seçim çipleri */
.goal-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body); transition: all .15s;
}
.chip-btn:hover { border-color: var(--rose); color: var(--rose); }
.chip-btn.active { background: var(--rose); border-color: var(--rose); color: #fff; }

/* Haftalık mini grafik */
.week-chart { display: flex; gap: 6px; align-items: flex-end; margin-top: 16px; height: 74px; }
.week-chart .wc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.week-chart .wc-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.week-chart .wc-bar {
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--rose), var(--accent));
  min-height: 3px; transition: height .5s ease;
}
.week-chart span { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* Yumuşak destek kutusu (zorlandığı anlar) */
.merve-celebrate.soft { background: color-mix(in srgb, #881337 18%, transparent); }
.merve-celebrate.soft .mc-heart { animation-duration: 2.4s; }

/* ---------- Giriş ekranı arka planı ---------- */

.merve-gate { position: relative; overflow: hidden; }
.mg-arka {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 300px at 20% 10%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 70%),
    radial-gradient(500px 280px at 85% 85%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.merve-gate .gate-card { position: relative; z-index: 1; }
.merve-gate .mg-alt {
  margin-top: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.6;
}

/* ---------- Panel düzeni ---------- */

.mv-sayfa { padding-bottom: 20px; }
.mv-hos { padding: 40px 0 6px; }
.mv-hos-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mv-hos h1 { font-size: clamp(26px, 4vw, 36px); }
.mv-hos p { color: var(--muted); margin-top: 8px; }

/* Geri sayım şeridi */
.mv-sayac {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--rose-soft), var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--rose) 24%, transparent);
  border-radius: var(--radius); padding: 20px 24px; margin-top: 20px;
}
.mv-sayac-sol { display: flex; align-items: baseline; gap: 8px; flex: none; }
.mv-sayac-sol b {
  font-family: var(--font-head); font-size: 46px; font-weight: 800; line-height: 1; color: var(--rose);
}
.mv-sayac-sol span { font-size: 14px; color: var(--muted); font-weight: 600; }
.mv-sayac-sag { flex: 1; min-width: 220px; }
.mv-sayac-sag b { display: block; font-family: var(--font-head); font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.mv-sayac-sag p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

/* Sayaç kutuları */
.mv-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.mv-k {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.mv-k span {
  display: flex; align-items: center; gap: 6px; color: var(--muted);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px;
}
.mv-k span .icon { width: 14px; height: 14px; color: var(--rose); }
.mv-k b { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1.05; }
.mv-k small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.mv-seri-not {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--rose-soft); border-radius: 10px; padding: 10px 14px;
  font-size: 14px; color: var(--brand-ink); font-weight: 500;
}
.mv-seri-not .icon { color: var(--rose); flex: none; }

.mv-baslik { font-size: 22px; margin: 34px 0 16px; }
.mv-kart h3 { font-size: 17px; }
.mv-alt {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center;
}
.mv-alt p { color: var(--muted); font-size: 13.5px; max-width: 560px; margin: 0 auto 12px; line-height: 1.7; }
.mv-alt-linkler { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.mv-alt-linkler a { font-size: 13px; color: var(--muted); text-decoration: underline; }
.mv-alt-linkler a:hover { color: var(--rose); }

/* ---------- Kilometre taşı mektubu ---------- */

.merve-mektup {
  position: fixed; inset: 0; z-index: 130;
  background: color-mix(in srgb, #881337 42%, transparent);
  backdrop-filter: blur(7px);
  display: grid; place-items: center; padding: 22px;
  opacity: 0; transition: opacity .35s ease; overflow-y: auto;
}
.merve-mektup.show { opacity: 1; }
.merve-mektup .mk-kagit {
  position: relative; max-width: 520px; width: 100%;
  background: linear-gradient(160deg, #fffaf7, #fff5f7);
  border-radius: 20px; padding: 42px 36px 32px; text-align: center;
  box-shadow: 0 30px 70px -20px rgba(136, 19, 55, .5);
  transform: translateY(24px) scale(.96);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}
.merve-mektup.show .mk-kagit { transform: translateY(0) scale(1); }
@media (prefers-color-scheme: dark) {
  .merve-mektup .mk-kagit { background: linear-gradient(160deg, #2a1620, #241320); }
}
.merve-mektup .mk-muhur {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #e11d48, #db2777); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(225, 29, 72, .7);
  animation: heartbeat 1.8s ease-in-out infinite;
}
.merve-mektup .mk-muhur svg { width: 26px; height: 26px; }
.merve-mektup .mk-etiket {
  display: inline-block; background: rgba(225, 29, 72, .1); color: #e11d48;
  border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px;
}
.merve-mektup h3 {
  font-family: var(--font-head); font-size: 24px; color: #9f1239; margin-bottom: 16px;
}
.merve-mektup p {
  font-size: 15.5px; line-height: 1.8; color: #4a2733; text-align: left; margin-bottom: 18px;
}
@media (prefers-color-scheme: dark) { .merve-mektup p { color: #f0d7de; } .merve-mektup h3 { color: #fda4af; } }
.merve-mektup .mk-imza {
  text-align: right; font-family: var(--font-head); font-weight: 700;
  color: #e11d48; font-size: 15px; margin-bottom: 24px;
}
.merve-mektup .btn { width: 100%; }

/* Merve modu: test motoru dokunuşları */
body.merve-theme .progress-fill { background: linear-gradient(90deg, #e11d48, #db2777); }
body.merve-theme .logo .logo-badge { background: linear-gradient(135deg, #e11d48, #db2777); }