@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

:root {
    /* --- Marka Renkleri --- */
    --brand-green: #2B7221;  
    --brand-lime: #C7D301;   
    
    --primary: var(--brand-green);
    --primary-dark: #1e5217;
    --accent: #005596;
    
    /* --- UI Değişkenleri --- */
    --bg-surface: #ffffff;
    --input-bg: #F3F6F8;
    --input-focus-bg: #ffffff;
    --text-main: #111827;
    --text-muted: #6B7280;
    --border-radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --error-color: #ef4444; /* Hata Rengi */
}

/* Temel Sıfırlama */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { 
    height: 100%; /* Mobil scroll stabilitesi */
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #fff;
    color: var(--text-main);
    overflow-x: hidden; /* Yan scroll'u engelle */
}

/* --- ANA YAPI (SPLIT LAYOUT) --- */
.split-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* --- SOL TARAFTAKİ GÖRSEL ALANI --- */
.visual-side {
    width: 45%;
    background: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center; /* İçeriği dikeyde ortalar */
    padding: 60px;
    color: white;
}

.visual-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--brand-green) 0%, rgba(43, 114, 33, 0.9) 60%, var(--brand-lime) 100%);
    opacity: 0.92;
    z-index: 1;
}

.brand-content { 
    position: relative; 
    z-index: 2; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.logo-area { display: flex; align-items: center; margin-bottom: 20px; }
.main-logo { 
    height: 55px; 
    width: auto; 
    filter: brightness(0) invert(1); /* Logoyu beyaz yap */
}

.hero-text h1 { 
    font-size: 3rem; 
    line-height: 1.1; 
    font-weight: 800; 
    margin-bottom: 20px; 
    letter-spacing: -1px; 
}
.hero-text p { 
    font-size: 0.9rem; 
    opacity: 0.95; 
    line-height: 1.6; 
    max-width: 100%; 
    text-align: justify;

    /* ANİMASYON KODU */
    opacity: 0; /* Başlangıçta görünmez olsun */
    animation: fadeInUp 1s ease-out forwards; /* 1 saniyede yukarı kay */
    animation-delay: 0.3s; /* Sayfa açıldıktan 0.3sn sonra başlasın (Hemen değil) */
}

/* 2. Rozet (Badge) Tasarımı */
.badge {
    display: inline-flex; /* İkon ve yazıyı hizalar */
    align-items: center;
    gap: 10px; /* İkon ile yazı arasındaki mesafe */
    
    padding: 8px 15px;
    
    /* Şeffaf Beyaz Görünüm (Glassmorphism) */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(5px); /* Arkadaki görseli buzlar */
    border: 1px solid rgba(255, 255, 255, 0.3); /* İnce çerçeve */
    border-radius: 40px; /* Tam oval (Hap şeklinde) */
    
    /* Yazı Stili */
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap; /* Yazı asla kırılıp alt satıra geçmesin */
    cursor: default; /* Tıklanabilir değil, bilgi amaçlı */
    
    /* ANİMASYON GEÇİŞ AYARLARI */
    /* "Spring" (Yaylanma) efekti için özel bezier eğrisi */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. İkon Stili */
.badge i {
    color: #ffd700; /* Altın Sarısı */
    font-size: 1rem;
    transition: transform 0.4s ease;
}

/* --- HOVER (ÜZERİNE GELİNCE) EFEKTLERİ --- */

.badge:hover {
    /* Yukarı doğru hafif zıplama ve büyüme */
    transform: translateY(-5px) scale(1.02);
    
    /* Renk Değişimi: Zemin beyaz, yazı yeşil olsun */
    background: #fff;
    border-color: #fff;
    color: #2B7221; /* Doğa Yeşili */
    
    /* Hafif gölge ekle */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Hover durumunda ikon hareketi */
.badge:hover i {
    /* İkon biraz büyüsün ve sağa yatsın */
    transform: scale(1.2) rotate(15deg);
    
    /* İkon rengi koyu sarı olsun (Beyaz üstünde net görünsün) */
    color: #f59f00; 
}

/* Mobilde Düzenleme (Opsiyonel: Eğer mobilde bu alan gizlenmiyorsa) */
@media (max-width: 991px) {
    .badge {
        font-size: 0.8rem;
        padding: 8px 15px;
    }
}

/* --- SAĞ TARAFTAKİ FORM ALANI --- */
.form-side {
    width: 55%; 
    background: var(--bg-surface);
    height: 100vh; 
    overflow-y: auto; /* Masaüstünde kendi içinde scroll */
    display: flex; 
    justify-content: center; 
    align-items: flex-start;
    padding: 40px 40px;
}

.form-container { width: 100%; max-width: 550px; }

.form-header { margin-bottom: 35px; text-align: center;}
.form-header h2 { 
    font-size: 2rem; 
    color: var(--text-main); 
    font-weight: 800; 
    letter-spacing: -0.5px; 
    margin-bottom: 10px; 
}
.form-header p { color: var(--text-muted); font-size: 1rem; }

/* --- INPUT STİLLERİ (WRAPPER SİSTEMİ) --- */
.input-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-bottom: 25px; 
}
.full-width { grid-column: span 2; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    margin-left: 5px;
}


/* Wrapper: Arka planı ve border'ı taşıyan kapsayıcı */
.input-wrapper { 
    position: relative; 
    z-index: 0; 
    background: var(--input-bg);
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: 2px solid transparent; /* Focus border'ı için rezerv */
}

/* Inputlar: Şeffaf ve en üst katmanda */
input, select {
    width: 100%; 
    background: transparent; 
    border: none; 
    padding: 16px 20px 16px 45px; /* İkon boşluğu */
    font-size: 1rem; 
    color: var(--text-main); 
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif; 
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none; /* Safari reset */
    position: relative; 
    z-index: 2; /* İkonun üstünde, tıklanabilir */
}

/* iOS Safari Date Picker Düzeltmesi */
input[type="date"] {
    min-height: 54px; /* Mobilde parmakla basılabilir yükseklik */
    display: block;
    line-height: 1.2;
    color: var(--text-main);
}

/* Chrome/Safari Autofill Sarı Arkaplan Fix */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Autofill olunca wrapper rengine uyum sağla */
.input-wrapper:focus-within input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--input-focus-bg) inset !important;
    border-color: #2B7221;
    outline: none;
}

