/* Beta 11.1 — Akıcılık: sayfa geçişleri, açılış, dokunma efekti, bildirim, alt çubuktaki çalar.
   data-motion: full (varsayılan) · soft (yalnız solma) · off (hareket yok). */
:root{--pf-ease:cubic-bezier(.2,.8,.2,1);--pf-spring:cubic-bezier(.3,1.35,.5,1)}

/* Sayfalar arası geçiş (destekleyen tarayıcıda: eski sayfa → yeni sayfa yumuşak geçiş).
   Beta 14.0: eski sayfa kısa sürede söner, yenisi ~250 ms'de belirir; alt çubuk ve menü düğmesi yerinde kalır. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pf-vt-up .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pf-vt-in .25s var(--pf-ease) both}
@keyframes pf-vt-up{to{opacity:0;transform:translate3d(0,-14px,0)}}
@keyframes pf-vt-out{to{opacity:0}}
@keyframes pf-vt-in{from{opacity:0}}
html[data-motion="soft"]::view-transition-old(root){animation-name:pf-vt-out}
nav.mobile-dock{view-transition-name:pf-dock}
.sb-open-btn{view-transition-name:pf-menu}
@media(min-width:901px){.sb{view-transition-name:pf-sb}}
::view-transition-group(pf-dock),::view-transition-group(pf-menu),::view-transition-group(pf-sb){animation-duration:0s}
::view-transition-old(pf-dock),::view-transition-old(pf-sb){animation:pf-vt-out .12s ease-out both}
::view-transition-new(pf-dock),::view-transition-new(pf-sb){animation:pf-vt-in .12s ease-out both}
html[data-motion="off"]::view-transition-group(*),html[data-motion="off"]::view-transition-old(*),html[data-motion="off"]::view-transition-new(*){animation:none!important}

/* Açılış: içerik solarak ve 10 px aşağıdan yumuşakça yukarı kayarak gelir (Beta 14.0: tek parça, ~250 ms;
   önceden bölümler sırayla 0,6 sn'de geliyordu, hızlı geçişlerde dağınık görünüyordu). */
@keyframes pf-rise{from{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes pf-fade{from{opacity:0}}
html.pf-enter:not([data-motion="off"]) main.app>*,
html.pf-enter:not([data-motion="off"]) main.app>:only-child>*{animation:pf-rise .25s var(--pf-ease) backwards}
html.pf-enter[data-motion="soft"] main.app>*,
html.pf-enter[data-motion="soft"] main.app>:only-child>*{animation:pf-fade .25s ease-out backwards}
html.pf-enter main.app>:only-child{animation:none!important}
html.pf-enter main.app>link,html.pf-enter main.app>script,html.pf-enter main.app>style{animation:none!important}

/* Beta 14.1: sayfadan çıkışta eski içerik sönmez (donmuş gibi görünüyordu). Dokunulan kısayol hemen
   seçili olur; yeni sayfa 0,3 sn'de gelmezse en üstte ince bir çizgi akar. */
.pf-loadbar{position:fixed;z-index:10000;top:env(safe-area-inset-top,0);left:0;right:0;height:3px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease}
.pf-loadbar::before{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent,#8e91ff),var(--accent-2,var(--accent,#8e91ff)),transparent);transform:translateX(-100%);animation:pf-load 1.1s cubic-bezier(.45,.1,.4,.9) infinite}
html.pf-slow .pf-loadbar{opacity:1}
@keyframes pf-load{to{transform:translateX(260%)}}
html[data-motion="off"] .pf-loadbar::before{animation-duration:2.2s}

/* Yerinde güncellemede yeni gelen öğeler */
@keyframes pf-new{from{opacity:0;transform:translate3d(0,8px,0)}}
html:not([data-motion="off"]) .pf-new{animation:pf-new .45s var(--pf-ease) backwards}
html[data-motion="soft"] .pf-new{animation-name:pf-fade}

/* Dokunma dalgası */
.pf-ripple{position:absolute;z-index:9998;overflow:hidden;pointer-events:none;contain:strict}
.pf-ripple.is-fixed{position:fixed}
.pf-ripple.out{transition:opacity .18s ease;opacity:0}
.pf-ripple i{position:absolute;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);animation:pf-ripple .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pf-ripple{0%{transform:scale(0);opacity:.16}60%{opacity:.1}100%{transform:scale(1);opacity:0}}
/* Beta 17.10: sayfa değişirken alınan görüntüde yarıda kalan geçiş / animasyon olmasın (bkz. fluid.js pageswap). */
html.pf-swap *,html.pf-swap *::before,html.pf-swap *::after{transition:none!important;animation:none!important}
html.pf-swap .pf-ripple{display:none!important}

/* Gönderiliyor */
button.pf-busy,.btn.pf-busy{position:relative;pointer-events:none}
button.pf-busy::after,.btn.pf-busy::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,currentColor 18%,transparent) 50%,transparent 80%);background-size:220% 100%;animation:pf-shine .9s linear infinite}
@keyframes pf-shine{from{background-position:120% 0}to{background-position:-120% 0}}

