/* ═══ Bugünküler — görsel kimlik ════════════════════════════════════════════
   Fikir: bu üründe asıl sınır ZAMAN. Her şey bugün bitmeli, teslim belli bir
   saat aralığında. İmza öğe "teslim bileti" (.bilet): saat aralığı delikli
   kenarlı bir bilet olarak, canlı durumuyla gösterilir.
   Renkler: gece mürekkebi + sokak lambası sarısı; aciliyet için domates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Yazı tipleri (sunucuda barınıyor; Google'a istek yok) ─────────────────── */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 500 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/bricolage-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 500 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/onest-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/onest-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Martian Mono";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("fonts/martian-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
}

/* ── Tokenlar ───────────────────────────────────────────────────────────── */
:root {
    --gece: #1E2140;
    --gece-2: #33386B;
    --fener: #FFB627;
    --fener-koyu: #E99E0A;
    --fener-acik: #FFF1D1;
    --domates: #E5482E;
    --domates-acik: #FDE9E4;
    --zemin: #F4F5F9;
    --kart: #FFFFFF;
    --tas: #6B6E80;
    --cizgi: #E1E3EC;

    --yazi-baslik: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
    --yazi-govde: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --yazi-sayi: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --yuvarlak: 14px;
    --alt-bar: 64px;

    /* Bootstrap'ın kendi değişkenleri: hazır bileşenler (formlar, hesap sayfaları) markayı alır */
    --bs-body-font-family: var(--yazi-govde);
    --bs-body-color: var(--gece);
    --bs-body-color-rgb: 30, 33, 64;
    --bs-body-bg: var(--zemin);
    --bs-emphasis-color: var(--gece);
    --bs-secondary-color: var(--tas);
    --bs-border-color: var(--cizgi);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--yuvarlak);
    --bs-link-color: #3B41B0;
    --bs-link-color-rgb: 59, 65, 176;
    --bs-link-hover-color: var(--gece);
    --bs-link-hover-color-rgb: 30, 33, 64;
    --bs-focus-ring-color: rgba(255, 182, 39, .5);
}

html, body {
    font-family: var(--yazi-govde);
    background: var(--zemin);
    color: var(--gece);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .baslik {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: -0.015em;
    color: var(--gece);
}

h1:focus { outline: none; }

/* ── Düğmeler ve form ───────────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: 10px; }

.btn-primary {
    --bs-btn-color: var(--gece);
    --bs-btn-bg: var(--fener);
    --bs-btn-border-color: var(--fener);
    --bs-btn-hover-color: var(--gece);
    --bs-btn-hover-bg: var(--fener-koyu);
    --bs-btn-hover-border-color: var(--fener-koyu);
    --bs-btn-active-color: var(--gece);
    --bs-btn-active-bg: var(--fener-koyu);
    --bs-btn-active-border-color: var(--fener-koyu);
    --bs-btn-disabled-color: var(--gece);
    --bs-btn-disabled-bg: var(--fener);
    --bs-btn-disabled-border-color: var(--fener);
}

.btn-outline-primary {
    --bs-btn-color: var(--gece);
    --bs-btn-border-color: var(--gece);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gece);
    --bs-btn-hover-border-color: var(--gece);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gece);
    --bs-btn-active-border-color: var(--gece);
}

.btn-gece {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--gece);
    --bs-btn-border-color: var(--gece);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gece-2);
    --bs-btn-hover-border-color: var(--gece-2);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gece-2);
}

.btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--gece);
    box-shadow: 0 0 0 3px var(--fener);
    outline: none;
}

.form-check-input:checked { background-color: var(--gece); border-color: var(--gece); }

a:focus-visible { outline: 3px solid var(--fener); outline-offset: 2px; border-radius: 4px; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--domates); }
.validation-message { color: var(--domates); }

.card { border-color: var(--cizgi); border-radius: var(--yuvarlak); }

.nav-pills {
    --bs-nav-link-color: var(--gece);
    --bs-nav-link-hover-color: var(--gece);
    --bs-nav-pills-link-active-bg: var(--gece);
    --bs-nav-pills-link-active-color: #fff;
}

/* ── Sayfa iskeleti ─────────────────────────────────────────────────────── */
.kap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.ust-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(244, 245, 249, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--cizgi);
}
.ust-bar__ic { display: flex; align-items: center; gap: 12px; height: 60px; }