/* İkonlar: Inputun altında, tıklanamaz */
.input-icon { 
    position: absolute; 
    left: 18px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #9CA3AF; 
    font-size: 1.1rem; 
    pointer-events: none; 
    z-index: 1; 
}

.select-arrow { 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 0.8rem; 
    color: #9CA3AF; 
    pointer-events: none; 
    z-index: 1; 
}

/* Focus Durumu: Wrapper'ı boyuyoruz */
.input-wrapper:focus-within {
    background: var(--input-focus-bg);
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(43, 114, 33, 0.15);
    outline: none;
}
.input-wrapper:focus-within .input-icon { color: var(--primary); }

/* Hata Durumu (JS ile .input-error sınıfı eklenince) */
.input-error {
    border-color: var(--error-color) !important;
    background-color: #fff5f5 !important;
}

.divider { 
    display: flex; 
    align-items: center; 
    margin: 30px 0; 
    color: #E5E7EB; 
}
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #E5E7EB; }
.divider span { 
    margin: 0 15px; 
    color: var(--text-muted); 
    font-size: 0.8rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* --- CHECKBOX (MOBİL FOCUS FIX) --- */
.consents-area { 
    margin: 30px 0; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.custom-checkbox { 
    display: flex; 
    align-items: flex-start; 
    cursor: pointer; 
    user-select: none; 
    position: relative; 
    min-height: 24px;
}

/* Inputu görünmez yapıp tüm alana yayıyoruz (Tıklama garantisi) */
.custom-checkbox input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 0; 
    z-index: 10; 
    cursor: pointer; 
    margin: 0; 
    padding: 0;
}

.checkmark {
    min-width: 24px; 
    height: 24px;
    background: var(--input-bg);
    border-radius: 6px;
    margin-right: 12px;
    position: relative;
    transition: var(--transition);
    border: 1px solid transparent;
    z-index: 1;
}

.custom-checkbox input:checked ~ .checkmark { background: var(--primary); }
.checkmark::after {
    content: ''; 
    position: absolute; 
    display: none;
    left: 8px; top: 4px; width: 6px; height: 12px;
    border: solid white; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark::after { display: block; }
.custom-checkbox .text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; padding-top: 2px; }

/* Klavye Focus Göstergesi */
.custom-checkbox input:focus ~ .checkmark {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 114, 33, 0.1);
}

