/* ===== GÜVENLİ ALAN (çentik / durum çubuğu / gezinme çubuğu) ===== Yerel Android uygulamasında env(safe-area-inset-*) çoğu cihazda 0 dönüyor: WebView bu değerleri ancak sürüm 140+ ve gerçekten kenardan kenara çizim yapılırken bildiriyor. Capacitor bunun yerine ölçtüğü boşlukları --safe-area-inset-* özel değişkenleri olarak üzerine yazıyor. Uygulamanın üst bloğu ("Merhaba …", ayarlar) bazı telefonlarda tam da bu yüzden durum çubuğunun altında kalıyordu. Aşağıdaki dört değişken önce Capacitor'ın yazdığı değere, o yoksa env()'e, o da yoksa sıfıra düşer. Böylece tek bir yazımla hem yerel uygulama, hem tarayıcı, hem de iOS doğru boşluğu alıyor. --sa-top ayrıca bir taban değerle max() alıyor. O tabanı app.js yazıyor: Capacitor'ın ölçümü ilk açılışta gecikip sıfır kaldığında (başlık durum çubuğunun altında kalıyordu) durum çubuğu yüksekliğini oradan öğrenip buraya bırakıyoruz. Doğru değer zaten geldiyse max() sonucu değiştirmez. */ :root { --sa-top-floor: 0px; --sa-top: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), var(--sa-top-floor)); --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); /* AdMob afişi web sayfasının değil, uygulamanın üstünde duran yerel bir katman: yüksekliğini CSS'ten bilemiyoruz. Afiş yüklendiğinde app.js gerçek yüksekliği buraya yazıyor, alt çubuk ve içerik o kadar yukarı kayıyor. Reklam yoksa (Plus üyesi veya tarayıcı) 0 kalıyor. */ --ads-h: 0px; /* Bildirimlerin (toast) taban yüksekliği: reklam afişi, yüzen alt çubuk ve güvenli alanın üstünde kalmalı. app.js üst üste binen bildirimleri bu tabanın üzerine ekliyor. */ --toast-base: calc(7.2rem + var(--sa-bottom) + var(--ads-h)); } /* ===== CSS VARIABLES / THEMES ===== */ /* Default: Cosmos */ :root { --bg-primary: #07071a; --bg-secondary: #0f0f2e; --bg-card: #13133a; --accent: #6366f1; --accent-hover: #4f46e5; --accent2: #a78bfa; --text-primary: #f0f0ff; --text-secondary: #8b8baf; --text: #f0f0ff; --text-dim: #8b8baf; --success: #34d399; --success-bg: rgba(52,211,153,0.12); --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.1); --danger: #f87171; --danger-bg: rgba(248,113,113,0.12); --border: rgba(99,102,241,0.2); --border-solid: #1e1e4a; --radius: 14px; --shadow: 0 8px 32px rgba(0,0,0,0.4); --anim-speed: 0.3s; --particle1: rgba(99,102,241,0.3); --particle2: rgba(167,139,250,0.2); --particle3: rgba(236,72,153,0.15); --glass: rgba(19,19,58,0.7); --glass-border: rgba(99,102,241,0.25); /* Derived semantic variables */ --accent-rgb: 99,102,241; --accent-soft: rgba(99,102,241,0.12); --accent-mid: rgba(99,102,241,0.16); --accent-glow: rgba(99,102,241,0.25); --streak-color: #fb923c; --streak-border: rgba(251,146,60,0.4); --note-blue: #4f9cf7; --note-green: #4ade80; --note-yellow: #fbbf24; --note-red: #f87171; --note-purple: #a78bfa; --note-orange: #fb923c; } [data-theme="dark"] { /* Nötr koyu tema: mavi/mor bir kimlik dayatmayan, gece çalışması için kontrastı düşük tutulmuş varsayılan koyu görünüm. */ --bg-primary: #0d0f14; --bg-secondary: #141821; --bg-card: #1a1f2b; --accent: #8b95ff; --accent-hover: #757fee; --accent2: #a5adff; --text-primary: #e7e9ee; --text-secondary: #9aa0ad; --text: #e7e9ee; --text-dim: #9aa0ad; --success: #4ade80; --success-bg: rgba(74,222,128,0.12); --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.1); --danger: #f87171; --danger-bg: rgba(248,113,113,0.12); --border: rgba(255,255,255,0.1); --border-solid: #262c39; --particle1: rgba(139,149,255,0.22); --particle2: rgba(165,173,255,0.16); --particle3: rgba(255,255,255,0.08); --accent-rgb: 139,149,255; --glass: rgba(26,31,43,0.82); --glass-border: rgba(255,255,255,0.1); --accent-soft: rgba(139,149,255,0.12); --accent-mid: rgba(139,149,255,0.18); --accent-glow: rgba(139,149,255,0.28); --streak-color: #fb923c; --streak-border: rgba(251,146,60,0.4); --note-blue: #7dd3fc; --note-green: #4ade80; --note-yellow: #fbbf24; --note-red: #f87171; --note-purple: #a5adff; --note-orange: #fb923c; } [data-theme="ember"] { --bg-primary: #0f0600; --bg-secondary: #1a0a00; --bg-card: #251200; --accent: #f97316; --accent-hover: #ea580c; --accent2: #fb923c; --text-primary: #fff0e8; --text-secondary: #b07050; --text: #fff0e8; --text-dim: #b07050; --success: #34d399; --success-bg: rgba(52,211,153,0.12); --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.1); --danger: #f87171; --danger-bg: rgba(248,113,113,0.12); --border: rgba(249,115,22,0.2); --border-solid: #3a1a00; --particle1: rgba(249,115,22,0.3); --particle2: rgba(251,146,60,0.2); --particle3: rgba(234,88,12,0.15); --accent-rgb: 249,115,22; --glass: rgba(37,18,0,0.75); --glass-border: rgba(249,115,22,0.25); --accent-soft: rgba(249,115,22,0.12); --accent-mid: rgba(249,115,22,0.25); --accent-glow: rgba(249,115,22,0.4); --streak-color: #fbbf24; --streak-border: rgba(251,191,36,0.4); --note-blue: #60a5fa; --note-green: #4ade80; --note-yellow: #fbbf24; --note-red: #f87171; --note-purple: #c084fc; --note-orange: #fb923c; } [data-theme="frost"] { --bg-primary: #f0f4ff; --bg-secondary: #e4eaf8; --bg-card: #ffffff; --accent: #3b82f6; --accent-hover: #2563eb; --accent2: #60a5fa; --text-primary: #0f172a; --text-secondary: #64748b; --text: #0f172a; --text-dim: #64748b; --success: #16a34a; --success-bg: rgba(22,163,74,0.1); --warning: #d97706; --warning-bg: rgba(217,119,6,0.1); --danger: #dc2626; --danger-bg: rgba(220,38,38,0.1); --border: rgba(59,130,246,0.18); --border-solid: #d1d9f0; --particle1: rgba(59,130,246,0.08); --particle2: rgba(96,165,250,0.07); --particle3: rgba(139,92,246,0.05); --shadow: 0 8px 32px rgba(0,0,0,0.08); --accent-rgb: 59,130,246; --glass: rgba(255,255,255,0.8); --glass-border: rgba(59,130,246,0.2); --anim-speed: 0.25s; --accent-soft: rgba(59,130,246,0.1); --accent-mid: rgba(59,130,246,0.13); --accent-glow: rgba(59,130,246,0.22); --streak-color: #f97316; --streak-border: rgba(249,115,22,0.35); --note-blue: #3b82f6; --note-green: #16a34a; --note-yellow: #d97706; --note-red: #dc2626; --note-purple: #7c3aed; --note-orange: #f97316; } /* Sakura — pastel şeftali/lavanta. Açık ama beyaz değil: uzun çalışma oturumlarında beyaz zemin gözü yorduğu için taban krem tonunda. */ [data-theme="sakura"] { --bg-primary: #fdf6f7; --bg-secondary: #f7eaee; --bg-card: #fffbfc; --accent: #d4809f; --accent-hover: #c26b8c; --accent2: #b79ad6; --text-primary: #3f3340; --text-secondary: #8a7684; --text: #3f3340; --text-dim: #8a7684; --success: #5aa87f; --success-bg: rgba(90,168,127,0.12); --warning: #c98a3c; --warning-bg: rgba(201,138,60,0.12); --danger: #d4707a; --danger-bg: rgba(212,112,122,0.12); --border: rgba(212,128,159,0.22); --border-solid: #ecd8de; --shadow: 0 8px 32px rgba(90,60,75,0.09); --particle1: rgba(212,128,159,0.10); --particle2: rgba(183,154,214,0.09); --particle3: rgba(240,180,190,0.07); --accent-rgb: 212,128,159; --glass: rgba(255,251,252,0.82); --glass-border: rgba(212,128,159,0.22); --accent-soft: rgba(212,128,159,0.11); --accent-mid: rgba(212,128,159,0.15); --accent-glow: rgba(212,128,159,0.24); --streak-color: #e08b5a; --streak-border: rgba(224,139,90,0.35); --note-blue: #6f96d1; --note-green: #5aa87f; --note-yellow: #c98a3c; --note-red: #d4707a; --note-purple: #a487cc; --note-orange: #e08b5a; } /* Sage — pastel adaçayı/eukaliptus. Sakura'nın soğuk karşılığı. */ [data-theme="sage"] { --bg-primary: #f3f7f2; --bg-secondary: #e6eee6; --bg-card: #fbfdfa; --accent: #6fa287; --accent-hover: #5a8a70; --accent2: #8fbfa8; --text-primary: #2f3b34; --text-secondary: #71827a; --text: #2f3b34; --text-dim: #71827a; --success: #5aa87f; --success-bg: rgba(90,168,127,0.12); --warning: #c2913f; --warning-bg: rgba(194,145,63,0.12); --danger: #cc7a72; --danger-bg: rgba(204,122,114,0.12); --border: rgba(111,162,135,0.22); --border-solid: #d7e3d8; --shadow: 0 8px 32px rgba(50,70,58,0.09); --particle1: rgba(111,162,135,0.10); --particle2: rgba(143,191,168,0.09); --particle3: rgba(180,205,160,0.07); --accent-rgb: 111,162,135; --glass: rgba(251,253,250,0.82); --glass-border: rgba(111,162,135,0.22); --accent-soft: rgba(111,162,135,0.11); --accent-mid: rgba(111,162,135,0.15); --accent-glow: rgba(111,162,135,0.24); --streak-color: #d08a52; --streak-border: rgba(208,138,82,0.35); --note-blue: #6f96d1; --note-green: #5aa87f; --note-yellow: #c2913f; --note-red: #cc7a72; --note-purple: #9b8cc4; --note-orange: #d08a52; } /* Pixel — sayaç sahnelerinin dilinden konuşan tema: yuvarlatma neredeyse sıfır, gölge yerine sert bir offset, yazı tipi tek aralıklı. */ [data-theme="pixel"] { --bg-primary: #14182a; --bg-secondary: #1c2138; --bg-card: #232a45; --accent: #7ee787; --accent-hover: #63cf6c; --accent2: #f8d34e; --text-primary: #e8ecf5; --text-secondary: #93a0c0; --text: #e8ecf5; --text-dim: #93a0c0; --success: #7ee787; --success-bg: rgba(126,231,135,0.12); --warning: #f8d34e; --warning-bg: rgba(248,211,78,0.12); --danger: #ff7b72; --danger-bg: rgba(255,123,114,0.12); --border: rgba(126,231,135,0.28); --border-solid: #2f3757; --radius: 3px; --shadow: 3px 3px 0 rgba(0,0,0,0.45); --particle1: rgba(126,231,135,0.16); --particle2: rgba(248,211,78,0.12); --particle3: rgba(122,162,247,0.10); --accent-rgb: 126,231,135; --glass: rgba(35,42,69,0.9); --glass-border: rgba(126,231,135,0.3); --accent-soft: rgba(126,231,135,0.12); --accent-mid: rgba(126,231,135,0.18); --accent-glow: rgba(126,231,135,0.3); --streak-color: #ffa657; --streak-border: rgba(255,166,87,0.4); --note-blue: #7aa2f7; --note-green: #7ee787; --note-yellow: #f8d34e; --note-red: #ff7b72; --note-purple: #bb9af7; --note-orange: #ffa657; } /* Pixel temasının karakteri renkten çok biçimde: köşeler kırılır, cam efekti yerine düz yüzeyler, sayılar tek aralıklı. */ [data-theme="pixel"] body, [data-theme="pixel"] .btn, [data-theme="pixel"] .tab, [data-theme="pixel"] input, [data-theme="pixel"] select, [data-theme="pixel"] textarea { /* Android'de 'Courier New' yok; sistem geniş bir tek aralıklı yazı tipine düşüyor ve aynı etiket masaüstündekinden belirgin şekilde uzuyordu. Roboto Mono her Android'de var ve genişliği ölçülü. */ font-family: 'Courier New', 'Roboto Mono', ui-monospace, monospace; letter-spacing: 0; } /* Tek aralıklı yazı tipi zaten geniş; buton etiketleri dar ekranda ancak biraz küçültülünce tek satıra sığıyor. */ [data-theme="pixel"] .btn { font-size: 0.94rem; } [data-theme="pixel"] .btn-sm { font-size: 0.8rem; padding-left: 0.7rem; padding-right: 0.7rem; } [data-theme="pixel"] .card, [data-theme="pixel"] .btn, [data-theme="pixel"] .goal-card, [data-theme="pixel"] .pomo-cycle-card, [data-theme="pixel"] .badge-card, [data-theme="pixel"] .modal-content { border-radius: var(--radius); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ===== RESET ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Mobilde çift dokunma-yakınlaştırma beklemesi (~300ms gecikme) kalksın — butonlar dokunur dokunmaz tepki versin. */ button, summary, label, select, input, textarea, a, .pomo-cycle-card, .goal-card, .badge-card, .sound-option, .tab-btn, .countdown-item, .custom-pomo-item, .custom-goal-settings-item { touch-action: manipulation; } /* ===== TUTARLI DOKUNMA/TIKLAMA GERİ BİLDİRİMİ ===== Tap-highlight kapalı olduğu için (mobil PWA) her tıklanabilir öğede görünür, tutarlı bir "basıldı" tepkisi olmalı — aksi halde dokunuş hissedilmiyor. */ button, .btn-icon, .pomo-cycle-card, .badge-card, .sound-option, .settings-section > summary, .pomo-more-options > summary, .goal-card, .custom-goal-settings-item, .countdown-item, .custom-pomo-item { transition: transform 0.12s cubic-bezier(0.4,0,0.2,1), background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } button:not(:disabled):active, .btn-icon:active, .pomo-cycle-card:active, .badge-card:active, .sound-option:active, .goal-card:active { transform: scale(0.94); } /* Tam genişlikteki başlıklarda 0.94 fazla zıplıyor — daha ölçülü bir tepki */ .settings-section > summary:active, .pomo-more-options > summary:active { transform: scale(0.985); color: var(--accent); } button:disabled { cursor: not-allowed; } /* Dokunmatik cihazlarda :hover, parmak kalktıktan sonra da "yapışık" kalıyor: öğe büyümüş hâlde donuyor ve bir sonraki dokunuş yanlış yere gidiyor gibi hissettiriyor. Fare olmayan cihazlarda hover'ın konum/boyut etkilerini iptal et — geri bildirimi :active veriyor zaten. */ @media (hover: none) { .btn-primary:hover, .btn-secondary:hover, .btn-icon:hover, .btn-reset:hover, #streak-badge:hover, #countdown-badge:hover, .goal-check-btn:hover:not(:disabled), .pomo-cycle-card:hover, .pomo-stat-item:hover, .pie-legend-item:hover, .note-cat-tab:hover, .note-color-btn:hover, .custom-goal-delete:hover, .theme-btn:hover, .countdown-delete-btn:hover, .btn-danger:hover, .quiz-option-btn:hover:not(:disabled), .tour-next-btn:hover { transform: none; } } /* Dokunma hedefleri parmakla rahat isabet alacak kadar büyük olmalı */ .btn-icon, .countdown-delete-btn, .custom-goal-delete { min-width: 40px; min-height: 40px; } .btn-sm { min-height: 40px; } .pomo-category-select select, .settings-input { min-height: 42px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; transition: background var(--anim-speed), color var(--anim-speed); overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Android Chrome, dar sütunlardaki yazıyı kendiliğinden büyütüyor ("font boosting"); istatistik kartlarında sayılar kutulardan taşıyordu. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); } /* Güvenlik ağı: tek bir uzun etiket bile sayfayı yatay kaydırılabilir yaparsa bütün arayüz yana kaymış görünüyor (başlık soldan kırpılır, alt çubuk sağdan taşar). `clip`, `hidden`'ın aksine yeni bir kaydırma kapsayıcısı açmadığı için içerideki `position: sticky` başlık çalışmaya devam eder. */ .screen { display: none; flex-direction: column; min-height: 100vh; overflow-x: clip; } .screen.active { display: flex; min-height: 100dvh; } .settings-page, .premium-page { overflow-x: clip; } #main-screen { max-width: 600px; margin: 0 auto; width: 100%; } /* ===== KEYFRAMES ===== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes bounceIn { 0% { transform: scale(0.3) rotate(-10deg); opacity: 0; } 50% { transform: scale(1.08) rotate(2deg); } 70% { transform: scale(0.95) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes badgeUnlock { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes particleFloat { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; } 50% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(var(--dx, 20px)) scale(0.5); opacity: 0; } } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } /* Ripple effect */ .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); pointer-events: none; animation: ripple 0.6s ease-out; } /* Tab animation */ .tab-content { opacity: 0; transform: translateX(20px); transition: none; } .tab-content.active { opacity: 1; transform: translateX(0); animation: fadeIn 0.4s ease-out; } .category { animation: slideUp 0.4s ease-out both; } .category:nth-child(2) { animation-delay: 0.04s; } .category:nth-child(3) { animation-delay: 0.08s; } .category:nth-child(4) { animation-delay: 0.12s; } .category:nth-child(5) { animation-delay: 0.16s; } .category:nth-child(6) { animation-delay: 0.20s; } .stat-card { animation: fadeInScale 0.4s ease-out both; } .stat-card:nth-child(1) { animation-delay: 0.05s; } .stat-card:nth-child(2) { animation-delay: 0.1s; } .stat-card:nth-child(3) { animation-delay: 0.15s; } .stat-card:nth-child(4) { animation-delay: 0.2s; } /* ===== LOGIN ===== */ #login-screen { background: radial-gradient(ellipse at 30% 50%, var(--particle1) 0%, transparent 60%), radial-gradient(ellipse at 70% 20%, var(--particle2) 0%, transparent 60%), var(--bg-primary); position: relative; overflow: hidden; } [data-theme="dark"] #login-screen { background: radial-gradient(ellipse at 30% 50%, rgba(139,149,255,0.12), transparent 60%), radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.05), transparent 60%), var(--bg-primary); } [data-theme="ember"] #login-screen { background: radial-gradient(ellipse at 30% 50%, rgba(249,115,22,0.15), transparent 60%), radial-gradient(ellipse at 70% 20%, rgba(234,88,12,0.1), transparent 60%), var(--bg-primary); } .login-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .login-particle { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0; animation: particleFloat linear infinite; } .login-container { margin: auto; text-align: center; padding: 2.5rem 2rem; animation: fadeIn 0.7s ease-out; position: relative; z-index: 1; } .login-logo { font-size: 3.5rem; margin-bottom: 0.75rem; display: block; animation: float 3s ease-in-out infinite; } .login-container h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .subtitle { color: var(--text-secondary); margin-bottom: 2.5rem; font-size: 1rem; } /* Karşılama ekranındaki "veriler cihazda kalır" notu. Düğmenin altında, okunabilir ama ekranın ağırlık merkezini çalmayacak kadar sessiz. */ .login-note { margin: 1.25rem auto 0; max-width: 22rem; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all var(--anim-speed) cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; /* Etiket eskiden tek satıra zorlanıyordu (white-space: nowrap) ve buton overflow:hidden olduğu için taşan kısım görünmeden kırpılıyordu: dar ekranda "Başarı Belgesi Oluştur (JPEG)" ya da "Evet, İptal Et" yarıda kesiliyordu. Pixel temasında yazı tipi tek aralıklı olduğu için sorun her etikette çıkıyordu. Artık etiket sarılıyor, buton da kapsayıcısını aşamıyor. */ white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; overflow-wrap: break-word; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; box-shadow: 0 2px 12px var(--accent-mid); } .btn-primary:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.12); box-shadow: 0 4px 20px var(--accent-glow); } .btn-primary:active { transform: translateY(0) scale(1); } .btn-secondary { background: var(--glass); color: var(--text-primary); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-secondary:hover { border-color: var(--accent); transform: translateY(-1px) scale(1.02); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn-icon { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; color: var(--text-secondary); transition: all 0.2s; border-radius: 8px; } .btn-icon:hover { color: var(--text-primary); transform: scale(1.15); background: var(--accent-soft); } .btn-reset { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--danger); padding: 0.4rem 0.7rem; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.2s; } .btn-reset:hover { border-color: var(--danger); background: var(--danger-bg); transform: rotate(-20deg) scale(1.1); } /* ===== HEADER ===== */ header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--glass-border); animation: slideDown 0.4s ease-out; position: sticky; top: 0; z-index: 100; /* Cam efekti yarı saydam olduğu için altından geçen içerik başlığın içinden okunuyordu ("Günlük İlerleme" yazısı selamlamanın üstüne biniyordu). Cam rengini donuk bir zemin üzerine sererek tonu koruyup saydamlığı kaldırıyoruz — backdrop-filter desteklenmeyen WebView'larda da doğru. */ background-color: var(--bg-primary); background-image: linear-gradient(var(--glass), var(--glass)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--glass-border), 0 4px 24px rgba(0,0,0,0.2); } .header-left h2 { font-size: 1.15rem; font-weight: 700; } .header-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; flex-wrap: wrap; } #current-date { font-size: 0.78rem; color: var(--text-secondary); } .header-time-badge { font-size: 0.78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 0.1rem 0.5rem; border-radius: 6px; border: 1px solid var(--accent-mid); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } .header-right { display: flex; align-items: center; gap: 0.35rem; } #streak-badge, #countdown-badge { background: var(--glass); padding: 0.32rem 0.6rem; border-radius: 20px; font-size: 0.7rem; border: 1px solid var(--border); white-space: nowrap; transition: all 0.3s; cursor: default; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #streak-badge { border-color: var(--streak-border); color: var(--streak-color); } #countdown-badge { border-color: var(--warning-bg); color: var(--warning); } #streak-badge:hover, #countdown-badge:hover { transform: scale(1.05); } /* ===== DASHBOARD HERO ===== */ .dashboard-hero { position: relative; overflow: hidden; margin: 0; padding: 1.1rem 1.2rem 0.9rem; background-color: var(--bg-primary); background-image: linear-gradient(var(--glass), var(--glass)); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: slideDown 0.5s cubic-bezier(0.34,1.56,0.64,1); } .hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 1; } .hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .hero-greeting-block { display: flex; align-items: center; gap: 0.6rem; } .hero-emoji { font-size: 1.6rem; animation: hero-emoji-float 3s ease-in-out infinite; } @keyframes hero-emoji-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .hero-greeting { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; } .hero-date { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; } .hero-time-block { text-align: right; } .hero-clock { font-size: 1.5rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1; text-shadow: 0 0 12px var(--accent-mid); } .hero-progress-block { margin-bottom: 0.7rem; } .hero-progress-header { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 0.35rem; } .hero-progress-label { color: var(--text-secondary); font-weight: 500; } .hero-progress-pct { color: var(--accent); font-weight: 700; } .hero-progress-bar-wrap { position: relative; height: 7px; background: var(--bg-secondary); border-radius: 4px; overflow: visible; } /* Haftalık hedef göstergesi — kaç gün aktif olundu + seri dondurma hakkı */ .hero-weekly { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.68rem; color: var(--text-secondary); } .hero-weekly:empty { display: none; } .hero-week-label { font-weight: 600; } .hero-week-dots { display: flex; gap: 4px; } .hero-week-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border); transition: background 0.3s ease, box-shadow 0.3s ease; } .hero-week-dot.filled { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .hero-week-freeze { margin-left: auto; font-weight: 700; color: #7dd3fc; background: rgba(125,211,252,0.12); border: 1px solid rgba(125,211,252,0.3); border-radius: 10px; padding: 0.1rem 0.45rem; } .weekly-target-options { display: flex; flex-wrap: wrap; gap: 0.4rem; } .streak-freeze-info { margin-top: 0.7rem; } .streak-freeze-row { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-secondary); background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.75rem; } .streak-freeze-row b { color: var(--text-primary); } .hero-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.8s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 0 8px var(--accent-glow); } .hero-progress-glow { position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2), 0 0 20px var(--accent); transition: left 0.8s cubic-bezier(0.4,0,0.2,1); pointer-events: none; margin-left: -6px; } .hero-stats-row { /* Geri sayım etiketi iki satıra taşabildiği için hizalama üstten: ortalanınca diğer üç sütunun rakamları aşağı kayıyordu. */ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem; background: var(--bg-secondary); border-radius: 10px; padding: 0.55rem 0.75rem; border: 1px solid var(--border); } .hero-stat { text-align: center; flex: 1; min-width: 0; } /* Geri sayım "· 15 gün kaldı" ekiyle en uzun etiket; komşularından pay alır. */ .hero-stat-countdown { flex: 1.7; } .hero-stat-val { display: block; font-size: 1.25rem; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.5px; } .hero-stat-label { display: block; font-size: 0.62rem; color: var(--text-secondary); margin-top: 0.18rem; line-height: 1.25; overflow-wrap: anywhere; } .hero-stat-divider { width: 1px; height: 28px; background: var(--border); flex: 0 0 auto; } /* ===== MOTIVATION ===== */ /* ===== TABS ===== */ /* ===== ALT GEZİNME (yüzen çubuk) ===== Çubuk ekranın dibine yapışmıyor: kenarlardan boşluklu, yuvarlak köşeli ve gölgeli bir katman. Etiketler yalnızca aktif sekmede açılıyor — dört etiketin yan yana sıkışması yerine tek bir okunur "hap" kalıyor. */ .tabs { display: flex; align-items: stretch; position: fixed; left: max(0.7rem, var(--sa-left)); right: max(0.7rem, var(--sa-right)); bottom: calc(1rem + var(--sa-bottom) + var(--ads-h)); z-index: 500; /* Çubuk içeriğin üzerinde yüzüyor; saydam kalınca altındaki istatistik kartları çubuğun içinden görünüp okunmaz bir karışıklık oluşturuyordu. */ background-color: var(--bg-primary); background-image: linear-gradient(var(--glass), var(--glass)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 0 0.3rem; box-shadow: var(--shadow); height: 62px; overflow: visible; } /* Pixel temasında yuvarlak köşe karakteri bozuyor. */ [data-theme="pixel"] .tabs { border-radius: var(--radius); } .tabs::-webkit-scrollbar { display: none; } .tab-indicator { display: none; } /* Regular tabs */ .tab { /* Aktif sekme etiketini açtığı için komşularından pay alır; sabit paylı dağıtımda "İstatistik" kırpılıyordu. */ flex: 1 1 auto; padding: 0.5rem 0.35rem; margin: 0.35rem 0.1rem; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: clamp(0.55rem, 2vw, 0.68rem); font-weight: 600; cursor: pointer; transition: color 0.2s, background 0.2s; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.28rem; -webkit-tap-highlight-color: transparent; position: relative; min-width: 0; } [data-theme="pixel"] .tab { border-radius: var(--radius); } .tab::before { content: attr(data-icon); font-size: 1.25rem; line-height: 1; display: block; flex: 0 0 auto; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } /* Etiket aktif sekmede açılır. Genişliği canlandırmak, görünürlüğü açıp kapatmaktan farklı olarak komşu sekmeleri de yumuşakça yeniden yerleştirir. */ .tab-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.25s cubic-bezier(0.22,1,0.36,1), opacity 0.18s; } .tab.active { flex: 2.4 1 auto; color: var(--accent); font-weight: 700; background: var(--accent-soft); } .tab.active .tab-label { max-width: 6.5rem; opacity: 1; } .tab.active::before { transform: scale(1.06); } .tab:active { background: var(--accent-mid); } /* FAB — ortadaki büyük buton */ .tab-fab-wrap { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 0.35rem; position: relative; } .tab-fab { position: absolute; bottom: calc(100% - 22px); left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; box-shadow: 0 4px 20px var(--accent-glow), 0 0 0 4px var(--glass); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; -webkit-tap-highlight-color: transparent; z-index: 10; } [data-theme="pixel"] .tab-fab { border-radius: var(--radius); } .tab-fab.active-tab { background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 6px 28px var(--accent-glow), 0 0 0 4px var(--glass), 0 0 0 6px var(--accent-mid); transform: translateX(-50%) scale(1.08); } .tab-fab:active { transform: translateX(-50%) scale(0.9); } /* Tıklama efekti: dışa yayılan halka + ikonun kısa "zıplama"sı. Global button:active scale kuralı FAB'ın translateX'ini bozmasın diye burada ezilmiş durumda (yukarıdaki :active kuralı). */ .tab-fab::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent2); opacity: 0; transform: scale(0.75); pointer-events: none; } .tab-fab.fab-pop::after { animation: fabRing 0.6s cubic-bezier(0.22,1,0.36,1); } @keyframes fabRing { 0% { opacity: 0.85; transform: scale(0.75); } 100% { opacity: 0; transform: scale(1.55); } } .tab-fab.fab-pop .tab-fab-icon { animation: fabBounce 0.55s cubic-bezier(0.34,1.56,0.64,1); } @keyframes fabBounce { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.35) rotate(-14deg); } 65% { transform: scale(0.92) rotate(9deg); } 100% { transform: scale(1) rotate(0deg); } } .tab-fab-icon { font-size: 1.55rem; line-height: 1; display: inline-block; } /* Tıklamada etrafa saçılan küçük parçacıklar */ .fab-spark { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: fabSpark 0.65s ease-out forwards; } @keyframes fabSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.3); } } /* FAB etiketi de diğer sekmelerle aynı kuralı izler: yalnızca aktifken görünür. */ .tab-fab-label { font-size: clamp(0.55rem, 2vw, 0.68rem); color: var(--accent); font-weight: 700; margin-top: 0.1rem; opacity: 0; transition: opacity 0.2s; } .tab-fab.active-tab + .tab-fab-label { opacity: 1; } /* ===== "DAHA FAZLASI" ALT SAYFASI ===== Köşede açılan küçük liste, içindeki bölümleri fiilen görünmez kılıyordu. Alttan gelen tam genişlikte bir sayfa hepsini adı ve açıklamasıyla gösterir. */ .more-sheet { position: fixed; inset: 0; z-index: 700; } .more-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: sheetFade 0.2s ease-out; } .more-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-card); border-top: 1px solid var(--glass-border); border-radius: 22px 22px 0 0; /* Reklam afişi web görünümünün üstünde duran yerel bir katman: sayfanın alt kenarı onun altında kalıp son satır okunamıyordu. */ padding: 0.5rem 1rem calc(1.1rem + var(--sa-bottom) + var(--ads-h)); box-shadow: 0 -8px 32px rgba(0,0,0,0.35); animation: sheetUp 0.26s cubic-bezier(0.22,1,0.36,1); } [data-theme="pixel"] .more-sheet-panel { border-radius: var(--radius) var(--radius) 0 0; } /* Rehber sayfayı kendi açtığında: giriş animasyonu ölçümü bozuyor, kendi karartması da rehberinkiyle üst üste biniyor. İkisi de kapalı. */ .more-sheet.tour-open .more-sheet-panel { animation: none; } .more-sheet.tour-open .more-sheet-backdrop { display: none; } @keyframes sheetFade { from { opacity: 0; } } @keyframes sheetUp { from { transform: translateY(100%); } } .more-sheet-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--border-solid); margin: 0.35rem auto 0.7rem; } .more-sheet-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.7rem; } .more-sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .more-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.85rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; } .more-menu-item:hover, .more-menu-item:active { background: var(--accent-soft); border-color: var(--accent); } .more-item-ico { font-size: 1.35rem; line-height: 1; margin-bottom: 0.2rem; } .more-item-name { font-size: 0.9rem; font-weight: 700; } .more-item-desc { font-size: 0.7rem; color: var(--text-secondary); } /* Rehberde o an anlatılan öğe — hangisinden bahsedildiği net olsun */ .more-menu-item.tour-active-item { background: var(--accent-mid); border-color: var(--accent); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } /* ===== CONTENT ===== Alttaki boşluk, alt navigasyonu (60px) DEĞİL ortadaki yuvarlak pomodoro düğmesini geçmeli: o düğme çubuğun ~38px üstüne taşıyor, yani tabandan ~98px yukarı çıkıyor. Boşluk 5.5rem (88px) iken sayfanın en altındaki öğe — ör. "+ Yeni Hedef Ekle" — düğmenin altında kalıp okunamıyordu. */ #content { padding: 1.25rem; padding-bottom: calc(8.75rem + var(--sa-bottom) + var(--ads-h)); } .tab-content { display: none; } .tab-content.active { display: block; } .category { margin-bottom: 1.2rem; } .category h3 { font-size: 0.93rem; font-weight: 600; margin-bottom: 0.55rem; } /* ===== DAILY PROGRESS ===== */ .daily-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; font-size: 0.8rem; } .daily-progress-label { color: var(--text-secondary); font-weight: 500; } .daily-progress-pct { color: var(--accent); font-weight: 700; } .daily-progress-bar-wrap { height: 8px; background: var(--bg-card); border-radius: 4px; margin-bottom: 1.2rem; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); } .daily-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 0 10px var(--accent-glow); } /* ===== EMPTY GOALS PROMPT ===== */ .empty-goals-prompt { text-align: center; padding: 2.5rem 1rem; background: var(--glass); border: 1.5px dashed var(--border); border-radius: var(--radius); animation: fadeIn 0.4s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .empty-goals-prompt .empty-goals-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.6; } .empty-goals-prompt p { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 1rem; } /* Ortak boş ekran kartı — sekmeler bomboş görünmesin, ne yapılacağını anlatsın */ .empty-state { text-align: center; padding: 2.2rem 1.2rem; background: var(--glass); border: 1.5px dashed var(--border); border-radius: var(--radius); animation: fadeIn 0.4s ease-out; } .empty-state-icon { font-size: 2.2rem; margin-bottom: 0.5rem; opacity: 0.65; } .empty-state-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; } .empty-state-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; max-width: 34ch; margin: 0 auto; } .empty-state-btn { margin-top: 1rem; } /* ===== GOAL BLOCKS (READ ONLY for time goals) ===== */ .goal-block { background: var(--glass); padding: 0.95rem; border-radius: var(--radius); border: 1px solid var(--glass-border); transition: all var(--anim-speed); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .goal-block:hover { border-color: var(--accent); box-shadow: 0 2px 16px var(--accent-soft); transform: translateY(-2px); } .goal-block-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .goal-progress-info { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.3rem; font-weight: 500; } .goal-progress-info .goal-current { color: var(--accent); font-weight: 700; } .goal-mini-progress { height: 6px; background: var(--bg-secondary); border-radius: 3px; margin: 0.55rem 0 0; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); } .goal-mini-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--success), var(--success)); border-radius: 3px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 0 8px var(--success-bg); } .goal-status { font-size: 0.78rem; color: var(--text-secondary); min-height: 1.1em; transition: all 0.3s; margin-top: 0.28rem; } .goal-status.goal-completed { color: var(--success); font-weight: 600; } .goal-block-readonly { cursor: default; } .goal-block-readonly:hover { transform: none; } .goal-block.is-completed { border-color: var(--success); background: linear-gradient(135deg, rgba(52,211,153,0.06), var(--bg-card)); } .goal-status.goal-in-progress { color: var(--accent); } .goal-status.goal-empty { color: var(--text-secondary); font-style: italic; } .goal-pct-badge { font-size: 0.7rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 0.1rem 0.45rem; border-radius: 20px; margin-left: 0.5rem; } /* Checkbox goal block */ .goal-block-checkbox { background: var(--glass); padding: 0.95rem; border-radius: var(--radius); border: 1px solid var(--glass-border); transition: all var(--anim-speed); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .goal-block-checkbox:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 2px 16px var(--accent-soft); } .goal-checkbox-btns { display: flex; gap: 0.5rem; } .goal-check-btn { padding: 0.48rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.82rem; cursor: pointer; transition: all var(--anim-speed); font-weight: 500; white-space: nowrap; } .goal-check-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); } .goal-check-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .goal-check-btn.done-yes { background: var(--success-bg); border-color: var(--success); color: var(--success); box-shadow: 0 0 10px var(--success-bg); } .goal-check-btn.done-no { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); box-shadow: 0 0 10px var(--danger-bg); } .goal-checkbox-status { font-size: 0.78rem; color: var(--text-secondary); flex: 1; } /* ===== DAY SUMMARY ===== */ .day-summary { background: linear-gradient(135deg, var(--success-bg), var(--accent-soft)); border: 1px solid var(--success-bg); border-radius: var(--radius); padding: 1rem; margin-top: 1.2rem; animation: fadeInScale 0.4s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .day-summary h4 { color: var(--success); margin-bottom: 0.55rem; font-size: 0.93rem; } .day-summary p { font-size: 0.82rem; color: var(--text-secondary); margin: 0.2rem 0; } .hidden { display: none !important; } /* ===== POMODORO ===== */ .pomodoro-container { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; animation: fadeInScale 0.4s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } .pomo-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--radius); z-index: 0; } .pomodoro-container > *:not(.pomo-bg-canvas) { position: relative; z-index: 1; } .pomo-category-select { margin-bottom: 1.4rem; text-align: left; } .pomo-category-select label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.4rem; } .pomo-category-select select { width: 100%; padding: 0.58rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.88rem; } .pomo-category-select select:focus { outline: none; border-color: var(--accent); } .pomodoro-ring-wrap { display: flex; justify-content: center; align-items: center; margin: 0 auto 0.8rem; width: 100%; } /* Sayacın metin kaynağı: ekranda görünmüyor ama DOM'da duruyor. Sahneler kalan süreyi buradan okuyup kendi tuvallerine yazıyor; ekran okuyucular da sayacı buradan takip edebiliyor. */ .pomo-time-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===== SAYAÇ SAHNESİ DEĞİŞTİRİCİ (pomodoro ekranında) ===== */ .pomo-scene-switch { margin: 0 auto 0.8rem; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } /* Blok olabildiğince alçak tutuluyor: uzun bir başlık + açıklama ikilisi, altındaki Başlat/Durdur satırını ortadaki yuvarlak düğmenin arkasına itiyordu. */ .pomo-scene-desc { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.85; text-align: center; } .pomo-scene-control { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.25rem; background: var(--glass); border: 1.5px solid var(--border); border-radius: 999px; } .pomo-scene-arrow { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--accent); font-size: 1.5rem; line-height: 1; cursor: pointer; } .pomo-scene-arrow:active { background: var(--accent-soft); } .pomo-scene-current { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; } .pomo-scene-ico { font-size: 1.05rem; line-height: 1; } /* Yeni sahnenin adı, gidilen yönün tersinden kayarak girer — hangi yöne ilerlendiği düğmeye bakmadan anlaşılıyor. */ .pomo-scene-current.slide-left { animation: sceneSlideLeft 0.22s ease-out; } .pomo-scene-current.slide-right { animation: sceneSlideRight 0.22s ease-out; } @keyframes sceneSlideLeft { from { opacity: 0; transform: translateX(14px); } } @keyframes sceneSlideRight { from { opacity: 0; transform: translateX(-14px); } } .pomo-scene-dots { display: flex; gap: 0.3rem; } .pomo-scene-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-solid); transition: background 0.2s, transform 0.2s; } .pomo-scene-dot.active { background: var(--accent); transform: scale(1.35); } /* ===== KURULUM REHBERİ (Ayarlar içinde adım adım yönlendirme) ===== */ .settings-section.setup-highlight { position: relative; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent); } /* Nefes alan dış hâle ayrı bir katmanda: box-shadow'u canlandırmak, bölümün tamamının her karede yeniden boyanması demekti. Burada yalnızca opaklık değişiyor. */ .settings-section.setup-highlight::after { content: ''; position: absolute; inset: -2px; border-radius: 12px; box-shadow: 0 0 18px var(--accent-glow, rgba(99,102,241,0.5)); animation: setupPulse 1.8s ease-in-out infinite; pointer-events: none; } @keyframes setupPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .setup-callout { background: var(--accent-soft, rgba(99,102,241,0.12)); border: 1px solid var(--accent); border-radius: 10px; padding: 0.7rem 0.8rem; margin-bottom: 0.8rem; animation: fadeIn 0.3s ease-out; } .setup-callout-head { display: flex; align-items: center; gap: 0.45rem; } .setup-callout-badge { background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 800; padding: 0.15rem 0.4rem; border-radius: 999px; letter-spacing: 0.5px; } .setup-callout-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); flex: 1; } .setup-callout-close { background: none; border: none; color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; padding: 0.25rem 0.35rem; } .setup-callout-desc { font-size: 0.78rem; line-height: 1.6; color: var(--text-secondary); margin-top: 0.4rem; } .setup-callout-desc b { color: var(--text-primary); } .pomodoro-controls { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; } .pomodoro-options { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.6rem; } .pomo-cycle-card { flex: 1; min-width: 90px; max-width: 140px; padding: 0.65rem 0.5rem; background: var(--glass); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; text-align: center; transition: all var(--anim-speed); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pomo-cycle-card:hover { border-color: var(--accent); transform: translateY(-2px) scale(1.03); } .pomo-cycle-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 15px var(--accent-mid); } .pomo-cycle-title { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.2rem; } .pomo-cycle-desc { font-size: 0.6rem; color: var(--text-secondary); line-height: 1.3; } .pomo-cycle-note { font-size: 0.68rem; color: var(--text-secondary); text-align: center; margin-bottom: 1.2rem; font-style: italic; } .pomo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .pomo-stat-item { text-align: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.8rem 0.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.2s, box-shadow 0.2s; } .pomo-stat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px var(--accent-glow); } .pomo-stat-value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; } .pomo-stat-label { display: block; font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.35rem; } .pomo-cat-hint { font-size: 0.72rem; color: var(--warning); margin-top: 0.35rem; padding: 0.3rem 0.6rem; background: var(--warning-bg); border: 1px solid var(--warning-bg); border-radius: 6px; animation: fadeIn 0.2s ease-out; } /* ===== STATS ===== */ .stats-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 1.2rem; } .stat-card { background: var(--glass); padding: 1rem; border-radius: var(--radius); text-align: center; border: 1px solid var(--glass-border); transition: all var(--anim-speed); cursor: default; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .stat-card:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 4px 20px var(--accent-soft); border-color: var(--accent); } .stat-value { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); } .stat-label { display: block; font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.25rem; } .weekly-comparison { background: var(--glass); padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--glass-border); margin-bottom: 1rem; animation: fadeIn 0.4s ease-out 0.1s both; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .weekly-comparison h3 { font-size: 0.86rem; margin-bottom: 0.25rem; color: var(--text-secondary); } .weekly-comparison .chart-desc { margin-bottom: 0.7rem; } .comparison-item { display: flex; justify-content: space-between; align-items: center; padding: 0.48rem 0; border-bottom: 1px solid var(--border); animation: slideInLeft 0.3s ease-out both; } .comparison-item:last-child { border-bottom: none; } .comparison-label { font-size: 0.83rem; } .comparison-change { font-size: 0.83rem; font-weight: 600; } .comparison-change.positive { color: var(--success); } .comparison-change.negative { color: var(--danger); } .chart-container { background: var(--glass); padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--glass-border); margin-bottom: 1rem; animation: fadeIn 0.4s ease-out 0.15s both; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .chart-container h3 { font-size: 0.86rem; margin-bottom: 0.25rem; color: var(--text-secondary); } .chart-desc { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.7; margin-bottom: 0.7rem; } canvas { width: 100%; display: block; } .pie-chart-area { position: relative; } .pie-legend { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; justify-content: center; } .pie-legend-item { display: flex; align-items: center; gap: 0.32rem; font-size: 0.73rem; color: var(--text-secondary); padding: 0.22rem 0.45rem; background: var(--bg-secondary); border-radius: 6px; transition: all 0.2s; } .pie-legend-item:hover { transform: scale(1.05); color: var(--text-primary); } .pie-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .category-breakdown { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.48rem; } .cat-breakdown-row { display: flex; align-items: center; gap: 0.7rem; animation: slideInLeft 0.3s ease-out both; } .cat-breakdown-name { font-size: 0.78rem; width: 78px; flex-shrink: 0; color: var(--text-secondary); } .cat-breakdown-bar-wrap { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; } .cat-breakdown-bar { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); } .cat-breakdown-val { font-size: 0.76rem; font-weight: 600; width: 52px; text-align: right; flex-shrink: 0; } /* ===== CALENDAR ===== */ .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .calendar-header h3 { font-size: 1.05rem; font-weight: 600; } .calendar-grid, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-day-header { text-align: center; font-size: 0.7rem; color: var(--text-secondary); padding: 0.4rem 0; font-weight: 600; text-transform: uppercase; } .cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: 0.78rem; cursor: pointer; transition: all var(--anim-speed); background: var(--glass); border: 1px solid var(--glass-border); padding: 2px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cal-day.empty { background: transparent; border-color: transparent; cursor: default; } .cal-day .cal-day-num { font-weight: 600; font-size: 0.82rem; } .cal-day .cal-day-name { font-size: 0.57rem; color: var(--text-secondary); } .cal-day.has-data { background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft)); border-color: var(--accent-mid); } .cal-day.today { border: 2px solid var(--warning); box-shadow: 0 0 10px var(--warning-bg); } .cal-day:hover:not(.empty) { border-color: var(--accent); transform: scale(1.1); box-shadow: 0 3px 10px var(--accent-mid); z-index: 1; } .cal-day-detail { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem; animation: fadeInScale 0.3s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cal-day-detail h4 { margin-bottom: 0.5rem; color: var(--accent); } .cal-day-detail .cal-motivation { font-style: italic; color: var(--warning); margin-bottom: 0.7rem; font-size: 0.8rem; } .cal-day-detail p { font-size: 0.82rem; color: var(--text-secondary); margin: 0.3rem 0; } .cal-day.cal-great { background: var(--success-bg); border-color: var(--success); } .cal-day.cal-good { background: var(--accent-soft); border-color: var(--accent-mid); } .cal-day.cal-some { background: var(--warning-bg); border-color: var(--warning); } .cal-day small { font-size: 0.55rem; color: var(--text-secondary); margin-top: 1px; } /* ===== VOCAB ===== */ /* "📖 Kelimelerim" başlığı ile Quiz + Kelime Ekle düğmeleri tek satıra sığmadığında satır taşıyordu; taşan genişlik tüm sayfayı yatay kaydırılabilir hâle getiriyor ve içerik yana kaymış görünüyordu. */ .vocab-page-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .vocab-page-header h3 { font-size: 1rem; font-weight: 600; min-width: 0; } .add-word-panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; animation: fadeInScale 0.3s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .add-word-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .add-word-input { width: 100%; padding: 0.55rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.88rem; margin-bottom: 0.6rem; transition: border-color 0.2s; } .add-word-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .add-word-input::placeholder { color: var(--text-secondary); } .vocab-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); animation: fadeIn 0.4s ease-out; } .vocab-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; opacity: 0.5; } .vocab-empty p { font-size: 0.9rem; margin: 0.25rem 0; } .vocab-empty-sub { font-size: 0.8rem; opacity: 0.7; } .user-vocab-list { display: flex; flex-direction: column; gap: 0.55rem; } .vocab-user-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 0.9rem 1rem; cursor: pointer; transition: all var(--anim-speed); animation: slideInLeft 0.3s ease-out both; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .vocab-user-card:hover { border-color: var(--accent); transform: translateX(4px) scale(1.01); } .vocab-user-card.revealed { border-color: var(--success); background: var(--success-bg); } .vocab-card-left { flex: 1; } .vocab-user-word { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.2rem; } .vocab-user-meaning { font-size: 0.85rem; color: var(--text-secondary); transition: all 0.3s; } .vocab-user-card.revealed .vocab-user-meaning { color: var(--text-primary); } .vocab-card-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; flex-shrink: 0; } .vocab-user-card:hover .vocab-card-actions { opacity: 1; } .vocab-delete-btn { background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 0.2rem; border-radius: 4px; color: var(--text-secondary); transition: all 0.2s; } .vocab-delete-btn:hover { color: var(--danger); background: var(--danger-bg); } /* ===== NOTES ===== */ .notes-category-tabs { display: flex; gap: 0.28rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .notes-category-tabs::-webkit-scrollbar { display: none; } .note-cat-tab { flex-shrink: 0; padding: 0.43rem 0.78rem; background: var(--glass); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: 0.74rem; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .note-cat-tab:hover { border-color: var(--accent); transform: scale(1.03); } .note-cat-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; border-color: transparent; box-shadow: 0 2px 8px var(--accent-mid); } .note-add-area { margin-bottom: 1rem; } .note-editor-panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.2rem; animation: fadeInScale 0.3s ease-out; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .note-editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; font-size: 0.83rem; font-weight: 600; color: var(--text-secondary); } .note-title-input { width: 100%; padding: 0.52rem 0.72rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.55rem; transition: border-color 0.2s; } .note-title-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); } .note-title-input::placeholder { color: var(--text-secondary); font-weight: 400; } #daily-note { width: 100%; min-height: 105px; padding: 0.82rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: inherit; font-size: 0.86rem; resize: vertical; margin-bottom: 0.7rem; transition: border-color 0.3s; line-height: 1.6; } #daily-note:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); } .note-tools { display: flex; gap: 0.7rem; margin-bottom: 0.7rem; flex-wrap: wrap; align-items: center; } .note-tool-group { display: flex; align-items: center; gap: 0.38rem; } .note-tool-label { font-size: 0.73rem; color: var(--text-secondary); } .note-color-picker { display: flex; gap: 0.28rem; align-items: center; } .note-color-btn { width: 21px; height: 21px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; } .note-color-btn:hover { transform: scale(1.25); } .note-color-btn.active { border-color: var(--text-primary); transform: scale(1.2); } .note-pin-btn { padding: 0.28rem 0.6rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 0.76rem; transition: all 0.2s; white-space: nowrap; } .note-pin-btn.active { border-color: var(--warning); color: var(--warning); background: rgba(251,191,36,0.08); } .note-editor-actions { display: flex; gap: 0.5rem; } .past-notes-grid { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; } .note-entry { background: var(--glass); padding: 0.95rem; border-radius: var(--radius); border: 1px solid var(--glass-border); position: relative; transition: all var(--anim-speed); animation: fadeIn 0.3s ease-out; border-left: 4px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .note-entry:hover { border-color: var(--accent); border-left-color: var(--accent); transform: translateX(3px); } .note-entry.pinned { border-left-color: var(--warning); } .note-entry.color-blue { border-left-color: var(--note-blue); } .note-entry.color-green { border-left-color: var(--note-green); } .note-entry.color-yellow { border-left-color: var(--note-yellow); } .note-entry.color-red { border-left-color: var(--note-red); } .note-entry.color-purple { border-left-color: var(--note-purple); } .note-entry.color-orange { border-left-color: var(--note-orange); } .note-entry-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; flex-wrap: wrap; } .note-entry-title { font-size: 0.87rem; font-weight: 600; color: var(--text-primary); } .note-entry .note-date { font-size: 0.7rem; color: var(--text-secondary); } .note-entry .note-category-badge { display: inline-block; font-size: 0.63rem; padding: 0.1rem 0.38rem; background: var(--accent-soft); border-radius: 4px; color: var(--accent); } .note-entry .note-text { font-size: 0.84rem; line-height: 1.55; color: var(--text-primary); } .note-entry .note-pin-indicator { font-size: 0.68rem; margin-left: auto; } .note-entry-actions { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.22rem; opacity: 0; transition: opacity 0.2s; } .note-entry:hover .note-entry-actions { opacity: 1; } .note-action-btn { background: none; border: none; cursor: pointer; font-size: 0.88rem; padding: 0.18rem; border-radius: 4px; transition: all 0.2s; color: var(--text-secondary); } .note-action-btn:hover { color: var(--text-primary); background: var(--bg-secondary); } .note-action-btn.delete:hover { color: var(--danger); } /* ===== BADGES ===== */ .badges-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .badges-header h3 { font-size: 1.03rem; font-weight: 700; } .badges-unlock-count { font-size: 0.76rem; color: var(--text-secondary); padding: 0.22rem 0.56rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .badge-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 0.82rem 0.7rem; text-align: center; transition: all 0.3s; overflow: hidden; cursor: default; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .badge-card.unlocked { border-color: var(--warning); background: linear-gradient(135deg, var(--warning-bg), var(--accent-soft)); } .badge-card.unlocked:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 6px 20px var(--warning-bg); } .badge-card.locked { opacity: 0.4; filter: grayscale(0.7); } .badge-card.just-unlocked { animation: badgeUnlock 0.6s ease-out; } .badge-icon { font-size: 1.85rem; margin-bottom: 0.38rem; display: block; } .badge-name { font-size: 0.68rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.18rem; line-height: 1.3; } .badge-desc { font-size: 0.58rem; color: var(--text-secondary); line-height: 1.4; } /* ===== APP CONFIRM (custom, standalone-PWA safe) ===== */ .app-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 1.2rem; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .app-confirm-overlay.active { opacity: 1; pointer-events: auto; } .app-confirm-box { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.4rem; width: 100%; max-width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform: scale(0.92); transition: transform 0.2s ease; } .app-confirm-overlay.active .app-confirm-box { transform: scale(1); } .app-confirm-msg { color: var(--text-primary); font-size: 0.92rem; line-height: 1.5; margin-bottom: 1.1rem; text-align: center; white-space: pre-line; } .app-prompt-input { width: 100%; margin-bottom: 1.1rem; } .app-confirm-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; } /* Eşit paylı `flex: 1` iki düğmeyi aynı genişliğe zorluyordu; "Evet, İptal Et" gibi uzun onay etiketleri "Vazgeç" kadar dar bir kutuya sıkışıp kırpılıyordu. Artık düğmeler içeriklerine göre pay alıyor ve gerekirse alt alta geçiyor. */ .app-confirm-actions .btn { flex: 1 1 auto; min-width: 0; padding-left: 0.9rem; padding-right: 0.9rem; } /* ===== MODAL ===== */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; animation: fadeIn 0.2s ease-out; backdrop-filter: blur(4px); } .modal.hidden { display: none; } .modal-content { background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--glass-border); width: 100%; max-width: 500px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Pencerenin sonuna gelince kaydırma arkadaki sayfaya geçmesin: Android'de bu, modal içinde kaydırırken sayfanın "yenile" hareketini tetikliyordu. */ overscroll-behavior: contain; animation: fadeInScale 0.3s ease-out; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-secondary); z-index: 1; } .modal-header h3 { font-size: 1.03rem; font-weight: 700; } .modal-body { padding: 1.2rem; } /* Ayarlar akordiyonu — her bölüm katlanır/açılır, tek seferde tek bölüm göz yormaz */ .settings-section-body h4 { font-size: 0.85rem; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem; color: var(--text-primary); font-weight: 700; letter-spacing: 0.01em; } .settings-desc { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.5rem; line-height: 1.5; } .settings-input { width: 100%; padding: 0.58rem 0.72rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.88rem; margin-bottom: 0.5rem; transition: border-color 0.2s; } .settings-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .custom-goal-form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .goal-emoji-input { max-width: 56px; text-align: center; font-size: 1.1rem; } .goal-name-input { flex: 1; } .goal-type-selector { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .goal-type-btn { flex: 1; padding: 0.6rem 0.5rem; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; text-align: center; transition: all var(--anim-speed); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; } .goal-type-btn .goal-type-icon { font-size: 1.2rem; } .goal-type-btn .goal-type-title { font-size: 0.72rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; } .goal-type-btn .goal-type-desc { font-size: 0.62rem; color: var(--text-secondary); } .goal-type-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-mid); } .goal-type-btn:not(.active) { opacity: 0.45; } .goal-type-btn:hover:not(.active) { opacity: 0.75; border-color: var(--accent); } .custom-goals-settings-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; } .custom-goal-settings-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 0.83rem; animation: fadeIn 0.3s ease-out; gap: 0.5rem; } .custom-goal-settings-item .goal-item-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; } .custom-goal-settings-item .goal-item-name { color: var(--text-primary); font-weight: 500; } .custom-goal-settings-item .goal-item-type { font-size: 0.65rem; color: var(--text-secondary); padding: 0.1rem 0.35rem; background: var(--bg-secondary); border-radius: 4px; display: inline-block; width: fit-content; } .custom-goal-delete { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 0.1rem 0.3rem; border-radius: 4px; transition: all 0.2s; flex-shrink: 0; } .custom-goal-delete:hover { background: var(--danger-bg); transform: scale(1.1); } .theme-options { display: flex; gap: 0.45rem; flex-wrap: wrap; } /* Dil seçici tema düğmeleriyle aynı görünümde — ikisi de aynı bölümde, birbirinden farklı görünmeleri için bir sebep yok. */ .lang-options { display: flex; gap: 0.45rem; flex-wrap: wrap; } .lang-btn { flex: 1 1 8rem; } .theme-btn, .lang-btn { padding: 0.48rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); cursor: pointer; font-size: 0.8rem; transition: all 0.2s; } .theme-btn:hover, .lang-btn:hover { transform: translateY(-2px) scale(1.03); } .theme-btn.active, .lang-btn.active { background: var(--accent); color: white; border-color: var(--accent); transform: scale(1.05); box-shadow: 0 0 12px var(--accent-glow); font-weight: 600; } .toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; cursor: pointer; } .toggle-label input { width: 1.1rem; height: 1.1rem; cursor: pointer; accent-color: var(--accent); } .sound-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; } .sound-option { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; min-height: 42px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; user-select: none; } .sound-option:hover { border-color: var(--accent); } .sound-option input[type="radio"] { accent-color: var(--accent); cursor: pointer; } .sound-option input[type="radio"]:checked + span { color: var(--accent); font-weight: 600; } /* ===== ARALIK SEÇİCİ (çalışırken gelen mesajlar) ===== Yedi seçenek tam genişlikte alt alta yığıldığında ayarlar sayfasının neredeyse tamamını kaplıyordu. Aynı seçenekler, radyo düğmesi gizlenip seçili olan dolgulu gösterilerek sarmalı bir "hap" şeridine sığıyor: yükseklik yedi satırdan ikiye düşüyor ve hangisinin seçili olduğu tek bakışta görülüyor. */ /* Izgara, sarmalı bir şeride tercih edildi: son satırda tek başına kalan seçeneğin komşularının iki katı genişlemesini engelliyor. */ .pomo-motiv-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); gap: 0.35rem; margin-top: 0.4rem; } .pomo-motiv-options .sound-option { position: relative; justify-content: center; padding: 0.5rem 0.55rem; min-height: 40px; border-radius: 999px; font-size: 0.78rem; white-space: nowrap; } [data-theme="pixel"] .pomo-motiv-options .sound-option { border-radius: var(--radius); } /* Radyo düğmesi görsel olarak gereksiz — seçili hap zaten dolgulu. Ekran okuyucular ve klavye odağı için erişilebilir kalması gerektiğinden display:none yerine sıfır boyutlu ve şeffaf bırakılıyor. */ .pomo-motiv-options .sound-option input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .pomo-motiv-options .sound-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-mid) inset; } .pomo-motiv-options .sound-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* Countdowns list */ .countdowns-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; } .countdown-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; animation: fadeIn 0.3s ease-out; gap: 0.5rem; } .countdown-item-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; } .countdown-item-name { font-size: 0.83rem; font-weight: 600; color: var(--text-primary); } .countdown-item-date { font-size: 0.68rem; color: var(--text-secondary); } .countdown-delete-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; padding: 0.1rem 0.3rem; border-radius: 4px; transition: all 0.2s; flex-shrink: 0; } .countdown-delete-btn:hover { background: var(--danger-bg); transform: scale(1.1); } .countdown-add-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .countdown-add-form .btn { flex: 0 0 auto; } .daily-target-wrap { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; } .daily-target-wrap label { font-size: 0.78rem; white-space: nowrap; } /* Danger zone */ .settings-danger { border: 1px solid var(--danger); border-radius: 10px; padding: 1rem; margin-top: 1rem; background: var(--danger-bg); } .settings-danger h4 { color: var(--danger); } .btn-danger { background: var(--danger); color: #fff; border: none; cursor: pointer; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; } .btn-danger:hover { opacity: 0.85; transform: scale(1.02); } /* ===== TOAST ===== */ /* Uzun mesajlar tek satırda kalıp ekranın iki yanından taşıyordu: nowrap vardı ve genişlik sınırı yoktu. Artık satır kırıyor ve ekrana sığıyor. */ .toast { /* Ekranın dibinde üç katman var: reklam afişi (yerel), yüzen alt çubuk ve FAB. Bildirim 20px'te dururken afişin hemen üstüne, alt çubuğun da altına denk geliyor ve çubuğun arkasında kalmış gibi görünüyordu. Artık üçünün de üstünde: hem afiş yüksekliği hem çubuk payı hesaba katılıyor. */ position: fixed; bottom: var(--toast-base); left: 50%; transform: translateX(-50%) translateY(120px); background: linear-gradient(135deg, var(--success), var(--success)); color: #000; padding: 0.68rem 1.2rem; border-radius: 20px; font-weight: 600; font-size: 0.86rem; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), bottom 0.3s ease; z-index: 3000; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: min(92vw, 420px); white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.35; } .toast.show { transform: translateX(-50%) translateY(0); } .toast-error { background: linear-gradient(135deg, var(--danger), #ef4444); color: white; } /* Geri alınabilir işlem toast'ı — nötr zeminde net bir "Geri Al" eylemi */ .toast-undo { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.7rem 0.6rem 1.2rem; text-align: left; } .toast-undo-btn { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-mid); border-radius: 18px; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .toast-undo-btn:hover { background: var(--accent-mid); } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ===== BACKGROUND PARTICLES ===== */ .bg-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } #app { position: relative; z-index: 1; } .goal-target-label { font-size: 0.7rem; color: var(--text-secondary); font-weight: 400; margin-left: 0.4rem; } /* ===== GOAL EDIT ===== */ .goal-item-actions { display: flex; gap: 0.3rem; align-items: center; } .custom-goal-edit, .custom-goal-delete { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.25rem; border-radius: 6px; transition: background 0.2s; } .custom-goal-edit:hover { background: var(--glass); } .custom-goal-delete:hover { background: var(--danger-bg); } .modal-sm .modal-body { padding: 1rem 1.2rem; } /* ===== VOCAB QUIZ ===== */ .vocab-header-btns { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; min-width: 0; } .vocab-quiz-section { margin-bottom: 1rem; } .vocab-quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .vocab-quiz-header h4 { font-size: 0.92rem; color: var(--text-primary); margin: 0; } .vocab-quiz-score { font-size: 0.82rem; color: var(--text-secondary); background: var(--glass); padding: 0.3rem 0.7rem; border-radius: 12px; border: 1px solid var(--glass-border); } .quiz-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .quiz-word { font-size: 1.5rem; font-weight: 700; text-align: center; color: var(--accent); margin-bottom: 1.2rem; } .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .quiz-option-btn { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.5rem; cursor: pointer; font-size: 0.82rem; color: var(--text-primary); transition: all 0.2s; text-align: center; word-break: break-word; } .quiz-option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--glass); transform: translateY(-1px); } .quiz-option-btn.quiz-correct { background: var(--success-bg); border-color: var(--success); color: var(--success); } .quiz-option-btn.quiz-wrong-opt { background: var(--danger-bg); border-color: var(--danger); opacity: 0.7; } .quiz-option-btn:disabled { cursor: default; } .quiz-feedback { text-align: center; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; padding: 0.5rem; border-radius: 8px; } .quiz-fb-correct { color: var(--success); background: var(--success-bg); } .quiz-fb-wrong { color: var(--danger); background: var(--danger-bg); } .quiz-controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.8rem; } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { header { padding: 0.82rem 1rem; flex-wrap: wrap; gap: 0.4rem; } .header-right { gap: 0.22rem; flex-wrap: wrap; justify-content: flex-end; } .header-left h2 { font-size: 0.9rem; } #streak-badge, #countdown-badge { font-size: 0.64rem; padding: 0.26rem 0.46rem; } #content { padding: 0.95rem; padding-bottom: calc(8.75rem + var(--sa-bottom) + var(--ads-h)); } .badges-grid { grid-template-columns: repeat(2, 1fr); } .stats-summary { grid-template-columns: repeat(2, 1fr); } .pomo-scene { width: 100%; max-width: 320px; height: 200px; } .modal { padding: 0.5rem; } .modal-content { max-height: 92vh; max-height: 92dvh; border-radius: 12px; } /* tabs are fixed bottom nav, no override needed */ } @media (max-width: 360px) { header { padding: 0.6rem 0.7rem; } .header-left h2 { font-size: 0.82rem; } .header-meta { font-size: 0.6rem; } #content { padding: 0.7rem; padding-bottom: calc(8.75rem + var(--sa-bottom) + var(--ads-h)); } } @media (display-mode: standalone) { body { user-select: none; } } /* ===== MOTIVATION WRAP ===== */ .motivation-wrap { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem; margin: 0.3rem 0; } #motivation-bar { flex: 1; transition: opacity 0.25s ease, transform 0.25s ease; font-size: 0.82rem; color: var(--text-secondary); font-style: italic; line-height: 1.5; padding: 0.5rem 0.8rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } #motivation-bar.slide-out { opacity: 0; transform: translateY(8px); } #motivation-bar.slide-in { animation: motivSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes motivSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .motivate-btn { font-size: 1.1rem; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s; box-shadow: 0 2px 12px var(--accent-glow); position: relative; overflow: visible; } .motivate-btn:hover { transform: scale(1.2) rotate(15deg); box-shadow: 0 4px 20px var(--accent-glow); } .motivate-btn:active { transform: scale(0.92) rotate(-10deg); } /* ===== PERFORMANS MODU ===== backdrop-filter (cam/bulanıklık efekti) mobil GPU'da en pahalı işlerden biri: her bulanık öğe ekranın altında kalan kısmı ayrı bir geçişte yeniden işler ve uygulamada 40'tan fazla yerde kullanılıyor. Zayıf cihazlarda bulanıklığı ve sonsuz döngüdeki süs animasyonlarını kapatıyoruz — renkler ve yerleşim aynı kalıyor, yalnızca arkadaki bulanıklık düz zemine dönüyor. */ html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.perf-lite .bg-particles, html.perf-lite .hero-bg-canvas, html.perf-lite .pomo-bg-canvas, html.perf-lite .login-particles { display: none !important; } /* Süsleme amaçlı sonsuz animasyonlar dursun; geri bildirim veren kısa geçişler (buton basımı, modal açılışı) korunur. Sonsuz döngüdeki her animasyon, kimse bakmasa bile ekran yenilendiği sürece işlemciyi meşgul ediyor. */ html.perf-lite .login-particle, html.perf-lite .hero-progress-glow, html.perf-lite .login-logo, html.perf-lite .hero-emoji { animation: none !important; } /* Cihaz "hareketi azalt" diyorsa aynı sadeleştirmeyi zaten uygula. Burada eskiden yalnızca tuvaller gizleniyordu; sonsuz döngüdeki süs animasyonları çalışmaya devam ediyordu. */ @media (prefers-reduced-motion: reduce) { .bg-particles, .hero-bg-canvas, .pomo-bg-canvas, .login-particles { display: none !important; } .login-particle, .hero-progress-glow, .login-logo, .hero-emoji, .badge-item.unlocked, .pomo-scene-current.slide-left, .pomo-scene-current.slide-right, .settings-section.setup-highlight::after { animation: none !important; } } /* ===== GİRİŞ HATASI ===== */ .login-error { margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: #fca5a5; font-family: monospace; font-size: 0.68rem; word-break: break-all; text-align: left; line-height: 1.5; } /* ===== BUGÜN: HEDEF EKLE KISAYOLU ===== */ .today-add-goal-btn { width: 100%; margin-top: 1rem; padding: 0.85rem 1rem; border-style: dashed; font-size: 0.85rem; } /* ===== STATS PERIOD SELECTOR ===== */ .stats-period-selector { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; background: var(--bg-secondary); padding: 0.25rem; border-radius: 10px; } .stats-period-btn { flex: 1; padding: 0.45rem 0.3rem; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .stats-period-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-mid); } .stats-period-btn:hover:not(.active) { color: var(--text-primary); background: var(--glass); } /* ===== ONBOARDING ===== */ /* Kurulum ekranı tek bir yerel kutunun (AdMob afişi) üzerinde duruyor ve klavye açıldığında görünür alan yarıya iniyor. Bu yüzden ekran ortalanmış ama SABİT değil: içerik sığmadığında kaydırılabiliyor. Ortalamayı justify-content yerine kapsayıcının `margin: auto` değeriyle yapıyoruz — `justify-content: center` taşan içeriğin üst kısmını erişilemez kılıyor. */ #onboarding-screen { display: none; position: fixed; inset: 0; z-index: 5000; background: linear-gradient(135deg, #0a0a1a 0%, #1a0a3a 50%, #0a1a2a 100%); align-items: center; justify-content: flex-start; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #onboarding-screen.active { display: flex; } .onboarding-container { width: 100%; max-width: 420px; text-align: center; /* Alt boşluk reklam afişini ve gezinme çubuğunu hesaba katıyor; yoksa son buton afişin altında kalıyor ve tıklanamıyor. */ padding: calc(1.5rem + var(--sa-top)) 1.5rem calc(1.5rem + var(--sa-bottom) + var(--ads-h)); margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .onboarding-animation { width: 100%; height: 240px; flex-shrink: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-secondary); box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); } .onboarding-scene { position: relative; width: 100%; height: 100%; } .onb-mountain { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 160px solid var(--accent-mid); } .onb-person { position: absolute; bottom: 10px; left: 30%; width: 16px; height: 30px; background: linear-gradient(to bottom, #a78bfa 50%, #6366f1 50%); border-radius: 8px 8px 4px 4px; transition: all 1.5s cubic-bezier(0.4,0,0.2,1); } .onb-person::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #e8d5b7; border-radius: 50%; } .onb-person.onb-step-1 { left: 38%; bottom: 30px; } .onb-person.onb-step-2 { left: 44%; bottom: 60px; transform: rotate(-5deg); } .onb-person.onb-step-3 { left: 48%; bottom: 100px; } .onb-person.onb-step-4 { left: 50%; bottom: 140px; transform: translateX(-50%) scale(1.1); } .onb-flag { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 1.5rem; opacity: 0; transition: opacity 0.8s ease; } .onb-flag.onb-flag-appear { opacity: 1; } .onb-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; } .onb-stars.onb-stars-show { opacity: 1; } .onb-stars::before, .onb-stars::after { content: '✨'; position: absolute; font-size: 1.2rem; animation: starTwinkle 1.5s infinite alternate; } .onb-stars::before { top: 15%; left: 20%; } .onb-stars::after { top: 25%; right: 20%; animation-delay: 0.5s; } @keyframes starTwinkle { from { opacity: 0.4; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } } .onboarding-content { width: 100%; } .onboarding-step { display: none; flex-direction: column; align-items: center; gap: 1rem; animation: fadeIn 0.6s ease-out; } .onboarding-step.active { display: flex; } .onboarding-step h2 { color: #fff; font-size: 1.4rem; margin: 0; } .onboarding-step p { color: rgba(255,255,255,0.7); margin: 0; font-size: 0.9rem; } .onboarding-step .onboarding-text { color: rgba(255,255,255,0.9); font-size: 1.05rem; line-height: 1.6; font-style: italic; padding: 0 1rem; min-height: 3rem; } #onboarding-name-input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.7rem 1rem; border-radius: 10px; font-size: 1rem; text-align: center; width: 80%; max-width: 250px; } #onboarding-name-input::placeholder { color: rgba(255,255,255,0.4); } #onboarding-name-input:focus { outline: none; border-color: var(--accent); } #onboarding-finish-btn { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } #onboarding-finish-btn.visible { opacity: 1; transform: translateY(0); } /* Dar ekranlarda ve klavye açıkken tırmanış canlandırması yer kaplamasın: asıl iş aşağıdaki seçim/alan kısmında, manzara süs. */ @media (max-height: 780px) { .onboarding-container { gap: 1rem; padding-top: calc(1rem + var(--sa-top)); } .onboarding-animation { height: 170px; } } @media (max-height: 620px) { .onboarding-animation { height: 110px; } .onboarding-step h2 { font-size: 1.2rem; } } @media (max-height: 480px) { .onboarding-animation { display: none; } } /* ===== CHECKBOX GRID ===== */ .cb-grid-header { display: flex; gap: 4px; margin-bottom: 6px; font-size: 0.7rem; color: var(--text-dim); } .cb-grid-header > div:not(.cb-grid-label) { width: 28px; text-align: center; flex-shrink: 0; } .cb-grid-header .cb-grid-label { width: 100px; text-align: left; flex-shrink: 0; } .cb-grid-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; } .cb-grid-row .cb-grid-label { width: 100px; font-size: 0.75rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .cb-grid-cell { width: 28px; height: 28px; border-radius: 4px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; } .cb-grid-cell.cb-done { background: var(--success-bg); color: var(--success); } .cb-grid-cell.cb-missed { background: var(--danger-bg); color: var(--danger); } .cb-grid-cell.cb-today { border: 1px solid var(--accent); } .cb-grid-day.cb-today { color: var(--accent); font-weight: 700; } .cb-grid-pct { font-size: 0.7rem; color: var(--accent); margin-left: 6px; } /* ===== CUSTOM POMO SETTINGS ===== */ .custom-pomo-list { margin: 8px 0; } .custom-pomo-item { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; } .custom-pomo-item span { color: var(--text); font-size: 0.85rem; } /* Alanlar sabit genişlikteydi (60/90px) ve "Çalışma (dk)" gibi bir yer tutucu içine sığmıyordu — pixel temasının tek aralıklı yazı tipinde hiç sığmıyordu. Artık kalan genişliği paylaşıyorlar; yer tutucular da kısaltıldı, birim bilgisi alanın erişilebilirlik etiketinde. */ .custom-pomo-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .custom-pomo-form input { flex: 1 1 5.5rem; width: auto; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: var(--text); font-size: 0.85rem; text-align: center; } .custom-pomo-form button { flex: 0 0 auto; } .custom-pomo-form input:focus { border-color: var(--accent); outline: none; } .custom-pomo-form button { padding: 6px 12px; border-radius: 6px; background: var(--accent); color: #fff; border: none; font-size: 0.8rem; cursor: pointer; } /* ===== POMO MOTIVATION POPUP ===== */ .pomo-motiv-popup { position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary)); border: 1px solid var(--accent); border-radius: 20px; padding: 0; display: flex; align-items: stretch; gap: 0; z-index: 10000; box-shadow: 0 -4px 30px rgba(0,0,0,0.5), 0 0 15px var(--particle1); transition: bottom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; max-width: 92vw; overflow: hidden; opacity: 0; } .pomo-motiv-popup.show { bottom: calc(30px + var(--ads-h)); opacity: 1; } .pomo-motiv-popup.hide { bottom: -200px; opacity: 0; transition: bottom 0.5s ease-in, opacity 0.3s; } .pomo-motiv-scene { width: 108px; min-height: 128px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 20px 0 0 20px; flex-shrink: 0; } .pomo-motiv-canvas { display: block; border-radius: 20px 0 0 20px; } .pomo-motiv-content { padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .pomo-motiv-msg { color: var(--text-primary); font-size: 0.92rem; line-height: 1.5; font-weight: 500; } .pomo-motiv-bar { height: 3px; background: var(--accent); border-radius: 3px; /* Genişlik yerine ölçek küçültüyoruz: genişlik animasyonu yedi saniye boyunca her karede yerleşimi yeniden hesaplatıyordu, ölçek ise ekran kartında kalıyor ve komşu öğeleri hiç kımıldatmıyor. */ transform-origin: left center; animation: motiv-bar-shrink 7s linear forwards; } @keyframes motiv-bar-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ===== POMO CYCLE CARDS (CUSTOM) ===== */ .pomo-cycle-card.custom { border-color: var(--accent2); } .pomo-cycle-card.custom:hover { border-color: var(--accent); } /* ===== POMO REPEAT WRAP ===== */ /* Döngü sayısı: yerli açılır listenin ekranı kaplayan tabakası yerine yerinde çalışan bir adım kontrolü. */ .pomo-repeat-card { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--border); } .pomo-repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pomo-repeat-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); } .pomo-repeat-status { font-size: 0.78rem; font-weight: 700; color: var(--accent); } .pomo-repeat-stepper { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .pomo-repeat-step { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--bg-secondary); color: var(--accent); font-size: 1.2rem; font-weight: 700; cursor: pointer; } .pomo-repeat-step:disabled { opacity: 0.35; cursor: default; } .pomo-repeat-step:active:not(:disabled) { background: var(--accent-soft); } .pomo-repeat-value { flex: 1 1 auto; text-align: center; font-size: 0.9rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; } .pomo-repeat-hint { margin-top: 6px; font-size: 0.7rem; color: var(--text-secondary); text-align: center; } /* ===== POMO TIMER SCENES ===== */ .pomo-scene { position: relative; width: 280px; height: 220px; margin: 0 auto; border-radius: 16px; overflow: hidden; } .pomo-scene canvas { width: 100%; height: 100%; border-radius: 16px; } /* Pixel art keskin kalsin — tarayici bulanik olceklemesin */ .pomo-scene.pomo-scene-pixel canvas { image-rendering: pixelated; image-rendering: crisp-edges; background: #1d1838; } /* Sayaç yazısı eskiden sahnenin alt ortasındaydı; sahnelerin öznesi (masadaki çocuk, ateşin başındaki arkadaşlar) tam da orada durduğu için yüzlerinin üstüne biniyordu. Sahnelerin hepsinde üst orta bölge gökyüzü/duvar, yani boş. Yazı oraya taşındı ve arkasına okunurluğu garantileyen bir şerit kondu. */ .pomo-scene-time { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 1.5rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; background: rgba(0,0,0,0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 1px 14px; border-radius: 999px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); pointer-events: none; } /* ===== MOTIVATION PARTICLES ===== */ .motiv-dust-particle { position: fixed; pointer-events: none; border-radius: 50%; animation: dustFall 1.2s ease-out forwards; z-index: 9999; } @keyframes dustFall { 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(var(--rot)); } } /* ===== UYGULAMAYI YÜKLE BANNERI ===== */ .install-banner { position: fixed; left: 50%; transform: translateX(-50%); /* Alt navigasyon 60px, ortadaki FAB ~38px daha yukarı taşıyor — üstünde kal */ bottom: calc(112px + var(--sa-bottom) + var(--ads-h)); width: min(560px, calc(100vw - 1.5rem)); display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.85rem; background: var(--bg-secondary); border: 1px solid var(--accent); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,0.45); z-index: 2500; animation: fadeIn 0.35s ease-out; } .install-banner.hidden { display: none; } .install-banner-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .install-banner-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; } .install-banner-body strong { font-size: 0.85rem; color: var(--text-primary); } .install-banner-body span { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.4; } .install-banner .btn-sm { flex-shrink: 0; } @media (max-width: 400px) { .install-banner-body span { display: none; } } /* iOS kurulum adımları */ .ios-steps { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.8rem; } .ios-steps li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); } .ios-steps li b { color: var(--text-primary); } .ios-step-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .ios-share-ico { font-size: 1rem; } /* ===== LANDSCAPE POMODORO FULLSCREEN ===== */ .landscape-pomo { display: none; position: fixed; inset: 0; z-index: 9990; background: var(--bg-primary); overflow: hidden; } .landscape-pomo.visible { display: block; } /* Yan modda hedefin adı — tuval sahnesinin üstünde durur. */ .lp-goal { font-size: 0.82rem; color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 0.5rem; } /* ---- CANVAS MODE layout ---- */ .lp-canvas-wrap { display: none; position: absolute; inset: 0; } .lp-canvas-wrap.lp-active { display: block; } .lp-canvas-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; } /* Yan modda da aynı sorun daha büyüğü yaşanıyordu: ekranın ortasındaki dev rakamlar sahnenin tam üstüne oturuyordu. Sayaç, kip yazısıyla birlikte üst ortadaki boş göğe alındı; hedefin adı da sol üst köşeye çekildi. */ .lp-canvas-time { position: absolute; top: calc(max(0.5rem, var(--sa-top)) + 1.1rem); left: 50%; transform: translateX(-50%); font-size: clamp(2rem, 7vh, 3.2rem); font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.85); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; letter-spacing: -0.02em; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0 0.7rem; border-radius: 999px; } .lp-canvas-mode { position: absolute; top: max(0.5rem, var(--sa-top)); left: 50%; transform: translateX(-50%); font-size: clamp(0.6rem, 1.6vh, 0.8rem); font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: 0.15em; text-transform: uppercase; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.85); } .lp-canvas-goal { position: absolute; top: max(0.5rem, var(--sa-top)); left: max(0.8rem, var(--sa-left)); font-size: clamp(0.65rem, 1.5vh, 0.85rem); color: rgba(255,255,255,0.8); white-space: nowrap; pointer-events: none; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 3px 12px; border-radius: 20px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } /* ---- Controls overlay (same for both modes) ---- */ .lp-controls { position: absolute; right: max(1.5rem, var(--sa-right)); top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 0.9rem; } .lp-btn { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--glass-border); background: rgba(0,0,0,0.45); color: #fff; font-size: 1.4rem; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .lp-btn.lp-start { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } .lp-btn.lp-start:active { transform: scale(0.88); } .lp-hint { position: absolute; bottom: max(0.6rem, var(--sa-bottom)); left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: rgba(255,255,255,0.4); white-space: nowrap; z-index: 10; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .pomo-landscape-hint { text-align: center; font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.5rem; padding: 0.35rem 0.8rem; background: var(--glass); border-radius: 20px; border: 1px solid var(--glass-border); display: inline-block; animation: fadeIn 0.4s ease-out; } .pomo-landscape-hint-wrap { text-align: center; margin-top: 0.5rem; margin-bottom: 0.2rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 0; } .pomo-landscape-hint-wrap.visible { /* İpucu dar ekranda iki satıra sarılıyor; 3rem'lik tavan ikinci satırın alt yarısını kesiyordu. Açılış animasyonunun çalışması için bir tavan gerekiyor, ama bol tutulmalı — fazlası boşluk yaratmıyor çünkü kutu kendi yüksekliği kadar yer kaplıyor. */ max-height: 7rem; opacity: 1; } /* ===== DRAG & DROP GOALS ===== */ .category { cursor: grab; transition: opacity 0.2s, transform 0.2s; } .category.dragging { opacity: 0.4; cursor: grabbing; transform: scale(0.98); } .category.drag-over { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft); transform: translateY(-2px); } /* ===== CONFETTI ===== */ @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* ===== POMO HISTORY ===== */ /* ===== AKILLI İPUCU POPUP'I ===== */ .smart-tip { position: fixed; left: 50%; bottom: calc(7.2rem + var(--sa-bottom) + var(--ads-h)); transform: translateX(-50%) translateY(24px); width: min(400px, 92vw); display: flex; gap: 0.85rem; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--accent-mid); border-left: 3px solid var(--accent); border-radius: 16px; padding: 0.9rem 1rem; box-shadow: 0 8px 34px rgba(0,0,0,0.45); z-index: 2500; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .smart-tip.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .smart-tip:active { transform: translateX(-50%) translateY(0) scale(0.98); } .smart-tip-icon { font-size: 1.6rem; line-height: 1.1; flex-shrink: 0; } .smart-tip-body { flex: 1; min-width: 0; } .smart-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .smart-tip-kicker { font-size: 0.6rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); } .smart-tip-close { color: var(--text-secondary); font-size: 0.8rem; } .smart-tip-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0.2rem 0 0.25rem; } .smart-tip-text { font-size: 0.78rem; line-height: 1.55; color: var(--text-secondary); } .smart-tip-hint { font-size: 0.62rem; color: var(--text-secondary); opacity: 0.65; margin-top: 0.5rem; } .pomo-more-options { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.4rem; } .pomo-more-options > summary { list-style: none; cursor: pointer; user-select: none; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); display: block; position: relative; padding: 0.8rem 1.6rem 0.8rem 0.2rem; min-height: 44px; line-height: 1.6; transition: color 0.15s ease; } .pomo-more-options > summary::-webkit-details-marker { display: none; } .pomo-more-options > summary::after { content: '▸'; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; } .pomo-more-options[open] > summary::after { transform: translateY(-50%) rotate(90deg); } .pomo-more-options > summary:hover { color: var(--accent); } .pomo-more-options-body { animation: settingsSectionOpen 0.25s ease-out; } .pomo-history-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .pomo-history-title { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.6rem; font-weight: 600; } .pomo-history-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 160px; overflow-y: auto; } .pomo-history-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--glass); border-radius: 8px; font-size: 0.75rem; border: 1px solid var(--glass-border); } .pomo-history-item.is-break { opacity: 0.65; } .ph-time { color: var(--text-secondary); min-width: 40px; } .ph-cat { flex: 1; color: var(--text-primary); } .ph-mins { color: var(--accent); font-weight: 600; white-space: nowrap; } /* ===== AMBIENT SOUND ===== */ .ambient-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; } .ambient-btn { padding: 0.38rem 0.65rem; border-radius: 20px; border: 1px solid var(--border); background: var(--glass); color: var(--text-secondary); font-size: 0.75rem; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); } .ambient-btn:hover { border-color: var(--accent); color: var(--text-primary); } .ambient-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ===== NOTE TEMPLATES ===== */ .note-templates { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .nt-label { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; } .nt-btn { padding: 0.28rem 0.55rem; border-radius: 16px; border: 1px solid var(--border); background: var(--glass); color: var(--text-secondary); font-size: 0.7rem; cursor: pointer; transition: all 0.2s; } .nt-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ===== WEEKLY SUMMARY MODAL ===== */ .ws-header-stats { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .ws-stat { flex: 1; text-align: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.6rem 0.3rem; } .ws-val { display: block; font-size: 1.4rem; font-weight: 800; color: var(--accent); } .ws-lbl { display: block; font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.2rem; } .ws-day-grid { display: flex; gap: 0.3rem; align-items: flex-end; height: 90px; margin-bottom: 0.5rem; } .ws-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .ws-day-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.5s ease; } .ws-day-name { font-size: 0.62rem; color: var(--text-secondary); } .ws-day-mins { font-size: 0.58rem; color: var(--accent); } .ws-today .ws-day-name { color: var(--accent); font-weight: 700; } .ws-goal-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; } .ws-goal-row:last-child { border-bottom: none; } /* ===== AYARLAR SAYFASI ===== Ayarlar artık ortada açılan bir pencere değil, kendi tam sayfası. Sağdan kayarak giriyor; üstünde geri oku olan sabit bir başlık, altında kaydırılan bölüm listesi var. "Kaydet" düğmesi kaldırıldı, her değişiklik anında kaydedildiği için sayfadan çıkmak hiçbir şeyi riske atmıyor. */ .settings-page { position: fixed; inset: 0; z-index: 800; background: var(--bg-primary); display: flex; flex-direction: column; animation: settingsIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .settings-page.closing { animation: settingsOut 0.2s ease-in forwards; } @keyframes settingsIn { from { transform: translateX(6%); opacity: 0; } } @keyframes settingsOut { to { transform: translateX(6%); opacity: 0; } } .settings-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: calc(0.7rem + var(--sa-top)) 1rem 0.7rem; background-color: var(--bg-primary); background-image: linear-gradient(var(--glass), var(--glass)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .settings-topbar h3 { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); } .settings-back { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-primary); font-size: 1.4rem; cursor: pointer; } .settings-back:active { background: var(--accent-soft); } [data-theme="pixel"] .settings-back { border-radius: var(--radius); } .settings-scroll { flex: 1 1 auto; overflow-y: auto; /* Taşan bir etiket ayarlar sayfasını yatay kaydırılabilir yapmasın. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0.8rem 0.9rem calc(2rem + var(--sa-bottom)); display: flex; flex-direction: column; gap: 0.5rem; } /* --- Bölüm kartı --- */ .settings-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); /* overflow:hidden kaldırıldı: yukarıdaki kırpılma sorununda içeriği görünmez kılan taraf buydu. Köşelerin içinde kalması için gövdeye yarıçap verildi. */ } .settings-section[open] > .settings-section-body { border-radius: 0 0 var(--radius) var(--radius); } .settings-section > summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .settings-section > summary::-webkit-details-marker { display: none; } .settings-section > summary:active { background: var(--accent-soft); } .ss-ico { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; } .ss-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1 1 auto; } .ss-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); } .ss-sub { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.3; } .ss-value { font-size: 0.72rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; } .ss-chev { flex: 0 0 auto; color: var(--text-secondary); font-size: 1.2rem; line-height: 1; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .settings-section[open] > summary { border-bottom: 1px solid var(--border); } .settings-section[open] > summary .ss-chev { transform: rotate(90deg); } .settings-section[open] > summary .ss-value { display: none; } /* Açılma animasyonu. Burada bir süre ::details-content + block-size:auto geçişi kullanıldı; Android WebView bu ikilide bölümün yüksekliğini çözemiyordu: kutu büyümediği için içerik ya ortasından kırpılıyor ya da kartın dışına taşıp alttaki kartların üstüne biniyordu. Yükseklik ölçmeyen, dolayısıyla kırpma ihtimali olmayan bir açılışa döndük — gövde yerinde belirip hafifçe aşağı kayıyor, kutu kendi doğal boyunu alıyor. */ .settings-section-body { padding: 0.9rem; animation: settingsBodyIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes settingsBodyIn { from { opacity: 0; transform: translateY(-6px); } } .settings-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; } .settings-label small { font-weight: 400; opacity: 0.65; } .settings-label.danger { color: var(--danger); } .settings-divider { height: 1px; background: var(--border); margin: 1.2rem -0.9rem; } /* Satır: solda başlık+açıklama, sağda anahtar */ .settings-row { display: flex; align-items: flex-start; gap: 0.8rem; } .settings-row-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; } .settings-row-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .settings-row-desc { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; } /* Anahtar (switch) — onay kutusu yerine dokunması kolay bir sürgü */ .switch { flex: 0 0 auto; position: relative; width: 46px; height: 27px; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch-track { position: absolute; inset: 0; background: var(--border-solid); border-radius: 999px; transition: background 0.22s; pointer-events: none; } .switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::after { transform: translateX(19px); } [data-theme="pixel"] .switch-track, [data-theme="pixel"] .switch-track::after { border-radius: var(--radius); } /* Hakkında: sürüm/kurulum gibi tek satırlık bilgiler */ .about-rows { margin-top: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .about-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; font-size: 0.8rem; background: var(--bg-secondary); } .about-row + .about-row { border-top: 1px solid var(--border); } .about-row span:first-child { color: var(--text-secondary); } .about-row span:last-child { color: var(--text-primary); font-weight: 700; text-align: right; } /* Teşhis bilgisi — normalde kapalı, hata bildirimi için açılır */ .about-diag { margin-top: 1rem; } .about-diag > summary { list-style: none; cursor: pointer; font-size: 0.74rem; color: var(--text-secondary); padding: 0.4rem 0; } .about-diag > summary::-webkit-details-marker { display: none; } .about-diag > summary::before { content: '▸ '; } .about-diag[open] > summary::before { content: '▾ '; } .about-diag .settings-desc { font-family: ui-monospace, monospace; font-size: 0.68rem; word-break: break-all; opacity: 0.75; margin-bottom: 0.4rem; } /* Ses düzeyi satırı */ .settings-slider-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; font-size: 0.75rem; color: var(--text-secondary); } .settings-slider-row input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); } .settings-slider-row span:last-child { min-width: 34px; text-align: right; } /* ===== APP TOUR ===== */ .tour-overlay { position: fixed; inset: 0; z-index: 19999; pointer-events: none; } .tour-overlay.active { pointer-events: all; } .tour-backdrop { position: absolute; inset: 0; /* Spotlight dikdörtgeni hariç tüm ekranı karart + bulanıklaştır — clip-path'teki "delik" JS tarafından (setTourBackdropHole) her adımda güncellenir. */ background: rgba(4,4,14,0.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: clip-path 0.45s cubic-bezier(0.4,0,0.2,1), -webkit-clip-path 0.45s cubic-bezier(0.4,0,0.2,1); } .tour-spotlight { position: absolute; border-radius: 12px; box-shadow: 0 0 0 3px var(--accent), 0 0 25px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.08); transition: all 0.45s cubic-bezier(0.4,0,0.2,1); pointer-events: none; border: 2px solid var(--accent); z-index: 20001; /* Spotlight içindeki eleman tıklanabilsin */ background: transparent; } .tour-tooltip { position: absolute; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 18px; padding: 1.1rem 1.2rem 1rem; width: min(320px, 90vw); box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--accent-mid); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); z-index: 20002; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* Son çare emniyeti: kısa ekranlı bir telefonda uzun bir açıklama kutuyu ekrandan taşırıp İleri/Geri düğmelerini erişilemez bırakıyordu. Kutu ekranı asla aşamaz; taşan kısım açıklamanın kendi içinde kaydırılır ve düğme satırı her zaman görünür kalır. Kesin sınırı JS her adımda hesaplayıp yazıyor; buradaki değer yalnızca güvenlik ağı. */ display: flex; flex-direction: column; max-height: calc(100dvh - 24px - var(--sa-top) - var(--sa-bottom)); box-sizing: border-box; } .tour-step-badge { font-size: 0.65rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 20px; padding: 0.15rem 0.6rem; display: inline-block; margin-bottom: 0.6rem; letter-spacing: 0.05em; } .tour-icon { font-size: 2rem; margin-bottom: 0.4rem; line-height: 1; animation: tourIconPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes tourIconPop { from { transform: scale(0.4) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .tour-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.3; } .tour-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; /* Yüksekliği fitTourDesc ölçüp piksel olarak veriyor: ekrana sığmayan metin burada kaysın, kutu büyümesin diye. Yer daraldığında kısalan tek parça bu olmalı — başlık ve düğmeler her zaman görünür kalsın. */ flex: 0 0 auto; overflow-y: auto; overscroll-behavior: contain; } /* Metin eskiden harf harf yazılıyordu (her karakter ayrı bir + ayrı bir animasyon). Eski telefonlarda takılıyor, okuması da yorucu oluyordu. Artık tamamı tek seferde gelip kısa bir geçişle yumuşakça beliriyor. */ .tour-desc-in { animation: tourDescIn 0.28s ease-out both; } @keyframes tourDescIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 0.5rem; flex-shrink: 0; /* düğme satırı hiçbir koşulda ezilmesin */ } .tour-skip-btn { font-size: 0.72rem; color: var(--text-secondary); background: none; border: none; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 8px; transition: color 0.2s; } .tour-skip-btn:hover { color: var(--danger); } .tour-prev-btn, .tour-next-btn { padding: 0.45rem 0.9rem; border-radius: 10px; border: none; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .tour-prev-btn { background: var(--glass); color: var(--text-secondary); border: 1px solid var(--border); } .tour-prev-btn:hover { color: var(--text-primary); } .tour-next-btn { background: var(--accent); color: #fff; box-shadow: 0 2px 12px var(--accent-glow); } .tour-next-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .tour-next-btn:active { transform: translateY(0); } /* ===== ÜYELİK (Gelişim Plus) ===== Ayarların en üstündeki giriş kartı ve tam sayfa plan ekranı. Renk olarak temanın vurgu rengine değil altın tonuna yaslanıyor: her temada aynı "bu ayrı bir şey" hissini versin ve sıradan bir ayar satırıyla karışmasın. */ .premium-entry { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.85rem 0.9rem; text-align: left; cursor: pointer; border-radius: var(--radius); border: 1px solid rgba(248,211,78,0.38); background: linear-gradient(135deg, rgba(248,211,78,0.14), rgba(248,211,78,0.05)); color: var(--text-primary); font: inherit; } [data-theme="pixel"] .premium-entry { border-radius: var(--radius); } .premium-entry-ico { font-size: 1.4rem; flex: 0 0 auto; } .premium-entry-text { display: flex; flex-direction: column; gap: 0.12rem; flex: 1 1 auto; min-width: 0; } .premium-entry-title { font-size: 0.92rem; font-weight: 700; } .premium-entry-sub { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; } .premium-entry-chev { color: var(--text-secondary); font-size: 1.1rem; flex: 0 0 auto; } .premium-entry.is-active { border-color: rgba(126,231,135,0.45); background: linear-gradient(135deg, var(--accent-soft), transparent); } /* Ayarların üstünde açılıyor. */ .premium-page { z-index: 850; } .premium-hero { text-align: center; padding: 1.2rem 0.6rem 0.4rem; } .premium-hero-ico { font-size: 2.6rem; line-height: 1; } .premium-hero-title { font-size: 1.35rem; font-weight: 800; margin-top: 0.5rem; } .premium-hero-sub { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.45rem; } .premium-price { margin-top: 0.9rem; display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; } .premium-price-amount { font-size: 2.1rem; font-weight: 900; color: #f8d34e; line-height: 1; } .premium-price-period { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; } .premium-price-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.35rem; } .premium-status { margin-top: 0.9rem; padding: 0.7rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); } .premium-status b { color: var(--text-primary); } .premium-status.is-active { border-color: rgba(126,231,135,0.45); background: var(--accent-soft); } .premium-list-title { font-size: 0.95rem; font-weight: 700; margin: 1.2rem 0 0.6rem; } .premium-features { display: flex; flex-direction: column; gap: 0.5rem; } .premium-feature { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); } .premium-feature-ico { font-size: 1.15rem; flex: 0 0 auto; line-height: 1.3; } .premium-feature-body { min-width: 0; } .premium-feature-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .premium-feature-desc { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.2rem; } .premium-feature-free { display: inline-block; margin-top: 0.35rem; font-size: 0.68rem; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 0.12rem 0.5rem; } [data-theme="pixel"] .premium-feature-free { border-radius: var(--radius); } .premium-free-box { margin-top: 1.1rem; padding: 0.85rem; border-radius: var(--radius); border: 1px dashed var(--border); background: var(--bg-secondary); } .premium-free-box h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; } .premium-free-box p { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.55; } .premium-cta { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.2rem; } .premium-cta .btn { width: 100%; } .premium-fine-print { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.55; margin-top: 0.8rem; text-align: center; } /* Kilitli seçenekler: gizlenmiyor, kilit rozetiyle görünür kalıyor. Neyin açılacağını görmeden kimse bir üyeliği merak etmez; ayrıca seçenek yok olunca arayüz temadan temaya değişiyormuş gibi hissettiriyordu. */ /* Kilit, köşeye oturan bir rozet olarak denendi ve her yerde etiketin üstüne bindi: bu düğmeler (tema hapları, dönem seçici bölmeleri) sadece yazılarına yetecek kadar geniş. Bunun yerine kilit, yazının sağında satır içi bir simge gibi duruyor ve düğme ona yer açıyor. */ .premium-locked { position: relative; opacity: 0.55; padding-right: 1.6rem; } .premium-locked::after { content: '🔒'; position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%); font-size: 0.62rem; line-height: 1; pointer-events: none; } .stats-period-btn.premium-locked { padding-right: 1.05rem; } .stats-period-btn.premium-locked::after { right: 2px; font-size: 0.58rem; } /* Bildirim izni durumu — kullanıcı bildirimlerin neden gelmediğini ancak burada görebiliyor. */ .notif-status { font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; } .notif-status.is-ok { border-color: rgba(126,231,135,0.4); color: var(--text-primary); } .notif-status.is-bad { border-color: var(--danger); color: #fca5a5; } /* ===== KURULUM: HEDEF VE SÜRE SEÇİMİ ===== Kurulum ekranı koyu bir dağ manzarasının üzerinde duruyor; bu yüzden renkler temadan değil, o sahneden geliyor. */ .onb-goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; margin: 0.2rem 0 0.6rem; } .onb-goal-btn { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.7rem 0.3rem; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); border-radius: 14px; color: #fff; cursor: pointer; transition: transform 0.15s, background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .onb-goal-btn:active { transform: scale(0.94); } .onb-goal-btn.selected { background: rgba(99,102,241,0.35); border-color: #a78bfa; box-shadow: 0 0 14px rgba(167,139,250,0.45); } .onb-goal-emoji { font-size: 1.4rem; line-height: 1; } .onb-goal-name { font-size: 0.74rem; font-weight: 600; } .onb-mins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; width: 100%; margin: 0.4rem 0 0.8rem; } .onb-mins-btn { padding: 0.75rem 0.2rem; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); border-radius: 14px; color: #fff; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: transform 0.15s, background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .onb-mins-btn:active { transform: scale(0.94); } .onb-mins-btn.selected { background: rgba(99,102,241,0.35); border-color: #a78bfa; box-shadow: 0 0 14px rgba(167,139,250,0.45); } /* Kurulumdaki serbest metin alanı da sahnenin rengine uyuyor. */ #onb-custom-goal { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; } #onb-custom-goal::placeholder { color: rgba(255,255,255,0.45); } /* ===== SAYAÇ SÜRE AYARI ===== Üç hazır kartın yerini alan katlanır ayar. Değişiklik anında sayaca yansıdığı için burada "kaydet" gibi bir adım yok — kaydetme yalnızca süreyi kalıcı kılmak (Plus) için var. */ .pomo-duration { display: flex; flex-direction: column; gap: 0.5rem; } .pomo-dur-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.7rem; } [data-theme="pixel"] .pomo-dur-row { border-radius: var(--radius); } .pomo-dur-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .pomo-stepper { display: flex; align-items: center; gap: 0.5rem; } .pomo-dur-value { min-width: 4.2rem; text-align: center; font-size: 0.9rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .pomo-dur-value b { font-size: 1.15rem; color: var(--accent); font-weight: 800; } .pomo-step-btn { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text-primary); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color 0.2s, background 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent; } [data-theme="pixel"] .pomo-step-btn { border-radius: var(--radius); } .pomo-step-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pomo-step-btn:disabled { opacity: 0.35; cursor: not-allowed; } .pomo-dur-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .pomo-dur-actions .btn { flex: 1 1 9rem; } .pomo-saved-durations { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pomo-saved-chip { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); } [data-theme="pixel"] .pomo-saved-chip { border-radius: var(--radius); } .pomo-saved-chip.active { border-color: var(--accent); background: var(--accent-soft); } .pomo-saved-apply { background: none; border: none; cursor: pointer; color: var(--text-primary); font-size: 0.8rem; font-weight: 600; padding: 0.42rem 0.2rem 0.42rem 0.7rem; } .pomo-saved-del { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 0.7rem; padding: 0.42rem 0.6rem 0.42rem 0.35rem; } .pomo-saved-del:hover { color: var(--danger); } /* Haftalık hedef tutturulduğunda sayı vurgulanır. */ .ws-val.ws-hit { color: var(--success); } /* ===== PROFİL: GİRİŞ YAPILAN HESAP ===== */ .account-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; padding: 0.6rem 0.7rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } [data-theme="pixel"] .account-row { border-radius: var(--radius); } .account-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 1px solid var(--glass-border); } [data-theme="pixel"] .account-avatar { border-radius: var(--radius); } .account-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.05rem; } .account-avatar-fallback[hidden] { display: none; } .account-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .account-label { font-size: 0.68rem; color: var(--text-secondary); } .account-email { font-size: 0.83rem; color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; } /* ===== KURULUM: İSTEĞE BAĞLI TARİH VE KVKK ONAYI ===== */ .onb-skip-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6); font-size: 0.8rem; padding: 0.5rem; margin-top: 0.1rem; text-decoration: underline; -webkit-tap-highlight-color: transparent; } .onb-skip-btn:hover { color: #fff; } #onb-countdown-name, #onb-countdown-date { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; } #onb-countdown-name::placeholder { color: rgba(255,255,255,0.45); } .onb-consent-box { width: 100%; max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; text-align: left; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; padding: 0.8rem 0.9rem; margin: 0.2rem 0 0.1rem; } .onb-consent-box h5 { font-size: 0.8rem; font-weight: 700; color: #fff; margin: 0.7rem 0 0.2rem; } .onb-consent-box h5:first-child { margin-top: 0; } .onb-consent-box p { font-size: 0.76rem; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; } .onb-consent-check { display: flex; align-items: flex-start; gap: 0.55rem; text-align: left; cursor: pointer; font-size: 0.78rem; line-height: 1.45; color: rgba(255,255,255,0.85); margin: 0.3rem 0 0.2rem; } .onb-consent-check input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.1rem; accent-color: #a78bfa; cursor: pointer; } .btn:disabled { opacity: 0.45; } /* Aydınlatma metni ayarlar içinde de gösteriliyor; orada zemin koyu dağ değil, temanın kendi kartı. */ .about-consent { background: var(--bg-card); border-color: var(--border); max-height: none; margin-top: 0.5rem; } .about-consent h5 { color: var(--text-primary); } .about-consent p { color: var(--text-secondary); } /* ===== ÜYELİK PLANLARI ===== */ .premium-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-top: 1rem; } .premium-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.85rem 0.3rem 0.6rem; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; -webkit-tap-highlight-color: transparent; } [data-theme="pixel"] .premium-plan { border-radius: var(--radius); } .premium-plan:active { transform: scale(0.96); } .premium-plan.selected { border-color: #f8d34e; background: linear-gradient(160deg, rgba(248,211,78,0.16), transparent); box-shadow: 0 0 0 1px rgba(248,211,78,0.35) inset; } .premium-plan-badge { position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background: #f8d34e; color: #23231a; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.14rem 0.4rem; border-radius: 999px; white-space: nowrap; } [data-theme="pixel"] .premium-plan-badge { border-radius: 0; } .premium-plan-label { font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; } .premium-plan-price { font-size: 1.05rem; font-weight: 900; color: var(--text-primary); line-height: 1.15; } .premium-plan-price small { display: block; font-size: 0.58rem; font-weight: 600; color: var(--text-secondary); } .premium-plan-note { font-size: 0.58rem; color: var(--text-secondary); text-align: center; line-height: 1.3; } /* ===== KURULUM: DİL SEÇİMİ ===== İki seçenek de kendi dilinde yazılı olduğu için bu ekran çeviriye girmiyor. */ .onb-lang-globe { font-size: 2.6rem; line-height: 1; } .onb-lang-title { color: #fff; font-size: 1.3rem; font-weight: 800; } .onb-lang-sub { color: rgba(255,255,255,0.72); font-size: 0.85rem; line-height: 1.5; } .onb-lang-sub span { color: rgba(255,255,255,0.45); font-size: 0.8rem; } .onb-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; margin-top: 0.4rem; } .onb-lang-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.1rem 0.4rem; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); border-radius: 16px; color: #fff; cursor: pointer; transition: transform 0.15s, background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .onb-lang-btn:active { transform: scale(0.95); } .onb-lang-btn:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.3); } /* Cihazın dili önceden işaretli — seçim yine kullanıcının. */ .onb-lang-btn.suggested { border-color: #a78bfa; box-shadow: 0 0 16px rgba(167,139,250,0.35); } .onb-lang-flag { font-size: 1.9rem; line-height: 1; } .onb-lang-name { font-size: 0.92rem; font-weight: 700; } /* Gizlilik politikasının tam metnine giden bağlantı. Uygulama içindeki özet metnin yanında, mağaza kaydında da kullanılan herkese açık sayfaya çıkar. */ .privacy-link { display: inline-block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--accent); text-decoration: underline; } .onb-privacy-link { color: #a78bfa; margin: 0.1rem 0 0; align-self: flex-start; }