/* ==========================================================================
   KAMAN UBYO - ANA STİL DOSYASI (SEO VE UX OPTİMİZASYONLU)
   ========================================================================== */

/* --- 1. RENK DEĞİŞKENLERİ (GÜNDÜZ MODU) --- */
:root {
    --sayfa-arkaplan: #f4f7f6;
    --kutu-arkaplan: #ffffff;
    --ana-metin: #333333;
    --baslik-rengi: #2E7D32; /* Ahi Evran Kurumsal Koyu Yeşil */
    --vurgu-rengi: #4CAF50;  /* Etkileşimli Açık Yeşil */
    --cizgi-rengi: #dddddd;
}

/* --- 2. SİBER MAVİ GECE MODU (DARK MODE) --- */
body.dark-mode {
    --sayfa-arkaplan: #121212; 
    --kutu-arkaplan: #1E1E1E;
    --ana-metin: #E0E0E0; 
    --baslik-rengi: #66B2FF;   /* Göz yormayan Siber Mavi */
    --vurgu-rengi: #007ACC;    /* Butonlar için Okyanus Mavisi */
    --cizgi-rengi: #333333;
}

/* --- 3. TEMEL SIFIRLAMA VE YUMUŞAK KAYDIRMA --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Sayfa içi linklerde yağ gibi kayma efekti */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--sayfa-arkaplan);
    color: var(--ana-metin);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease; /* Gece moduna geçerken yumuşak geçiş */
}

/* --- 4. HEADER VE NAVİGASYON (MENÜ) --- */
header {
    background-color: var(--baslik-rengi);
    color: white;
    text-align: center;
    padding: 40px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

nav {
    background-color: var(--kutu-arkaplan);
    border-bottom: 1px solid var(--cizgi-rengi);
    position: sticky;
    top: 0;
    z-index: 100; /* Menünün her zaman üstte kalmasını sağlar */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--baslik-rengi);
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--vurgu-rengi);
}

/* --- 5. ANA İÇERİK (MAIN VE BÖLÜMLER) --- */
main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}

section {
    background-color: var(--kutu-arkaplan);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--cizgi-rengi);
}

h2, h3 {
    color: var(--baslik-rengi);
    margin-bottom: 15px;
}

h2 {
    border-bottom: 2px solid var(--vurgu-rengi);
    padding-bottom: 10px;
}

p {
    margin-bottom: 15px;
}

img {
    border-radius: 8px;
    display: block;
}

/* --- 6. SIKÇA SORULAN SORULAR (AKORDİYON) --- */
details {
    background-color: var(--sayfa-arkaplan);
    border: 1px solid var(--cizgi-rengi);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

details[open] {
    background-color: var(--kutu-arkaplan);
    border-left: 4px solid var(--vurgu-rengi);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

summary {
    font-weight: bold;
    color: var(--baslik-rengi);
    font-size: 1.1rem;
    list-style: none;
    position: relative;
    outline: none;
}

summary::-webkit-details-marker {
    display: none;
}

details p {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--cizgi-rengi);
    color: var(--ana-metin);
}

/* --- 7. ETKİLEŞİMLİ ARAÇ: NOT HESAPLAYICI --- */
.hesap-kutu {
    background-color: var(--sayfa-arkaplan);
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid var(--vurgu-rengi);
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.input-grup {
    margin-bottom: 15px;
}

.input-grup label {
    display: block;
    font-weight: bold;
    color: var(--baslik-rengi);
    margin-bottom: 5px;
}

.input-grup input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cizgi-rengi);
    border-radius: 5px;
    font-size: 1rem;
    outline: none;
    background-color: var(--kutu-arkaplan);
    color: var(--ana-metin);
    transition: border-color 0.3s;
}

.input-grup input:focus {
    border-color: var(--vurgu-rengi);
}

.hesapla-btn {
    background-color: var(--vurgu-rengi);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.hesapla-btn:hover {
    background-color: var(--baslik-rengi);
    transform: translateY(-2px);
}

#sonuc-alani {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1rem;
}

/* --- 8. YÜZEYSEL UX BUTONLARI (GECE MODU & YUKARI ÇIK) --- */
.tema-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: var(--kutu-arkaplan);
    color: var(--ana-metin);
    border: 2px solid var(--cizgi-rengi);
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tema-btn:hover {
    transform: scale(1.05);
    border-color: var(--vurgu-rengi);
}

.yukari-cik {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--vurgu-rengi);
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 999;
}

.yukari-cik:hover {
    background-color: var(--baslik-rengi);
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* --- 9. FOOTER --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--baslik-rengi);
    color: white;
    margin-top: 40px;
}
/* --- PREMIUM TASARIM: ÖZEL METİN SEÇİMİ --- */
::selection {
    background-color: var(--vurgu-rengi);
    color: #ffffff;
}

/* --- PREMIUM TASARIM: ÖZEL KAYDIRMA ÇUBUĞU --- */
::-webkit-scrollbar {
    width: 12px; /* Çubuğun kalınlığı */
}

::-webkit-scrollbar-track {
    background: var(--sayfa-arkaplan); /* Arka plan rengi */
}

::-webkit-scrollbar-thumb {
    background-color: var(--vurgu-rengi); /* Çubuğun kendi rengi */
    border-radius: 10px; /* Kenarları yumuşatma */
    border: 3px solid var(--sayfa-arkaplan); /* Çubuğa şık bir iç boşluk hissi verir */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--baslik-rengi); /* Üzerine gelince koyulaşır */
}
/* --- PREMIUM TASARIM: SCROLL (KAYDIRMA) ANİMASYONLARI --- */
/* Öğelerin başlangıç durumu: Görünmez ve 40 piksel aşağıda */
.gizli {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Tarayıcı performansını artırır */
}

/* Ekrana girdiğinde alacağı durum: Tamamen görünür ve orijinal konumunda */
.goster {
    opacity: 1;
    transform: translateY(0);
}