:root {
    --bg-primary: #00081f;
    --text-primary: #ffffff;
    --text-secondary: #E0E0E0;
    --text-tertiary: #ffffff;
    --text-muted: #8A94A6;
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #0B0C1B;
    --btn-trial-bg: #021c41;
    --btn-trial-text: #FFFFFF;
    --btn-plans-bg: #4c4abf;
    --btn-plans-text: #FFFFFF;
    --panel-bg: #2d3748;
    --panel-text: #FFFFFF;
    --top-bar-bg: #00081f;
    --top-bar-text: #E0E0E0;
    --card-bg: #161A2C;
}


/* --- Genel Sıfırlamalar ve Ayarlar --- */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
a { text-decoration: none; color: inherit; }

/* --- HEADER --- */
.main-header {
    background-color: var(--top-bar-bg);
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.main-header nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 0 40px; 
    box-sizing: border-box; 
}
.main-header .logo { display: flex; align-items: center; font-size: 20px; font-weight: 700; justify-self: start; }
.main-header .logo svg { margin-right: 10px; }
.promo-text { color: var(--top-bar-text); font-size: 14px; font-weight: 500; justify-self: center; }
.main-header .nav-links { display: flex; align-items: center; gap: 24px; justify-self: end; }
.main-header .nav-link { color: var(--text-secondary); font-weight: 500; transition: color 0.3s; }
.main-header .nav-link:hover { color: var(--text-primary); }

/* --- Genel Düğme Stilleri --- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }

/* --- Ana İçerik (Hero) --- */
.hero {
    display: flex;
    flex-direction: column;
}
.align-self-left { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-right { align-self: flex-end; }
.hero > * { margin: 0; }
.hero h1 { font-weight: 700; color: var(--text-primary); }
.hero .subtitle { color: var(--text-secondary); font-weight: 400; }
.hero .description { color: var(--text-tertiary); max-width: 600px; }
.cta-buttons { display: flex; gap: 16px; }
.btn-trial { background-color: var(--btn-trial-bg); color: var(--btn-trial-text); padding: 14px 28px; font-size: 16px; }
.btn-plans { background-color: var(--btn-plans-bg); color: var(--btn-plans-text); padding: 14px 28px; font-size: 16px; }
.fine-print { color: var(--text-muted); }

/* --- ÖZELLİKLER BÖLÜMÜ --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.features-grid.align-left .feature-card { text-align: left; }
.features-grid.align-center .feature-card { text-align: center; }
.features-grid.align-right .feature-card { text-align: right; }
.feature-card {
    background-color: var(--card-bg);
    padding: 32px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 24px;
    align-items: start;
}
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    margin-bottom: 0; 
    background-color: var(--feature-icon-bg, #2A2F45);
    color: var(--feature-icon-color, #C0C8D1);
}
.feature-icon svg, .feature-icon img { width: 24px; height: 24px; object-fit: contain; }
.feature-card h3 { font-weight: 600; color: var(--text-primary); margin-top: 0; margin-bottom: 8px; }
.feature-card p { color: var(--text-tertiary); margin: 0; line-height: 1.5; }

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
    .main-header nav {
        grid-template-columns: 1fr auto;
        padding: 0 20px;
    }
    .main-header .promo-text {
        display: none;
    }
    .main-header .nav-links {
        justify-self: end;
        gap: 15px;
    }
    .cta-buttons {
        flex-direction: column;
        width: 80%;
    }
    .cta-buttons a {
        text-align: center;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .feature-card {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center !important; 
    }
    .feature-icon {
        margin-bottom: 0;
        justify-self: center;
    }
}