:root {
    --primary-purple: #7B2BFE;
    --light-gray: #f2f2f2;
    --text-gray: #888;
    --dark-text: #333;
    --disabled-gray: #d3d3d3;
    --error-red: #e74c3c;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: 'Inter', sans-serif; background-color: #fff;
    overflow: hidden; 
}

.hidden { display: none !important; }

.screen {
    width: 100%; height: 100vh; display: flex;
    justify-content: center; align-items: center;
    flex-direction: column; box-sizing: border-box;
    padding: 20px; animation: fadeIn 0.5s ease-in-out;
    overflow-y: auto;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#screen-splash-a { background-color: #fff; }
.purple-gradient { background-color: #3b165b; background-image: radial-gradient(circle at 20% 30%, #6e2da3, #3b165b 70%); }
.splash-logo { width: 120px; height: auto; }
.splash-logo-full { width: 200px; height: auto; }
.content-wrapper, .content-wrapper-centered { width: 100%; max-width: 400px; display: flex; flex-direction: column; }
.content-wrapper-centered { align-items: center; text-align: center; }
.progress-indicators { display: flex; gap: 4px; width: 100%; margin-bottom: 15px; }
.indicator-bar { flex: 1; height: 4px; background-color: #e0e0e0; border-radius: 2px; overflow: hidden; }
.indicator-progress { height: 100%; width: 0; background-color: var(--primary-purple); border-radius: 2px; }
@keyframes fillProgress { from { width: 0%; } to { width: 100%; } }
.slider-container { width: 100%; max-width: 350px; margin: 20px auto; border-radius: 12px; overflow: hidden; }
.slider-wrapper { display: flex; width: 500%; transition: transform 0.5s ease-in-out; }
.slide { width: 20%; height: 220px; }
.slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.header-text p { color: var(--text-gray); font-size: 18px; margin-bottom: 0; }
.header-text h1 { color: var(--dark-text); font-size: 32px; font-weight: 800; margin-top: 5px; }
.back-arrow { position: absolute; top: 25px; left: 25px; font-size: 30px; color: var(--dark-text); text-decoration: none; }
h2 { font-size: 28px; color: var(--dark-text); font-weight: 800; margin-bottom: 10px; }
.description { color: #666; font-size: 16px; line-height: 1.5; max-width: 320px; margin-bottom: 30px; }
.input-group { display: flex; align-items: center; background-color: var(--light-gray); border-radius: 12px; padding: 5px; }
.input-group.full-width { width: 100%; max-width: 350px; }
.fin-group { margin-top: 15px; }
.country-code { display: flex; align-items: center; padding: 10px 15px; }
.country-code img { width: 24px; margin-right: 8px; }
.country-code span { font-weight: 700; color: var(--dark-text); }

/* ----- BURASI DÜZELTİLDİ ----- */
/* Bu genel kural artık .otp-input sınıfını etkilemeyecek */
input[type="tel"], input[type="text"]:not(.otp-input) {
    flex-grow: 1; 
    border: none; 
    background: transparent; 
    padding: 15px 10px; 
    font-size: 16px; 
    font-family: 'Inter', sans-serif; 
}
/* ----- BİTTİ ----- */

input:focus { outline: none; }
input[autocapitalize="characters"] { text-transform: uppercase; }

.btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 350px; margin-top: 20px; padding: 16px; border: none; border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; }
.btn-primary { background-color: var(--primary-purple); color: white; }
.btn-secondary { background-color: var(--disabled-gray); color: #999; }
.btn:not(:disabled):hover { opacity: 0.9; }
.btn:disabled { cursor: not-allowed; }

.otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.otp-input {
    width: 42px;
    height: 52px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    border-radius: 12px;
    background-color: var(--light-gray); 
    border: 2px solid var(--light-gray); 
    box-sizing: border-box; 
    transition: border-color 0.2s ease;
}
.otp-input:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: none; 
}

#btn-otp-continue { margin-top: 20px; }
.resend-info { margin-top: 20px; color: var(--text-gray); }
.resend-info a { color: var(--primary-purple); text-decoration: none; font-weight: 700; }
.resend-info a.disabled { color: var(--text-gray); pointer-events: none; text-decoration: none; }
.otp-error { color: var(--error-red); font-weight: 700; margin: 10px 0; min-height: 20px; display: none; }
.otp-error.visible { display: block; }

.loader { border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid #ffffff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.btn.loading .btn-text { visibility: hidden; }
.btn.loading .loader { display: block; position: absolute; }