/* --- CAPTCHA STİLİ --- */
.captcha-container { margin: 20px 0 30px 0; }
.captcha-container label { 
    display: block; 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--text-main); 
    margin-bottom: 8px; 
    margin-left: 5px; 
}

.captcha-wrapper {
    display: flex; 
    flex-direction: row; /* Yan yana */
    gap: 15px; 
    align-items: stretch;
}

.captcha-image-box {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    background: var(--input-bg); 
    border-radius: var(--border-radius);
    padding: 5px 10px; 
    width: 140px; 
    flex-shrink: 0;
    border: 2px solid transparent;
}
.captcha-image-box img { 
    height: 40px; 
    border-radius: 4px; 
    mix-blend-mode: multiply; 
    max-width: 90px; 
}

#refreshCaptcha {
    background: none; 
    border: none; 
    cursor: pointer;
    color: var(--text-muted); 
    font-size: 1.1rem; 
    padding: 5px;
}
#refreshCaptcha:hover { color: var(--primary); transform: rotate(90deg); }

.captcha-container .input-wrapper { flex: 1; }
#captchaInput { 
    letter-spacing: 2px; 
    font-weight: 700; 
    text-transform: uppercase; 
    text-align: center; 
    padding-left: 10px; 
    padding-right: 10px; 
}

input:focus {
    outline: none !important; /* Mavi/Siyah çizgiyi kaldır */
}

/* --- BUTON --- */
.primary-btn {
    width: 100%; 
    padding: 18px; 
    background: var(--primary); 
    color: white;
    border: none; 
    border-radius: var(--border-radius);
    font-size: 1.1rem; 
    font-weight: 700; 
    cursor: pointer;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px;
    transition: var(--transition); 
    box-shadow: 0 10px 30px rgba(43, 114, 33, 0.25);
}
.primary-btn:hover { 
    background: var(--primary-dark); 
    transform: translateY(-2px); 
    box-shadow: 0 15px 35px rgba(43, 114, 33, 0.35); 
}
.primary-btn:disabled { 
    background: #ccc; 
    transform: none; 
    box-shadow: none; 
    cursor: not-allowed; 
}

