html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif; /* Fontu ekledik. (Tarayıcıda bu font yüklü değilse varsayılan fonta döner) */
color: #333; /* Varsayılan metin rengi */
line-height: 1.6;
/* Kaydırma çubuğunu gizlemek için (Firefox ve IE/Edge) */
scrollbar-width: none;
-ms-overflow-style: none;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(1px);
z-index: -1;
}
/* Inter fontunun yüklenmesi normalde HTML veya @import ile yapılır,
ancak statik HTML'de sadece bu kuralı ekleyerek fontu varsayılan olarak ayarlamış oluruz.
Fontu kullanmak için kısmına Google Fonts linkini eklemeniz GEREKEBİLİR.
*/
/* Kaydırma çubuğunu gizlemek için (Chrome, Safari, Opera) */
body::-webkit-scrollbar {
display: none;
}
/* .section sınıfını, .heroContent'a benzer bir stil için tanımlayalım veya kullanalım */
/* Next.js bileşeninde 'section' yerine '.heroContent' kullanıldığı için,
.heroContent'a 'section' stilini uygulayacağız. */
.section {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(3px);
border-radius: 12px;
padding: 40px;
margin-bottom: 60px;
/* Bu sınıf kullanılmıyor gibi görünüyor, ancak gelecekte kullanıma hazır. */
}
/* --- Hero Section Stilleri (Özel Stillerin Güncellenmesi) --- */
:root {
--primary-color: #1976d2;
--positive-color: #2e7d32;
--negative-color: #c62828;
}
.hero {
display: flex;
align-items: center;
justify-content: center;
/* Arka plan görseli body'de olduğu için buradaki renk tanımını kaldırdık veya şeffaf bıraktık */
background: transparent;
padding: 10px; /* Dış boşluğu azalttık */
flex-grow: 1;
}
/* .hero.scrolled sınıfı için JavaScript gereklidir */
.hero.scrolled {
background: linear-gradient(to bottom, #bbdefb, #e3f2fd);
}
.heroContent {
max-width: 600px;
text-align: left;
/* Global .section stili entegrasyonu */
background: rgba(255, 255, 255, 0.6); /* Orijinal şeffaflığı korumak için */
backdrop-filter: blur(3px);
padding: 20px 40px 40px 40px;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2); /* Gölgeyi biraz koyulttuk */
/* Kaydırma çubuğunu gizlemek için (Firefox ve IE/Edge) */
scrollbar-width: none;
-ms-overflow-style: none;
}
.heroContent::-webkit-scrollbar {
display: none; /* Kaydırma çubuğunu gizlemek için (Chrome, Safari, Opera) */
}
.title {
font-size: 1.75rem; /* Başlık boyutunu biraz küçülttük */
margin-bottom: 15px; /* Boşluğu ayarladık */
color: var(--primary-color);
margin-top: 0;
}
.subtitle {
font-size: 0.9rem;
color: #555;
text-align: center;
margin-top: -10px;
margin-bottom: 20px;
}
.text {
font-size: 1rem;
margin-bottom: 24px;
color: #555;
}
/* --- Form ve Input Stilleri --- */
.form {
display: flex;
flex-direction: column;
gap: 12px; /* Form elemanları arasındaki boşluğu azalttık */
}
.inputGroup {
border: 1px solid #ccc;
padding: 10px;
border-radius: 6px;
}
.inputGroup.text-input-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.inputGroup label {
font-weight: 500;
display: block;
font-size: 0.9rem; /* Etiket yazı boyutunu küçülttük */
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox-label input[type="checkbox"] {
width: auto;
}
.inputGroup input {
padding: 10px 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.3s;
}
.inputGroup.text-input-group input {
width: 100px;
}
.inputGroup input:focus {
border-color: var(--primary-color);
outline: none;
}
.btn {
padding: 12px 24px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
margin-top: 10px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #1565c0;
}
/* --- Sonuç Kutusu ve Tanı Stilleri --- */
.resultBox {
margin-top: 3px; /* Üst boşluğu azalttık */
padding: 10px; /* İç boşluğu azalttık */
border-radius: 2px;
text-align: center;
}
.resultBox p {
margin: 2px 0;
font-size: 1.1rem;
color: black;
font-weight: bold;
}
.diagnosis {
margin-top: 12px;
font-size: 1.4rem; /* Tanı mesajının boyutunu küçülttük */
font-weight: bold;
text-transform: uppercase;
text-align: center;
animation: blink 1.2s infinite;
padding: 5px;
}
.positive {
color: var(--positive-color);
text-shadow: 0 0 8px #81c784;
}
.negative {
color: var(--negative-color);
text-shadow: 0 0 8px #ef9a9a;
}
/* --- Animasyon --- */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 5px 0;
font-size: 0.8rem;
flex-shrink: 0;
}
footer a {
color: white;
text-decoration: none;
}
footer p {
margin: 0;
}