/* ==========================================================================
   Bugünkü Çalışma kartı v2 (Haftalık Plan üst sırası)
   Yerleşim: bugun.js — eski içerik gizlenir, .pxbg katmanı çizilir.
   Kaldırmak için index.html'deki bugun.css / bugun.js satırlarını silmek yeterli.
   ========================================================================== */

.px-stat-card.today-card.pxbg-on {
  --pxbg-acc: var(--px-acc-rgb, 16, 185, 129);
  --pxbg-ink: #F1F5F9;
  --pxbg-mute: #8B95A7;
  --pxbg-faint: rgba(255, 255, 255, .07);
  --pxbg-line: rgba(255, 255, 255, .1);
  --pxbg-up: #34D399;
  --pxbg-down: #F59E0B;
  --pxbg-gold: #FBBF24;
  padding: 13px 16px 12px !important;
  position: relative !important;
  overflow: visible !important;
  cursor: default;
}
.px-stat-card.today-card.pxbg-on > :not(.pxbg) { display: none !important; }

.pxbg {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  font-family: var(--font-clean-num, 'Inter', sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ---------- Üst satır ---------- */
.pxbg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}
.pxbg-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pxbg-mute);
  white-space: nowrap;
}
.pxbg-live {
  display: none;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgb(var(--pxbg-acc));
}
.pxbg-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(var(--pxbg-acc), .6);
  animation: pxbg-ping 1.6s ease-out infinite;
}
.pxbg.is-running .pxbg-live { display: inline-flex; }
.pxbg.is-paused .pxbg-live { display: inline-flex; color: var(--pxbg-mute); }
.pxbg.is-paused .pxbg-live::before { animation: none; }

.pxbg-goal {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  margin-right: -4px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pxbg-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.pxbg-goal b { color: var(--pxbg-ink); font-weight: 700; }
.pxbg-goal svg { width: 12px; height: 12px; opacity: .6; transition: transform .2s; }
.pxbg-goal:hover, .pxbg-goal[aria-expanded="true"] { background: var(--pxbg-faint); color: var(--pxbg-ink); }
.pxbg-goal[aria-expanded="true"] svg { transform: rotate(180deg); }
.pxbg-goal:focus-visible { outline: 2px solid rgba(var(--pxbg-acc), .6); outline-offset: 1px; }

/* ---------- Değer + karşılaştırma ---------- */
.pxbg-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 auto;
  min-width: 0;
}
.pxbg-val {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--pxbg-ink);
  line-height: 1;
  white-space: nowrap;
}
.pxbg-val b { font-size: 31px; font-weight: 800; letter-spacing: -1.2px; }
.pxbg-val small { font-size: 15px; font-weight: 600; color: var(--pxbg-mute); margin-right: 6px; letter-spacing: 0; }
.pxbg-val small:last-child { margin-right: 0; }

.pxbg-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pxbg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pxbg-delta b { font-weight: 700; }
.pxbg-delta svg { width: 11px; height: 11px; flex: none; }
.pxbg-delta.up b, .pxbg-delta.up svg { color: var(--pxbg-up); }
.pxbg-delta.down b, .pxbg-delta.down svg { color: var(--pxbg-down); }
.pxbg-delta:empty { display: none; }

/* ---------- İlerleme çubuğu ---------- */
.pxbg-bar {
  position: relative;
  height: 8px;
  margin: 12px 0 8px;
  border-radius: 99px;
  background: var(--pxbg-faint);
  overflow: visible;
}
.pxbg-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--pxbg-acc), .55), rgb(var(--pxbg-acc)));
  box-shadow: 0 0 14px -2px rgba(var(--pxbg-acc), .55);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.pxbg.is-running .pxbg-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-100%);
  animation: pxbg-sheen 2.4s ease-in-out infinite;
}
.pxbg-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pxbg-ticks i {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 2px;
  margin-left: -1px;
  background: var(--px-card, #0B0E17);
  opacity: .9;
}
.pxbg-avg {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--pxbg-ink);
  opacity: .55;
  display: none;
}
.pxbg-avg.show { display: block; }
.pxbg-avg::after {
  /* geniş görünmez hover alanı */
  content: "";
  position: absolute;
  inset: -4px -6px;
}

.pxbg.is-done .pxbg-fill {
  background: linear-gradient(90deg, rgba(var(--pxbg-acc), .7), rgb(var(--pxbg-acc)) 70%, var(--pxbg-gold));
}
.pxbg.is-done .pxbg-ticks { display: none; }

