/* ═══════════════════════════════════════════════════════════════════════════
   BNT Widget Animations — Her widget için içsel micro-animasyonlar
   GPU-only (transform + opacity + filter) — prefers-reduced-motion korumalı
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── @keyframes kitaplığı ───────────────────────────────────────────────── */

@keyframes bnt-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}
@keyframes bnt-float-sm {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-4px) rotate(-3deg); }
    66%       { transform: translateY(-2px) rotate(3deg); }
}
@keyframes bnt-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 0px var(--accent)); opacity: 1; }
    50%       { filter: drop-shadow(0 0 12px var(--accent)); opacity: .88; }
}
@keyframes bnt-pulse-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes bnt-tick-flash {
    0%   { opacity: 1; }
    8%   { opacity: .55; }
    16%  { opacity: 1; }
}
@keyframes bnt-digit-pop {
    0%   { transform: scaleY(1); }
    20%  { transform: scaleY(.85); }
    50%  { transform: scaleY(1.06); }
    100% { transform: scaleY(1); }
}
@keyframes bnt-price-up {
    0%   { color: inherit; }
    25%  { color: #4ade80; background: rgba(74,222,128,.12); border-radius: 6px; }
    100% { color: inherit; background: transparent; }
}
@keyframes bnt-price-dn {
    0%   { color: inherit; }
    25%  { color: #f87171; background: rgba(248,113,113,.12); border-radius: 6px; }
    100% { color: inherit; background: transparent; }
}
@keyframes bnt-slide-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bnt-slide-in-left {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes bnt-fade-scale-in {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes bnt-check-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35) rotate(-10deg); }
    70%  { transform: scale(.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes bnt-del-out {
    0%   { opacity: 1; transform: translateX(0) scaleX(1); max-height: 60px; margin-bottom: 4px; }
    100% { opacity: 0; transform: translateX(20px) scaleX(.85); max-height: 0; margin-bottom: 0; }
}
@keyframes bnt-quote-swap {
    0%   { opacity: 1; filter: blur(0); }
    40%  { opacity: 0; filter: blur(4px); }
    60%  { opacity: 0; filter: blur(4px); }
    100% { opacity: 1; filter: blur(0); }
}
@keyframes bnt-qmark-breathe {
    0%, 100% { opacity: .18; transform: rotate(-3deg); }
    50%       { opacity: .28; transform: rotate(3deg); }
}
@keyframes bnt-ring-pulse {
    0%   { stroke-opacity: 1; }
    50%  { stroke-opacity: .55; }
    100% { stroke-opacity: 1; }
}
@keyframes bnt-sway {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(-8deg); }
    75%       { transform: rotate(8deg); }
}
@keyframes bnt-temp-countup {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bnt-fc-stagger {
    from { opacity: 0; transform: translateY(8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bnt-streak-glow {
    0%, 100% { text-shadow: none; }
    50%       { text-shadow: 0 0 12px var(--accent), 0 0 24px color-mix(in srgb,var(--accent) 40%,transparent); }
}
@keyframes bnt-news-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes bnt-news-rotate {
    0%, 100% { transform: scale(1.2) rotate(0deg); }
    25%      { transform: scale(1.2) rotate(-8deg); }
    75%      { transform: scale(1.2) rotate(8deg); }
}
@keyframes bnt-shortcut-hover {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-3px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}


/* ══════════════════════════════════════════════════════════════════════════
   🕐 CLOCK — analog glow
   ══════════════════════════════════════════════════════════════════════════ */

/* Analog — çalışırken saniye ibresi vurgu rengiyle parlar */
.clk-analog [data-s] {
    transition: transform .08s cubic-bezier(.4,2.5,.6,1);
    filter: drop-shadow(0 0 0px var(--accent));
}
/* Hafif glow — ibre her tik anında tetiklenmeyecek, CSS state yeterli */
#widget-clock:hover .clk-analog [data-s] {
    filter: drop-shadow(0 0 4px var(--accent));
    transition: filter .4s ease;
}

/* Analog merkez nokta: daima pulse */
.clk-analog circle:last-of-type {
    animation: bnt-pulse-glow 2s ease-in-out infinite;
}

/* Tarih satırı: fade-in ile başlar */
[data-clk-date], [data-clk-adate] {
    animation: bnt-slide-in-up .4s .1s cubic-bezier(.2,.8,.2,1) both;
}


/* ══════════════════════════════════════════════════════════════════════════
   🌤 WEATHER — ikon float + forecast stagger
   ══════════════════════════════════════════════════════════════════════════ */

/* Hava ikonu sürekli sallanır */
.wt-icon {
    animation: bnt-float 4s ease-in-out infinite;
    will-change: transform;
}

/* Sıcaklık değeri: render tetiklenince fade-up */
[data-temp].bnt-anim-in {
    animation: bnt-temp-countup .35s cubic-bezier(.2,.8,.2,1) both;
}

/* 5 günlük tahmin kartları: sırayla (stagger) girer */
.wt-fc-col {
    animation: bnt-fc-stagger .4s cubic-bezier(.2,.8,.2,1) both;
    will-change: transform, opacity;
}
.wt-fc-col:nth-child(1) { animation-delay: .04s; }
.wt-fc-col:nth-child(2) { animation-delay: .10s; }
.wt-fc-col:nth-child(3) { animation-delay: .16s; }
.wt-fc-col:nth-child(4) { animation-delay: .22s; }
.wt-fc-col:nth-child(5) { animation-delay: .28s; }

/* Forecast ikon: hover'da sway */
.wt-fc-icon svg:hover {
    animation: bnt-sway .6s ease-in-out;
}

/* Extras (nem, rüzgar): slide-in */
[data-extras]:not(:empty) .wt-ext {
    animation: bnt-slide-in-up .3s cubic-bezier(.2,.8,.2,1) both;
}


/* ══════════════════════════════════════════════════════════════════════════
   💰 CRYPTO — fiyat flash + satır stagger
   ══════════════════════════════════════════════════════════════════════════ */

/* Fiyat değiştiğinde JS .bnt-up / .bnt-dn sınıfı ekler → kaldırır */
.cry-price.bnt-up {
    animation: bnt-price-up .9s ease both;
}
.cry-price.bnt-dn {
    animation: bnt-price-dn .9s ease both;
}

/* Satırlar render'da sırayla belirir */
.cry-row {
    animation: bnt-slide-in-left .32s cubic-bezier(.2,.8,.2,1) both;
}
.cry-row:nth-child(1) { animation-delay: .04s; }
.cry-row:nth-child(2) { animation-delay: .10s; }
.cry-row:nth-child(3) { animation-delay: .16s; }
.cry-row:nth-child(4) { animation-delay: .22s; }
.cry-row:nth-child(5) { animation-delay: .28s; }

/* Değişim yüzdesi: hover'da parlar */
.cry-change {
    transition: transform .2s, filter .2s;
}
.cry-change:hover {
    transform: scale(1.1);
    filter: brightness(1.3);
}


/* ══════════════════════════════════════════════════════════════════════════
   ⏱ POMODORO — ring glow + mode flash
   ══════════════════════════════════════════════════════════════════════════ */

/* Çalışırken progress ring pulse */
.pom-mode-work .pom-disk[data-running] .pom-progress {
    animation: bnt-ring-pulse 2s ease-in-out infinite;
}

/* Mola modunda ring yeşil pulse */
.pom-mode-break .pom-disk[data-running] .pom-progress {
    animation: bnt-ring-pulse 3s ease-in-out infinite;
}

/* Disk: JS data-running eklenince glow */
.pom-disk[data-running] {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 30%, transparent));
    transition: filter .5s ease;
}
.pom-disk:not([data-running]) {
    filter: none;
    transition: filter .5s ease;
}

/* Kontrol butonları: hafif geçiş */
.pom-btn {
    transition: background .2s, opacity .2s;
}
.pom-btn:hover {
    opacity: 0.8;
}
.pom-btn:active {
    opacity: 0.6;
}

/* Seanslar yazısı: streak glow */
[data-pom-session]:not(:empty) {
    animation: bnt-streak-glow 3s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════════
   💬 QUOTES — alıntı geçişi + tırnak nefes
   ══════════════════════════════════════════════════════════════════════════ */

/* Büyük tırnak işareti: sürekli nefes alır */
.qte-mark {
    animation: bnt-qmark-breathe 5s ease-in-out infinite;
    will-change: opacity, transform;
    transform-origin: left center;
}

/* Yeni alıntı gösterilince JS .bnt-swap ekler */
.qte-wrap.bnt-swap .qte-text,
.qte-wrap.bnt-swap .qte-author {
    animation: bnt-quote-swap .55s cubic-bezier(.4,0,.2,1) both;
}

/* İlk render animasyonları (git-gel hatasını önlemek için kaldırıldı) */
.qte-text {
    /* Eski bnt-fade-scale-in kaldırıldı */
}
.qte-author {
    /* Eski bnt-slide-in-up kaldırıldı */
}

/* Butonlar: hover lift */
.qte-btn {
    transition: background .2s, transform .2s;
}
.qte-btn:hover {
    transform: scale(1.12);
}


/* ══════════════════════════════════════════════════════════════════════════
   ✅ TODO — item ekleme/tamamlama/silme
   ══════════════════════════════════════════════════════════════════════════ */

/* Yeni eklenen item */
.todo-item.bnt-new {
    animation: bnt-slide-in-up .3s cubic-bezier(.2,.8,.2,1) both;
}

/* Tamamlandı: check ikonu pop */
.todo-done .todo-check {
    animation: bnt-check-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* Silinirken: JS .bnt-removing ekler */
.todo-item.bnt-removing {
    animation: bnt-del-out .28s cubic-bezier(.4,0,1,1) forwards;
    overflow: hidden;
    pointer-events: none;
}

/* Ekleme butonu: hover bounce */
.todo-add-btn {
    transition: filter .2s, transform .2s;
}
.todo-add-btn:hover {
    transform: scale(1.08);
}
.todo-add-btn:active {
    transform: scale(.95);
}

/* Todo footer: güncelleme sonrası renk geçişi */
[data-todo-footer] {
    transition: color .3s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   📰 NEWS — geliştirilmiş haber girişi
   ══════════════════════════════════════════════════════════════════════════ */

/* Gelişmiş haber girişi — eski news-fade-in'in yerini alır, daha yumuşak */
.news-item {
    animation: bnt-news-in .3s cubic-bezier(.2,.8,.2,1) both;
    transition: background .15s, transform .2s;
}
.news-item:nth-child(1) { animation-delay: .02s; }
.news-item:nth-child(2) { animation-delay: .06s; }
.news-item:nth-child(3) { animation-delay: .10s; }
.news-item:nth-child(4) { animation-delay: .14s; }
.news-item:nth-child(5) { animation-delay: .18s; }
.news-item:nth-child(6) { animation-delay: .22s; }

.news-item:hover {
    transform: translateX(4px);
}

/* Haber ikonu: hover sway */
.news-icon {
    transition: transform .2s, opacity .2s;
}
.news-item:hover .news-icon {
    opacity: .8;
    animation: bnt-news-rotate 1.6s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════════════════════
   🔗 SHORTCUTS — hover lift
   ══════════════════════════════════════════════════════════════════════════ */

.sc-box {
    transition: background .2s, border-color .2s, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.sc-box:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.sc-box:active {
    transform: translateY(-1px) scale(.98);
}

/* Kısayol grid: item'lar stagger girer */
.sc-grid .sc-box {
    animation: bnt-fade-scale-in .3s cubic-bezier(.2,.8,.2,1) both;
}
.sc-grid .sc-box:nth-child(1)  { animation-delay: .02s; }
.sc-grid .sc-box:nth-child(2)  { animation-delay: .05s; }
.sc-grid .sc-box:nth-child(3)  { animation-delay: .08s; }
.sc-grid .sc-box:nth-child(4)  { animation-delay: .11s; }
.sc-grid .sc-box:nth-child(5)  { animation-delay: .14s; }
.sc-grid .sc-box:nth-child(6)  { animation-delay: .17s; }
.sc-grid .sc-box:nth-child(7)  { animation-delay: .20s; }
.sc-grid .sc-box:nth-child(8)  { animation-delay: .23s; }
.sc-grid .sc-box:nth-child(9)  { animation-delay: .26s; }
.sc-grid .sc-box:nth-child(10) { animation-delay: .29s; }

/* Simge: hover rotate */
.sc-box img {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sc-box:hover img {
    transform: scale(1.15);
}


/* ══════════════════════════════════════════════════════════════════════════
   ♿ prefers-reduced-motion — erişilebilirlik
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wt-icon,
    .qte-mark,
    .clk-analog circle:last-of-type,
    [data-pom-session]:not(:empty),
    [data-pom-start][data-running] {
        animation: none !important;
    }
    .sc-box:hover,
    .sc-box img,
    .cry-change {
        transform: none !important;
    }
}