/* ================================================================
   Bucket List — ilerleme halkası, sekmeler, tıklanabilir hedefler,
   seyahat hayalleri (ayrı sekme), kutlama animasyonu
   ================================================================ */
.bk-page { position: relative; z-index: 1; }
.bk-page .container { max-width: 980px; }
:where(.bk-page) section { padding: 0; }
.bk-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.bk-hero { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 30px 34px; border-radius: 22px; background: linear-gradient(135deg, rgba(90,138,106,0.14), rgba(184,149,106,0.12)); border: 1px solid var(--border-light); margin-bottom: var(--space-xl); }
.bk-ring { position: relative; width: 150px; height: 150px; }
.bk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bk-ring circle { fill: none; stroke-width: 12; }
.bk-ring .bg { stroke: var(--border-light); }
.bk-ring .fg { stroke: #5A8A6A; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease-out); }
.bk-ring .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bk-ring .lbl strong { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--text-primary); }
.bk-ring .lbl span { font-size: 0.72rem; color: var(--text-muted); }
.bk-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; margin: 6px 0 8px; }
.bk-hero p { color: var(--text-secondary); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; }
.bk-kpis { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.bk-kpis div strong { display: block; font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.bk-kpis div span { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.bk-tabs { display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; margin: 0 auto 18px; border-radius: 99px; background: var(--bg-secondary); border: 1px solid var(--border-light); }
.bk-tab { border: none; background: none; padding: 10px 18px; border-radius: 99px; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.bk-tab .n { display: inline-block; min-width: 22px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 0.72rem; background: var(--border-light); color: var(--text-muted); }
.bk-tab[aria-selected="true"] { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.bk-tab[aria-selected="true"] .n { background: var(--accent); color: #fff; }
.bk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.bk-chip { padding: 5px 13px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 0.78rem; }
.bk-chip[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-primary); }

.bk-list { display: grid; gap: 12px; }
.bk-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-light); transition: transform 250ms var(--ease-out), box-shadow 250ms, background 300ms, opacity 300ms; }
.bk-item:hover { box-shadow: var(--shadow-md); }
.bk-check { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--border); background: var(--bg-card); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 250ms var(--ease-spring); }
.bk-check:hover { border-color: #5A8A6A; transform: scale(1.08); }
.bk-check:focus-visible { outline: 3px solid var(--amber-glow); outline-offset: 2px; }
.bk-item.done .bk-check { background: #5A8A6A; border-color: #5A8A6A; }
.bk-item.done { background: color-mix(in srgb, #5A8A6A 6%, var(--bg-card)); }
.bk-item .emo { font-size: 1.8rem; width: 40px; text-align: center; flex-shrink: 0; }
.bk-item .info { flex: 1; min-width: 0; }
.bk-item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.bk-item.done h3 { color: var(--text-primary); }   /* yeşil tik yeterli; üstü çizilmez */
.bk-item .sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
.bk-item .sub .when { color: #5A8A6A; font-weight: 600; }
.bk-item .cat { padding: 3px 10px; border-radius: 99px; font-size: 0.7rem; background: var(--bg-secondary); color: var(--text-secondary); white-space: nowrap; }
.bk-item .ph { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.bk-item.pop { animation: bkpop 500ms var(--ease-spring); }
@keyframes bkpop { 40% { transform: scale(1.03); } }

.bk-dreams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bk-dream { position: relative; padding: 22px; border-radius: 18px; border: 1px dashed var(--border); background: var(--bg-card); }
.bk-dream .flag { font-size: 2rem; margin-bottom: 10px; }
.bk-dream h3 { font-size: 1.45rem; line-height: 1.15; }
.bk-dream .loc { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 4px 0 10px; }
.bk-dream p { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.45; }
.bk-dream .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bk-dream .facts span { padding: 3px 10px; border-radius: 99px; background: var(--bg-secondary); font-size: 0.72rem; color: var(--text-secondary); }
.bk-dream .st { display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; }
.bk-dream .st.plan { background: rgba(142,123,184,0.14); color: var(--lavender); }
.bk-dream .st.done { background: var(--amber-glow); color: var(--accent); }
.bk-dream .st.wish { background: var(--bg-secondary); color: var(--text-muted); }
.bk-dream .prio { position: absolute; top: 18px; right: 20px; color: #D9667B; letter-spacing: 2px; }

.bk-empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--text-muted); }
.bk-empty .icon { font-size: 2.6rem; margin-bottom: 10px; }
.bk-note { text-align: center; font-size: 0.74rem; color: var(--text-muted); margin-top: 22px; }

/* Kutlama konfetisi */
.bk-confetti { position: fixed; pointer-events: none; z-index: 9999; width: 8px; height: 12px; border-radius: 2px; animation: bkfall 1100ms cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes bkfall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.bk-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); padding: 12px 22px; border-radius: 99px; background: #1C1C1A; color: #fff; font-size: 0.9rem; z-index: 9999; opacity: 0; transition: all 300ms; pointer-events: none; }
.bk-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .bk-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 18px; }
  .bk-kpis { justify-content: center; }
  .bk-item { padding: 12px 14px; gap: 12px; }
  .bk-item .emo { display: none; }
  .bk-item .cat { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bk-confetti { display: none; } }