/* Bildirim: kaydırma yerinden bağımsız, altta */
.pf-toasts{position:fixed;z-index:9997;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;gap:8px;justify-items:center;width:min(92vw,440px);pointer-events:none}
.pf-toast{max-width:100%;padding:11px 16px 11px 38px;border-radius:14px;position:relative;font-size:13px;font-weight:600;line-height:1.35;color:var(--text,#f4f6f8);background:color-mix(in srgb,var(--bg,#0b0d12) 90%,var(--text,#fff));border:1px solid color-mix(in srgb,var(--text,#fff) 14%,transparent);box-shadow:0 16px 44px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2);opacity:0;transform:translate3d(0,14px,0) scale(.96);transition:opacity .28s var(--pf-ease),transform .38s var(--pf-spring)}
.pf-toast::before{content:'✓';position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:900;color:#08110c;background:var(--ok,#5fe09a)}
.pf-toast.error::before{content:'!';background:var(--danger,#ff5b62);color:#fff}
.pf-toast.warning::before{content:'!';background:#ffbd66;color:#2a1a05}
.pf-toast.in{opacity:1;transform:none}
.pf-toast.out{opacity:0;transform:translate3d(0,8px,0) scale(.98)}
html[data-motion="off"] .pf-toast{transition:none}
@media(max-width:900px){.pf-toasts{bottom:calc(96px + env(safe-area-inset-bottom))}html.dock-has-player .pf-toasts{bottom:calc(158px + env(safe-area-inset-bottom))}}

/* Kartlar ve düğmeler: yumuşak üzerine gelme (fare) */
@media(hover:hover){
html:not([data-motion="off"]) main.app :is(.panel,.glow-card){transition:border-color .25s ease,box-shadow .35s ease,transform .35s var(--pf-ease)}
}

/* ---------- Alt çubukta Zikrin Sesi ---------- */
.dock-player{display:none}
@media(max-width:900px){
nav.mobile-dock .dock-player{grid-column:1/-1;display:grid;grid-template-rows:0fr;opacity:0;margin:0 0 0;transition:grid-template-rows .5s var(--pf-ease),opacity .3s ease,margin .5s var(--pf-ease)}
nav.mobile-dock .dock-player.on{grid-template-rows:1fr;opacity:1;margin-bottom:6px}
html[data-motion="off"] nav.mobile-dock .dock-player{transition:none}
.dock-player .dp-in{position:relative;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:0 2px 0 4px;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.dock-player.on .dp-in{padding-bottom:6px}
.dock-player .dp-bar{position:absolute;left:6px;right:6px;bottom:0;height:2px;border-radius:2px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);overflow:hidden}
.dock-player .dp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1,#1f6b55),var(--c2,#d9bd7a));transition:width .3s linear}
.dock-player .dp-info{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 2px;border:0;background:none;color:var(--text,#f4f6f8);text-align:left;font:inherit;cursor:pointer}
.dock-player .dp-art{position:relative;flex:none;width:36px;height:36px;border-radius:10px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c2,#d9bd7a) 85%,#fff),transparent 55%),linear-gradient(135deg,var(--c1,#1f6b55),var(--c2,#d9bd7a));box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dock-player .dp-art::after{content:'';position:absolute;inset:11px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.dock-player.is-playing .dp-art::after{animation:pf-pulse 2.4s ease-in-out infinite}
@keyframes pf-pulse{0%,100%{transform:scale(.82);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.dock-player .dp-text{display:grid;min-width:0;line-height:1.2}
.dock-player .dp-text b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-player .dp-text small{font-size:11px!important;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0!important}
.dock-player.dp-swap .dp-text{animation:pf-swap .45s var(--pf-ease)}
@keyframes pf-swap{from{opacity:0;transform:translate3d(10px,0,0)}}
.dock-player .dp-btns{display:flex;align-items:center;gap:2px}
.dock-player .dp-btns button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--text,#f4f6f8);cursor:pointer}
.dock-player .dp-btns svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dock-player .dp-btns .dp-main{width:40px;height:40px;background:var(--text,#f4f6f8);color:var(--bg,#0b0d12);transition:transform .3s var(--pf-spring)}
.dock-player .dp-btns .dp-main svg{width:19px;height:19px;stroke:none}
.dock-player .dp-main .i-pause,.dock-player.is-playing .dp-main .i-play{display:none}
.dock-player.is-playing .dp-main .i-pause{display:block}
.dock-player .dp-close svg{fill:none;width:15px;height:15px;opacity:.55}
html.dock-has-player main.app{padding-bottom:calc(168px + env(safe-area-inset-bottom))!important}
}
@media(max-width:380px){.dock-player [data-dp="prev"]{display:none}}

/* ---------- Ayarlar → Akıcılık ve uygulama ---------- */
.fluid-settings .fl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.fluid-settings .fl-row b{display:block;font-size:15px}
.fluid-settings .fl-row small{display:block;margin-top:3px;opacity:.65;font-size:12.5px;line-height:1.4}
.fluid-settings .fl-row-head{grid-template-columns:1fr}
.fl-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent);border:1px solid var(--line,rgba(255,255,255,.08))}
.fl-seg button{min-height:36px;padding:0 14px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;font-size:13px;font-weight:600;opacity:.7;cursor:pointer;transition:background .25s ease,opacity .25s ease,color .25s ease}
.fl-seg button.is-on{opacity:1;background:var(--accent,#8e91ff);color:var(--bg,#0b0d12)}
.fl-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;padding-bottom:6px}
.fl-w{position:relative;display:grid;gap:2px;padding:12px 40px 12px 14px;border-radius:14px;border:1px solid var(--line,rgba(255,255,255,.08));background:color-mix(in srgb,var(--text,#fff) 4%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer}
.fl-w b{font-size:14px}.fl-w small{font-size:12px;opacity:.6}
.fl-w i{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:800;background:var(--accent,#8e91ff);color:var(--bg,#0b0d12)}
.fl-w:disabled{opacity:.45;cursor:default}
.fl-web-note{margin:12px 0 0;font-size:12.5px;opacity:.6}
@media(max-width:560px){.fluid-settings .fl-row{grid-template-columns:1fr}.fl-seg{justify-self:start}}

@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) *{scroll-behavior:auto}}
.fluid-settings [hidden]{display:none!important}

/* ---------- Beta 11.3: kaydırma performansı (120 Hz) ----------
   1) Sayfa zemini "background-attachment:fixed" idi: Android'de kaydırmanın her karesinde
      bütün ekran yeniden boyanıyordu. Aynı zemin artık sabit, ayrı bir katmanda (ekran kartı kaydırır).
   2) Kayan kartlardaki arka plan bulanıklığı (blur 18px) her karede yeniden hesaplanıyordu;
      kartlar zaten neredeyse opak olduğu için görünüm değişmeden kaldırıldı. Sabit öğelerde (alt çubuk) kalır. */
html{background:var(--bg,#07090c)}
body{background:transparent!important;background-attachment:scroll!important}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 80% -10%,var(--glow-a,transparent),transparent 36%),radial-gradient(circle at 10% 110%,var(--glow-b,transparent),transparent 36%),var(--bg,#07090c);transform:translateZ(0)}
.panel,.metric,.history-strip article,.nutrition-kpis article,.body-kpis article,.meals>article,.library article,.compact-welcome .ai-welcome{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media(max-width:900px){.mobile-dock{-webkit-backdrop-filter:blur(16px) saturate(1.15)!important;backdrop-filter:blur(16px) saturate(1.15)!important}}

/* Beta 11.6: Maneviyat renkleri — alt çubuk sol panelle aynı (her bölüm ayrı ton). */
.mobile-dock a[data-route="hafiz"],.sb-link[data-route="hafiz"]{--route-color:#ff8a65}
.mobile-dock a[data-route="zikr_sound"],.sb-link[data-route="zikr_sound"]{--route-color:#5aa9ff}
.mobile-dock a[data-route="sunnah"],.sb-link[data-route="sunnah"]{--route-color:#4cd97b}
.mobile-dock a[data-route="ilim"],.sb-link[data-route="ilim"]{--route-color:#2fd3e0}
/* Beta 12.5: masaüstü kaydırma çubukları — ince, zeminle bütün; kenar çubuğununki yalnız üzerine gelince. */
@media(hover:hover) and (pointer:fine){
html{scrollbar-color:color-mix(in srgb,var(--text,#fff) 16%,transparent) transparent}
html,body{scrollbar-width:thin}
.sb-nav{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s}
.sb-nav:hover{scrollbar-color:color-mix(in srgb,var(--text,#fff) 18%,transparent) transparent}
}

/* ---------- Beta 17.2: Güç tasarrufu (Ayarlar → Akıcılık ve uygulama; bu cihaz) ----------
   Ekran kartını en çok yoran iki şey kapanır: arka plan bulanıklığı (sabit alt çubuk ve Pano widget'larında
   kaydırmanın her karesinde yeniden hesaplanır) ve sürekli dönen animasyonlar (çalan plak, ekolayzer,
   aura, nabız; bir kez oynar, durur). Bulanıklık gidince saydam yüzeyler okunur kalsın diye koyulaşır. */
html[data-saver="on"] *,html[data-saver="on"] *::before,html[data-saver="on"] *::after,html[data-saver="on"] ::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation-iteration-count:1!important}
html[data-saver="on"] .mobile-dock{background-color:color-mix(in srgb,var(--surface,#11141b) 97%,transparent)!important}
/* Yükleme göstergeleri (kısa süreli) dönmeye devam eder. */
html[data-saver="on"] :is(.pf-loadbar,.pf-busy)::before,html[data-saver="on"] :is(button,.btn).pf-busy::after{animation-iteration-count:infinite!important}
html[data-saver="on"] .wk-glass{background-color:rgba(18,22,32,max(.8,var(--wk-alpha,.34)))}
html[data-saver="on"] :is(.pn-sheet,.pn-ctl,.b35-overlay.fp){background-color:rgba(4,6,10,.86)}

/* Beta 17.4: akıcı güncelleme sırasında kaydırma çapası kapalı (fluid.js pf-morphing). */
html.pf-morphing,html.pf-morphing body,html.pf-morphing *{overflow-anchor:none!important}
/* Beta 17.11: Ayarlar › Güncellemeler */
.app-upd [hidden]{display:none!important}
.app-upd .au-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app-upd .au-act .btn{white-space:nowrap}
.app-upd .au-foot small{opacity:.6}
@media(max-width:600px){.app-upd .au-row{grid-template-columns:1fr}.app-upd .au-row .au-act{justify-content:flex-start}}