@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --ana-renk: #e74c3c;
    --grad-bas: #b20a11;
    --grad-bit: #1a1a4b;
    --arka-plan: #f4f7f9;
    --yazi-renk: #2c3e50;
    --kart-golge: 0 10px 30px rgba(0,0,0,0.08);
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--arka-plan); 
    color: var(--yazi-renk); 
    margin: 0; 
    padding: 0; 
    line-height: 1.6;
}

.page-header {
    background: linear-gradient(135deg, var(--grad-bas) 0%, var(--grad-bit) 100%);
    color: white;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: -50px;
}

.page-header h1 { margin: 0; font-size: 32px; font-weight: 700; }
.page-header p { margin-top: 10px; opacity: 0.9; font-weight: 400; }

.container { max-width: 800px; margin: 0 auto; padding: 0 20px 50px 20px; }

.info-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--kart-golge);
    margin-bottom: 25px;
    border-top: 4px solid #f39c12;
    text-align: left;
}

.info-card h3 { margin-top: 0; font-size: 18px; color: var(--grad-bit); }
.info-card a { color: var(--ana-renk); font-weight: 600; text-decoration: underline; }

.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li { 
    position: relative; 
    padding-left: 30px; 
    margin-bottom: 12px; 
    font-size: 14px; 
}
.rules-list li::before { 
    content: '✔'; 
    position: absolute; 
    left: 0; 
    color: #27ae60; 
    font-weight: bold; 
}

.upload-card {
    background: white;
    border-radius: 15px;
    padding: 35px;
    box-shadow: var(--kart-golge);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 13px; color: var(--grad-bit); }
.form-group input, .form-group textarea { 
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; 
    font-family: inherit; font-size: 14px; box-sizing: border-box; transition: 0.3s;
}

.form-group input:focus, .form-group textarea:focus { border-color: var(--ana-renk); outline: none; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); }

.drop-zone { 
    border: 2px dashed #cbd5e0; padding: 40px; border-radius: 12px; 
    text-align: center; cursor: pointer; transition: 0.3s; background: #fcfcfc;
    margin-bottom: 20px;
}
.drop-zone:hover { border-color: var(--ana-renk); background: #fff5f5; }
.upload-icon { font-size: 40px; color: var(--ana-renk); }
.required { color: var(--ana-renk); }

.footer-actions { 
    display: flex; align-items: center; justify-content: space-between; 
    background: #f8fafc; padding: 15px; border-radius: 10px; margin-bottom: 25px;
    gap: 15px;
}
.captcha-group { margin-bottom: 0; }
.captcha-group input { width: 100px; text-align: center; }

.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.checkbox-group input { width: auto; cursor: pointer; }
.checkbox-group label { margin-bottom: 0; font-weight: 500; cursor: pointer; }
.checkbox-group a { color: var(--ana-renk); text-decoration: underline; }

#submitBtn { 
    background: var(--ana-renk); color: white; border: none; padding: 18px; 
    border-radius: 10px; font-weight: 700; font-size: 16px; width: 100%; 
    cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px;
}
#submitBtn:hover { background: #c0392b; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); }

.progress-container { display: none; margin-top: 20px; }
.progress-bar { background: #eee; height: 10px; border-radius: 10px; overflow: hidden; }
.progress-fill { background: var(--ana-renk); width: 0%; height: 100%; transition: 0.3s; }
.progress-status { font-size: 12px; margin-top: 5px; font-weight: 600; text-align: center; }

#resultMsg { margin-top: 15px; font-weight: 600; font-size: 14px; text-align: center; }

footer { text-align: center; padding: 30px; margin-top: 20px; }
footer a { color: var(--grad-bit); text-decoration: none; font-weight: 700; }
footer p { font-size: 12px; color: #7f8c8d; margin-top: 5px; }

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .footer-actions { flex-direction: column; align-items: flex-start; }
    .page-header h1 { font-size: 24px; }
}