/* css/base.css */

/* AMAZON QUICK SUITE (GRADIENT MOR) TEMASI */
:root {
    --font-family: 'Barlow', sans-serif;
    
    /* Ana Renkler (Her yer saf beyaz) */
    --background-color: #FFFFFF;
    
    --border-color: #dee2e6; /* Yumuşak gri sınır rengi */

    /* Metin Renkleri */
    --text-primary: #111827; /* Koyu metin */
    --text-secondary: #4b5563; /* Orta ton gri */

    /* Vurgu Renkleri (Accent Palette) - Mor/Eflatun */
    
    /* Gradient desteklemeyen (checkbox gibi) yerler için düz renk */
    --primary-accent: #6E41C1; 
    --primary-accent-hover: #5B35A1;

    /* === İSTEDİĞİNİZ GRADIENT TANIMLARI === */
    --primary-gradient: linear-gradient(135deg, #A755C2 0%, #6E41C1 100%);
    --primary-gradient-hover: linear-gradient(135deg, #964AAE 0%, #5B35A1 100%);
    
    --secondary-accent: #e9ecef; /* Nötr gri */
    --secondary-accent-hover: #ced4da; /* Nötr grinin koyu tonu */

    /* Buton ve Diğer Renkler */
    --secondary-button-bg: #e9ecef;
    --secondary-button-hover: #ced4da;
    --danger-color: #dc3545;
    --danger-color-hover: #c82333;

    /* Gölge Rengi (Mor vurgu rengine uyarlandı) */
    --shadow-color-primary: rgba(110, 65, 193, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    font-weight: 400; 
}

h3 { 
    font-weight: 500; 
    color: var(--text-primary); 
    margin-bottom: 25px; 
    font-size: 20px; 
}
h4 { 
    font-weight: 500; 
    font-size: 14px; 
    margin-top: 20px; 
    margin-bottom: 15px; 
    color: var(--text-secondary); 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; height: 100%; }

.separator {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin: 5px 0;
}
.empty-message {
    text-align: center;
    padding: 50px;
    color: var(--text-secondary);
    font-size: 16px;
}

.success-message {
    color: #28a745; 
    text-align: center;
    margin-top: 15px;
    font-weight: 500;
    height: 20px;
}