/* =====================================================================
   ODAK EKRANI v3 (2026-11-08) — tam ekran sayaç baştan tasarlandı.
   Çerçevesiz sinematik sahne: gezegen ufku (duruma göre renk + nefes),
   aurora, grain, kayan rakamlı dev saat, istatistik satırı, yüzen dock.
   Tüm kurallar @layer px-odak içinde: katmanlı !important eski yamaların
   hepsini ezer ve açık tema motoru @layer'ı atladığı için ekran hep koyu kalır.
   Geri almak için: index.html sonundaki odak.css / odak.js satırlarını sil.
   ===================================================================== */
@property --odk-c { syntax: '<color>'; inherits: true; initial-value: #5EEAD4; }
@property --odk-glow { syntax: '<number>'; inherits: true; initial-value: 0.6; }

@layer px-odak {
  /* ---------- Sahne ve durum renkleri ---------- */
  #px-chrono-fs-overlay.odk {
    --odk-c: #5EEAD4;
    --odk-glow: .62;
    --odk-ink: #F5F7FA;
    --odk-mut: rgba(226, 232, 240, .56);
    --odk-dim: rgba(226, 232, 240, .34);
    --odk-line: rgba(255, 255, 255, .08);
    --odk-ease: cubic-bezier(.22, 1, .36, 1);
    display: none !important;
    padding: 0 !important;
    background: #02040A !important;
    color: var(--odk-ink) !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: --odk-c 1.2s ease, --odk-glow 1.2s ease !important;
    -webkit-font-smoothing: antialiased;
  }
  #px-chrono-fs-overlay.odk.on {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"]   { --odk-c: #34D399; --odk-glow: 1; }
  #px-chrono-fs-overlay.odk[data-timer-state="PAUSED"]    { --odk-c: #FBBF24; --odk-glow: .72; }
  #px-chrono-fs-overlay.odk[data-timer-state="COMPLETED"] { --odk-c: #86EFAC; --odk-glow: 1.2; }
  #px-chrono-fs-overlay.odk.is-last-5min                  { --odk-c: #FB923C; --odk-glow: 1.05; }
  #px-chrono-fs-overlay.odk[data-zen-idle="1"]:not([data-timer-state="RUNNING"]),
  #px-chrono-fs-overlay.odk.px-zen-idle:not([data-timer-state="RUNNING"]) { cursor: auto !important; }

  /* Eski parçalar */
  #px-chrono-fs-overlay.odk .px-cfs-card,
  #px-chrono-fs-overlay.odk .px-cfs-nebula,
  #px-chrono-fs-overlay.odk .px-cfs-shortcuts-hint,
  #px-chrono-fs-overlay.odk #px-cfs-status { display: none !important; }
  #px-chrono-fs-overlay.odk .odk-sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
  }

  /* ---------- Arka plan katmanları ---------- */
  #px-chrono-fs-overlay.odk #px-cfs-space-canvas { z-index: 0 !important; opacity: .62 !important; }
  #px-chrono-fs-overlay.odk .odk-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  #px-chrono-fs-overlay.odk .odk-bg > * { position: absolute; pointer-events: none; }

  #px-chrono-fs-overlay.odk .odk-aurora { inset: 0; }
  #px-chrono-fs-overlay.odk .odk-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(80px); will-change: transform; }
  #px-chrono-fs-overlay.odk .odk-aurora .a1 {
    width: 62vmax; height: 38vmax; left: -14vmax; top: -16vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--odk-c) 26%, transparent), transparent);
    animation: odk-drift-a 26s ease-in-out infinite alternate;
  }
  #px-chrono-fs-overlay.odk .odk-aurora .a2 {
    width: 52vmax; height: 34vmax; right: -16vmax; top: -6vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--odk-c) 20%, transparent), transparent);
    animation: odk-drift-b 32s ease-in-out infinite alternate;
  }
  #px-chrono-fs-overlay.odk .odk-aurora .a3 {
    width: 70vmax; height: 26vmax; left: 50%; bottom: 2vh; margin-left: -35vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--odk-c) 16%, transparent), transparent);
    animation: odk-drift-c 22s ease-in-out infinite alternate;
  }
  @keyframes odk-drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.12); } }
  @keyframes odk-drift-b { to { transform: translate3d(-8vw, 9vh, 0) scale(.9); } }
  @keyframes odk-drift-c { to { transform: translate3d(4vw, -3vh, 0) scale(1.08); } }

  /* Ufuk: dev bir gezegenin aydınlanan kenarı */
  #px-chrono-fs-overlay.odk .odk-flare {
    left: 50%; top: 77vh; width: 74vw; height: 30vh; margin-left: -37vw; margin-top: -17vh;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--odk-c) 34%, transparent), transparent);
    filter: blur(28px);
    opacity: calc(var(--odk-glow) * .85);
    transform-origin: 50% 70%;
  }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] .odk-flare { animation: odk-breathe 8s ease-in-out infinite; }
  #px-chrono-fs-overlay.odk[data-timer-state="COMPLETED"] .odk-flare { animation: odk-burst 2.6s var(--odk-ease) both; }
  @keyframes odk-breathe { 0%, 100% { transform: scale(1); opacity: calc(var(--odk-glow) * .7); } 50% { transform: scale(1.12, 1.22); opacity: var(--odk-glow); } }
  @keyframes odk-burst { 0% { transform: scale(.6); opacity: 0; } 35% { transform: scale(1.45, 1.8); opacity: 1; } 100% { transform: scale(1.1); opacity: .95; } }

  #px-chrono-fs-overlay.odk .odk-planet,
  #px-chrono-fs-overlay.odk .odk-rim {
    left: 50%; top: 77vh; width: 230vw; height: 230vw; margin-left: -115vw; border-radius: 50%;
  }
  #px-chrono-fs-overlay.odk .odk-planet {
    background:
      radial-gradient(ellipse 30% 4% at 50% 0%, color-mix(in srgb, var(--odk-c) 14%, transparent), transparent 70%),
      #010207;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--odk-c) 22%, transparent),
      0 -14px 50px -12px color-mix(in srgb, var(--odk-c) 40%, transparent),
      inset 0 22px 60px -34px color-mix(in srgb, var(--odk-c) 55%, transparent);
  }
  #px-chrono-fs-overlay.odk .odk-rim {
    border-top: 1.5px solid color-mix(in srgb, var(--odk-c) 85%, white);
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 50%, transparent 62%);
            mask-image: linear-gradient(90deg, transparent 38%, #000 50%, transparent 62%);
    filter: drop-shadow(0 -2px 8px var(--odk-c));
    opacity: calc(.45 + var(--odk-glow) * .5);
  }
  #px-chrono-fs-overlay.odk .odk-grain {
    inset: 0; opacity: .075; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  #px-chrono-fs-overlay.odk .odk-vig { inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 42%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

  /* ---------- Üst çubuk ---------- */
  #px-chrono-fs-overlay.odk .odk-top {
    position: relative; z-index: 5;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 24px 30px 0;
    transition: opacity .8s var(--odk-ease), transform .8s var(--odk-ease);
  }
  #px-chrono-fs-overlay.odk .odk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--odk-mut); white-space: nowrap; }
  #px-chrono-fs-overlay.odk .odk-brand b { color: var(--odk-ink); font-weight: 600; letter-spacing: -.01em; }
  #px-chrono-fs-overlay.odk .odk-logo {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; position: relative;
    border: 1.5px solid color-mix(in srgb, var(--odk-c) 80%, white);
    box-shadow: 0 0 14px -2px var(--odk-c);
  }
  #px-chrono-fs-overlay.odk .odk-logo::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--odk-c); }
  #px-chrono-fs-overlay.odk .odk-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--odk-dim); flex-shrink: 0; }
  #px-chrono-fs-overlay.odk .odk-wall { font-variant-numeric: tabular-nums; color: var(--odk-ink); font-weight: 500; }
  #px-chrono-fs-overlay.odk .odk-date { overflow: hidden; text-overflow: ellipsis; }

  /* Mod seçici: kayan gösterge */
  #px-chrono-fs-overlay.odk .px-cfs-modes {
    position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important;
    width: auto !important; height: auto !important; padding: 4px !important; margin: 0 !important;
    border-radius: 999px !important; background: rgba(255, 255, 255, .035) !important;
    border: 1px solid var(--odk-line) !important;
    backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: none !important;
  }
  #px-chrono-fs-overlay.odk .px-cfs-modes .odk-ind {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 18px -8px rgba(0, 0, 0, .8);
    transition: transform .5s var(--odk-ease);
  }
  #px-chrono-fs-overlay.odk .px-cfs-modes:has(#px-cfs-mode-sw.active) .odk-ind { transform: translateX(100%); }
  #px-chrono-fs-overlay.odk .px-cfs-modes button {
    position: relative !important; z-index: 1 !important;
    height: 32px !important; min-height: 32px !important; padding: 0 18px !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    color: var(--odk-mut) !important; font: 600 12.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: -.005em !important;
    cursor: pointer !important; transition: color .3s ease !important; white-space: nowrap !important;
  }
  #px-chrono-fs-overlay.odk .px-cfs-modes button:hover { color: var(--odk-ink) !important; }
  #px-chrono-fs-overlay.odk .px-cfs-modes button.active { color: var(--odk-ink) !important; background: transparent !important; border: 0 !important; }

  #px-chrono-fs-overlay.odk .odk-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
  #px-chrono-fs-overlay.odk .odk-ibtn,
  #px-chrono-fs-overlay.odk #px-cfs-close-btn {
    position: static !important; inset: auto !important; z-index: auto !important;
    height: 36px !important; min-height: 36px !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    border-radius: 999px !important; border: 1px solid var(--odk-line) !important;
    background: rgba(255, 255, 255, .035) !important; color: var(--odk-mut) !important;
    backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
    font: 600 12.5px/1 Inter, system-ui, sans-serif !important; cursor: pointer !important; box-shadow: none !important;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease !important;
  }
  #px-chrono-fs-overlay.odk .odk-ibtn { width: 36px !important; padding: 0 !important; }
  #px-chrono-fs-overlay.odk #px-cfs-close-btn { padding: 0 6px 0 15px !important; }
  #px-chrono-fs-overlay.odk .odk-ibtn:hover,
  #px-chrono-fs-overlay.odk #px-cfs-close-btn:hover { color: var(--odk-ink) !important; background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .14) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-close-btn kbd {
    display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08);
    font: 600 10.5px/1 Inter, system-ui, sans-serif; color: var(--odk-mut); letter-spacing: .02em;
  }
  #px-chrono-fs-overlay.odk .odk-ico {
    display: block; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  }
  #px-chrono-fs-overlay.odk #odk-sound .odk-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
  #px-chrono-fs-overlay.odk #odk-sound.is-off .odk-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
  #px-chrono-fs-overlay.odk #odk-sound.is-off { color: var(--odk-dim) !important; }

  /* ---------- Orta sahne ---------- */
  #px-chrono-fs-overlay.odk .odk-stage {
    position: relative; z-index: 4; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 24px 6vh;
  }
  #px-chrono-fs-overlay.odk .odk-head {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: clamp(10px, 2.2vh, 26px);
    transition: opacity .8s var(--odk-ease), transform .8s var(--odk-ease);
  }
  #px-chrono-fs-overlay.odk .odk-state {
    display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px 0 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--odk-c) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--odk-c) 26%, transparent);
    color: color-mix(in srgb, var(--odk-c) 70%, white);
    font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  }
  #px-chrono-fs-overlay.odk .odk-state i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--odk-c); box-shadow: 0 0 10px var(--odk-c); }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] .odk-state i::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--odk-c);
    animation: odk-ping 2s var(--odk-ease) infinite;
  }
  @keyframes odk-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

  #px-chrono-fs-overlay.odk .odk-subj {
    position: relative; display: inline-flex; align-items: center; height: 30px; margin: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .035); border: 1px solid var(--odk-line); cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }
  #px-chrono-fs-overlay.odk .odk-subj:hover { background: rgba(255, 255, 255, .065); border-color: rgba(255, 255, 255, .14); }
  #px-chrono-fs-overlay.odk .odk-subj .odk-ico { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--odk-mut); pointer-events: none; }
  #px-chrono-fs-overlay.odk .odk-subj .odk-ico.l { left: 12px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
  #px-chrono-fs-overlay.odk .odk-subj .odk-ico.r { right: 11px; width: 11px; height: 11px; margin-top: -5.5px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  #px-chrono-fs-overlay.odk #px-cfs-subject {
    -webkit-appearance: none !important; appearance: none !important;
    width: auto !important; min-width: 0 !important; max-width: 260px !important; height: 28px !important; min-height: 28px !important;
    margin: 0 !important; padding: 0 30px 0 33px !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; box-shadow: none !important; outline: none !important;
    color: var(--odk-ink) !important; font: 600 13px/28px Inter, system-ui, sans-serif !important;
    text-overflow: ellipsis !important; cursor: pointer !important; justify-self: auto !important; flex-shrink: 1 !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-subject:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--odk-c) 60%, transparent) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-subject option { background: #0B0F17 !important; color: #F5F7FA !important; }

  /* Dev saat */
  #px-chrono-fs-overlay.odk .odk-clock {
    --odk-dy: -.34em;
    display: flex; align-items: center; justify-content: center;
    font-family: Inter, system-ui, sans-serif; font-weight: 200;
    font-size: clamp(76px, 15.5vw, 244px); line-height: 1; letter-spacing: -.05em;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
    color: var(--odk-ink); white-space: nowrap; user-select: none;
    text-shadow: 0 0 70px color-mix(in srgb, var(--odk-c) 20%, transparent);
    transition: transform 1.4s var(--odk-ease), text-shadow 1.2s ease;
  }
  #px-chrono-fs-overlay.odk .odk-clock.is-up { --odk-dy: .34em; }
  #px-chrono-fs-overlay.odk .odk-clock .odk-d,
  #px-chrono-fs-overlay.odk .odk-clock .odk-c { position: relative; display: inline-block; transition: opacity .6s ease, color .6s ease; }
  #px-chrono-fs-overlay.odk .odk-clock .odk-d > span { display: inline-block; }
  #px-chrono-fs-overlay.odk .odk-clock .odk-c { padding: 0 .015em; opacity: .3; transform: translateY(-.055em); }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] .odk-clock .odk-c { animation: odk-colon 2s ease-in-out infinite; }
  @keyframes odk-colon { 0%, 100% { opacity: .38; } 50% { opacity: .14; } }
  #px-chrono-fs-overlay.odk .odk-clock .is-s { color: rgba(245, 247, 250, .4); }
  #px-chrono-fs-overlay.odk .odk-clock .is-z { opacity: .17 !important; animation: none !important; }
  #px-chrono-fs-overlay.odk .odk-clock .odk-d > span.in { animation: odk-digit-in .55s var(--odk-ease) both; }
  #px-chrono-fs-overlay.odk .odk-clock .odk-d > span.out { position: absolute; left: 0; top: 0; animation: odk-digit-out .55s var(--odk-ease) both; }
  @keyframes odk-digit-in { from { transform: translateY(var(--odk-dy)); opacity: 0; filter: blur(10px); } to { transform: none; opacity: 1; filter: blur(0); } }
  @keyframes odk-digit-out { from { transform: none; opacity: 1; filter: blur(0); } to { transform: translateY(calc(var(--odk-dy) * -1)); opacity: 0; filter: blur(10px); } }

  /* İlerleme çizgisi */
  #px-chrono-fs-overlay.odk .odk-prog { position: relative; width: min(860px, 78vw); margin-top: clamp(14px, 2.6vh, 30px); height: 12px; display: flex; align-items: center; }
  #px-chrono-fs-overlay.odk .odk-prog::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 999px;
    background: rgba(255, 255, 255, .07);
  }
  #px-chrono-fs-overlay.odk .odk-ticks {
    position: absolute; left: 0; right: 0; top: 50%; height: 7px; margin-top: 6px;
    background:
      linear-gradient(90deg, transparent calc(25% - .5px), rgba(255, 255, 255, .16) 0 calc(25% + .5px), transparent 0),
      linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .22) 0 calc(50% + .5px), transparent 0),
      linear-gradient(90deg, transparent calc(75% - .5px), rgba(255, 255, 255, .16) 0 calc(75% + .5px), transparent 0);
  }
  #px-chrono-fs-overlay.odk .px-cfs-bar-track {
    position: relative !important; z-index: 1 !important; width: 100% !important; height: 2px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; overflow: visible !important;
    opacity: 1 !important; transition: opacity .6s ease !important;
  }
  #px-chrono-fs-overlay.odk .px-cfs-bar-track.is-hidden { opacity: 0 !important; }
  #px-chrono-fs-overlay.odk .px-cfs-bar-fill {
    position: relative !important; height: 100% !important; border-radius: 999px !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--odk-c) 18%, transparent) 0%, var(--odk-c) 100%) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--odk-c) 55%, transparent) !important;
    transition: width .6s linear !important;
  }
  #px-chrono-fs-overlay.odk .px-cfs-bar-fill::after {
    content: "" !important; position: absolute !important; right: -4px !important; top: 50% !important;
    width: 8px !important; height: 8px !important; margin-top: -4px !important; transform: none !important; border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--odk-c) 28%, transparent), 0 0 16px 3px var(--odk-c) !important;
  }
  /* Hedefsiz kronometre: çizgide süzülen ışık */
  #px-chrono-fs-overlay.odk .odk-prog:has(.is-hidden)::after {
    content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px; width: 22%; left: 0; border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--odk-c), transparent);
    animation: odk-sweep 3.6s ease-in-out infinite;
  }
  #px-chrono-fs-overlay.odk:not([data-timer-state="RUNNING"]) .odk-prog:has(.is-hidden)::after { animation-play-state: paused; opacity: .35; }
  @keyframes odk-sweep { 0% { transform: translateX(-10%); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(360%); opacity: 0; } }

  /* İstatistik satırı */
  #px-chrono-fs-overlay.odk .odk-stats {
    width: min(860px, 78vw); margin-top: clamp(16px, 2.6vh, 28px);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    transition: opacity .8s var(--odk-ease), transform .8s var(--odk-ease);
  }
  #px-chrono-fs-overlay.odk .odk-stats > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  #px-chrono-fs-overlay.odk .odk-stats > div:nth-child(2) { align-items: center; text-align: center; }
  #px-chrono-fs-overlay.odk .odk-stats > div:nth-child(3) { align-items: flex-end; text-align: right; }
  #px-chrono-fs-overlay.odk .odk-stats span { font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--odk-dim); white-space: nowrap; }
  #px-chrono-fs-overlay.odk .odk-stats b { font: 600 15px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--odk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* ---------- Alt dock ---------- */
  #px-chrono-fs-overlay.odk .odk-foot {
    position: relative; z-index: 6; display: flex; justify-content: center; padding: 0 20px 30px;
    transition: opacity .8s var(--odk-ease), transform .8s var(--odk-ease);
  }
  #px-chrono-fs-overlay.odk .odk-dock {
    position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px;
    background: rgba(10, 13, 21, .62); border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  #px-chrono-fs-overlay.odk .odk-vr { width: 1px; height: 28px; background: var(--odk-line); flex-shrink: 0; margin: 0 4px; }

  #px-chrono-fs-overlay.odk #px-cfs-presets {
    display: flex !important; align-items: center !important; gap: 2px !important; padding: 0 0 0 4px !important; margin: 0 !important;
    grid-template-columns: none !important; width: auto !important; background: transparent !important; border: 0 !important;
    transition: opacity .5s ease !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-presets button {
    display: inline-flex !important; align-items: baseline !important; gap: 6px !important;
    width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding: 0 15px !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    color: var(--odk-mut) !important; font: 600 13px/40px Inter, system-ui, sans-serif !important; letter-spacing: -.005em !important;
    white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; grid-column: auto !important;
    transition: color .2s ease, background .2s ease !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-presets button small { font: 500 11.5px/1 Inter, system-ui, sans-serif; color: var(--odk-dim); font-variant-numeric: tabular-nums; }
  #px-chrono-fs-overlay.odk #px-cfs-presets button:hover { color: var(--odk-ink) !important; background: rgba(255, 255, 255, .05) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-presets button.sel {
    color: var(--odk-ink) !important; background: rgba(255, 255, 255, .09) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-presets button.sel small { color: var(--odk-mut); }
  #px-chrono-fs-overlay.odk #px-cfs-custom-btn { align-items: center !important; }
  #px-chrono-fs-overlay.odk #px-cfs-custom-btn .odk-ico { width: 11px; height: 11px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] #px-cfs-presets { opacity: .42 !important; }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] #px-cfs-presets:hover { opacity: 1 !important; }

  #px-chrono-fs-overlay.odk .odk-acts { display: flex; align-items: center; gap: 8px; }
  #px-chrono-fs-overlay.odk #px-cfs-start,
  #px-chrono-fs-overlay.odk #px-cfs-reset,
  #px-chrono-fs-overlay.odk #px-cfs-save-btn {
    position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    height: 52px !important; min-height: 52px !important; margin: 0 !important; border-radius: 999px !important;
    font-size: 0 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; cursor: pointer !important;
    transition: transform .25s var(--odk-ease), background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-start:active,
  #px-chrono-fs-overlay.odk #px-cfs-reset:active,
  #px-chrono-fs-overlay.odk #px-cfs-save-btn:active { transform: scale(.96) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-start::before,
  #px-chrono-fs-overlay.odk #px-cfs-reset::before,
  #px-chrono-fs-overlay.odk #px-cfs-save-btn::before {
    content: ""; display: block; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  }
  #px-chrono-fs-overlay.odk #px-cfs-start::after,
  #px-chrono-fs-overlay.odk #px-cfs-save-btn::after { font: 650 14.5px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; }

  /* Başlat: beyaz ana buton */
  #px-chrono-fs-overlay.odk #px-cfs-start {
    min-width: 170px !important; padding: 0 28px 0 24px !important;
    background: #F5F7FA !important; color: #05070C !important; border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 14px 44px -12px color-mix(in srgb, var(--odk-c) 75%, transparent), 0 0 0 6px color-mix(in srgb, var(--odk-c) 9%, transparent) !important;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a1.1 1.1 0 0 0 1.66.95l12.3-7.4a1.1 1.1 0 0 0 0-1.9L8.66 3.65A1.1 1.1 0 0 0 7 4.6z'/%3E%3C/svg%3E");
  }
  #px-chrono-fs-overlay.odk #px-cfs-start::after { content: "Başlat"; }
  #px-chrono-fs-overlay.odk[data-timer-state="PAUSED"] #px-cfs-start::after { content: "Devam et"; }
  #px-chrono-fs-overlay.odk[data-timer-state="COMPLETED"] #px-cfs-start::after { content: "Yeniden başlat"; }
  #px-chrono-fs-overlay.odk #px-cfs-start:hover { transform: translateY(-1px) !important; background: #FFFFFF !important; }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] #px-cfs-start {
    background: rgba(255, 255, 255, .07) !important; color: var(--odk-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='4' width='4.5' height='16' rx='1.3'/%3E%3Crect x='14' y='4' width='4.5' height='16' rx='1.3'/%3E%3C/svg%3E");
  }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] #px-cfs-start::after { content: "Duraklat"; }
  #px-chrono-fs-overlay.odk[data-timer-state="RUNNING"] #px-cfs-start:hover { background: rgba(255, 255, 255, .11) !important; }

  #px-chrono-fs-overlay.odk #px-cfs-reset {
    width: 52px !important; min-width: 52px !important; padding: 0 !important;
    background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--odk-line) !important; color: var(--odk-mut) !important; box-shadow: none !important;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.64-6.36L3 8.25'/%3E%3Cpath d='M3 3.5v4.75h4.75'/%3E%3C/svg%3E");
  }
  #px-chrono-fs-overlay.odk #px-cfs-reset::before { transition: transform .45s var(--odk-ease); }
  #px-chrono-fs-overlay.odk #px-cfs-reset:hover { color: var(--odk-ink) !important; background: rgba(255, 255, 255, .08) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-reset:hover::before { transform: rotate(-50deg); }
  #px-chrono-fs-overlay.odk #px-cfs-reset.is-confirming {
    width: auto !important; min-width: 0 !important; padding: 0 18px !important;
    font: 650 13px/1 Inter, system-ui, sans-serif !important; color: #FDA4AF !important;
    background: rgba(244, 63, 94, .13) !important; border-color: rgba(251, 113, 133, .42) !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-reset.is-confirming::before { display: none; }

  #px-chrono-fs-overlay.odk #px-cfs-save-btn {
    padding: 0 20px 0 17px !important;
    background: color-mix(in srgb, var(--odk-c) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--odk-c) 38%, transparent) !important;
    color: color-mix(in srgb, var(--odk-c) 75%, white) !important; box-shadow: none !important;
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    animation: odk-pop .45s var(--odk-ease) both;
  }
  #px-chrono-fs-overlay.odk #px-cfs-save-btn::after { content: "Bitir ve kaydet"; font-size: 13.5px; }
  #px-chrono-fs-overlay.odk #px-cfs-save-btn:hover { background: color-mix(in srgb, var(--odk-c) 22%, transparent) !important; }
  #px-chrono-fs-overlay.odk #px-cfs-save-btn[hidden] { display: none !important; }

  #px-chrono-fs-overlay.odk :is(#px-cfs-start, #px-cfs-reset, #px-cfs-save-btn, .px-cfs-modes button, #px-cfs-presets button, .odk-ibtn, #px-cfs-close-btn):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--odk-c) 75%, white) !important; outline-offset: 2px !important;
  }

  /* ---------- Açılır paneller (özel süre + onay) ---------- */
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer,
  #px-chrono-fs-overlay.odk #px-cfs-confirm-bar {
    position: absolute !important; inset: auto auto calc(100% + 14px) 50% !important; transform: translateX(-50%) !important;
    width: max-content !important; max-width: min(620px, calc(100vw - 32px)) !important; margin: 0 !important;
    display: none !important; z-index: 20 !important;
    background: rgba(12, 15, 24, .88) !important;
    backdrop-filter: blur(26px) saturate(150%) !important; -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    opacity: 1 !important; pointer-events: auto !important;
    animation: odk-pop-up .4s var(--odk-ease) both;
  }
  @keyframes odk-pop-up { from { opacity: 0; translate: 0 10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes odk-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer.open {
    display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; justify-content: center !important; gap: 12px !important;
    padding: 16px !important; width: 380px !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer .odk-quick { display: flex; align-items: center; gap: 6px; width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--odk-line); }
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer .odk-quick > span { font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--odk-dim); margin-right: auto; }
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer .odk-quick button {
    height: 30px !important; min-height: 30px !important; padding: 0 11px !important; border-radius: 999px !important;
    background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--odk-line) !important; color: var(--odk-mut) !important;
    font: 600 12px/1 Inter, system-ui, sans-serif !important; cursor: pointer !important; box-shadow: none !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-custom-drawer .odk-quick button:hover { color: var(--odk-ink) !important; background: rgba(255, 255, 255, .1) !important; }
  #px-chrono-fs-overlay.odk .px-cfs-cd-field { flex: 1 1 0 !important; width: auto !important; gap: 8px !important; }
  #px-chrono-fs-overlay.odk .px-cfs-cd-field label { font: 600 10.5px/1 Inter, system-ui, sans-serif !important; letter-spacing: .16em !important; color: var(--odk-dim) !important; }
  #px-chrono-fs-overlay.odk .px-cfs-cd-field input {
    height: 46px !important; min-height: 46px !important; width: 100% !important; border-radius: 14px !important;
    background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--odk-line) !important; color: var(--odk-ink) !important;
    font: 600 18px/1 Inter, system-ui, sans-serif !important; text-align: center !important; font-variant-numeric: tabular-nums;
    box-shadow: none !important; outline: none !important; -moz-appearance: textfield;
  }
  #px-chrono-fs-overlay.odk .px-cfs-cd-field input:focus { border-color: color-mix(in srgb, var(--odk-c) 60%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--odk-c) 18%, transparent) !important; }
  #px-chrono-fs-overlay.odk .px-cfs-cd-field input::-webkit-outer-spin-button,
  #px-chrono-fs-overlay.odk .px-cfs-cd-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #px-chrono-fs-overlay.odk #px-cfs-cd-apply {
    height: 46px !important; min-height: 46px !important; padding: 0 20px !important; border-radius: 999px !important;
    background: #F5F7FA !important; color: #05070C !important; border: 0 !important; box-shadow: none !important;
    font: 650 13.5px/1 Inter, system-ui, sans-serif !important; cursor: pointer !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-cd-apply:hover { background: #FFFFFF !important; }

  #px-chrono-fs-overlay.odk #px-cfs-confirm-bar.on {
    display: flex !important; align-items: center !important; gap: 18px !important; padding: 14px 14px 14px 20px !important;
    border-color: rgba(251, 191, 36, .32) !important;
  }
  #px-chrono-fs-overlay.odk #px-cfs-confirm-bar .px-icb-text { color: var(--odk-mut); font-size: 12.5px; line-height: 1.45; }
  #px-chrono-fs-overlay.odk #px-cfs-confirm-bar .px-icb-text b { color: #FCD34D; font-size: 13px; }
  #px-chrono-fs-overlay.odk #px-cfs-confirm-bar .px-icb-btns button { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; font-size: 12.5px !important; }

  /* ---------- Zen: çalışırken fare durunca yalnız saat kalsın ---------- */
  #px-chrono-fs-overlay.odk:is([data-zen-idle="1"], .px-zen-idle)[data-timer-state="RUNNING"] .odk-top { opacity: 0 !important; transform: translateY(-10px) !important; pointer-events: none !important; }
  #px-chrono-fs-overlay.odk:is([data-zen-idle="1"], .px-zen-idle)[data-timer-state="RUNNING"] .odk-foot { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; }
  #px-chrono-fs-overlay.odk:is([data-zen-idle="1"], .px-zen-idle)[data-timer-state="RUNNING"] .odk-stats { opacity: 0 !important; transform: translateY(6px) !important; }
  #px-chrono-fs-overlay.odk:is([data-zen-idle="1"], .px-zen-idle)[data-timer-state="RUNNING"] .odk-head { opacity: .45 !important; }
  #px-chrono-fs-overlay.odk:is([data-zen-idle="1"], .px-zen-idle)[data-timer-state="RUNNING"] .odk-clock { transform: scale(1.045); }

  /* ---------- Açılış koreografisi ---------- */
  #px-chrono-fs-overlay.odk.on .odk-planet,
  #px-chrono-fs-overlay.odk.on .odk-rim { animation: odk-rise 1.6s var(--odk-ease) both; }
  #px-chrono-fs-overlay.odk.on .odk-top  { animation: odk-in-down .9s var(--odk-ease) .2s backwards; }
  #px-chrono-fs-overlay.odk.on .odk-head { animation: odk-in-up .9s var(--odk-ease) .28s backwards; }
  #px-chrono-fs-overlay.odk.on .odk-clock { animation: odk-in-blur 1.2s var(--odk-ease) .12s backwards; }
  #px-chrono-fs-overlay.odk.on .odk-prog { animation: odk-in-wide 1.1s var(--odk-ease) .38s backwards; }
  #px-chrono-fs-overlay.odk.on .odk-stats { animation: odk-in-up .9s var(--odk-ease) .48s backwards; }
  #px-chrono-fs-overlay.odk.on .odk-foot { animation: odk-in-up 1s var(--odk-ease) .42s backwards; }
  @keyframes odk-rise { from { translate: 0 14vh; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes odk-in-down { from { opacity: 0; translate: 0 -12px; } }
  @keyframes odk-in-up { from { opacity: 0; translate: 0 16px; } }
  @keyframes odk-in-blur { from { opacity: 0; filter: blur(16px); scale: .97; } }
  @keyframes odk-in-wide { from { opacity: 0; scale: .6 1; } }

  /* ---------- Tablet / telefon ---------- */
  @media (max-width: 860px) {
    #px-chrono-fs-overlay.odk .odk-top { grid-template-columns: 1fr auto; padding: 16px 16px 0; row-gap: 14px; }
    #px-chrono-fs-overlay.odk .odk-mid { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    #px-chrono-fs-overlay.odk .odk-date,
    #px-chrono-fs-overlay.odk .odk-sep.s2 { display: none; }
    #px-chrono-fs-overlay.odk .odk-stage { padding: 0 16px 4vh; }
    #px-chrono-fs-overlay.odk .odk-clock { font-size: clamp(58px, 18.5vw, 160px); }
    #px-chrono-fs-overlay.odk .odk-prog,
    #px-chrono-fs-overlay.odk .odk-stats { width: min(560px, 90vw); }
    #px-chrono-fs-overlay.odk .odk-stats b { font-size: 13.5px; }
    #px-chrono-fs-overlay.odk .odk-stats { gap: 10px; }
    #px-chrono-fs-overlay.odk .odk-stats span { font-size: 9.5px; letter-spacing: .1em; line-height: 1.3; white-space: normal; }
    #px-chrono-fs-overlay.odk .odk-foot { padding: 0 12px 18px; }
    #px-chrono-fs-overlay.odk .odk-dock { flex-wrap: wrap; justify-content: center; border-radius: 28px; width: min(560px, 100%); padding: 8px; row-gap: 8px; }
    #px-chrono-fs-overlay.odk .odk-vr { display: none; }
    #px-chrono-fs-overlay.odk #px-cfs-presets { width: 100% !important; justify-content: space-between !important; padding: 0 !important; overflow-x: auto !important; scrollbar-width: none; }
    #px-chrono-fs-overlay.odk #px-cfs-presets button { padding: 0 11px !important; flex: 1 0 auto !important; justify-content: center !important; }
    #px-chrono-fs-overlay.odk .odk-acts { width: 100%; justify-content: center; }
    #px-chrono-fs-overlay.odk #px-cfs-start { flex: 1 1 auto !important; }
    #px-chrono-fs-overlay.odk .odk-planet,
    #px-chrono-fs-overlay.odk .odk-rim { top: 72vh; width: 300vw; height: 300vw; margin-left: -150vw; }
    #px-chrono-fs-overlay.odk .odk-flare { top: 72vh; }
    #px-chrono-fs-overlay.odk #px-cfs-custom-drawer.open { width: min(380px, calc(100vw - 32px)) !important; }
  }
  @media (max-width: 480px) {
    #px-chrono-fs-overlay.odk .odk-brand b,
    #px-chrono-fs-overlay.odk .odk-sep { display: none; }
    #px-chrono-fs-overlay.odk #px-cfs-close-btn > span { display: none; }
    #px-chrono-fs-overlay.odk #px-cfs-close-btn { padding: 0 6px !important; }
    #px-chrono-fs-overlay.odk #px-cfs-presets button small { display: none; }
    #px-chrono-fs-overlay.odk #px-cfs-save-btn::after { content: "Kaydet"; }
    #px-chrono-fs-overlay.odk #px-cfs-confirm-bar.on { flex-direction: column !important; align-items: stretch !important; }
  }
  @media (max-height: 640px) and (min-width: 861px) {
    #px-chrono-fs-overlay.odk .odk-clock { font-size: clamp(64px, 22vh, 200px); }
    #px-chrono-fs-overlay.odk .odk-foot { padding-bottom: 16px; }
  }
  /* Mola fazı: sakin mavi, "Molayı bitir" */
  #px-chrono-fs-overlay.odk[data-phase="break"][data-timer-state] { --odk-c: #60A5FA; --odk-glow: .8; }
  #px-chrono-fs-overlay.odk[data-phase="break"][data-timer-state="PAUSED"] { --odk-c: #FBBF24; --odk-glow: .72; }
  #px-chrono-fs-overlay.odk[data-phase="break"] #px-cfs-save-btn::after { content: "Molayı bitir"; }
  #px-chrono-fs-overlay.odk[data-phase="break"] #px-cfs-save-btn::before { content: none; }
  @media (prefers-reduced-motion: reduce) {
    #px-chrono-fs-overlay.odk *,
    #px-chrono-fs-overlay.odk *::before,
    #px-chrono-fs-overlay.odk *::after { animation: none !important; }
  }
}