.marka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--yazi-baslik);
    font-weight: 800;
    font-stretch: 85%;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: var(--gece);
    text-decoration: none;
}
.marka:hover { color: var(--gece); }
.marka svg { width: 30px; height: 22px; flex: none; }

.ust-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ust-nav a, .ust-nav button.ust-nav__dugme {
    color: var(--gece);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    padding: .45rem .7rem;
    border-radius: 8px;
    background: none;
    border: 0;
}
.ust-nav a:hover, .ust-nav button.ust-nav__dugme:hover { background: rgba(30, 33, 64, .06); }
.ust-nav a.active { background: var(--gece); color: #fff; }
.ust-nav .btn-primary { padding: .45rem .9rem; }

.sayfa { padding: 20px 0 40px; min-height: calc(100vh - 60px - 72px); }

.alt-bilgi {
    border-top: 1px solid var(--cizgi);
    color: var(--tas);
    font-size: .875rem;
    padding: 20px 0;
}
.alt-bilgi a { color: var(--tas); }

/* Telefonda uygulama gibi alt sekme çubuğu */
.alt-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    height: calc(var(--alt-bar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--kart);
    border-top: 1px solid var(--cizgi);
}
.alt-bar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--tas);
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
}
.alt-bar a svg { width: 24px; height: 24px; }
.alt-bar a.active { color: var(--gece); }
.alt-bar a.active::before {
    content: "";
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--fener);
}

@media (max-width: 767.98px) {
    .sayfa { padding-bottom: calc(var(--alt-bar) + env(safe-area-inset-bottom) + 24px); }
    .alt-bilgi { padding-bottom: calc(var(--alt-bar) + env(safe-area-inset-bottom) + 20px); }
    .ust-bar__ic { height: 56px; }
}

/* ── İmza: teslim bileti ────────────────────────────────────────────────── */
.bilet {
    --bilet-zemin: var(--fener-acik);
    --bilet-delik: var(--kart);
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px;
    background: var(--bilet-zemin);
    color: var(--gece);
    font-size: .8rem;
    line-height: 1.2;
    white-space: nowrap;
}
.bilet__saat {
    font-family: var(--yazi-sayi);
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: .38rem .6rem;
}
.bilet__durum {
    position: relative;
    padding: .38rem .6rem;
    font-weight: 600;
    border-left: 2px dashed rgba(30, 33, 64, .28);
}
/* Delikler: kesik çizginin üstünde ve altında yarım daireler */
.bilet__durum::before, .bilet__durum::after {
    content: "";
    position: absolute;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bilet-delik);
}
.bilet__durum::before { top: -5px; }
.bilet__durum::after { bottom: -5px; }