.copyright { text-align: center; margin-top: 40px; color: #9CA3AF; font-size: 0.8rem; }
#feedback { margin-top: 20px; padding: 15px; border-radius: 12px; text-align: center; font-weight: 600; display: none; }
#feedback.success { background: #DCFCE7; color: #166534; }
#feedback.error { background: #FEE2E2; color: #991B1B; }

/* --- RESPONSIVE (MOBİL) --- */
@media (max-width: 900px) {
    .split-layout { 
        flex-direction: column; 
        min-height: auto; 
        height: auto; 
    }
    
    /* Header Küçültme */
    .visual-side { 
        width: 100%; 
        height: 100px; 
        padding: 15px; 
        align-items: center; 
        justify-content: center; 
        flex-shrink: 0; 
    }
    .logo-area { margin-bottom: 0; }
    .main-logo { height: 45px; }
    .hero-text, .visual-footer { display: none; }
    
    /* Form Alanı Scroll Yönetimi */
    .form-side { 
        width: 100%; 
        height: auto; 
        overflow-y: visible; 
        padding: 15px 20px 30px 20px; 
        display: block; 
    }
    .form-container { max-width: 100%; }
    
    .input-grid { grid-template-columns: 1fr; gap: 15px; }
    .full-width { grid-column: span 1; }
    .form-header h2 { font-size: 1.6rem; }
    
    /* Mobilde Captcha'da ikon olmasın, yer açılsın */
    .captcha-container .input-icon { display: none; }
}

/* --- Flatpickr Özelleştirme (Marka Rengi) --- */
.flatpickr-calendar {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    border: none !important;
}

/* Seçilen Gün Rengi */
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
    background: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

/* Bugünün Tarihi */
.flatpickr-day.today {
    border-color: var(--brand-green) !important;
}
.flatpickr-day.today:hover {
    background: #f3f6f8 !important;
    color: var(--text-main) !important;
}

/* Yasaklı Günler (Haftasonu/Tatil) */
.flatpickr-day.disabled, 
.flatpickr-day.disabled:hover {
    color: rgba(57,57,57,0.1) !important; 
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Mobilde klavyeyi engellemek için */
input[type="date"], .flatpickr-input {
    background-color: transparent; 
}

/* --- style.css EN ALTINA EKLE --- */

/* Logo ve Yazı Alanı Düzenlemesi */
.logo-area {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    gap: 15px; /* Logo ve yazı arası boşluk */
    margin-bottom: 25px; /* Alt boşluğu artırdık */
}

.main-logo {
    height: 65px !important; /* Biraz daha büyüttük */
    width: auto !important;
    filter: none !important; /* Filtreyi sıfırla */
    background: #fff; /* Logonun arkasına beyaz zemin atalım */
    border-radius: 50%; /* Yuvarlak yapalım */
    padding: 2px; /* Çerçeve payı */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Hafif gölge */
}

/* Yeni Eklenen "Doğa Koleji" Yazısı */
.brand-name {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Daktilo Efekti İmleci */
.typing-cursor {
    display: inline-block;
    width: 3px;
    background-color: #fff;
    margin-left: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- Modern Link Animasyonu (GÜNCELLENDİ) --- */
.chic-link {
    color: #2B7221;
    text-decoration: none;
    font-weight: 700; /* Biraz daha kalın */
    position: relative;
    cursor: pointer;
    display: inline-block; /* Animasyonun sığması için */
    line-height: 1.2;
}

/* Çizgi Efekti */
.chic-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0; /* Tam altına yapışsın */
    left: 0;
    background-color: #2B7221;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.chic-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.chic-link:hover {
    color: #1e5218;
}

.panel-content p {
    font-size: 11px !important;
    text-align: justify;
}

/* --- Checkbox Hizalaması --- */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start; /* Metin uzunsa kutu yukarıda kalsın */
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

.checkbox-wrapper input[type="checkbox"] {
    /* Tarayıcı varsayılan stilini geri getir */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    
    /* Görünür yap */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Boyutlandırma ve Renk */
    width: 20px !important;
    height: 20px !important;
    margin-top: 3px !important;
    margin-right: 10px !important;
    cursor: pointer;
    
    /* Modern tarayıcılar için renk (Yeşil) */
    accent-color: #2B7221; 
}

.checkbox-wrapper label {
    cursor: pointer;
}

/* --- SAĞ PANEL TASARIMI (SLIDE-OUT) --- */
.slide-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Başlangıçta ekran dışında */
    width: 500px;
    max-width: 90%; /* Mobilde taşmasın */
    height: 100vh;
    background: #fff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 1001; /* Her şeyin üstünde */
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Yumuşak kayma efekti */
    display: flex;
    flex-direction: column;
}

.slide-panel.open {
    right: 0; /* Açılınca ekrana gelir */
}

.panel-header {
    padding: 20px;
    background: #2B7221;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.panel-content {
    padding: 25px;
    overflow-y: auto; /* İçerik uzunsa scroll olsun */
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
}

/* Arka plan karartısı */
.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* --- BAŞARI EKRANI TASARIMI --- */
.success-container {
    text-align: center;
    padding: 20px;
    animation: fadeIn 0.5s ease;
}

.success-icon-box {
    width: 80px;
    height: 80px;
    background: #e6f4ea; /* Açık Yeşil */
    color: #2B7221;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 20px auto;
    box-shadow: 0 10px 20px rgba(43, 114, 33, 0.15);
}

.success-container h2 {
    color: #2B7221;
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.success-message {
    color: #555;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

/* --- YENİ BURSLULUK KARTI (Success İçindeki) --- */
.success-scholarship-card {
    background: linear-gradient(135deg, #fff 0%, #f9fff9 100%);
    border: 2px solid #2B7221;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.success-scholarship-card:hover {
    transform: translateY(-5px);
}

.ssc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ssc-badge {
    background: #ff7f00;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.ssc-logo {
    height: 30px;
    width: auto;
}

.success-scholarship-card h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.3;
}

.success-scholarship-card p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

.ssc-btn {
    display: block;
    width: 100%;
    background: #2B7221;
    color: #fff;
    text-decoration: none;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.3s;
}

.ssc-btn:hover {
    background: #1e5218;
    box-shadow: 0 5px 15px rgba(43, 114, 33, 0.3);
}

/* Geri Dön Butonu */
.back-to-form-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 10px;
}

.back-to-form-btn:hover {
    color: #333;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- MOBİL NAVİGASYON (Sadece Mobile Özel) --- */

/* Varsayılan: Gizli (Desktop) */
.mobile-navbar {
    display: none;
}

/* --- MOBİL NAVİGASYON (YEŞİL TASARIM) --- */

@media (max-width: 991px) {
    /* 1. Navbar Rengini Yeşile Çevir */
    .mobile-navbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(90deg, #2B7221 0%, #3a9b2d 100%);
        box-shadow: 0 4px 15px rgba(43, 114, 33, 0.3);
        z-index: 9999;
    }

    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 70px;
    }

    /* 2. Logo ve Yazı Düzeni */
    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none !important;
    }

    /* Logoyu Beyaz Daire İçine Alalım (Daha belirgin olur) */
    .mobile-nav-logo {
        height: 40px;
        width: auto;
        background: #fff;
        border-radius: 50%;
        padding: 2px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Yeni Eklenen Yazı Stili */
    .mobile-brand-text {
        color: #fff;
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Hamburger Butonu */
    .hamburger-btn {
        background: none;
        border: none;
        font-size: 1.8rem;
        color: #fff !important;
        cursor: pointer;
        padding: 5px;
        transition: transform 0.3s;
    }
    
    .hamburger-btn.active {
        transform: rotate(90deg);
    }

    /* 2. AÇILIR MENÜ KUTUSU (Bağımsız Katman) */
    .mobile-menu-links {
        display: block;
        position: absolute;
        top: 70px; /* Header yüksekliği kadar aşağı */
        left: 0;
        width: 100%;
        
        background: #fff;
        border-bottom: 4px solid #2B7221;
        
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        z-index: 9998;
        
        /* ÖNEMLİ: İçindekileri alt alta dizmeyi zorla */
        display: flex;
        flex-direction: column;
    }

    /* Menü Açık Hali */
    .mobile-menu-links.open {
        max-height: 400px; /* Yeterli yükseklik */
    }

    /* 3. LİNKLERİN TASARIMI (Mavi yazıyı düzeltme) */
    .mobile-menu-links a {
        display: flex !important;
        align-items: center;
        gap: 15px;
        padding: 18px 25px;
        
        /* Temel Stil */
        text-decoration: none !important;
        color: #333 !important;
        font-weight: 600;
        font-size: 1.05rem;
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        
        /* ANİMASYON İÇİN GEÇİŞ AYARLARI */
        /* Sol kenarlık, arka plan ve hareket için yumuşak geçiş */
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        /* Başlangıçta solda görünmez bir çizgi olsun (Zıplamayı önler) */
        border-left: 0px solid transparent; 
    }
    
    /* --- HOVER (ÜZERİNE GELİNCE) EFEKTİ --- */
    .mobile-menu-links a:hover,
    .mobile-menu-links a:active { /* Telefondaki dokunma hissi için active de ekledik */
        background-color: #f0f9f0 !important; /* Çok tatlı bir açık yeşil zemin */
        color: #2B7221 !important; /* Yazı rengi yeşile dönsün */
        
        /* Soldan kalın yeşil çizgi çıksın */
        border-left: 8px solid #2B7221;
        
        /* İçeriği biraz sağa kaydır (Hareket hissi) */
        padding-left: 35px; 
    }
    
    /* --- İKON ANİMASYONU --- */
    .mobile-menu-links a i {
        color: #2B7221 !important;
        font-size: 1.2rem;
        width: 25px;
        text-align: center;
        /* İkon geçişi */
        transition: transform 0.3s ease;
    }
    
    /* Linkin üzerine gelince ikon ne yapsın? */
    .mobile-menu-links a:hover i,
    .mobile-menu-links a:active i {
        /* Hafif büyüsün ve sağa yatsın */
        transform: scale(1.2) rotate(10deg); 
        color: #1e5218 !important; /* Biraz daha koyu yeşil olsun */
    }
    
    /* Son linkin alt çizgisini kaldır */
    .mobile-menu-links a:last-child {
        border-bottom: none; 
    }
    /* Diğerlerinde ayırıcı çizgi kalsın */
    .mobile-menu-links a {
         border-bottom: 1px solid #f5f5f5;
    }
    
    /* ... Diğer menü link stilleri aynı kalabilir ... */

    body {
        padding-top: 70px;
    }

    /* --- GİZLEME İŞLEMİ --- */
    /* Mobilde sayfa içindeki büyük logo alanını gizle */
    .visual-overlay, .visual-side {
        display: none !important;
    }
}

/* Desktopta body padding olmasın */
@media (min-width: 992px) {
    body {
        padding-top: 0 !important;
    }
}

/* Font Awesome sınıflarının font-family özelliğini kilitliyoruz */
.fa, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* Solid ikonlar için kalınlık şarttır */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Marka ikonları (Instagram, WhatsApp vb.) için özel ayar */
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.visual-footer {
    margin-top: auto; /* En alta it */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    color: #fff;
    position: relative;
    z-index: 5;
}

.visual-footer p {
    font-size: 0.85rem;
    opacity: 0.8;
}

.social-links-desktop {
    display: flex;
    gap: 15px;
}

.social-links-desktop a {
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1); /* Hafif cam efekti */
    text-decoration: none;
}

/* Hover Efekti: Parlama ve Büyüme */
.social-links-desktop a:hover {
    opacity: 1;
    transform: translateY(-3px);
    background: #fff;
    color: #2B7221; /* Doğa Yeşili */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Mobilde Visual Footer Gizlensin (Çünkü menüde olacak) */
@media (max-width: 991px) {
    .visual-footer {
        display: none;
    }
}


/* 2. MOBİL TASARIMI (Menü İçi) */
.mobile-social-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: #f9f9f9; /* Menüden hafif farklı bir ton */
    border-top: 1px solid #eee;
}

.ms-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    color: #666; /* Daha soft bir gri */
    font-size: 1.1rem;
    text-decoration: none;
    /* Minimalist çizgiler */
    transition: all 0.3s ease;
}

/* Marka Renkleri (Hover Durumunda) */
.ms-icon:hover {
    transform: translateY(-2px); /* Hafif yukarı kalksın */
    border-color: transparent; /* Kenarlığı silip gölgeyle öne çıkaralım */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: #fff; /* İkon beyaz olsun */
}

/* Her ikonun kendi rengi olsun */
/* Hover renklerini arka plan (background) olarak verelim, daha şık durur */
.ms-icon:nth-child(1):hover { background: #E1306C; } /* Instagram */
.ms-icon:nth-child(2):hover { background: #1877F2; } /* Facebook */
.ms-icon:nth-child(3):hover { background: #000000; } /* X (Twitter) */
.ms-icon:nth-child(4):hover { background: #FF0000; } /* YouTube */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.bg-pattern-topography {
    background-color: #ffffff; /* Zemin rengi */
    /* Köşelerden merkeze doğru yayılan, çok yumuşak ve şeffaf yeşil ışıklar.
       Gözü yormaz, formun okunabilirliğini etkilemez.
    */
    background-image: 
        radial-gradient(at 0% 0%, hsla(113, 56%, 94%, 1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(120, 100%, 96%, 1) 0, transparent 50%), 
        radial-gradient(at 100% 100%, hsla(113, 56%, 94%, 1) 0, transparent 50%), 
        radial-gradient(at 0% 100%, hsla(120, 100%, 96%, 1) 0, transparent 50%);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Ana Animasyon */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tüm çocuk elementlere uygulanacak sınıf */
.cascade-item {
    opacity: 0; /* Başlangıçta gizli */
    animation: slideUpFade 0.6s ease-out forwards;
}

/* Gecikmeler (Sırasıyla gelmesi için) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

.form-select-custom {
    appearance: none; /* Standart oku gizle */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f9fbfd;
    border: 1px solid #e1e5eb;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Özel Yeşil Ok */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232B7221' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.form-select-custom:focus {
    border-color: #2B7221;
    border: 1px solid;
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 114, 33, 0.1);
    background-color: #fff;
}

/* Form Elemanlarını Eşitleme */
.form-control, 
.form-select {
    height: 50px !important;       /* Hepsini aynı boya zorla */
    line-height: 50px;             /* Metni dikeyde ortala (bazı tarayıcılar için) */
    padding-top: 0;                /* Dikey boşlukları sıfırla ki height çalışsın */
    padding-bottom: 0;
    display: flex;                 /* İçerik hizalaması için */
    align-items: center;           /* Dikey ortalama */
    border-radius: 12px;           /* Köşeleri yuvarla */
}

/* Select kutusunun içindeki yazıyı ortalamak için özel ayar */
.form-select {
    padding-left: 25px;            /* Soldan boşluk */
    padding-right: 35px;           /* Sağdan ok işareti için boşluk */
    background-position: right 15px center; /* Ok işaretini ortala */
}

/* Input kutusu (GSM gibi) */
.form-control {
    padding-left: 25px;            /* Soldan boşluk */
}

/* İkonlu Inputlar İçin Metin Kaydırma */
.form-control.has-icon, 
.form-select.has-icon {
    padding-left: 45px !important; /* Yazıyı sağa it (İkon genişliği + boşluk) */
}

/* Placeholder rengini biraz daha silik yapıp ikonla karışmasını engelleyelim (Opsiyonel) */
.form-control.has-icon::placeholder {
    color: #adb5bd;
    opacity: 0.8;
}

input, select, textarea {
    scroll-margin-top: 100px; /* Scroll yapıldığında üstten 100px boşluk bırakır */
}

/* PDF KAPSAYICI (A5 Boyutuna Göre Optimize Edildi) */
.pdf-ticket {
    width: 100%;
    max-width: 600px;
    background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* 2. Sayfa sorununu çözen kritik ayarlar: */
    height: auto;
    overflow: hidden; 
    page-break-inside: avoid;
    margin: 0; padding: 0;
}

/* YENİ HEADER TASARIMI (İstediğin Görseldeki Gibi) */
.pdf-header {
    background-color: #387c2b; /* Doğa Yeşili */
    padding: 20px 30px; /* Header yüksekliği ideal seviyeye çekildi */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Sol: Logo/İsim, Sağ: Fiş Başlığı */
    border-bottom: 5px solid #285e1e;
}

/* Sol Taraf: Logo ve İsim Grubu */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Logo Yuvarlağı (Görseldeki gibi beyaz daire) */
.logo-circle {
    width: 65px;
    height: 65px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.pdf-logo {
    width: 45px; /* Logo daireye sığacak şekilde ayarlandı */
    height: auto;
    object-fit: contain;
}

/* Marka İsmi */
.brand-name {
    font-size: 26px;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Sağ Taraf: Belge Başlığı */
.ticket-type {
    font-size: 14px;
    color: rgba(255,255,255, 0.9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255, 0.4);
    padding: 5px 10px;
    border-radius: 8px;
}

/* İÇERİK ALANI (Boşluklar kısıldı ki tek sayfaya sığsın) */
.pdf-body {
    padding: 30px; /* 40px'den 30px'e düşürüldü */
}

.pdf-row {
    margin-bottom: 25px; /* Satır araları sıkılaştırıldı */
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
}

.pdf-label {
    display: block;
    font-size: 10px;
    color: #888;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pdf-val {
    display: block;
    font-size: 20px;
    color: #111;
    font-weight: 700;
    line-height: 1.2;
}

/* Tarih ve Saat Alanı */
.pdf-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 30px; /* Boşluk azaltıldı */
    padding-top: 20px;
    border-top: 2px dashed #ddd;
}

.pdf-large {
    font-size: 32px;
    font-weight: 800;
    color: #387c2b;
    line-height: 1;
}

.pdf-footer {
    background: #fcfcfc;
    padding: 15px;
    text-align: center;
    font-size: 10px;
    color: #aaa;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

/* --- PDF İndirme Butonu Stili --- */
.btn-download-pdf {
    background-color: #2B7221; /* Sayfanın kurumsal koyu yeşil rengi */
    color: #fff; /* Metin rengi beyaz */
    border: none; /* Kenarlık yok */
    padding: 12px 24px; /* İç boşluklar */
    font-size: 1rem; /* Yazı boyutu */
    font-weight: 600; /* Yazı kalınlığı */
    border-radius: 10px; /* Tam yuvarlak (hap) köşeler */
    transition: all 0.3s ease; /* Geçiş efekti */
    display: inline-flex; /* İkon ve metni hizalamak için */
    align-items: center; /* Dikey hizalama */
    text-decoration: none; /* Alt çizgi yok */
    margin-bottom: 15px;
}

.btn-download-pdf:hover {
    background-color: #225a1a; /* Üzerine gelince biraz daha koyu yeşil */
    color: #fff; /* Metin rengi beyaz kalır */
    transform: translateY(-2px); /* Hafifçe yukarı kalkma efekti */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; /* Gölgeyi belirginleştir */
}

.btn-download-pdf i {
    font-size: 1.2rem; /* İkon boyutu */
}

/* --- PDF Navigasyon Alanı (Resimsiz Tasarım) --- */
.pdf-map-container {
    margin-top: 30px;
    border: 2px solid #f1f1f1;
    border-radius: 12px;
    display: flex;
    overflow: hidden; /* Köşeleri koru */
    height: 110px; /* Sabit yükseklik */
    background-color: #fff;
}

/* SOL TARAF: Bilgi ve Butonlar */
.map-info {
    flex: 1; /* Kalan tüm genişliği kapla */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fdfdfd;
}

.map-campus-title {
    font-size: 14px;
    font-weight: 800;
    color: #2B7221;
    margin-bottom: 4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-subtext {
    font-size: 10px;
    color: #888;
    margin-bottom: 12px;
}

/* Harita Butonları Grubu */
.map-buttons {
    display: flex;
    gap: 10px;
}

/* Ortak Buton Stili (PDF içindeki linkler) */
.btn-map-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff !important; /* Link rengi zorla beyaz */
    background-color: #555;
}

/* Google Maps Rengi */
.btn-map-link.google {
    background-color: #4285F4;
}

/* Apple Maps Rengi */
.btn-map-link.apple {
    background-color: #222;
}

/* SAĞ TARAF: QR Kod */
.map-qr {
    width: 110px;
    border-left: 2px solid #f1f1f1;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.qr-image {
    width: 65px;
    height: 65px;
    object-fit: contain;
    margin-bottom: 3px;
}

.qr-label {
    font-size: 8px;
    font-weight: 700;
    color: #2B7221;
    text-transform: uppercase;
    text-align: center;
}