/* style.css (Basit Animasyonlu Kararlı Sürüm) */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #000000; color: #ffffff; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; text-align: center; overflow-x: hidden; position: relative; }
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px; box-sizing: border-box; width: 100%; }
.main-title-link { text-decoration: none; color: #ffffff; }
.main-title { font-family: 'Archivo Black', sans-serif; font-size: 8vw; max-font-size: 130px; line-height: 1.1; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: -1px; }
.main-title:hover {transform: scale(1.1);}
/* logo removed: no background mask/image in use */
.container > * { position: relative; z-index: 1; }

.top-left-logo {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    max-width: 22%;
    height: auto;
    z-index: 60;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.top-left-logo:hover { transform: scale(1.03); opacity: 0.95; }

@media (max-width: 480px) {
    .top-left-logo { width: 70px; top: 10px; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 480px) {
    .container { padding-top: 40px; }
}

.social-icons { margin-top: 40px; }
.social-icons a { color: #000000; background-color: #ffffff; font-size: 20px; margin: 0 10px; text-decoration: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; }
.social-icons a:hover { background-color: #c40000; color: #ffffff; transform: scale(1.1); box-shadow: 0 0 0 2px #c40000; }
.logo-buttons-container { display: flex; gap: 20px; margin-top: 40px; justify-content: center; align-items: center; flex-wrap: wrap; }
.center-logo-link { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #ffffff; padding: 8px 15px; text-decoration: none; color: #ffffff; font-family: 'Archivo Black', sans-serif; font-size: 16px; letter-spacing: 1px; transition: all 0.3s ease-in-out; }
.center-logo-link:hover { background-color: #c40000; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 0 2px #c40000; }
.center-logo-link .fab, .center-logo-link .fas { margin-left: 8px; }
.center-logo-link .fa-music { margin-right: 8px; }
.modal { display: flex; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background-color: #1a1a1a; margin: auto; padding: 30px; border: 1px solid #888; width: 90%; max-width: 500px; border-radius: 10px; position: relative; color: #f1f1f1; display: flex; flex-direction: column; align-items: center; }
.close-button { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: #fff; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-size: 14px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; background-color: #333; border: 1px solid #555; border-radius: 5px; color: #fff; box-sizing: border-box; }
#demo-form button { background-color: #ffffff; color: #000000; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; width: 100%; transition: all 0.3s ease-in-out; }
#demo-form button:hover { background-color: #cccccc; }

/* Make the main center link and the demo submit button hover red like social icons */
#demo-submit-button { transition: all 0.3s ease-in-out; }
#demo-submit-button:hover { background-color: #c40000; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 0 2px #c40000; }
#demo-form input[type="file"] { background-color: #333; border: 1px solid #555; border-radius: 5px; padding: 10px; color: #eee; width: 100%; box-sizing: border-box; cursor: pointer; }
#demo-form input[type="file"]::file-selector-button { background-color: #fff; color: #000; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; margin-right: 10px; }
#demo-form.hidden { display: none; }
#status-container { text-align: center; }
#status-container.hidden { display: none; }
#demo-form-status { color: #4bb71b; font-weight: bold; }

/* --- BASİT ANİMASYON --- */
.success-animation { display: inline-block; position: relative; width: 80px; height: 80px; }
.checkmark-stem { position: absolute; width: 5px; height: 45px; background-color: #4bb71b; left: 38px; top: 15px; transform: rotate(-45deg); animation: stem-anim 0.3s ease-out forwards; }
.checkmark-kick { position: absolute; width: 5px; height: 25px; background-color: #4bb71b; left: 25px; top: 50px; transform: rotate(45deg); animation: kick-anim 0.3s ease-out 0.2s forwards; }
@keyframes stem-anim { 0% { height: 0; } 100% { height: 45px; } }
@keyframes kick-anim { 0% { height: 0; } 100% { height: 25px; } }
/*.form-logo-placeholder {
    width: 150px;
    height: 50px;
    background-color: #333;
    border: 2px dashed #555;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}*/

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

.form-column {
    display: flex;
    flex-direction: column;
}

/* Seçim kutularını diğer inputlarla aynı yapmak için */
.form-group select {
    width: 100%;
    padding: 10px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 5px;
    color: #fff;
    box-sizing: border-box;
}

/* Küçük ekranlarda formu tek sütuna düşür */
@media (max-width: 768px) {
    .page-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .left-panel, .right-panel {
        flex: none;
        justify-content: center;
    }
    .main-title {
        text-align: center;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* logo-related utility classes removed */