/* Root Variables */
:root {
    --primary-color: #2c3e50; /* Dark navy for headings */
    --secondary-color: #4CAF50; /* Green for buttons, links */
    --accent-color: #2980b9; /* Blue for highlights */
    --error-color: #e74c3c; /* Red for errors */
    --text-color: #2d3748; /* Dark gray for body text */
    --text-muted-color: #6b7280; /* Muted gray for less important text (placeholder, descriptions) */
    --light-bg: #f9fafb; /* Light background */
    --card-bg: #ffffff; /* White for cards */
    --border-color: #e2e8f0; /* Light gray borders */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --spacing-xs: 8px;
    --spacing-xxs: 4px; 
    --spacing-xxxs: 2px; /* En küçük boşluk birimi eklendi */
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --font-size-base: 16px;
    --transition: 0.2s ease;
}

/* Base Styles */
.can-calculator * {
    box-sizing: border-box;
}

.can-calculator {
    font-family: system-ui, -apple-system, 'Segoe UI', 'Arial', sans-serif;
    color: var(--text-color);
    line-height: 1.7;
    max-width: 800px;
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-md);
    background: var(--light-bg);
}

/* Headings */
.can-calculator h1,
.can-calculator h2,
.can-calculator h3,
.can-calculator h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.can-calculator h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem); /* 28px-36px */
    text-align: center;
    line-height: 1.2;
}

.can-calculator h2 {
    font-size: clamp(1.5rem, 4vw, 1.75rem); /* 24px-28px */
    text-align: center;
}

.can-calculator h3 {
    font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px-22px */
    color: var(--accent-color);
    text-align: left;
}

.can-calculator h4 {
    font-size: 1.125rem;
    color: var(--primary-color);
}

/* Paragraphs and Links */
.can-calculator p {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    text-align: center; /* Genel paragraflar için merkezlenmiş */
}
/* Adım paragrafları ve SSS paragrafları gibi belirli içerik paragrafları için sola hizalama */
.can-calculator .step p,
.can-calculator details p {
    text-align: left;
}


.can-calculator a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition), text-decoration var(--transition);
}

.can-calculator a:hover,
.can-calculator a:focus-visible {
    color: #388e3c; /* Darker green on hover */
    text-decoration: underline;
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Form Styles */
.can-calculator form {
    background: var(--card-bg);
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: var(--spacing-lg) 0;
    transition: transform var(--transition);
}

.can-calculator form:hover {
    transform: translateY(-2px);
}

.can-calculator .form-group {
    margin-bottom: var(--spacing-sm); /* Form grupları arasındaki genel boşluk biraz azaltıldı */
}

.can-calculator label {
    font-weight: 600;
    font-size: 0.95rem; 
    color: var(--primary-color);
    display: block;
    margin-bottom: var(--spacing-xxxs); /* Etiket ve input arası boşluk en aza indirildi */
}

.can-calculator input[type="number"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fafafa; 
    transition: border-color var(--transition), box-shadow var(--transition);
    margin-top: var(--spacing-xxxs); /* Etiket ile input arasına en küçük boşluk eklendi */
}

.can-calculator input[type="number"]:focus-visible,
.can-calculator input[type="number"]:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.2); 
    outline: none;
}

.can-calculator input[type="number"]:invalid:not(:placeholder-shown) {
    border-color: var(--error-color);
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.2); 
}

/* Input altındaki açıklama metinleri için yeniden tasarlanmış stil */
.can-calculator .form-text {
    font-size: 0.875rem; 
    color: var(--text-muted-color); 
    margin-top: var(--spacing-xxxs); /* Input ile açıklama arası boşluk en aza indirildi */
    display: block;
    font-style: italic; 
    line-height: 1.4; 
}

