/* Berat Turizm - v3.4 (İstanbul Detaylı & VIP) */
:root {
    --kk-lacivert: #002d72;
    --kk-yesil: #8dc63f;
    --kk-beyaz: #ffffff;
    --kk-gri: #f8fafc;
    --kk-border: #cbd5e1;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body {
    background: linear-gradient(135deg, #002d72 0%, #001a44 100%);
    min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 15px;
}

.form-card {
    background: var(--kk-beyaz); padding: 30px; border-radius: 20px;
    width: 100%; max-width: 500px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

header { text-align: center; margin-bottom: 20px; }
header h2 { color: var(--kk-lacivert); font-size: 26px; font-weight: 800; text-transform: uppercase; }

.trip-type { display: flex; background: #e2e8f0; padding: 5px; border-radius: 12px; gap: 5px; margin-bottom: 20px; }
.type-btn { flex: 1; padding: 12px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-weight: 700; color: #64748b; transition: 0.3s; font-size: 13px; }
.type-btn.active { background: var(--kk-beyaz); color: var(--kk-lacivert); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

label { display: block; font-size: 12px; font-weight: 700; color: var(--kk-lacivert); margin-bottom: 4px; margin-top: 10px; text-transform: uppercase; }

input, select, textarea {
    width: 100%; padding: 12px; margin-bottom: 10px; border: 2px solid #e2e8f0; border-radius: 10px;
    background: var(--kk-gri); color: #1e293b; outline: none; font-size: 14px;
}

.seat-btn {
    width: 100%; padding: 14px; background: #f1f5f9; border: 2px dashed var(--kk-lacivert); 
    border-radius: 10px; color: var(--kk-lacivert); cursor: pointer; font-weight: 700; margin-top: 10px;
}

.submit-btn {
    width: 100%; padding: 18px; background: var(--kk-yesil); border: none; 
    border-radius: 12px; color: #000; font-size: 17px; font-weight: 800; 
    cursor: pointer; text-transform: uppercase; margin-top: 15px;
}

/* MODAL - VIP PLANI */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 9999; }
.modal-content { background: #fff; padding: 20px; border-radius: 20px; width: 95%; max-width: 380px; text-align: center; }

.bus-container {
    display: grid;
    grid-template-columns: 55px 25px 55px 55px;
    gap: 8px;
    justify-content: center;
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.seat-item {
    width: 55px; height: 50px; border: 1px solid #cbd5e1; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px; cursor: pointer; transition: 0.2s; background: #fff;
}

.seat-item:hover { background: #f0f7ff; border-color: var(--kk-lacivert); }
.seat-item.selected-now { background: var(--kk-lacivert); color: #fff; border-color: var(--kk-lacivert); }

.corridor { grid-column: 2; }
.door-area { 
    grid-column: 3 / 5;
    background: #f1f5f9; border-radius: 8px; 
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #94a3b8; font-weight: 800; border: 1px dashed #cbd5e1;
}

.back-row-left { grid-column: 1 / 3; width: 100%; display: flex; gap: 8px; }
.back-row-right { grid-column: 3 / 5; width: 100%; display: flex; gap: 8px; }