/* Genel Stil */ body { font-family: "Segoe UI", sans-serif; background: #f7f9fc; color: #333; margin: 0; padding: 2rem; line-height: 1.6; } /* Başlıklar */ h1, h2 { color: #2c3e50; } /* Sayfa Başlığı */ h1 { text-align: center; margin-bottom: 2rem; } /* Bölümler */ section { background: #ffffff; border: 1px solid #dcdcdc; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } /* Formlar */ form { display: flex; flex-direction: column; gap: 1rem; } /* Input, Select, Textarea */ input, select, textarea, button { padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } textarea { resize: vertical; min-height: 80px; } /* Button */ button { background-color: #3498db; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #2980b9; } /* Listeleme */ ul { list-style: none; padding: 0; } li { background: #f1f1f1; padding: 1rem; margin-bottom: 0.5rem; border-radius: 6px; } a { color: #2980b9; text-decoration: none; font-weight: 500; } a:hover { text-decoration: underline; } .unit-box { margin-bottom: 1.5rem; } .unit-btn { background-color: #2c3e50; color: #fff; font-size: 1.2rem; padding: 1rem 1.5rem; border: none; border-radius: 8px; cursor: pointer; width: 100%; text-align: left; transition: background-color 0.3s; } .unit-btn:hover { background-color: #34495e; } .exercise-list { background: #f4f4f4; padding: 1rem; border-radius: 8px; margin-top: 0.5rem; } .exercise-list li { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; } .unit-item { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-bottom: 1px solid #ddd; } .unit-item .delete-btn { background-color: #e74c3c; color: white; border: none; padding: 5px 10px; cursor: pointer; border-radius: 4px; } .unit-item .delete-btn:hover { background-color: #c0392b; } button.ghost { background: transparent; border: 2px solid #34495e; color: #34495e; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; } button.ghost:hover { background: #34495e; color: white; } .mini-btn { background: transparent; border: 2px solid #34495e; color: #34495e; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; } .mini-btn:hover { background: #34495e; color: white; } /* sayfanın içine veya style.css’e */ .page-header{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin:12px 0 8px; } .page-header h1{ margin:0; font-size:20px; } .page-actions{ display:flex; align-items:center; gap:8px; } .page-actions .link{ padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; text-decoration:none; color:#111827; background:#fff; } .btn{ padding:8px 10px; border-radius:8px; border:1px solid #cbd5e1; cursor:pointer; background:#fff; } .btn.danger{ border-color:#fca5a5; color:#b91c1c; } .btn.danger:hover{ background:#fee2e2; } .unit-accordion.open .chev { transform: rotate(90deg); } .exercise-item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eee; } .badge.mini { font-size:12px; padding:2px 6px; border-radius:9999px; } /* LOGIN SAYFASI ÖZEL STİLLERİ */ body.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; background: #f7f9fc; } .auth-wrapper { width: 100%; max-width: 420px; } .auth-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 12px; padding: 2rem; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35); } /* başlık kısmı: logo + başlık yan yana */ .auth-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } /* küçük, yuvarlak logo */ .auth-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #e2e8f0; } /* login başlığını sola hizala, biraz küçült */ .auth-card h1 { margin: 0; text-align: left; font-size: 1.4rem; } /* küçük açıklama yazısı */ .auth-subtitle { margin: 0.25rem 0 0; font-size: 0.9rem; color: #6b7280; } /* form alan grupları */ .form-group { display: flex; flex-direction: column; gap: 0.35rem; } .form-group label { font-size: 0.9rem; color: #4b5563; } /* kart içindeki inputların tam genişlik olması için */ .auth-card input { width: 100%; } /* butonu biraz öne çıkaralım */ .primary-btn { width: 100%; font-weight: 600; } /* kayıt ol linki */ .auth-footer { margin-top: 1.25rem; text-align: center; font-size: 0.9rem; color: #6b7280; } .auth-footer a { font-weight: 600; } /* biraz daha ferahlık için tablet üstü boyutlarda padding artır */ @media (min-width: 768px) { .auth-card { padding: 2.25rem 2.5rem; } } body.login-page { position: relative; /* blur için gerekli */ display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; background: #0f172a; /* resim yüklenmezse koyu zemin */ overflow: hidden; /* blur taşıyorsa gizle */ } /* Flu arka plan resmi */ body.login-page::before { content: ""; position: fixed; inset: 0; background: url("../content/resim.jpeg") center/cover no-repeat; filter: blur(14px); transform: scale(1.05); /* kenarlarda blur boşluk olmasın diye hafif büyütüyoruz */ z-index: -2; } /* Hafif koyu overlay, kartı öne çıkarsın */ body.login-page::after { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at top, rgba(15,23,42,0.45), rgba(15,23,42,0.75)); z-index: -1; }