/*  ÇEKİRDEK (CORE) STİLLERİ — TÜM TEMALARDA ORTAK
 *  --------------------------------------------------------------------------
 *  Yalnızca YAPI ve DAVRANIŞ stilleri: yükleniyor katmanı, koltuk açıklama
 *  şeridi gibi core.js'in çalışması için gereken görsel iskelet.
 *
 *  Marka rengi, tipografi, buton/badge görünümü BURAYA YAZILMAZ —
 *  onlar temanın kendi css dosyasında (örn. general.css) tanımlanır.
 *  Tema, aşağıdaki değişkenleri ezerek çekirdeğin rengini kendine uydurur.
 */
.blur-active { filter: blur(4px); pointer-events: none; user-select: none; }
#loading-overlay-active { position: initial; background: var(--bilet-core-perde, rgba(255,255,255,.6)); display: flex; justify-content: center; align-items: center; font-family: sans-serif; font-size: 1.2rem; color: #333; backdrop-filter: blur(2px); min-width: 200px; min-height: 300px; width: 100%; }
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bilet-core-perde, rgba(255,255,255,.6)); display: flex; justify-content: center; align-items: center; z-index: 9999; font-family: sans-serif; font-size: 1.2rem; color: #333; backdrop-filter: blur(2px); visibility: hidden; }
    #loading-overlay.active { visibility: visible; }
    #loading-overlay .spinner, #loading-overlay-active .spinner { border: 4px solid #ccc; border-top: 4px solid var(--bilet-core-vurgu, #007bff); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-right: 10px; }
@keyframes spin {
    to { transform: rotate(360deg); }
}

#legend, #legend_durum { display: flex; /*flex-direction: column;*/ }
#legend .legend-item, #legend_durum .legend-item{ margin-right:25px}

/* Extra small devices (xs: <576px) */
@media (max-width: 575.98px) {
    /*#legend, #legend_durum { flex-direction: row; }*/
}

/* Small devices (sm: ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /*#legend, #legend_durum { flex-direction: row; }*/
}

/* Medium devices (md: ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /*#legend, #legend_durum { flex-direction: row; }*/
}

/* Large devices (lg: ≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* Extra large devices (xl: ≥1200px) */
@media (min-width: 1200px) {
}

/* ==========================================================================
   ÜYELİK EKRANLARI (Giriş / Üye Ol / Hızlı Üyelik)
   Bu üç ekran çekirdektedir (/Views/Hesap). Stilleri eskiden her view'ın
   içine ayrı ayrı gömülüydü; burada tek kopyaya indirildi.

   Tema, kendi css dosyasında yalnızca aşağıdaki değişkenleri ezerek
   üyelik ekranlarının rengini/ölçüsünü değiştirebilir:

       .auth-section { --bilet-auth-vurgu: #b8860b; --bilet-auth-vurgu-koyu: #7a5b08; }

   Ekrana göre vurgu rengi:  .auth-giris (giriş)  /  .auth-kayit (kayıt, hızlı üyelik)
   ========================================================================== */
/* --bilet-* değişkenleri burada TANIMLANMAZ; yalnızca var(ad, varsayılan) ile
   okunur. Sebebi: core.css tema CSS'inden SONRA yükleniyor — burada bir :root
   bloğu olsaydı temanın kendi :root'unu ezer, tema renkleri hiç uygulanmazdı.
   Fallback biçimi yükleme sırasından bağımsızdır.
   Tema bu değişkenleri kendi :root'unda tanımlar (bkz. Veriler/TEMA_YAPISI.md).
   :root seviyesi şart: üyelik yönlendirme modalını Bootstrap body'nin altına
   taşır, .auth-section'ın içinde kalmaz. */