.bilet--acik { --bilet-zemin: var(--fener); }
.bilet--bitti { --bilet-zemin: #E9EAF0; color: var(--tas); }
.bilet--zeminde { --bilet-delik: var(--zemin); }

/* ── Ana sayfa: tanıtım ─────────────────────────────────────────────────── */
.giris { padding: 12px 0 8px; }
.giris__an {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--yazi-sayi);
    font-size: .78rem;
    font-weight: 500;
    color: var(--tas);
    margin-bottom: 14px;
}
.giris__an::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fener);
    box-shadow: 0 0 0 4px var(--fener-acik);
}
.giris__baslik {
    font-size: clamp(2.7rem, 10vw, 5.4rem);
    font-weight: 800;
    font-stretch: 78%;
    line-height: .94;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
}
.giris__baslik mark {
    padding: 0 .04em;
    color: inherit;
    background: linear-gradient(transparent 58%, var(--fener) 58%, var(--fener) 92%, transparent 92%);
}
.giris__metin { font-size: 1.1rem; max-width: 34rem; color: #3D4060; margin-bottom: 22px; }
.giris__eylem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.giris__durum { font-size: .9rem; color: var(--tas); margin: 14px 0 0; }

@media (min-width: 992px) {
    .giris--iki-sutun { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
}

/* Kalkış tablosu: istasyon panosu gibi, saatler sokak lambası sarısıyla */
.tablo {
    background: var(--gece);
    border-radius: 20px;
    padding: 24px 24px 12px;
    box-shadow: 0 24px 48px -28px rgba(30, 33, 64, .7);
}
.tablo__satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}
.tablo__satir:hover .tablo__yer { text-decoration: underline; }
.tablo__saat { font-family: var(--yazi-sayi); font-weight: 600; font-size: .95rem; color: var(--fener); letter-spacing: -0.02em; }
.tablo__yer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tablo__durum {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #A9ACC6;
}
.tablo__durum--acik { color: var(--gece); background: var(--fener); border-radius: 6px; padding: .15rem .45rem; }

.adimlar {
    list-style: none;
    padding: 0;
    margin: 36px 0 8px;
    display: grid;
    gap: 12px;
    counter-reset: adim;
}
@media (min-width: 768px) { .adimlar { grid-template-columns: repeat(3, 1fr); } }
.adimlar li {
    counter-increment: adim;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 16px 16px 16px 60px;
    position: relative;
}
.adimlar li::before {
    content: counter(adim);
    position: absolute;
    left: 16px; top: 16px;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gece);
    color: var(--fener);
    font-family: var(--yazi-sayi);
    font-weight: 600;
    font-size: .85rem;
}
.adimlar strong { display: block; font-family: var(--yazi-baslik); font-stretch: 88%; font-size: 1.1rem; margin-bottom: 2px; }
.adimlar span { color: var(--tas); font-size: .93rem; }

/* ── Paket listesi ──────────────────────────────────────────────────────── */
.liste-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 14px; }
.liste-bas h2 { font-size: 1.6rem; margin: 0; }
#paketler:first-child .liste-bas { margin-top: 4px; } /* tanıtım yoksa (giriş yapılmış) üst boşluk gereksiz */
.sayac {
    font-family: var(--yazi-sayi);
    font-size: .75rem;
    font-weight: 600;
    background: var(--gece);
    color: #fff;
    border-radius: 999px;
    padding: .2rem .55rem;
}
.arac-cubugu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.arac-cubugu .gorunum { margin-left: auto; }

/* minmax(0, 1fr): uzun bilet metni sütunu ekran dışına itmesin */
.paket-izgara { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .paket-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .paket-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.paket-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 16px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.paket-kart:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(30, 33, 64, .35); }
.paket-kart:focus-within { box-shadow: 0 0 0 3px var(--fener); }
.paket-kart__ust { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--tas); }
.paket-kart__mesafe { font-family: var(--yazi-sayi); font-weight: 600; color: var(--gece); white-space: nowrap; }
.paket-kart__baslik { font-size: 1.2rem; margin: 0; line-height: 1.2; }
.paket-kart__baslik a { color: inherit; text-decoration: none; }
.paket-kart__baslik a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* tüm kart tıklanır */
.paket-kart__baslik a:focus-visible { outline: none; }
.paket-kart__alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }

.fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fiyat__yeni { font-family: var(--yazi-baslik); font-weight: 800; font-stretch: 85%; font-size: 1.55rem; letter-spacing: -0.02em; }
.fiyat__eski { font-family: var(--yazi-sayi); font-size: .8rem; color: var(--tas); text-decoration: line-through; }
.fiyat__indirim {
    font-size: .75rem;
    font-weight: 700;
    color: var(--domates);
    background: var(--domates-acik);
    border-radius: 6px;
    padding: .1rem .4rem;
}
.kalan { font-size: .85rem; color: var(--tas); white-space: nowrap; }
.kalan--az { color: var(--domates); font-weight: 700; }

