/* Takip — telefon arayüzü. Mobil öncelikli. Renkler mobil önizlemedeki paletle aynı: seri hue'su renk körlüğü ve kontrast doğrulayıcısından geçirildi. */ :root { color-scheme: light; --plane: #EDF0F3; --card: #FFFFFF; --card-2: #F4F6F8; --ink: #111820; --ink-2: #56636F; --ink-3: #8A95A1; --line: #D6DCE3; --line-soft: #E6EAEF; --series: #00897B; --series-dim: #B9DFDA; --series-ink: #00695F; --good: #0ca30c; --warning: #fab219; --critical: #d03b3b; --critical-bg:#FBE9E9; --good-bg: #E4F4E4; --warning-bg: #FCF2DC; --warn-ink: #8a6008; --grid: #E9EDF1; --shadow: 0 1px 2px rgba(17,24,32,.07), 0 6px 20px rgba(17,24,32,.06); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --tabh: 58px; --tab-bosluk: 14px; /* çubuğun ekran kenarlarına uzaklığı */ /* Cam çubuk. Yarı saydam zemin + arka planı bulanıklaştırma + üstte ince ışık çizgisi: cam etkisini veren üçlü bu. Renkler paletten türetiliyor ki iki temada da tutarlı kalsın. */ --cam: color-mix(in srgb, var(--card) 58%, transparent); --cam-cizgi: rgba(255, 255, 255, .72); --cam-isik: rgba(255, 255, 255, .60); --cam-golge: 0 10px 30px rgba(17, 24, 32, .16), 0 2px 8px rgba(17, 24, 32, .08); --cam-hap: color-mix(in srgb, var(--series) 20%, transparent); } /* Koyu palet. Medya sorgusu yerine ile açılıyor: "otomatik" kipinde bu bayrağı JS, telefonun temasını dinleyerek koyuyor (app.js::applyTheme). Böylece palet tek yerde duruyor — medya sorgusu da kalsaydı aynı 20 satırı iki kez sürdürmek gerekirdi. */ :root[data-theme="dark"] { color-scheme: dark; --plane: #0B0F14; --card: #19212A; --card-2: #202A34; --ink: #E6EBF1; --ink-2: #99A6B4; --ink-3: #6C7885; --line: #2B3641; --line-soft: #232E38; --series: #2FA894; --series-dim: #1E3B39; --series-ink: #6FD0BE; --critical-bg:#331B1B; --good-bg: #152E15; --warning-bg: #33290F; --warn-ink: #f0c159; --cam: color-mix(in srgb, var(--card) 55%, transparent); --cam-cizgi: rgba(255, 255, 255, .10); --cam-isik: rgba(255, 255, 255, .09); --cam-golge: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35); --cam-hap: color-mix(in srgb, var(--series) 30%, transparent); --grid: #232D37; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--plane); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } .hidden { display: none !important; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } :focus-visible { outline: 2px solid var(--series); outline-offset: 2px; } /* ------------------------------------------------------------- giriş */ .login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); } .login-inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; } .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; } .logo { width: 60px; height: 60px; border-radius: 17px; background: var(--series); color: #fff; display: grid; place-items: center; font-size: 29px; font-weight: 700; } .brand-name { font-size: 22px; font-weight: 650; letter-spacing: -.02em; } .brand-sub { font-size: 13.5px; color: var(--ink-3); } .stack { display: flex; flex-direction: column; gap: 11px; } .lbl { font-size: 13px; color: var(--ink-2); font-weight: 550; } .input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; font-size: 16px; /* 16px altı iOS'ta sayfayı yakınlaştırıyor */ } .input::placeholder { color: var(--ink-3); } .code-input { text-align: center; font-size: 27px; letter-spacing: .38em; font-variant-numeric: tabular-nums; padding: 14px 10px; } .btn { background: var(--series); color: #fff; border-radius: 11px; padding: 14px; font-size: 16px; font-weight: 620; text-align: center; } .btn:active { filter: brightness(.92); } .btn[disabled] { opacity: .55; } .btn.ghost { background: transparent; color: var(--series-ink); border: 1px solid var(--line); } .hint { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 0; line-height: 1.45; } .error { background: var(--critical-bg); color: var(--critical); border-radius: 10px; padding: 11px 13px; font-size: 14px; margin: 0; } /* --------------------------------------------------------- uygulama */ .app { min-height: 100dvh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); padding: calc(10px + env(safe-area-inset-top)) 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hh { font-size: 16px; font-weight: 650; letter-spacing: -.01em; } .hh-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); } .period { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 570; color: var(--ink); white-space: nowrap; } .view { flex: 1; padding: 14px 16px calc(var(--tabh) + var(--tab-bosluk) + 22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; } /* ------------------------------------------------------------ tablar */ /* Yüzen cam çubuk. Ekranın altına yapışmıyor; kenarlardan ve alttan --tab-bosluk kadar açıkta duruyor, arkasındaki içerik bulanık geçiyor. */ .tabs { position: fixed; z-index: 30; left: var(--tab-bosluk); right: var(--tab-bosluk); bottom: calc(var(--tab-bosluk) + env(safe-area-inset-bottom)); max-width: 520px; margin-inline: auto; /* geniş ekranda gereksiz uzamasın */ display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 26px; background: var(--cam); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--cam-cizgi); box-shadow: var(--cam-golge), inset 0 1px 0 var(--cam-isik); overflow: hidden; } /* Bulanıklık desteklenmiyorsa (eski WebView) saydamlık okunaksız kalır; o durumda düz zemine düşüyoruz. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabs { background: var(--card); } } /* Seçili sekmenin altındaki kayan hap. Genişliği tam bir sütun (%25), bu yüzden translateX(%100) tam bir sütun kaydırıyor; sıra numarasını app.js::setTabIndicator doğrudan `transform` olarak yazıyor. Kayma animasyonunu buradaki transition yapıyor. */ .tab-glow { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; transform: translateX(0); transition: transform .44s cubic-bezier(.34, 1.32, .48, 1); pointer-events: none; } .tab-glow::after { content: ""; position: absolute; inset: 7px 8px; border-radius: 999px; background: var(--cam-hap); box-shadow: inset 0 1px 0 var(--cam-isik); } .tab { position: relative; z-index: 1; /* hapın üstünde kalsın */ height: var(--tabh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); transition: color .25s ease, transform .18s ease; } .tab .ti { font-size: 19px; line-height: 1; transition: transform .34s cubic-bezier(.34, 1.32, .48, 1); } .tab .tl { font-size: 10.5px; font-weight: 560; } .tab.is-on { color: var(--series-ink); } .tab.is-on .ti { transform: scale(1.09); } .tab:active { transform: scale(.93); } @media (prefers-reduced-motion: reduce) { .tab-glow, .tab, .tab .ti { transition: none; } } /* -------------------------------------------------------------- kart */ .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 11px; } .card-title { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-family: var(--mono); } .hero { font-size: 33px; font-weight: 660; letter-spacing: -.028em; line-height: 1.04; } .delta { font-size: 13px; color: var(--ink-2); display: flex; gap: 7px; flex-wrap: wrap; } .delta .up { color: var(--critical); font-weight: 620; } .delta .dn { color: var(--good); font-weight: 620; } .quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; } .mini { background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .mini .k { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: .05em; } .mini .v { font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; } .mini .v.neg { color: var(--critical); } /* ------------------------------------------------------------ barlar */ .bars { display: flex; flex-direction: column; gap: 11px; } .bar { display: flex; flex-direction: column; gap: 5px; } .bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; } .bar-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-vl { color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; font-size: 13px; } .bar-tr { height: 7px; background: var(--grid); border-radius: 4px; overflow: hidden; } .bar-fl { height: 100%; background: var(--series); border-radius: 4px; } .acode { font-family: var(--mono); font-size: 10.5px; background: var(--series-dim); color: var(--series-ink); border-radius: 4px; padding: 0 5px; margin-left: 6px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ meter */ .meter { display: flex; flex-direction: column; gap: 5px; } .meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; align-items: center; } .meter-tr { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; } .meter-fl { height: 100%; border-radius: 4px; background: var(--series); } .meter-fl.over { background: var(--critical); } .meter-sub { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 620; padding: 2px 8px; border-radius: 999px; background: var(--critical-bg); color: var(--critical); white-space: nowrap; } /* ------------------------------------------------------------- liste */ .rows { display: flex; flex-direction: column; } .row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); text-align: left; width: 100%; } .row:last-child { border-bottom: none; } .row .em { font-size: 19px; line-height: 1; } .row .nm { min-width: 0; } .row .nm .t { font-size: 14.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .nm .s { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .amt { font-variant-numeric: tabular-nums; font-weight: 620; font-size: 14.5px; flex: none; } .row .amt.inc { color: var(--good); } .row:active { background: var(--card-2); } /* ------------------------------------------------------------ uyarı */ .alert { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 13px; background: var(--card); display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow); } .badge { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } .b-crit { background: var(--critical-bg); color: var(--critical); } .b-warn { background: var(--warning-bg); color: var(--warn-ink); } .b-info { background: var(--series-dim); color: var(--series-ink); } .alert .t { font-size: 14px; font-weight: 600; } .alert .d { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; } /* ------------------------------------------------------------- ekle */ .compose { display: flex; flex-direction: column; gap: 12px; } .compose textarea { width: 100%; min-height: 108px; resize: none; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px; font-size: 17px; line-height: 1.45; } .examples { display: flex; flex-wrap: wrap; gap: 7px; } .chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--ink-2); } .chip:active { background: var(--card-2); } .saved { border: 1px solid color-mix(in srgb, var(--series) 35%, transparent); background: var(--card); border-radius: 13px; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow); } .saved .amt { font-size: 25px; font-weight: 650; letter-spacing: -.02em; } .saved .meta { font-size: 13px; color: var(--ink-2); } .saved-actions { display: flex; gap: 8px; flex-wrap: wrap; } .sbtn { border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; font-size: 13.5px; font-weight: 550; background: var(--card-2); color: var(--ink); } .sbtn.danger { color: var(--critical); } /* ------------------------------------------------------------ diğer */ .listcard { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .litem { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; } .litem:last-child { border-bottom: none; } .litem .v { color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; } .litem:active { background: var(--card-2); } .litem.danger { color: var(--critical); } .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--series-dim); color: var(--series-ink); } .pill.lock { background: var(--card-2); color: var(--ink-3); } .empty { text-align: center; color: var(--ink-3); font-size: 14px; padding: 34px 20px; line-height: 1.6; } .skeleton { height: 92px; border-radius: 14px; background: var(--card-2); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none } } /* ------------------------------------------------------------- toast */ .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabh) + var(--tab-bosluk) + 18px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100% - 32px); background: var(--ink); color: var(--plane); border-radius: 11px; padding: 11px 16px; font-size: 13.5px; box-shadow: var(--shadow); text-align: center; } /* ------------------------------------------------------------- sheet */ .sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; } .sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .sheet-panel { position: relative; width: 100%; max-height: 78dvh; background: var(--card); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); animation: rise .2s ease-out; } @keyframes rise { from { transform: translateY(12px); opacity: .6 } to { transform: none; opacity: 1 } } @media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none } } .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); font-weight: 620; font-size: 15.5px; } .x { font-size: 17px; color: var(--ink-3); padding: 4px 8px; } .sheet-body { overflow-y: auto; padding: 8px 12px 18px; display: flex; flex-direction: column; gap: 2px; } .pick { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: 11px; font-size: 15px; text-align: left; width: 100%; } .pick:active { background: var(--card-2); } .pick .pe { font-size: 19px; } .pick .pc { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); } .note { font-size: 12px; color: var(--ink-3); padding: 10px 14px 0; line-height: 1.5; } /* ------------------------------------------------------- tema seçici */ .segment { display: flex; gap: 6px; padding: 6px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); } .segment button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 10px; font-size: 13px; font-weight: 560; color: var(--ink-2); background: transparent; } .segment button .se { font-size: 17px; line-height: 1; } .segment button:active { background: var(--card-2); } .segment button.is-on { background: var(--series-dim); color: var(--series-ink); }