/* ---------- Alt satır ---------- */
.pxbg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--pxbg-mute);
  min-width: 0;
}
.pxbg-rem {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pxbg-rem b { color: var(--pxbg-ink); font-weight: 700; }
.pxbg-rem .pxbg-eta { opacity: .85; }
.pxbg.is-done .pxbg-rem b { color: var(--pxbg-up); }
.pxbg-side {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.pxbg-streak {
  display: none;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: var(--pxbg-gold);
}
.pxbg-streak.show { display: inline-flex; }
.pxbg-streak svg { width: 12px; height: 12px; }
.pxbg-pct { font-weight: 800; color: rgb(var(--pxbg-acc)); }
.pxbg-pct.is-zero { color: var(--pxbg-mute); font-weight: 700; }

/* ---------- Hedefe ulaşınca kutlama ---------- */
.px-stat-card.today-card.pxbg-celebrate {
  animation: pxbg-glow 1.8s ease-out 1;
}
.pxbg-celebrate .pxbg-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: pxbg-sheen .9s ease-out 2;
}

/* ---------- Hedef paneli ---------- */
.pxbg-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(var(--px-card, #0B0E17), var(--px-card, #0B0E17)), var(--px-bg, #07090F);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--pxbg-line);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--pxbg-ink);
  transform-origin: top center;
  animation: pxbg-pop-in .18s cubic-bezier(.22, 1, .36, 1);
}
.pxbg-pop[hidden] { display: none; }
.px-stat-card.today-card.pxbg-open { z-index: 80 !important; }
#px-plan-bento-row:has(.pxbg-open) { position: relative; z-index: 70; }
.pxbg-pop-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--pxbg-mute);
  margin-bottom: 10px;
}
.pxbg-week-sum { text-transform: none; letter-spacing: 0; color: var(--pxbg-ink); }
.pxbg-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pxbg-step button {
  all: unset;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--pxbg-ink);
  background: var(--pxbg-faint);
  cursor: pointer;
  transition: background .15s;
}
.pxbg-step button:hover { background: rgba(var(--pxbg-acc), .18); }
.pxbg-step button:disabled { opacity: .35; cursor: default; }
.pxbg-step-val { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.pxbg-step-val small { font-size: 13px; font-weight: 600; color: var(--pxbg-mute); margin-left: 3px; }
.pxbg-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.pxbg-presets button {
  all: unset;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pxbg-mute);
  border: 1px solid var(--pxbg-line);
  cursor: pointer;
  transition: all .15s;
}
.pxbg-presets button:hover { color: var(--pxbg-ink); border-color: rgba(var(--pxbg-acc), .45); }
.pxbg-presets button.sel { color: rgb(var(--pxbg-acc)); border-color: rgba(var(--pxbg-acc), .6); background: rgba(var(--pxbg-acc), .1); }

.pxbg-week {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pxbg-line);
}
.pxbg-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 64px;
  align-items: end;
}
.pxbg-bars .col {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.pxbg-bars .col i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 1px 1px;
  background: rgba(255, 255, 255, .14);
}
.pxbg-bars .col.hit i { background: rgba(var(--pxbg-acc), .75); }
.pxbg-bars .col.today i { background: rgb(var(--pxbg-acc)); box-shadow: 0 0 10px -2px rgba(var(--pxbg-acc), .6); }
.pxbg-bars .goal {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, .28);
  pointer-events: none;
}
.pxbg-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  color: var(--pxbg-mute);
}
.pxbg-days .today { color: var(--pxbg-ink); }
.pxbg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.pxbg-stats div { display: flex; flex-direction: column; gap: 3px; }
.pxbg-stats span { font-size: 10.5px; color: var(--pxbg-mute); }
.pxbg-stats b { font-size: 13px; font-weight: 700; color: var(--pxbg-ink); }

/* ---------- Animasyonlar ---------- */
@keyframes pxbg-ping {
  0% { box-shadow: 0 0 0 0 rgba(var(--pxbg-acc), .55); }
  80%, 100% { box-shadow: 0 0 0 6px rgba(var(--pxbg-acc), 0); }
}
@keyframes pxbg-sheen { to { transform: translateX(100%); } }
@keyframes pxbg-glow {
  0% { box-shadow: 0 0 0 0 rgba(var(--pxbg-acc), .55); }
  100% { box-shadow: 0 0 0 18px rgba(var(--pxbg-acc), 0); }
}
@keyframes pxbg-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pxbg *, .pxbg *::before, .pxbg *::after, .px-stat-card.today-card.pxbg-celebrate { animation: none !important; transition: none !important; }
}

/* ---------- Açık tema (paper) ---------- */
html[data-px-theme="paper"] .px-stat-card.today-card.pxbg-on {
  --pxbg-ink: #0F172A;
  --pxbg-mute: #64748B;
  --pxbg-faint: rgba(15, 23, 42, .07);
  --pxbg-line: rgba(15, 23, 42, .1);
  --pxbg-up: #059669;
  --pxbg-down: #D97706;
  --pxbg-gold: #D97706;
}
html[data-px-theme="paper"] .pxbg-ticks i { background: #FFFFFF; }
html[data-px-theme="paper"] .pxbg-pop { background: #FFFFFF; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .3); }
html[data-px-theme="paper"] .pxbg-bars .col i { background: rgba(15, 23, 42, .12); }
html[data-px-theme="paper"] .pxbg-bars .goal { border-top-color: rgba(15, 23, 42, .3); }

/* ---------- Haftalık Çalışma dalgası: ölçülü neon ---------- */
html[data-px-theme]:not([data-px-theme="paper"]) body .px-stat-card.week-card #px-bento-week-spark path[fill="none"] {
  filter:
    drop-shadow(0 0 2px rgba(var(--px-acc-rgb, 45, 212, 191), .75))
    drop-shadow(0 0 7px rgba(var(--px-acc-rgb, 45, 212, 191), .45)) !important;
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .pxbg-val b { font-size: 26px; }
  .pxbg-val small { font-size: 13px; }
  .pxbg-delta em { display: none; }
}
/* Telefonda kart yarım genişlikte: "Hedef 4s" başlığın yanına sığmayıp karttan taşıyordu → alt satıra insin */
@media (max-width: 480px) {
  .pxbg-head { flex-wrap: wrap; row-gap: 2px; }
  .pxbg-goal { padding-left: 0; margin-left: 0; }
}