.auth-section {
    padding: 56px 0;
    background: var(--bilet-auth-zemin, linear-gradient(135deg, #eef2fb 0%, #e7ecf7 100%));
}

/* Giriş ekranı: mavi vurgu, daha dar kart */
.auth-section.auth-giris {
    --bilet-auth-vurgu: #2563eb;
    --bilet-auth-vurgu-koyu: #1e3a8a;
    --bilet-auth-vurgu-hover: #1d4ed8;
    --bilet-auth-genislik: 460px;
}

/* Kayıt ve hızlı üyelik: yeşil vurgu */
.auth-section.auth-kayit {
    --bilet-auth-vurgu: #16a34a;
    --bilet-auth-vurgu-koyu: #15803d;
    --bilet-auth-vurgu-hover: #166534;
}

.auth-card { max-width: var(--bilet-auth-genislik, 540px); margin: 0 auto; border: 0; border-radius: 20px; box-shadow: 0 18px 50px rgba(20, 40, 80, .12); overflow: hidden; }
    .auth-card .card-body { padding: 2.5rem; }
    .auth-card .form-label { font-weight: 500; font-size: .85rem; color: #4b5563; margin-bottom: .35rem; }
    .auth-card .form-control, .auth-card .form-select { border-radius: 12px; padding: .7rem .9rem; border-color: var(--bilet-auth-cizgi, #e3e8f0); }
        .auth-card .form-control:focus, .auth-card .form-select:focus { border-color: var(--bilet-auth-vurgu, #2563eb); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12); }
    .auth-card .btn-auth { border-radius: 12px; padding: .75rem; font-weight: 600; border: 0; color: #fff; background: linear-gradient(135deg, var(--bilet-auth-vurgu, #2563eb), var(--bilet-auth-vurgu-koyu, #1e3a8a)); }
        .auth-card .btn-auth:hover { color: #fff; background: linear-gradient(135deg, var(--bilet-auth-vurgu-hover, #1d4ed8), var(--bilet-auth-vurgu-koyu, #1e3a8a)); }

.auth-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bilet-auth-vurgu, #2563eb), var(--bilet-auth-vurgu-koyu, #1e3a8a)); color: #fff; margin: 0 auto 1.1rem; }
.auth-title { font-weight: 700; text-align: center; margin-bottom: .2rem; color: var(--bilet-auth-baslik, #1f2937); }
.auth-sub { color: #8a93a6; text-align: center; font-size: .92rem; margin-bottom: 1.7rem; }
.auth-foot { text-align: center; margin-top: 1.3rem; font-size: .9rem; color: var(--bilet-auth-ikincil, #6b7280); }
    .auth-foot a { color: var(--bilet-auth-vurgu, #2563eb); font-weight: 600; text-decoration: none; }

/* Üye Ol ekranı: doğrulama kodu kutusu */
.otp-box { background: #f6f8fb; border-radius: 14px; padding: 1rem; margin-top: .5rem; }

/* Hızlı üyelik ekranı: adım göstergesi */
.adim-cizgi { display: flex; gap: 6px; margin-bottom: 1.4rem; }
    .adim-cizgi span { flex: 1; height: 4px; border-radius: 4px; background: var(--bilet-auth-cizgi, #e3e8f0); }
        .adim-cizgi span.aktif { background: linear-gradient(135deg, var(--bilet-auth-vurgu, #2563eb), var(--bilet-auth-vurgu-koyu, #1e3a8a)); }

/* Giriş ekranında "bu sisteme kaydınız yok" yönlendirme modalı */
.uyelik-modal { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(20, 40, 80, .22); overflow: hidden; }
    .uyelik-modal .modal-body { padding: 2.4rem 2rem 1.6rem; }
    .uyelik-modal .btn-auth { border-radius: 12px; padding: .75rem; font-weight: 600; }
.uyelik-kapat { position: absolute; top: 1rem; right: 1rem; z-index: 2; opacity: .45; }
    .uyelik-kapat:hover { opacity: .8; }
/* İkon duruma göre renklenir: mevcut hesap (mavi) / yeni kayıt (yeşil) */
.uyelik-ikon { width: 68px; height: 68px; border-radius: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: #fff; background: linear-gradient(135deg, #007bff, #0056d2); box-shadow: 0 10px 24px rgba(0, 123, 255, .28); }
    .uyelik-ikon.yeni { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 10px 24px rgba(22, 163, 74, .28); }
.uyelik-baslik { font-weight: 700; font-size: 1.15rem; color: var(--bilet-auth-baslik, #1f2937); margin-bottom: .6rem; }
.uyelik-aciklama { color: var(--bilet-auth-ikincil, #6b7280); font-size: .93rem; line-height: 1.6; margin-bottom: 1.6rem; }
.uyelik-vazgec { color: #9ca3af; font-size: .88rem; text-decoration: none; margin-top: .35rem; }
    .uyelik-vazgec:hover { color: var(--bilet-auth-ikincil, #6b7280); }

/* ==========================================================================
   KOLTUK SEÇİM EKRANI — salon SVG'si
   Eskiden view'ın içine gömülüydü (BiletForm_KoltukSec.cshtml).
   ========================================================================== */
/* NOT: kurallar #svg-container ile sınırlandı. Eskiden view içindeydi ve yalnız o
   sayfada yüklendiği için serbest yazılmıştı; ortak dosyada bütün SVG'leri etkilerdi. */
#svg-container { width: 100%; max-width: 800px; height: auto; }
    #svg-container path { cursor: pointer; transition: fill .2s, stroke .2s; }
        #svg-container path:hover { fill: var(--bilet-koltuk-hover, #5599CC); }
    #svg-container text { fill: #000; pointer-events: none; user-select: none; font-family: 'Roboto', sans-serif; }
#salonSvg svg { width: 100% !important; height: auto !important; }

/* --------------------------------------------------------------------------
   Koltuk ızgarası — core-koltuk-secim.js'in ürettiği çıktı.
   Bu düğümleri view değil betik üretir; bu yüzden biçimi temaya değil çekirdeğe
   aittir. Tema yalnızca aşağıdaki değişkenleri ezerek renk/ölçü ayarlar.
   (Kurallar tema-contrast/css/main.css'ten taşındı; diğer temalarda hiç yoktu,
    o yüzden koltuk şeması biçimsiz görünüyordu.)
   -------------------------------------------------------------------------- */
.blok,
.seat {
    width: var(--bilet-koltuk-boyut, 28px); height: var(--bilet-koltuk-boyut, 28px);
    flex: 0 0 var(--bilet-koltuk-boyut, 28px);
    margin: 3px; display: flex; align-items: center; justify-content: center;
    font-size: var(--bilet-koltuk-yazi-boyut, 11px); font-weight: 500;
    border-radius: 6px; border: 1px solid transparent; cursor: pointer;
    background-color: rgba(0, 0, 0, .05); transition: all .2s ease;
}
    .seat.yok,
    .seat.bos { background: var(--bilet-koltuk-bos-zemin, #fff); color: var(--bilet-koltuk-bos-yazi, #212529); }
    .seat.dolu { background: var(--bilet-koltuk-dolu-zemin, #adb5bd); color: var(--bilet-koltuk-dolu-yazi, #fff); cursor: not-allowed; visibility: visible !important; }
    .seat.rezerve { background: repeating-linear-gradient(45deg, #dee2e6, #dee2e6 6px, #f8f9fa 6px, #f8f9fa 12px); color: #495057; cursor: not-allowed; }
    .seat.selected { outline: 1px solid var(--bilet-koltuk-secili-cerceve, #000); transform: scale(1.05); }

/* Fiyat/durum açıklama satırı (#legend, #legend_durum içine basılır) */
.legend-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; }
    .legend-item:not(:last-child) { margin-right: 1rem; }
.legend-color { width: 18px; height: 18px; border-radius: 4px; margin-right: 8px; border: 1px solid #000; }

/* Salon kutusu ve sahne şeridi */
.hall {
    width: 100%; overflow-x: auto; overflow-y: hidden;
    padding: 15px; border-radius: 12px;
    background: var(--bilet-salon-zemin, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
    /* Sıralar içeriğe göre genişler; dar salonda ortalanır, geniş salonda kaydırılır. */
    .hall .d-flex { width: max-content; margin-left: auto; margin-right: auto; }
.stage {
    max-width: 80%; margin: 0 auto 15px; padding: 8px; text-align: center;
    background: var(--bilet-sahne-zemin, #dc3545); color: var(--bilet-sahne-yazi, #fff);
    border-radius: 6px; border-top: 6px solid var(--bilet-sahne-ust-cizgi, #7e0e0e);
    font-weight: 600; font-size: 16px;
}

/* Yatay kaydırma düğmeleri — yalnız salon ekrana sığmadığında (mobil) görünür */
.seat-wrapper { position: relative; display: flex; align-items: center; max-width: 100%; }
.scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 100%; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: var(--bilet-kaydir-zemin, rgb(196 196 196 / 21%)); color: #fff; border: none; border-radius: 4px; cursor: pointer;
}
    .scroll-btn.left { left: 0; }
    .scroll-btn.right { right: 0; }

@media (max-width: 991px) {
    .hall { width: calc(100% - 80px); margin: 0 auto; }
}

@media (min-width: 992px) {
    .scroll-btn { display: none !important; }
}

@media (max-width: 768px) {
    .legend-item { align-items: start; text-align: center; flex: 1; }
}

/* --------------------------------------------------------------------------
   Satış akışının diğer çekirdek ekranları — blok seçim, seans başlığı,
   bilet kartı, kredi kartı formu. Bu view'lar /Views altında ortak olduğu için
   biçimleri de çekirdekte durur. Varsayılan değerler tema-contrast'ın mevcut
   görünümüdür; diğer temalar aşağıdaki değişkenleri kendi paletiyle ezer.
   -------------------------------------------------------------------------- */
/* Blok (kategori) seçim ekranı — Views/Satis/BiletForm_BlokSec.cshtml */
.blocks-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }
.block {
    background: var(--bilet-blok-zemin, #fff); border-radius: 15px; padding: 16px; text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08); border: 2px solid transparent;
    cursor: pointer; transition: all .3s ease;
}
    .block:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, .15); border-color: var(--bilet-blok-cerceve-hover, #1ebc59); }
    .block.selected { border-color: var(--bilet-blok-cerceve-secili, #e74c3c); background: var(--bilet-blok-secili-zemin, linear-gradient(135deg, #fff5f5, #ffe6e6)); }
    .block.disabled { opacity: .4; cursor: not-allowed; filter: grayscale(100%); }
        .block.disabled:hover { transform: none; box-shadow: 0 4px 15px rgba(0, 0, 0, .08); border-color: transparent; opacity: .4; }
.block-header { margin-bottom: 10px; }
.block-name { font-size: 1.3rem; font-weight: 600; color: var(--bilet-blok-ad-yazi, #434343); background: var(--bilet-blok-ad-zemin, radial-gradient(52.91% 89.29% at 63.06% 56.65%, #FFFFFF 0%, #D1D1D1 65.4%, #C7C7C7 100%)); padding: 6px; border-radius: 10px; }
.block-info { color: var(--bilet-blok-bilgi-yazi, #7f8c8d); font-size: .9rem; }
.block-price { font-size: 1rem; font-weight: 500; color: var(--bilet-blok-fiyat-yazi, #303733); margin: 8px 0; }
.block-seats { margin-bottom: 12px; padding: 4px; border-radius: 8px; }
.seat-info { display: flex; text-align: center; align-items: center; justify-content: center; }
.seat-count { font-size: 1rem; color: var(--bilet-blok-koltuk-yazi, #18ac50); margin-right: 4px; }
.seat-label { font-size: 1rem; color: var(--bilet-blok-koltuk-yazi, #18ac50); }
.select-btn {
    display: inline-block; width: 100%; padding: 12px 25px;
    background: var(--bilet-secim-dugme, linear-gradient(45deg, #3498db, #2980b9)); color: var(--bilet-secim-dugme-yazi, #fff);
    border: none; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all .3s ease;
}
    .select-btn:hover { background: var(--bilet-secim-dugme-hover, linear-gradient(45deg, #2980b9, #1f5f8b)); transform: scale(1.05); color: var(--bilet-secim-dugme-yazi, #fff); text-decoration: none; }
    .select-btn.selected { background: var(--bilet-secim-dugme-secili, linear-gradient(45deg, #e74c3c, #c0392b)); }
        .select-btn.selected:hover { background: var(--bilet-secim-dugme-secili-hover, linear-gradient(45deg, #c0392b, #a93226)); }
    .select-btn.disabled { background: #6c757d; cursor: not-allowed; }
        .select-btn.disabled:hover { background: #6c757d; transform: none; }

@media (max-width: 768px) {
    .blocks-container { grid-template-columns: 1fr; gap: 15px; }
    .blocks-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; margin-bottom: 15px !important; }
    .block { padding: 20px; }
    .block-seats { flex-direction: column; gap: 10px; }
}

@media (max-width: 480px) {
    .blocks-row { grid-template-columns: 1fr !important; gap: 10px !important; }
    .block { padding: 15px; }
}

/* Seans başlığı (afiş + ad + mekan + kalan süre) — Views/Satis/SeansDetaySection.cshtml */
.event-detail {
    background: var(--bilet-seans-detay-zemin, radial-gradient(52.91% 89.29% at 63.06% 56.65%, #FFFFFF 0%, #D1D1D1 65.4%, #C7C7C7 100%));
    max-width: 1500px; width: calc(100% - 30px); margin: 32px auto;
    border-radius: 12px; padding: 48px 0;
}
    .event-detail h1 { font-size: 2.2rem; }
    /* Afiş oranı 3:4 — panelden bu oranda yükleniyor. */
    .event-detail .event-image img { aspect-ratio: 3 / 4; object-fit: cover; transition: transform .4s ease; }
    .event-detail .event-image:hover img { transform: scale(1.05); }
.event-detail-badge { position: absolute; right: 8px; bottom: 8px; }

/* Bilet kartı — Biletlerim ve ödeme özeti */
.ticket-card { background: var(--bilet-kart-zemin, #fff); border: 1px solid var(--bilet-kart-cerceve, #000); border-radius: 12px; padding: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); transition: transform .2s; }
    .ticket-card:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   TAKVİME EKLE — Views/Shared/_TakvimeEkle.cshtml
   Vatandaş seansı kendi takvimine ekler. Etkinlik detayı ve Biletlerim aynı
   düğmeyi kullanır; renk temadan --bilet-takvim-* değişkenleriyle gelir.
   -------------------------------------------------------------------------- */
.takvime-ekle { display: inline-block; }
.takvime-ekle .btn-takvim,
.takvime-ekle .btn-takvim-sade {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 8px; line-height: 1.2;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.takvime-ekle .btn-takvim {
    padding: .5rem .9rem; font-weight: 700; font-size: .88rem;
    border: 1px solid var(--bilet-takvim-cerceve, #DEE7F1);
}
/* Sade varyant ikincil bir kısayoldur: "Bilet Al" gibi ana eylemlerin yanında
   durur, onların önüne geçmemeli. Bu yüzden küçük, çerçevesiz ve sessiz. */
.takvime-ekle .btn-takvim-sade {
    padding: .3rem .5rem; font-weight: 600; font-size: .76rem;
    border: 1px solid transparent;
}
.takvime-ekle .btn-takvim-sade .takvim-ikon { width: 14px; height: 14px; }
.takvime-ekle .btn-takvim {
    background: var(--bilet-takvim-zemin, #1C4682);
    color: var(--bilet-takvim-yazi, #fff);
    border-color: var(--bilet-takvim-zemin, #1C4682);
}
    .takvime-ekle .btn-takvim:hover { background: var(--bilet-takvim-zemin-hover, #2E7BB8); border-color: var(--bilet-takvim-zemin-hover, #2E7BB8); color: var(--bilet-takvim-yazi, #fff); }
/* Sade: liste/kart içinde, ana eylemin önüne geçmesin */
.takvime-ekle .btn-takvim-sade {
    background: transparent;
    color: var(--bilet-takvim-sade-yazi, #1C4682);
}
    .takvime-ekle .btn-takvim-sade:hover { background: var(--bilet-takvim-sade-hover, #EDF2FA); color: var(--bilet-takvim-sade-yazi, #1C4682); }
.takvime-ekle .takvim-ikon { flex: 0 0 auto; }
.takvime-ekle .dropdown-menu { border-radius: 10px; border-color: var(--bilet-takvim-cerceve, #DEE7F1); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.takvime-ekle .dropdown-item { font-size: .9rem; font-weight: 600; padding: .5rem .9rem; }

/* --------------------------------------------------------------------------
   BİLETLERİM — Views/Hesap/Biletlerim.cshtml
   Yapı burada; renk temanin --bilet-kart-* ve --bilet-baslik-* değişkenlerinden.
   -------------------------------------------------------------------------- */
.bilet-sekmeler { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--bilet-kart-cerceve, #DEE7F1); }
.bilet-sekmeler a {
    padding: .6rem .95rem; border-radius: 10px 10px 0 0; margin-bottom: -1px;
    font-weight: 700; font-size: .9rem; text-decoration: none;
    color: var(--bilet-baslik-alt-renk, #55677E);
    border: 1px solid transparent; border-bottom-color: transparent;
}
    .bilet-sekmeler a:hover { color: var(--bilet-secim-dugme, #1C4682); }
    .bilet-sekmeler a.aktif {
        color: var(--bilet-secim-dugme, #1C4682);
        background: var(--bilet-kart-zemin, #fff);
        border-color: var(--bilet-kart-cerceve, #DEE7F1);
        border-bottom-color: var(--bilet-kart-zemin, #fff);
    }

.bilet-karti {
    position: relative; overflow: hidden;
    background: var(--bilet-kart-zemin, #fff);
    border: 1px solid var(--bilet-kart-cerceve, #DEE7F1);
    border-radius: 14px; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
    /* Durum şeridi: iptal kırmızı, geçmiş gri */
    .bilet-karti.iptal::before,
    .bilet-karti.gecmis::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    }
    .bilet-karti.iptal::before { background: #dc3545; }
    .bilet-karti.gecmis::before { background: #adb5bd; }
    .bilet-karti.iptal .bilet-afis img,
    .bilet-karti.gecmis .bilet-afis img { filter: grayscale(100%); opacity: .7; }

.bilet-ust { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; }

/* Tarih kutusu — etkinlik kartlarındaki gün/ay bloklarıyla aynı dil */
.bilet-tarih {
    flex: 0 0 auto; width: 58px; text-align: center; padding: .5rem .25rem;
    border-radius: 10px; line-height: 1.1;
    background: var(--bilet-blok-ad-zemin, #EDF2FA);
    color: var(--bilet-secim-dugme, #1C4682);
}
    .bilet-tarih strong { display: block; font-size: 1.5rem; font-weight: 800; }
    .bilet-tarih span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; }
    .bilet-tarih small { display: block; font-size: .68rem; opacity: .7; }

/* Afiş: panelden 3:4 yükleniyor */
.bilet-afis { flex: 0 0 auto; width: 54px; border-radius: 8px; overflow: hidden; display: block; }
    /* height:auto şart: <img height="1200"> özniteliği aspect-ratio'yu ezip
       görseli 1200px boyunda çiziyordu. */
    .bilet-afis img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

.bilet-bilgi { flex: 1 1 auto; min-width: 0; }
.bilet-kat {
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bilet-blok-koltuk-yazi, #2E7BB8); margin: 0 0 .15rem;
}
.bilet-ad { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin: 0 0 .3rem; }
    .bilet-ad a { color: var(--bilet-baslik-renk, inherit); text-decoration: none; }
    .bilet-ad a:hover { text-decoration: underline; }
.bilet-satir {
    display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 .15rem;
    font-size: .84rem; font-weight: 600; color: var(--bilet-baslik-alt-renk, #55677E);
}
.bilet-pnr { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.bilet-eylem { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Kişi/koltuk satırları — tablo yerine hafif çipler */
.bilet-kisiler {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: 0 1.15rem 1rem;
}
.bilet-kisi {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .7rem; border-radius: 999px;
    background: var(--bilet-blok-ad-zemin, #EDF2FA);
    font-size: .82rem; font-weight: 600;
    color: var(--bilet-baslik-renk, inherit);
}
    .bilet-kisi.iptal { opacity: .6; text-decoration: line-through; }
    .bilet-kisi .form-check-input { margin: 0; flex: 0 0 auto; }
.kisi-koltuk { font-weight: 800; color: var(--bilet-secim-dugme, #1C4682); margin: 0; cursor: inherit; }
.kisi-ad { color: var(--bilet-baslik-alt-renk, #55677E); }
.kisi-durum { font-size: .74rem; font-weight: 800; color: #dc3545; text-decoration: none; }

.bilet-alt {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .8rem 1.15rem; border-top: 1px solid var(--bilet-kart-cerceve, #DEE7F1);
}
.bilet-rozet { font-size: .8rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; }
    .bilet-rozet.iptal { background: #fdecee; color: #b02a37; }
    .bilet-rozet.beklemede { background: #fff6e5; color: #8a6d3b; }

.bilet-bos { text-align: center; padding: 3rem 1rem; }
    .bilet-bos .glyph { color: var(--bilet-secim-dugme, #1C4682); opacity: .5; margin-bottom: .8rem; }
    .bilet-bos p { color: var(--bilet-baslik-alt-renk, #55677E); font-weight: 600; margin-bottom: 1.1rem; }

@media (max-width: 767px) {
    .bilet-ust { flex-wrap: wrap; gap: .75rem; padding: .9rem; }
    .bilet-bilgi { flex: 1 1 100%; order: 3; }
    .bilet-eylem { flex: 1 1 100%; order: 4; }
    .bilet-kisiler { padding: 0 .9rem .9rem; }
    .bilet-alt { padding: .7rem .9rem; }
    .bilet-afis { width: 46px; }
}

/* --------------------------------------------------------------------------
   SAYFA BAŞLIĞI — Views/Shared/_SayfaBasligi.cshtml çıktısı.
   Çekirdek ekranlar (Biletlerim, Bilgilerim...) ile tema ekranları (İletişim,
   Mekanlar...) aynı başlık biçimini kullansın diye yapı burada tutulur.
   Tema yalnız --bilet-baslik-* değişkenlerini kendi paletiyle ezer.
   -------------------------------------------------------------------------- */
.page-head { padding: 2.4rem 0 1.6rem; position: relative; }
.page-head h1 {
    font-size: var(--bilet-baslik-boyut, clamp(1.7rem, 3.4vw, 2.5rem));
    font-weight: 800; letter-spacing: -.028em; line-height: 1.12;
    color: var(--bilet-baslik-renk, inherit);
    margin: .4rem 0 .5rem;
}
.page-lead {
    color: var(--bilet-baslik-alt-renk, #55677E);
    font-weight: 600; max-width: 44rem; margin: .5rem 0 0;
}

/* Sayfa yolu (breadcrumb) */
.page-crumbs { font-size: .86rem; font-weight: 600; color: var(--bilet-baslik-yol-renk, #55677E); margin-bottom: .2rem; }
.page-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.page-crumbs li + li::before { content: "›"; margin-right: .35rem; color: var(--bilet-baslik-yol-ayrac, #DEE7F1); font-weight: 800; }
.page-crumbs a { color: var(--bilet-baslik-yol-renk, #55677E); text-decoration: none; }
.page-crumbs a:hover { color: var(--bilet-baslik-yol-hover, #1C4682); }
.page-crumbs [aria-current] { color: var(--bilet-baslik-yol-aktif, #10233F); }

@media (max-width: 767px) {
    .page-head { padding-top: 1.6rem; padding-bottom: 1.2rem; }
}

/* Kredi kartı görseli — Views/Satis/PaymentSections/* */
.credit-card { background: var(--bilet-kredi-karti-zemin, linear-gradient(135deg, #000, #564f4f)); border-radius: 15px; padding: 20px; margin-bottom: 20px; color: #fff; font-size: .9rem; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
    .credit-card h5 { margin: 0; letter-spacing: 2px; }

/* Üyelik ekranlarında yapılandırma yüklenirken görünen bekleme göstergesi.
   Eskiden Login/Register view'larının içine ayrı ayrı gömülüydü. */
.cfg-loading { text-align: center; padding: 18px 0 26px; color: #8a93a6; font-size: .9rem; }
/* Bekleme halkası her üç ekranda da mavidir (eski davranış). Ekranın vurgu rengine
   uydurmak isteyen tema --bilet-auth-bekleme değişkenini ezebilir. */
.cfg-spinner { width: 38px; height: 38px; border: 4px solid #e5eaf3; border-top-color: var(--bilet-auth-bekleme, #2563eb); border-radius: 50%; margin: 0 auto 12px; animation: cfgspin .8s linear infinite; }
@keyframes cfgspin { to { transform: rotate(360deg); } }