/* ═══════════════════════════════════════════════════════════════════════════
   seferler.css — Sefer listesi sayfasına özgü stiller
   (style.css'ten bağımsız, sadece otobus/seferler.php yükler)
   ═══════════════════════════════════════════════════════════════════════════ */

html { scrollbar-gutter: stable; scroll-behavior: smooth; }
body { background-color: #f8f9fa; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; }
main { max-width: 1000px; margin: 0 auto; padding: 20px; }

/* Header override — bu sayfada beyaz header */
.header { background: #fff !important; position: relative !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.header .logo img { filter: none !important; }

/* ── ANASAYFA BUTONU ── */
.back-to-home {
    display: flex; align-items: center; gap: 5px;
    text-decoration: none; color: #003366; font-weight: 600;
    font-size: 18px; padding: 10px 12px;
    border: 1px solid #eee; border-radius: 5px; transition: 0.3s ease;
}
.back-to-home:hover { background: #003366; color: #fff; border-color: #fff; }
.back-to-home i { font-size: 18px; }

/* ── ÖZET BAR (sticky) ── */
.search-summary-bar {
    background: #2d3e50; color: #fff; padding: 12px 0;
    position: sticky; top: 0; z-index: 101;
}
.summary-container {
    max-width: 1100px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
}
.summary-info { display: flex; align-items: center; gap: 15px; font-size: 16px; }

/* ── TARİH NAV BAR (sticky) ── */
.date-nav-wrapper {
    background: #fff; border-bottom: 1px solid #eee; padding: 10px 0;
    position: sticky; top: 53px; z-index: 100; overflow: visible;
}
.date-nav-container {
    max-width: 1100px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
}
.date-nav-container a { color: #c20000; text-decoration: none; font-weight: bold; font-size: 14px; }
.current-date-info {
    font-weight: 700; color: #333; display: flex; align-items: center; gap: 8px;
    cursor: pointer; border: 1px solid #000; padding: 5px 15px;
    border-radius: 20px; position: relative;
}
#tarih-secici:hover { background-color: #ff5722 !important; color: #fff; border-color: #ff5722 !important; transition: 0.3s; }
#tarih-secici-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; bottom: 0; left: 50%; }

/* ── SEFER KARTI ── */
.sefer-wrapper {
    background: #fff; border: 1px solid #eee; border-radius: 15px;
    overflow: hidden; margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: all 0.3s ease;
}
.sefer-wrapper.active { border-color: #ff5722; box-shadow: 0 8px 20px rgba(255,87,34,0.15); }

.ticket-card {
    background: #fff; border-radius: 0; margin-bottom: 0;
    display: flex; align-items: center; padding: 15px 20px;
    cursor: pointer; transition: 0.2s ease-in-out;
    border-bottom: 0 !important; border: none !important;
}
.ticket-card:hover { transform: translateY(-2px); border-color: #ff5722; }

.ticket-left {
    width: 250px; display: flex; flex-direction: column;
    align-items: center; border-right: 1px solid #eee; flex-shrink: 0;
}
.ticket-left img { max-width: 150px; height: auto; }

.badge-2plus1 {
    background: #f1f3f5; border: 1px solid #dee2e6;
    padding: 5px; border-radius: 5px; font-size: 12px; font-weight: bold; color: #495057;
}

.ticket-mid {
    flex-grow: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
.time-large { font-size: 32px; font-weight: 800; color: #1a1a1a; line-height: 1; }
.duration-pill {
    display: inline-flex; align-items: center; background: #f8f9fa; color: #888;
    font-size: 11px; padding: 2px 10px; border-radius: 20px; margin: 8px 0; gap: 5px; border: 1px solid #eee;
}
.route-text { font-size: 14px; font-weight: 500; color: #333; text-transform: uppercase; letter-spacing: 0.5px; }

.ticket-right {
    display: flex; align-items: center; gap: 20px; padding-left: 20px;
    border-left: 1px solid #eee; justify-content: flex-end;
}
.price-tag { font-size: 26px; font-weight: 900; color: #c20000; white-space: nowrap; line-height: 1; }

.action-container { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.btn-select {
    background: #ff5722; color: #fff; border: none;
    padding: 10px 25px; border-radius: 8px; font-weight: 700; font-size: 15px;
    cursor: pointer; transition: 0.2s; line-height: 1; min-width: 140px;
}
.btn-select:hover { background: #d34317; }

.seat-count {
    color: #28a745; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 4px;
    position: absolute; top: 45px;
}

/* "Yer Açılınca Haber Ver" — dolu seferde .seat-count'un tıklanabilir hali */
.seat-count-bildirim {
    color: #28a745 !important;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    border: 1px solid #28a745;
    border-radius: 20px;
    padding: 1px 10px;
    font-size: 12px;
    background: #fff;
    transition: 0.15s ease;
    /* position kasıtlı olarak burada tanımlı değil — .seat-count'tan miras alır:
       masaüstünde absolute/top:45px (Son 1 Koltuk ile birebir aynı hizalama),
       mobilde ise .seat-count'un kendi media query kuralı relative/top:0 yapıyor. */
}
.seat-count-bildirim:hover { color: #fff !important; background: #28a745; }

/* ── YER AÇILINCA HABER VER POPUP ── */
/* #popup-overlay ID'sine özel konumlama kuralları buraya kadar ulaşmıyor,
   o yüzden aynı tam-ekran/ortalama düzenini burada ayrıca tanımlıyoruz. */
#sefer-bildirim-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; padding: 16px; box-sizing: border-box;
}
#sefer-bildirim-overlay.hidden { display: none !important; }
.sefer-bildirim-popup { width: 340px !important; text-align: left !important; }
.sefer-bildirim-popup h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sb-field { margin-bottom: 12px; }
.sb-field input {
    width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 15px; outline: none; box-sizing: border-box;
}
.sb-field input:focus { border-color: #ff5722; }
.sb-btn-iptal, .sb-btn-gonder {
    flex: 1; padding: 11px; border-radius: 8px; font-weight: 700; font-size: 14px;
    cursor: pointer; border: none; transition: 0.2s;
}
.sb-btn-iptal { background: #f0f0f0; color: #555; }
.sb-btn-iptal:hover { background: #e2e2e2; }
.sb-btn-gonder { background: #ff5722; color: #fff; width: 100%; }
.sb-btn-gonder:hover { background: #d34317; }
.sb-btn-gonder:disabled { background: #aaa; cursor: not-allowed; }

/* ── KOLTUK PANELİ ── */
.seats-details {
    background: #ffffff; border-top: 1px solid #f0f0f0;
    padding: 5px; display: none;
    animation: slideDown 0.4s ease-out;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ÖZET BUTONU ── */
.swap-locations-btn {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; margin: 0 5px;
}
.swap-locations-btn:hover { background: #ff5722; border-color: #ff5722; transform: rotate(180deg); }

.change-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.15); padding: 8px 10px; border-radius: 20px;
    text-decoration: none; color: #fff; font-size: 12px;
    border: 1px solid rgba(255,255,255,0.3); transition: all 0.3s ease;
}
.change-btn:hover {
    background-color: #ff5722; border-color: #ff5722; color: #fff;
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255,87,34,0.3);
}



/* ── DÜZENLE CHEVRON ── */
.duzenle-chevron { font-size: 11px; margin-left: 3px; transition: transform 0.25s ease; }
.duzenle-chevron.open { transform: rotate(180deg); }
.duzenle-text-mobile { display: none; }

/* ── GECE SERFERİ BANNER ── */
.gece-seferi-banner {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 1px solid #1e2936; border-radius: 8px; padding: 15px 20px;
    margin-bottom: 20px; display: flex; align-items: center; gap: 15px;
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.15);
}
.gece-banner-icon {
    font-size: 32px; flex-shrink: 0;
}
.gece-banner-text {
    color: #ecf0f1; font-size: 14px; line-height: 1.5; flex-grow: 1;
}
.gece-banner-text strong {
    color: #fff; font-weight: 600;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .gece-seferi-banner {
        background: linear-gradient(135deg, #3d5a73 0%, #4a6b8a 100%);
        border-color: #2c4158;
    }
}

/* ── FİLTRE BAR ── */
.filter-info-bar {
    background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 5px solid #ff5722;
}
.btn-clear-filter {
    background: #2d3e50; color: #fff; padding: 8px 15px;
    border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600;
}

/* ── DOLU FİLTRE CHİP'İ ── */
.dolu-filter-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border: 1px solid #eee; border-radius: 10px;
    padding: 8px 14px; margin-bottom: 14px;
    font-size: 13px; color: #555;
}
.dolu-filter-sep { color: #ccc; margin: 0 2px; }
.dolu-renk { color: #e74c3c; font-weight: 600; }
.dolu-filter-btn {
    background: none; border: 1px solid #dee2e6; border-radius: 20px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: #555;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.2s; white-space: nowrap;
}
.dolu-filter-btn:hover { background: #f5f5f5; border-color: #bbb; }
.dolu-filter-btn.aktif { background: #fff3f0; border-color: #ff5722; color: #ff5722; }

/* ── YOK EKRANI ── */
.no-result-card {
    text-align: center; padding: 60px 20px; background: #fff;
    border-radius: 16px; border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-top: 10px;
}
.no-result-card .no-result-emoji { font-size: 64px; margin-bottom: 16px; line-height: 1; }
.no-result-card h3 { margin: 0 0 8px; color: #1a1a1a; font-size: 20px; font-weight: 800; }
.no-result-card .no-result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.btn-prev-day {
    background: #f5f5f5; color: #333; text-decoration: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1px solid #ddd;
}
.btn-next-day {
    background: #ff5722; color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
}

/* ── YÜKLEME EKRANI ── */
.seferler-loading-screen {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(248,249,250,0.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; backdrop-filter: blur(2px);
}

/* ── DÜZENLE PANELİ ── */
.search-edit-panel {
    background: #1e2d3d; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; z-index: 100;
}
.sep-mobile-header { display: none; }
.sep-close-btn {
    background: #f5f5f5; border: none; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; font-size: 16px;
}
.sep-inner {
    max-width: 1100px; margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap;
}
.sep-route-card {
    flex: 2; min-width: 0; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
    display: flex; align-items: stretch; position: relative; overflow: visible;
}
.sep-route-row { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-width: 0; }
.sep-route-divider { width: 1px; background: rgba(255,255,255,0.15); flex-shrink: 0; position: relative; }
.sep-swap {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #fff; border: none; color: #2d3e50; width: 30px; height: 30px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: background 0.2s, transform 0.3s; z-index: 5; font-size: 12px;
}
.sep-swap:hover { background: #ff5722; color: #fff; transform: translate(-50%,-50%) rotate(180deg); }
.sep-route-icon { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
.sep-icon-from { color: #ff5722; }
.sep-icon-to   { color: rgba(255,255,255,0.5); }
.sep-cal-icon  { margin-right: 6px; opacity: 0.7; font-size: 13px; }
.sep-route-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.sep-route-label { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; white-space: nowrap; }
.sep-route-input {
    background: transparent; border: none; outline: none; color: #fff;
    font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 600; padding: 0; width: 100%;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sep-route-input::placeholder { color: rgba(255,255,255,0.28); font-weight: 400; }
.sep-date-card {
    flex: 1; min-width: 0; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
    padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sep-date-left { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; position: relative; }
.sep-date-value { color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#sep-date-fp { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; bottom: 0; left: 0; }
.sep-date-btns { display: flex; gap: 5px; flex-shrink: 0; }
.sep-quick-date {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65); padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.sep-quick-date:hover { background: rgba(255,255,255,0.2); color: #fff; }
.sep-quick-date.active { background: #fff; color: #1e2d3d; border-color: #fff; }
.sep-search-btn {
    background: #ff5722; color: #fff; border: none; padding: 0 20px; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.2s;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0; height: auto; align-self: stretch;
}
.sep-search-btn:hover { background: #d34317; }
.sep-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    list-style: none; margin: 0; padding: 4px 0; z-index: 9999;
    max-height: 230px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: none;
}
.sep-suggestions li { padding: 10px 16px; font-size: 14px; color: #333; cursor: pointer; transition: background 0.12s; }
.sep-suggestions li:hover { background: #fff3f0; color: #ff5722; }
.sep-suggestions li.sep-no-result { color: #bbb; pointer-events: none; font-style: italic; }
.sep-overlay { display: none; }
.sep-overlay.open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
}

/* Flatpickr override */
.flatpickr-day.selected { background: #ff5722 !important; border-color: #ff5722 !important; }

/* ── SEFER DETAY BUTONU responsive font ── */
.responsive-font-style { color: #555; font-size: 11px; }

/* ── MOBİL ── */
@media (max-width: 768px) {
    .ticket-card { padding: 12px; gap: 10px; }
    .ticket-left { width: 100px; border-right: none; }
    .ticket-left img { max-width: 100px; }
    .time-large { font-size: 22px; }
    .route-text { font-size: 10px; text-align: center; }
    .ticket-right { width: 100px; border-left: none; padding-left: 0; flex-direction: column; align-items: flex-end; gap: 5px; }
    .price-tag { font-size: 18px; }
    .btn-select { padding: 8px 10px; font-size: 12px; min-width: 80px; }
    .seat-count { font-size: 10px; font-weight: 500; position: relative; top: 0; }
    .seat-count-bildirim { font-size: 9px; padding: 1px 7px; gap: 3px; }
    .summary-info { gap: 5px !important; font-size: 14px !important; }
    .swap-locations-btn { width: 28px; height: 28px; }
    .duzenle-text-full { display: none; }
    .duzenle-text-mobile { display: inline; }
    .duzenle-chevron { display: none; }
    .btn-sefer-detay i { display: none !important; }
    .btn-sefer-detay .detay-text { display: none; }
    .btn-sefer-detay::after { content: "Sefer Detay"; }
    .responsive-font-style { font-size: 14px; }

    /* Düzenle paneli — bottom sheet */
    .search-edit-panel {
        position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
        border-radius: 20px 20px 0 0; z-index: 1001;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.22); max-height: 92vh; overflow-y: auto;
    }
    .sep-mobile-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 20px 14px; font-size: 16px; font-weight: 700; color: #1a1a1a;
        border-bottom: 1px solid #f0f0f0;
    }
    .sep-inner { flex-direction: column; align-items: stretch; flex-wrap: wrap; gap: 12px; padding: 16px 16px 28px; }
    .sep-route-card { flex-direction: column; background: #fff; border: 1.5px solid #e8e8e8; border-radius: 12px; }
    .sep-route-row { padding: 12px 16px; }
    .sep-route-divider { width: auto; height: 1px; background: #eee; }
    .sep-swap { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); background: #f0f2f5; box-shadow: none; border: 1px solid #ddd; color: #555; width: 34px; height: 34px; }
    .sep-swap:hover { background: #ff5722; color: #fff; border-color: #ff5722; transform: translateY(-50%) rotate(90deg); }
    .sep-icon-from { color: #2d3e50; }
    .sep-icon-to   { color: #bbb; }
    .sep-route-label { color: #888; }
    .sep-route-input { color: #1a1a1a; font-size: 16px; }
    .sep-date-card { background: #fff; border: 1.5px solid #e8e8e8; border-radius: 12px; padding: 12px 16px; }
    .sep-date-value { color: #1a1a1a; font-size: 16px; }
    .sep-quick-date { background: #f0f2f5; border: 1.5px solid #e0e0e0; color: #444; font-size: 13px; padding: 6px 14px; }
    .sep-quick-date.active { background: #1e2d3d; color: #fff; border-color: #1e2d3d; }
    .sep-search-btn { width: 100%; height: 52px; border-radius: 12px; font-size: 16px; justify-content: center; margin-top: 4px; }
    .sep-suggestions { position: fixed; bottom: 0; left: 0; right: 0; top: auto; border-radius: 16px 16px 0 0; max-height: 55vh; z-index: 1200; border: none; box-shadow: 0 -4px 20px rgba(0,0,0,0.18); }
    .flatpickr-calendar { z-index: 1200 !important; width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; border-radius: 16px 16px 0 0; position: fixed !important; bottom: 0 !important; top: auto !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); padding: 12px; box-sizing: border-box; }
    .flatpickr-days, .dayContainer { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    .flatpickr-day { max-width: calc(100vw / 7) !important; height: 48px !important; line-height: 48px !important; font-size: 18px !important; }
    .flatpickr-months .flatpickr-month { height: 52px !important; }
    .flatpickr-current-month { font-size: 20px !important; padding-top: 12px !important; }
    .flatpickr-weekdays, .flatpickr-weekdaycontainer { width: 100% !important; }
    .flatpickr-weekday { font-size: 14px !important; max-width: calc(100vw / 7) !important; }
}
@media (min-width: 769px) {
    .responsive-font-style { font-size: 14px; }
}


#sep-overlay{
    z-index:9998 !important;
}

#search-edit-panel{
    z-index:9999 !important;
    position:relative;
}

.user-info-area small {
    color: #888;
    font-size: 12px;
    display: block;
    margin-top: 2px;
    word-break: break-all;
}

#loginModal .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

#loginModal label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
}

#loginModal input[type="text"],
#loginModal input[type="email"],
#loginModal input[type="password"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px;
    background: #fff;
}

#loginModal .modal-content,
#forgotPasswordModal .modal-content {
    max-width: 460px;
    width: calc(100% - 32px);
}

#forgotPasswordModal .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

#forgotPasswordModal label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
}

#forgotPasswordModal input[type="email"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px;
    background: #fff;
}
/* Durak modal stilleri style.css'te zaten var, burada ek bir şey yok */

/* ── KAMPANYA NOTU ── */
.kampanya-note {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    padding: 2px 7px; border-radius: 10px;
    white-space: nowrap; margin: 2px 0 0 0;
}
.kampanya-note i { font-size: 9px; }