/* P0-F1 · Bugünün Meydan Okuması kartı — Dashboard + Ana Sayfa ortak stili.
   Sayfalar <link rel="stylesheet" href="./hr-daily-challenge.css"> ile yükler. */
/* ── P0-F1 · Bugünün Meydan Okuması (premium kart) ──────────────────────────
   Yalnız tema token'ları (light tema da çalışır). Animasyonlar hr-dc-* öneklidir ve
   prefers-reduced-motion'da kapanır. Üç kolon: seri · meydan okuma · geri sayım+CTA. */
@keyframes hr-dc-sheen { 0% { background-position:-220% 0; } 100% { background-position:220% 0; } }
@keyframes hr-dc-spin { to { transform:translateY(-50%) rotate(360deg); } }
@keyframes hr-dc-breathe { 0%,100% { transform:scale(1); opacity:.85; } 50% { transform:scale(1.07); opacity:1; } }
@keyframes hr-dc-pop { 0% { transform:scale(.55); opacity:0; } 60% { transform:scale(1.12); opacity:1; } 100% { transform:scale(1); } }
.hr-dc {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  margin-bottom:22px;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--hr-accent) 19%, transparent), transparent 56%),
    radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--hr-accent-2) 13%, transparent), transparent 62%),
    var(--hr-bg-elevated);
  border:1px solid color-mix(in srgb, var(--hr-accent) 36%, var(--hr-border));
  box-shadow:
    0 22px 54px -26px color-mix(in srgb, var(--hr-accent) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--hr-text) 8%, transparent);
}
.hr-dc::before {
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  z-index:2;
  background:linear-gradient(90deg, transparent, var(--hr-accent-2), var(--hr-accent), var(--hr-accent-2), transparent);
  background-size:60% 100%;
  background-repeat:no-repeat;
  animation:hr-dc-sheen 5.5s linear infinite;
}
.hr-dc-rune {
  position:absolute;
  right:-96px;
  top:50%;
  width:390px;
  height:390px;
  color:var(--hr-accent-2);
  opacity:.13;
  pointer-events:none;
  z-index:0;
  transform:translateY(-50%);
  animation:hr-dc-spin 150s linear infinite;
}
.hr-dc-streak {
  position:relative;
  z-index:1;
  width:212px;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;
  border-right:1px solid var(--hr-border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--flame-color, var(--hr-accent-2)) 10%, transparent), transparent 85%);
}
.hr-dc-flame { position:relative; width:112px; height:112px; display:grid; place-items:center; flex:none; }
.hr-dc-flame::before {
  content:'';
  position:absolute;
  inset:16% 8% 2%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--flame-color, var(--hr-accent-2)) 42%, transparent), transparent 68%);
  filter:blur(9px);
  animation:hr-dc-breathe 3.8s ease-in-out infinite;
}
.hr-dc-flame { margin-bottom:6px; }
.hr-dc-flame img {
  position:relative;
  width:104%;
  height:104%;
  object-fit:contain;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--flame-color, var(--hr-accent-2)) 65%, transparent));
}
.hr-dc-flame.is-cold::before { display:none; }
.hr-dc-flame.is-cold img { filter:grayscale(1) brightness(.85); opacity:.45; }
.hr-dc-streak-copy { display:flex; flex-direction:column; align-items:center; min-width:0; }
.hr-dc-streak-copy strong { font:800 38px/1 'JetBrains Mono',monospace; color:var(--hr-text); font-variant-numeric:tabular-nums; }
.hr-dc-streak-label { margin-top:6px; font:600 12px 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--hr-accent-2); }
.hr-dc-streak-hint { margin-top:10px; font-size:12.5px; line-height:1.45; color:var(--hr-text-muted); max-width:170px; }
.hr-dc-streak-next { margin-top:8px; font:500 11px 'JetBrains Mono',monospace; color:var(--hr-text-muted); }
.hr-dc-main { position:relative; z-index:1; min-width:0; padding:26px 30px; display:flex; flex-direction:column; justify-content:center; gap:11px; }
.hr-dc-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font:600 11.5px 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--hr-accent-2); }
.hr-dc-glyph { font-size:14px; text-shadow:0 0 12px color-mix(in srgb, var(--hr-accent-2) 70%, transparent); }
.hr-dc-date { letter-spacing:.04em; text-transform:none; font-weight:500; color:var(--hr-text-muted); }
.hr-dc-title { margin:0; font:700 clamp(22px,2.5vw,31px)/1.15 'Cinzel',serif; letter-spacing:-.005em; color:var(--hr-text); overflow-wrap:anywhere; }
.hr-dc-task { margin:0; max-width:62ch; font-size:14.5px; line-height:1.55; color:var(--hr-text-muted); }
.hr-dc-task b { margin-right:8px; font:600 11.5px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--hr-accent); }
.hr-dc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.hr-dc-chip { font:500 11.5px 'JetBrains Mono',monospace; padding:4px 11px; border-radius:999px; border:1px solid var(--hr-border-strong); color:var(--hr-text-muted); background:color-mix(in srgb, var(--hr-bg) 55%, transparent); }
.hr-dc-done { display:flex; align-items:center; gap:14px; max-width:540px; padding:12px 18px 12px 12px; border-radius:16px; background:color-mix(in srgb, var(--hr-success) 10%, transparent); border:1px solid color-mix(in srgb, var(--hr-success) 40%, transparent); }
.hr-dc-seal { flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--hr-success); background:radial-gradient(circle, color-mix(in srgb, var(--hr-success) 28%, transparent), transparent 74%); border:1.5px solid color-mix(in srgb, var(--hr-success) 58%, transparent); box-shadow:0 0 22px color-mix(in srgb, var(--hr-success) 30%, transparent); animation:hr-dc-pop .65s cubic-bezier(.2,.9,.3,1.2) both; }
.hr-dc-done-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hr-dc-done-copy strong { font:700 17px 'Space Grotesk',sans-serif; color:var(--hr-success); }
.hr-dc-done-copy span { font-size:13.5px; color:var(--hr-text-muted); line-height:1.45; }
.hr-dc-side { position:relative; z-index:1; width:292px; padding:24px 26px; display:flex; flex-direction:column; justify-content:center; gap:16px; border-left:1px solid var(--hr-border); background:linear-gradient(180deg, color-mix(in srgb, var(--hr-bg) 38%, transparent), transparent); }
.hr-dc-reward { display:flex; align-items:baseline; gap:8px; color:var(--hr-accent-2); text-shadow:0 0 22px color-mix(in srgb, var(--hr-accent-2) 38%, transparent); }
.hr-dc-reward-n { font:800 30px/1 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.hr-dc-reward-u { font:600 12.5px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.hr-dc-timer-label { margin-bottom:8px; font:500 11px 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--hr-text-muted); }
.hr-dc-timer { display:flex; gap:8px; }
.hr-dc-t { flex:1; text-align:center; padding:9px 4px 7px; border-radius:11px; border:1px solid var(--hr-border-strong); background:color-mix(in srgb, var(--hr-bg) 62%, transparent); }
.hr-dc-t b { display:block; min-height:24px; font:700 24px/1 'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:var(--hr-text); }
.hr-dc-t i { display:block; margin-top:5px; font:500 9.5px 'JetBrains Mono',monospace; font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--hr-text-muted); }
.hr-dc-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:48px; padding:0 22px;
  border:0; border-radius:12px; cursor:pointer;
  font:700 15px 'Space Grotesk',sans-serif;
  color:var(--hr-text-inverse);
  background:linear-gradient(135deg, var(--hr-accent), color-mix(in srgb, var(--hr-accent) 55%, var(--hr-accent-3)));
  box-shadow:0 0 26px color-mix(in srgb, var(--hr-accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s, box-shadow .2s;
}
.hr-dc-cta:hover { transform:translateY(-2px); box-shadow:0 0 38px color-mix(in srgb, var(--hr-accent) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.hr-dc-cta svg { transition:transform .2s; }
.hr-dc-cta:hover svg { transform:translateX(3px); }
.hr-dc-ghost {
  width:100%; min-height:44px; padding:0 18px;
  border-radius:12px; cursor:pointer;
  font:600 14px 'Space Grotesk',sans-serif;
  color:var(--hr-text);
  background:transparent;
  border:1px solid color-mix(in srgb, var(--hr-success) 45%, var(--hr-border-strong));
  transition:background .2s, border-color .2s;
}
.hr-dc-ghost:hover { background:color-mix(in srgb, var(--hr-success) 10%, transparent); }
.hr-dc-cta:focus-visible, .hr-dc-ghost:focus-visible { outline:2px solid var(--hr-accent-2); outline-offset:3px; }
/* Kompakt sürüm (Ana Sayfa) + anonim teşvik kartı */
.hr-dc--compact { margin-bottom:0; }
.hr-dc--compact .hr-dc-streak { width:170px; padding:16px 12px; }
.hr-dc--compact .hr-dc-flame { width:78px; height:78px; margin-bottom:2px; }
.hr-dc--compact .hr-dc-streak-copy strong { font-size:28px; }
.hr-dc--compact .hr-dc-streak-label { margin-top:4px; font-size:11px; }
.hr-dc--compact .hr-dc-streak-hint, .hr-dc--compact .hr-dc-streak-next { display:none; }
.hr-dc--compact .hr-dc-main { padding:20px 26px; gap:8px; }
.hr-dc--compact .hr-dc-title { font-size:clamp(19px,2vw,25px); }
.hr-dc--compact .hr-dc-side { width:268px; padding:18px 22px; gap:12px; }
.hr-dc--compact .hr-dc-reward-n { font-size:25px; }
.hr-dc--compact .hr-dc-timer-label { margin-bottom:6px; font-size:10px; }
.hr-dc--compact .hr-dc-t { padding:7px 4px 5px; }
.hr-dc--compact .hr-dc-t b { min-height:20px; font-size:20px; }
.hr-dc--compact .hr-dc-t i { margin-top:3px; }
.hr-dc--compact .hr-dc-cta { min-height:44px; }
.hr-dc-lede { margin:0; max-width:58ch; font-size:14.5px; line-height:1.6; color:var(--hr-text-muted); }
.hr-dc--teaser .hr-dc-ghost { border-color:var(--hr-border-strong); }
.hr-dc--teaser .hr-dc-ghost:hover { background:color-mix(in srgb, var(--hr-accent) 10%, transparent); }
.hr-dc--teaser .hr-dc-streak-label { margin-top:6px; text-align:center; }
/* Tamamlandı hali — kutlama tonu: zümrüt */
.hr-dc.is-done {
  border-color:color-mix(in srgb, var(--hr-success) 42%, var(--hr-border));
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--hr-success) 15%, transparent), transparent 56%),
    radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--hr-accent-2) 11%, transparent), transparent 62%),
    var(--hr-bg-elevated);
  box-shadow:0 22px 54px -26px color-mix(in srgb, var(--hr-success) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--hr-text) 8%, transparent);
}
.hr-dc.is-done::before { background-image:linear-gradient(90deg, transparent, var(--hr-success), var(--hr-accent-2), var(--hr-success), transparent); }
.hr-dc.is-done .hr-dc-kicker, .hr-dc.is-done .hr-dc-streak-label { color:var(--hr-success); }
@media (max-width:1100px) {
  .hr-dc-streak { width:176px; }
  .hr-dc-side { width:252px; padding:22px 20px; }
  .hr-dc-main { padding:24px 22px; }
}
@media (max-width:900px) {
  .hr-dc { grid-template-columns:minmax(0,1fr); }
  .hr-dc-streak { width:auto; flex-direction:row; justify-content:flex-start; text-align:left; gap:14px; padding:14px 20px; border-right:0; border-bottom:1px solid var(--hr-border); background:linear-gradient(90deg, color-mix(in srgb, var(--flame-color, var(--hr-accent-2)) 10%, transparent), transparent 80%); }
  .hr-dc-flame { width:76px; height:76px; }
  .hr-dc-streak-copy { align-items:flex-start; }
  .hr-dc-streak-copy strong { font-size:30px; }
  .hr-dc-streak-label { margin-top:4px; }
  .hr-dc-streak-hint { margin-top:6px; max-width:none; }
  .hr-dc-main { padding:20px; }
  .hr-dc-side { width:auto; padding:18px 20px 22px; border-left:0; border-top:1px solid var(--hr-border); }
  .hr-dc-rune { right:-150px; top:34%; }
  .hr-dc--compact .hr-dc-streak { width:auto; padding:12px 18px; }
  .hr-dc--compact .hr-dc-flame { width:60px; height:60px; }
  .hr-dc--compact .hr-dc-main { padding:16px 18px; }
  .hr-dc--compact .hr-dc-side { width:auto; padding:16px 18px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .hr-dc::before, .hr-dc-rune, .hr-dc-flame::before, .hr-dc-seal { animation:none !important; }
  .hr-dc-rune { transform:translateY(-50%); }
  .hr-dc-cta, .hr-dc-cta svg, .hr-dc-ghost { transition:none; }
  .hr-dc-cta:hover, .hr-dc-cta:hover svg { transform:none; }
}