.bos-durum {
    background: var(--kart);
    border: 1px dashed var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 28px 20px;
    text-align: center;
    color: var(--tas);
}
.bos-durum strong { display: block; color: var(--gece); font-family: var(--yazi-baslik); font-stretch: 88%; font-size: 1.2rem; margin-bottom: 4px; }

.harita-kutu { border-radius: var(--yuvarlak); border: 1px solid var(--cizgi); overflow: hidden; }

/* ── İşletme çağrısı (koyu bant) ────────────────────────────────────────── */
.isletme-cagri {
    margin-top: 40px;
    background: var(--gece);
    color: #E7E8F2;
    border-radius: 20px;
    padding: 28px 22px;
    display: grid;
    gap: 16px;
    align-items: center;
}
@media (min-width: 768px) { .isletme-cagri { grid-template-columns: 1fr auto; padding: 36px 40px; } }
.isletme-cagri h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 6px; }
.isletme-cagri p { margin: 0; max-width: 36rem; }
.kucuk-baslik {
    font-family: var(--yazi-sayi);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fener);
    margin-bottom: 8px;
}

/* ── İşletmeler için sayfası ────────────────────────────────────────────── */
.ozellikler { display: grid; gap: 12px; margin: 12px 0 8px; }
@media (min-width: 768px) { .ozellikler { grid-template-columns: repeat(2, 1fr); } }
.ozellik { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: 18px; }
.ozellik h3 { font-size: 1.15rem; margin: 0 0 4px; }
.ozellik p { color: var(--tas); margin: 0; }

.sss details {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 14px 18px;
    margin-bottom: 8px;
}
.sss summary { font-weight: 600; cursor: pointer; }
.sss details p { color: var(--tas); margin: 10px 0 0; }

.bolum-baslik { font-size: 1.6rem; margin: 40px 0 6px; }

/* ── Üyelik ─────────────────────────────────────────────────────────────── */
.uyelik-kart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-left: 5px solid var(--gece);
    border-radius: var(--yuvarlak);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.uyelik-kart strong { display: block; font-family: var(--yazi-baslik); font-stretch: 88%; font-size: 1.1rem; }
.uyelik-kart span { color: var(--tas); font-size: .9rem; }
.uyelik-kart--deneme { border-left-color: var(--fener); }
.uyelik-kart--bitti { border-left-color: var(--domates); background: var(--domates-acik); }

.plan-izgara { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
@media (min-width: 768px) { .plan-izgara { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.plan-kart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 20px;
}
.plan-kart--vurgulu { border: 2px solid var(--gece); }
.plan-kart__ad { font-size: 1.3rem; margin: 0; }
.plan-kart__fiyat { display: flex; align-items: baseline; gap: 6px; }
.plan-kart__liste { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; font-size: .93rem; }
.plan-kart__liste li { padding-left: 22px; position: relative; }
.plan-kart__liste li::before {
    content: "";
    position: absolute;
    left: 2px; top: .45em;
    width: 12px; height: 7px;
    border-left: 2px solid var(--gece);
    border-bottom: 2px solid var(--gece);
    transform: rotate(-45deg);
}

.yonetim-sekmeler { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── Rezervasyon kodu ───────────────────────────────────────────────────── */
.teslim-kodu {
    font-family: var(--yazi-sayi);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: .18em;
    color: var(--gece);
}

@media (prefers-reduced-motion: reduce) {
    .paket-kart { transition: none; }
    .paket-kart:hover { transform: none; }
}

/* ── Şablondan kalanlar ─────────────────────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--fener-acik);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1040;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}
.blazor-error-boundary::after { content: "Bir hata oluştu."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}