.can-calculator button {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(90deg, var(--secondary-color), #66bb6a); 
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    margin-top: var(--spacing-lg); /* Butonun üstündeki boşluk artırıldı, form elemanları sıkıştığı için */
}

.can-calculator button:hover,
.can-calculator button:focus-visible {
    background: linear-gradient(90deg, #388e3c, #4caf50); 
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Result Section */
.can-calculator .result {
    background: #ecfdf5; 
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
    margin: var(--spacing-lg) 0;
    border-left: 4px solid var(--secondary-color); 
}

.can-calculator .result p {
    font-size: 1.1rem;
    margin: var(--spacing-sm) 0;
    font-weight: 500;
}

.can-calculator .result-note { 
    font-size: 0.9rem;
    color: var(--error-color);
    background: #fef2f2; 
    padding: var(--spacing-sm);
    border-radius: 6px;
    font-weight: bold; 
}

/* Content Section */
.can-calculator .content {
    background: var(--card-bg);
    padding: var(--spacing-lg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: var(--spacing-lg) 0;
}

.can-calculator .step {
    margin-bottom: var(--spacing-lg);
}

.can-calculator .step p {
    background: #f8fafc; 
    padding: var(--spacing-md);
    border-left: 4px solid var(--accent-color); 
    border-radius: 8px;
    text-align: left;
    font-size: 0.95rem;
}

.can-calculator .step strong { 
    color: var(--primary-color); 
    font-weight: 600;
}

/* Table Styles */
.can-calculator .table-container {
    overflow-x: auto; 
}

.can-calculator .harf-tablosu {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.can-calculator .harf-tablosu caption {
    font-size: 0.9rem;
    color: var(--text-muted-color);
    padding: var(--spacing-sm);
    text-align: left; 
}

.can-calculator .harf-tablosu th,
.can-calculator .harf-tablosu td {
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center; 
    font-size: 0.95rem;
}

.can-calculator .harf-tablosu th {
    background: var(--accent-color); 
    color: #fff;
    font-weight: 600;
}

.can-calculator .harf-tablosu tr:nth-child(even) {
    background: #f9fafb; 
}

.can-calculator .harf-tablosu tr:hover {
    background: #e6f3fa; 
}

/* Notes Section */
.can-calculator .important-notes {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #fffbeb; 
    border-left: 4px solid #facc15; 
    border-radius: 8px;
}

.can-calculator .important-notes h4 {
    margin-top: 0; 
    color: #b45309; 
}

.can-calculator .important-notes ul {
    list-style: none; 
    padding: 0;
}

.can-calculator .important-notes li {
    position: relative;
    padding-left: 1.75rem; 
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
    color: #713f12; 
}

.can-calculator .important-notes li::before {
    content: "💡"; 
    position: absolute;
    left: 0;
    top: 0; 
    font-size: 1rem; 
    color: var(--accent-color); 
}

/* FAQ Section */
.can-calculator .faq-container {
    margin-top: var(--spacing-md);
}

.can-calculator .faq-item {
    margin-bottom: var(--spacing-md);
}

.can-calculator details {
    background: var(--card-bg);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition);
    border: 1px solid var(--border-color);
}

.can-calculator details[open] {
    background: #f8fafc; 
    border-left: 4px solid var(--accent-color);
    padding-left: calc(var(--spacing-md) - 4px); 

}

.can-calculator summary {
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 6px;
    transition: background var(--transition);
    list-style: none; 
    position: relative;
    padding-right: 2rem; 
}

.can-calculator summary::-webkit-details-marker {
    display: none; 
}

.can-calculator summary::after { 
    content: '▼';
    font-size: 0.8em;
    color: var(--accent-color);
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition);
}

.can-calculator details[open] summary::after {
    transform: translateY(-50%) rotate(180deg); 
}


.can-calculator summary:hover,
.can-calculator summary:focus-visible {
    background: #e6f3fa; 
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.can-calculator details p {
    margin-top: var(--spacing-sm);
    text-align: left;
    font-size: 0.95rem;
    color: var(--text-muted-color); 
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color); 
}

/* Responsive Design */
@media (max-width: 768px) {
    .can-calculator {
        padding: var(--spacing-sm);
        margin: var(--spacing-md) auto;
    }
    .can-calculator h1 {
        font-size: clamp(1.5rem, 4vw, 1.75rem);
    }
    .can-calculator form,
    .can-calculator .content,
    .can-calculator .result {
        padding: var(--spacing-md);
    }
    .can-calculator .harf-tablosu th,
    .can-calculator .harf-tablosu td {
        padding: var(--spacing-xs);
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .can-calculator h1 {
        font-size: 1.5rem; 
    }
    .can-calculator input[type="number"] { 
        font-size: var(--font-size-base);
    }
    .can-calculator button {
        font-size: 0.95rem;
    }
    .can-calculator .form-text {
        font-size: 0.825rem; 
    }
    .can-calculator .form-group {
        margin-bottom: var(--spacing-xs); /* Çok küçük ekranlarda form grupları arası boşluk daha da azaltıldı */
    }
    .can-calculator button {
        margin-top: var(--spacing-md); /* Buton üst boşluğu ayarlandı */
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .can-calculator button,
    .can-calculator form,
    .can-calculator details,
    .can-calculator summary,
    .can-calculator summary::after { 
        transition: none;
    }
}