/* ============================================================ PLANETORO — MOBİL UYUMLULUK CSS (v2) Tüm sayfaların bölümünde, diğer CSS'lerden SONRA ekle. ============================================================ */ /* ──────────────────────────────────────────────────────────── 0. GLOBAL ──────────────────────────────────────────────────────────── */ html, body { max-width: 100vw; overflow-x: hidden; } * { box-sizing: border-box; } /* ──────────────────────────────────────────────────────────── 1. NAVBAR — KRİTİK DÜZELTİM main.css: .nav-links { position:absolute; left:50%; transform:translateX(-50%) } Bu kural mobilde navbar'ı viewport dışına taşıtıyor. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .navbar { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; padding: 10px 14px !important; position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999; gap: 0 !important; width: 100% !important; } /* Absolute konumlamayı tamamen kaldır */ .navbar .nav-links { position: static !important; left: auto !important; transform: none !important; display: none !important; width: 100% !important; flex-direction: column !important; gap: 0 !important; background: rgba(5, 11, 18, 0.98) !important; border: 1px solid rgba(52, 152, 219, 0.25) !important; border-radius: 12px !important; padding: 6px 0 !important; margin-top: 8px !important; order: 10 !important; } .navbar .nav-links.open { display: flex !important; } .navbar .nav-links li { margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } .navbar .nav-links li:last-child { border-bottom: none !important; } .navbar .nav-links li a { display: block !important; padding: 13px 20px !important; font-size: 14px !important; margin: 0 !important; letter-spacing: 1px !important; } .navbar .logo a { font-size: 16px !important; } .navbar .logo img { height: 36px !important; width: 36px !important; margin-right: 8px !important; } .user-name-nav { display: none !important; } .navbar .profile .dropdown-menu { right: 0 !important; left: auto !important; top: calc(100% + 8px) !important; min-width: 180px !important; } .navbar .profile .trigger img { width: 36px !important; height: 36px !important; } } /* Hamburger — büyük ekranda gizle */ .nav-hamburger { display: none; } @media (max-width: 768px) { .nav-hamburger { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; cursor: pointer; background: rgba(52,152,219,0.1); border: 1px solid rgba(52,152,219,0.3); border-radius: 8px; flex-shrink: 0; padding: 0; } .nav-hamburger span { display: block; width: 18px; height: 2px; background: #3498db; border-radius: 2px; transition: all 0.3s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ──────────────────────────────────────────────────────────── 2. FOOTER — KRİTİK DÜZELTİM footer-container: grid-template-columns:2fr 1fr 1fr sağa kayıyor ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .footer { padding: 32px 16px 20px !important; overflow-x: hidden !important; width: 100% !important; } .footer-container { display: flex !important; flex-direction: column !important; gap: 24px !important; grid-template-columns: unset !important; max-width: 100% !important; text-align: center !important; padding: 0 !important; margin: 0 auto !important; } .footer-content p { max-width: 100% !important; margin: 10px auto !important; } .footer-logo { justify-content: center !important; } .footer-links, .footer-contact { text-align: center !important; } .footer-links ul { padding: 0 !important; } .social-icons { justify-content: center !important; } .footer-bottom { font-size: 11px !important; padding: 16px 0 0 !important; margin-top: 20px !important; } } /* ──────────────────────────────────────────────────────────── 3. MAIN.PHP — Hero & Dashboard ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .hero-container { height: auto !important; min-height: 100svh !important; padding: 90px 16px 50px !important; background-attachment: scroll !important; } .hero-content { max-width: 100% !important; padding: 0 !important; } .hero-content h1 { font-size: clamp(22px, 6vw, 36px) !important; letter-spacing: 0 !important; line-height: 1.2 !important; margin-bottom: 14px !important; } .hero-content > p { font-size: 14px !important; margin-bottom: 24px !important; } .hero-btns { flex-direction: column !important; align-items: center !important; gap: 12px !important; } .hero-btns a { width: 100% !important; max-width: 280px !important; text-align: center !important; } /* Dashboard: grid → flex sütun */ .main-dashboard-container { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 20px !important; max-width: 100% !important; padding: 0 !important; margin: 20px 0 !important; } .goals-grid-section { width: 100% !important; } .goals-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .mini-goal-card { min-height: 80px !important; padding: 12px 8px !important; } .mini-goal-card p { font-size: 12px !important; } .progress-side-section { width: 100% !important; } .potion-card { max-width: 100% !important; padding: 20px 16px !important; } /* How-it-works */ .how-work { padding: 40px 16px !important; } .how-work h2 { font-size: 22px !important; } .steps { gap: 48px !important; } .step, .step:nth-child(even) { flex-direction: column !important; text-align: center !important; gap: 24px !important; } .step div, .step:nth-child(even) div { text-align: center !important; } .step img { width: 100% !important; max-width: 260px !important; height: auto !important; margin: 0 auto !important; } .step h3 { font-size: 18px !important; } .step p { font-size: 14px !important; } } @media (max-width: 480px) { .goals-grid { grid-template-columns: 1fr !important; } } /* ──────────────────────────────────────────────────────────── 4. HEDEFLERo.PHP ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .dashboard-wrapper { padding: 90px 12px 50px !important; gap: 20px !important; } /* grid → flex sütun */ .top-section { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 16px !important; } .table-side { width: 100% !important; padding: 18px 14px !important; } /* Tablo yatay scroll */ .galaxy-table, .table-side table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .galaxy-table th, .galaxy-table td, .table-side th, .table-side td { padding: 10px 10px !important; font-size: 13px !important; white-space: normal !important; } .goal-text { max-width: 160px !important; word-break: break-word !important; } .card-header { flex-wrap: wrap !important; gap: 10px !important; } .card-title { font-size: 15px !important; } .btn-galaxy { font-size: 12px !important; padding: 8px 14px !important; } /* Progress circle */ .percentage-side { width: 100% !important; padding: 24px 16px !important; } .progress-circle-container { width: 140px !important; height: 140px !important; margin: 0 auto !important; } .percentage { font-size: 28px !important; } /* Stats */ .stats-full-section { padding: 20px 16px !important; } .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .stat-item h4 { font-size: 10px !important; } .stat-item p { font-size: 22px !important; } /* AI premium card overflow fix */ .ai-asistan-premium-card { width: 100% !important; margin: 0 !important; padding: 24px 16px !important; overflow: hidden !important; max-width: 100% !important; } .ai-badge { font-size: 1.3rem !important; letter-spacing: 2px !important; } .ai-subtitle { font-size: 13px !important; } .btn-ai-premium { font-size: 12px !important; padding: 12px 20px !important; width: 100% !important; max-width: 280px !important; } /* Modal */ .modal-content { width: 92% !important; margin: 15% auto !important; padding: 24px 16px !important; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ──────────────────────────────────────────────────────────── 5. POMODORO.PHP ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .selection-screen { padding: 90px 16px 50px !important; min-height: 100svh !important; } .selection-wrapper { width: 100% !important; max-width: 100% !important; } .sel-title { font-size: clamp(18px, 5vw, 28px) !important; letter-spacing: 2px !important; } .planet-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .planet-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; padding: 14px !important; text-align: left !important; } .planet-canvas { width: 72px !important; height: 72px !important; flex-shrink: 0 !important; } .shape-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .planet-name-input { font-size: 16px !important; } .start-mission-btn { width: 100% !important; padding: 16px !important; } .pomodoro-section { padding: 90px 16px 50px !important; } .timer-card { padding: 24px 16px !important; width: 100% !important; } .timer-display { font-size: clamp(56px, 18vw, 96px) !important; } #timerPlanetCanvas { width: 110px !important; height: 110px !important; } .controls { flex-direction: column !important; gap: 10px !important; width: 100% !important; } .pomo-btn { width: 100% !important; padding: 14px !important; font-size: 12px !important; } .break-screen { padding: 90px 16px 50px !important; } .break-card { padding: 24px 16px !important; width: 100% !important; } .break-timer { font-size: clamp(44px, 14vw, 72px) !important; } .break-title { font-size: 16px !important; } .lock-modal-box { width: 90% !important; padding: 24px 16px !important; } .lock-modal-btn { width: 100% !important; padding: 14px !important; } .pomo-alert { bottom: 16px !important; left: 16px !important; right: 16px !important; width: auto !important; font-size: 12px !important; } } /* ──────────────────────────────────────────────────────────── 6. UZAY.PHP ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .hud-overlay { padding-top: 70px !important; gap: 8px !important; } .hud-top-left, .hud-top-right { font-size: 10px !important; padding: 8px 10px !important; } .hud-hint { font-size: 9px !important; } .new-pomodoro-btn { font-size: 11px !important; padding: 8px 14px !important; } .planet-tooltip { max-width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; } } /* ──────────────────────────────────────────────────────────── 7. GİRİŞ / KAYIT OL ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .auth-section { padding: 90px 16px 40px !important; min-height: 100svh !important; } .auth-container { width: 100% !important; max-width: 100% !important; padding: 28px 20px !important; } .signup-container { max-width: 100% !important; margin: 90px 16px 40px !important; padding: 28px 20px !important; } .auth-form input, .signup-form input { font-size: 16px !important; padding: 13px 14px !important; } .auth-form .btn-primary, .signup-form button { width: 100% !important; padding: 14px !important; } } /* ──────────────────────────────────────────────────────────── 8. PREMİUM.PHP ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .premium-hero { padding: 100px 16px 60px !important; } .hero-cta-group { flex-direction: column !important; align-items: center !important; gap: 12px !important; } .features-section { padding: 40px 16px !important; } .features-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .feat-card.feat-large, .feat-card.feat-wide { grid-column: auto !important; } .coming-soon-section { padding: 40px 16px !important; } .cs-input-wrap { flex-direction: column !important; gap: 10px !important; } .cs-input-wrap input { width: 100% !important; font-size: 16px !important; } .cs-btn { width: 100% !important; } .cs-stats { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; } .cs-divider { display: none !important; } } /* ──────────────────────────────────────────────────────────── 9. BREAK OVERLAY ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .gbo-inner { width: 92% !important; padding: 32px 18px !important; gap: 12px !important; } .gbo-timer { font-size: 52px !important; } .gbo-btn { width: 100% !important; padding: 13px 16px !important; } } /* ──────────────────────────────────────────────────────────── 10. GENEL DOKUNMA & iOS DÜZELTMELERİ ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { button, .btn-check, .btn-action-delete, .btn-action-recover, .pomo-btn, .btn-galaxy { min-height: 44px !important; } body { background-attachment: scroll !important; } }