/* ==========================================================================
   becayis.css — Becayiş Platformu Stilleri
   ========================================================================== */

/* ── Genel wrap ────────────────────────────────────────────────────────── */
.becayis-wrap,
.becayis-form-wrap,
.becayis-profil-wrap,
.becayis-detay-wrap {
    --color-primary: var(--mk-public-brand, var(--primary, #dc2626));
    --color-primary-dark: var(--mk-public-brand-strong, var(--primary-dark, #7f1d1d));
    --color-primary-soft: var(--mk-public-soft, var(--primary-light, #fef2f2));
    --color-border: var(--mk-public-border, var(--border-light, #e7e5e4));
    --color-surface: var(--mk-public-surface, var(--bg-surface, #fff));
    --color-bg: var(--mk-public-soft, var(--bg-base, #fafaf9));
    --color-text: var(--mk-public-ink, var(--text-primary, #1c1917));
    --color-text-muted: var(--mk-public-muted, var(--text-secondary, #57534e));
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.becayis-hero {
    background: linear-gradient(135deg, rgba(17, 24, 39, .96) 0%, rgba(39, 39, 42, .98) 52%, var(--color-primary-dark) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--mk-public-radius-lg, var(--radius-xl, 10px));
    padding: clamp(1.6rem, 3vw, 2.35rem);
    text-align: left;
    color: #fff;
    margin-bottom: 2rem;
    box-shadow: var(--mk-public-shadow-lg, 0 22px 55px rgba(15, 23, 42, .12));
}
.becayis-hero-inner {
    display: grid;
    gap: 1rem;
    max-width: none;
}
.hero-eyebrow {
    display: inline-block;
    justify-self: start;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    padding: .3rem .9rem;
    font-size: .85rem;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}
.becayis-hero h1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: .5rem 0;
    color: #fff;
}
.becayis-hero p {
    opacity: .9;
    max-width: 720px;
    margin: 0;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    justify-content: start;
    gap: .75rem;
    max-width: 780px;
    margin: .25rem 0 .5rem;
}
.hstat {
    min-height: 76px;
    padding: .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .09);
}
.hstat strong { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.hstat span   { font-size: .8rem; opacity: .8; }
.becayis-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1.6rem;
    background: #fff;
    color: var(--color-primary);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.btn-hero.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.6);
}
.btn-hero.btn-outline:hover { background: rgba(255,255,255,.1); }

/* ── Filtre bar ──────────────────────────────────────────────────────── */
.becayis-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    align-items: flex-end;
}
.becayis-filter-sentinel {
    height: 1px;
}
.alert-success.is-dismissing,
.alert-error.is-dismissing {
    opacity: 0;
    transition: opacity .4s ease;
}
.filter-group { display: flex; flex-direction: column; gap: .3rem; }
.filter-group label { font-size: .75rem; font-weight: 600; color: var(--color-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.filter-group select,
.filter-group input {
    padding: .5rem .75rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: .9rem;
    background: var(--color-bg, #f9fafb);
    min-width: 160px;
}
.filter-unvan input { min-width: 200px; }
.filter-search {
    flex: 1 1 260px;
}
.filter-search input {
    width: 100%;
    min-width: 240px;
}
.btn-filter {
    padding: .55rem 1.4rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.btn-filter-reset {
    padding: .55rem 1rem;
    color: var(--color-danger, #ef4444);
    text-decoration: none;
    font-size: .9rem;
}
.result-count { color: var(--color-text-muted, #6b7280); margin-bottom: 1rem; }
.result-count em { color: var(--color-primary); font-style: normal; font-weight: 600; }

/* ── Layout: liste + sidebar ─────────────────────────────────────────── */
.becayis-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) { .becayis-layout { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .becayis-hero-actions .btn-hero {
        flex: 1 1 100%;
    }
}

/* ── Listing grid ───────────────────────────────────────────────────── */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* ── Listing card ────────────────────────────────────────────────────── */
.listing-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: box-shadow .2s, border-color .2s;
}
.listing-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); border-color: var(--color-primary); }
.listing-card.is-urgent { border-left: 4px solid #ef4444; }
.listing-card.is-promoted { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }

/* Card head */
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card-user { display: flex; align-items: center; gap: .5rem; }
.card-user img  { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.card-user strong { display: block; font-size: .9rem; }
.card-user small  { color: var(--color-text-muted, #6b7280); font-size: .75rem; }
.badge-premium { font-size: .7rem; background: #fbbf24; color: #78350f; padding: .1rem .4rem; border-radius: 20px; }
.badge-urgent  { font-size: .75rem; background: #fee2e2; color: #991b1b; padding: .25rem .6rem; border-radius: 20px; font-weight: 600; }
.badge-promoted { font-size: .72rem; background: #ffedd5; color: #c2410c; padding: .18rem .45rem; border-radius: 20px; font-weight: 700; margin-left: .35rem; }

/* Route */
.card-route {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-bg, #f9fafb);
    border-radius: 8px;
    padding: .6rem .8rem;
}
.route-from, .route-to { flex: 1; }
.route-label { display: block; font-size: .7rem; color: var(--color-text-muted, #6b7280); margin-bottom: .15rem; }
.route-from strong, .route-to strong { font-size: .95rem; }
.route-from small, .route-to small   { color: var(--color-text-muted, #6b7280); font-size: .75rem; display: block; }
.route-arrow { font-size: 1.3rem; color: var(--color-primary); flex-shrink: 0; }
.tercih-iller { font-size: .85rem; color: var(--color-primary); }

/* Meta */
.card-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.card-meta span {
    font-size: .75rem;
    background: var(--color-bg, #f3f4f6);
    padding: .2rem .55rem;
    border-radius: 20px;
    color: var(--color-text, #374151);
}
.meta-kurum { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* Açıklama */
.card-aciklama { font-size: .85rem; color: var(--color-text-muted, #6b7280); line-height: 1.5; margin: 0; }

/* Card foot */
.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.view-count  { font-size: .75rem; color: var(--color-text-muted, #6b7280); }
.match-badge { font-size: .75rem; background: #d1fae5; color: #065f46; padding: .2rem .6rem; border-radius: 20px; }
.card-actions { display: flex; gap: .4rem; align-items: center; margin-left: auto; }

/* Favori butonu */
.btn-fav {
    background: none;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: .35rem .6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s;
}
.btn-fav:hover, .btn-fav.active { background: #fee2e2; border-color: #f87171; }

/* Detail link */
.btn-detail {
    padding: .4rem .9rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.btn-detail:hover { opacity: .88; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface, #fff);
    border: 2px dashed var(--color-border, #e5e7eb);
    border-radius: 12px;
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h3 { margin: 0 0 .5rem; }
.empty-state p  { color: var(--color-text-muted, #6b7280); }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.becayis-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.sidebar-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.2rem;
}
.sidebar-card h3 { font-size: .95rem; margin: 0 0 .8rem; }
.sidebar-cta { background: linear-gradient(135deg, var(--color-primary-soft), #f8fafc); }
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: .5rem; }
.btn-block:last-child { margin-bottom: 0; }

.top-list { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.top-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid var(--color-border, #f3f4f6);
    font-size: .87rem;
    counter-increment: rank;
}
.top-list li:last-child { border-bottom: none; }
.top-list li::before {
    content: counter(rank);
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: .5rem;
}
.top-list li a { flex: 1; text-decoration: none; color: var(--color-text, #374151); }
.top-list li a:hover { color: var(--color-primary); }
.top-list li span { color: var(--color-text-muted, #6b7280); font-size: .8rem; }

.how-it-works ol { padding-left: 1.2rem; margin: 0; }
.how-it-works li { font-size: .87rem; line-height: 1.6; color: var(--color-text, #374151); }
.how-it-works .note { font-size: .78rem; color: var(--color-text-muted, #6b7280); margin-top: .75rem; }

/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 1.5rem; }
.pagination a {
    padding: .5rem .9rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text, #374151);
    font-size: .9rem;
}
.pagination a.active,
.pagination a:hover { background: var(--color-primary); color: #fff; border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════
   İLAN EKLEME / DÜZENLEME FORMU
   ═══════════════════════════════════════════════════════════════════════ */
.form-page-header { margin-bottom: 1.5rem; }
.form-page-header h1 { margin: .3rem 0; }
.form-page-header p  { color: var(--color-text-muted, #6b7280); }
.back-link { color: var(--color-primary); text-decoration: none; font-size: .9rem; }

.alert-error, .alert-success {
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.alert-error   { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.alert-error p, .alert-success p { margin: 0; }

.becayis-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.form-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0;
}
.form-section legend {
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-text, #374151);
    padding: 0 .4rem;
}
.form-section-full { grid-column: 1 / -1; }

.form-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.form-row:last-child { margin-bottom: 0; }
.form-row label { font-size: .82rem; font-weight: 600; color: var(--color-text, #374151); }
.form-row select,
.form-row input[type="text"] {
    padding: .55rem .8rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: .9rem;
    background: var(--color-bg, #f9fafb);
}
.req { color: var(--color-danger, #ef4444); }
.hint { color: var(--color-text-muted, #6b7280); font-weight: 400; font-size: .8rem; }
.field-hint { color: var(--color-text-muted, #6b7280); font-size: .82rem; margin-bottom: .75rem; }

.form-checkboxes { gap: .5rem; }
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    cursor: pointer;
    font-size: .88rem;
}
.checkbox-label input { margin-top: .15rem; }
.checkbox-label small { color: var(--color-text-muted, #6b7280); font-size: .77rem; }
.urgent-check { color: #ef4444; }

/* İl seçici — chip tabanlı */
.il-selector { display: flex; flex-direction: column; gap: .75rem; }
.il-group-head {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: .3rem;
}
.il-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.il-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .7rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 20px;
    font-size: .82rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s;
    background: var(--color-bg, #f9fafb);
}
.il-chip input { position: absolute; opacity: 0; pointer-events: none; }
.il-chip:hover  { border-color: var(--color-primary); background: var(--color-primary-soft); }
.il-chip.selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.selected-summary {
    font-size: .85rem;
    color: var(--color-primary);
    min-height: 1.4em;
    margin-top: .5rem;
}

.form-row textarea {
    padding: .65rem .8rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: .9rem;
    resize: vertical;
    min-height: 100px;
    background: var(--color-bg, #f9fafb);
    font-family: inherit;
}
.char-counter { color: var(--color-text-muted, #6b7280); font-size: .78rem; }

.form-actions { display: flex; gap: .75rem; justify-content: flex-end; padding-top: .5rem; }
.btn-cancel {
    padding: .65rem 1.4rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    color: var(--color-text, #374151);
    text-decoration: none;
    font-size: .9rem;
}
.btn-submit {
    padding: .65rem 2rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-submit:hover { opacity: .88; }

/* ═══════════════════════════════════════════════════════════════════════
   PROFİL SAYFASI
   ═══════════════════════════════════════════════════════════════════════ */
.profil-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.profil-header h1 { margin: 0; }

.profil-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 800px) {
    .profil-layout { grid-template-columns: 1fr; }
    .my-chain-matches { grid-column: 1; }
}

.my-listings { display: flex; flex-direction: column; gap: .6rem; }
.my-listings h2, .my-matches h2 { font-size: 1.05rem; margin: 0 0 .8rem; }

.my-listing-item {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s;
}
.my-listing-item.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(127, 29, 29, .14); }
.listing-select-link { display: block; padding: .85rem 1rem; text-decoration: none; color: inherit; }
.mli-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.mli-il { font-weight: 700; font-size: .95rem; }
.mli-detail { font-size: .85rem; color: var(--color-text-muted, #6b7280); }
.mli-tercih { font-size: .8rem; color: var(--color-primary); margin-top: .2rem; }
.mli-foot { display: flex; justify-content: space-between; font-size: .75rem; color: var(--color-text-muted, #6b7280); margin-top: .4rem; }
.match-count { color: #059669; font-weight: 600; }
.new-badge { background: #ef4444; color: #fff; border-radius: 20px; padding: .1rem .45rem; font-size: .7rem; margin-left: .3rem; }

.status-badge { font-size: .72rem; padding: .2rem .55rem; border-radius: 20px; font-weight: 600; }
.status-active    { background: #d1fae5; color: #065f46; }
.status-passive   { background: #f3f4f6; color: #6b7280; }
.status-matched   { background: #fef3c7; color: #92400e; }
.status-completed { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.status-cancelled { background: #fee2e2; color: #991b1b; }

.mli-actions { display: flex; gap: .4rem; padding: .4rem .6rem; border-top: 1px solid var(--color-border, #f3f4f6); background: var(--color-bg, #f9fafb); }
.inline-form { display: inline; }

.btn-sm { padding: .3rem .65rem; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid; display: inline-block; }
.btn-sm:not(.btn-warn):not(.btn-ok):not(.btn-danger):not(.btn-link) { border-color: var(--color-border, #e5e7eb); color: var(--color-text, #374151); background: var(--color-surface, #fff); }
.btn-promote { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.btn-ok     { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.btn-warn   { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.btn-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.btn-link   { background: transparent; border-color: var(--color-border, #e5e7eb); color: var(--color-primary); }

/* Eşleşme kartları */
.match-list { display: flex; flex-direction: column; gap: 1rem; }
.match-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    position: relative;
}
.match-card.match-mutual { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.match-card.match-rejected { opacity: .55; }
.match-banner { border-radius: 6px; padding: .4rem .8rem; font-size: .82rem; font-weight: 600; margin-bottom: .75rem; }
.match-banner.mutual { background: #d1fae5; color: #065f46; }
.match-banner.new    { background: #fff7ed; color: #9a3412; }

.match-score-bar {
    background: var(--color-border, #e5e7eb);
    border-radius: 20px;
    height: 6px;
    position: relative;
    margin-bottom: .6rem;
}
.score-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #10b981, var(--color-primary));
    transition: width .4s;
}
.match-score-progress {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    appearance: none;
}
.match-score-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: transparent;
}
.match-score-progress::-webkit-progress-value,
.match-score-progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, var(--color-primary));
}
.match-score-bar span {
    position: absolute;
    right: 0;
    top: -1.3rem;
    font-size: .72rem;
    color: var(--color-text-muted, #6b7280);
}

.match-user { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.match-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.match-user strong { font-size: .9rem; }
.match-detail { font-size: .85rem; margin-bottom: .6rem; }
.match-route { color: var(--color-text, #374151); }
.match-route .arrow { margin: 0 .3rem; color: var(--color-primary); }
.match-route .target { color: var(--color-primary); font-weight: 600; }
.match-kadro { color: var(--color-text-muted, #6b7280); margin-top: .15rem; }
.match-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.accepted-label { font-size: .82rem; color: #059669; font-weight: 600; }
.rejected-note  { font-size: .82rem; color: var(--color-text-muted, #6b7280); }
.match-time { font-size: .72rem; color: var(--color-text-muted, #6b7280); }

/* Zincir becayis */
.my-chain-matches {
    grid-column: 2;
    margin-top: 1rem;
}
.chain-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}
.chain-section-head h2 {
    font-size: 1.05rem;
    margin: 0 0 .25rem;
}
.chain-section-head p {
    margin: 0;
    color: var(--color-text-muted, #6b7280);
    font-size: .86rem;
    line-height: 1.45;
}
.chain-section-head > span {
    flex: 0 0 auto;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    padding: .28rem .7rem;
    background: var(--color-surface, #fff);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 700;
}
.chain-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.chain-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.chain-card-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}
.chain-card-head strong {
    color: var(--color-text, #111827);
    font-size: .94rem;
}
.chain-card-head span {
    color: #059669;
    font-size: .82rem;
    font-weight: 800;
}
.chain-route-summary {
    border-radius: 8px;
    background: var(--color-bg, #f9fafb);
    color: var(--color-text-muted, #6b7280);
    font-size: .78rem;
    line-height: 1.45;
    padding: .5rem .65rem;
    margin-bottom: .75rem;
}
.chain-steps {
    display: grid;
    gap: .55rem;
}
.chain-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: .65rem;
    align-items: start;
    border: 1px solid var(--color-border, #eef2f7);
    border-radius: 10px;
    padding: .65rem;
    background: var(--color-bg, #f9fafb);
}
.chain-step.is-you {
    border-color: rgba(127, 29, 29, .35);
    background: linear-gradient(135deg, rgba(127, 29, 29, .08), rgba(255, 255, 255, .95));
}
.chain-position {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}
.chain-step-body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}
.chain-step-body strong {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-text, #111827);
    font-size: .9rem;
}
.chain-step-body em {
    border-radius: 999px;
    background: #fee2e2;
    color: var(--color-primary);
    padding: .08rem .42rem;
    font-style: normal;
    font-size: .68rem;
}
.chain-step-body span {
    color: var(--color-primary);
    font-weight: 700;
    font-size: .82rem;
}
.chain-step-body small {
    color: var(--color-text-muted, #6b7280);
    font-size: .76rem;
    line-height: 1.35;
}
.chain-note {
    margin: .75rem 0 0;
    color: var(--color-text-muted, #6b7280);
    font-size: .78rem;
    line-height: 1.45;
}
.chain-empty {
    border: 1px dashed var(--color-border, #e5e7eb);
    border-radius: 12px;
    background: var(--color-surface, #fff);
}

/* Favoriler */
.my-favorites { grid-column: 1 / -1; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.fav-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s;
}
.fav-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.fav-card strong { font-size: .9rem; }
.fav-card span   { font-size: .8rem; color: var(--color-text-muted, #6b7280); }
.fav-card small  { font-size: .78rem; color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   DETAY SAYFASI
   ═══════════════════════════════════════════════════════════════════════ */
.breadcrumb { font-size: .83rem; color: var(--color-text-muted, #6b7280); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb span { margin: 0 .35rem; }

.detay-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 840px) { .detay-layout { grid-template-columns: 1fr; } }

.detay-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
}
.urgent-banner { background: #fee2e2; color: #991b1b; text-align: center; padding: .5rem; font-weight: 700; font-size: .9rem; }

.detay-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--color-border, #f3f4f6); flex-wrap: wrap; gap: .75rem; }
.detay-user { display: flex; align-items: center; gap: .75rem; }
.detay-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.avatar-ph { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.avatar-ph.large { width: 52px; height: 52px; }
.detay-user h2 { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.detay-user small { color: var(--color-text-muted, #6b7280); font-size: .78rem; }

.detay-route {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f9ff, #f0fdf4);
    border-bottom: 1px solid var(--color-border, #f3f4f6);
}
.route-box { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.route-box-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted, #6b7280); }
.route-box strong { font-size: 1.1rem; }
.route-box .bolge { font-size: .78rem; color: var(--color-text-muted, #6b7280); }
.route-box.to .tercih-item { font-size: .95rem; display: block; }
.route-icon { font-size: 2rem; color: var(--color-primary); align-self: center; }

.detay-kadro { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--color-border, #f3f4f6); }
.kadro-item { display: flex; flex-direction: column; gap: .15rem; }
.kadro-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted, #6b7280); }
.kadro-item strong { font-size: .95rem; }
.kadro-item small  { color: var(--color-text-muted, #6b7280); font-size: .78rem; }

.detay-kosullar { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--color-border, #f3f4f6); }
.kosul { font-size: .8rem; background: #d1fae5; color: #065f46; padding: .25rem .7rem; border-radius: 20px; }

.detay-aciklama { padding: 1.25rem; border-bottom: 1px solid var(--color-border, #f3f4f6); }
.detay-aciklama h3 { font-size: .9rem; margin: 0 0 .5rem; }
.detay-aciklama p  { margin: 0; line-height: 1.7; color: var(--color-text, #374151); font-size: .9rem; }

.detay-footer { padding: .8rem 1.25rem; }
.detay-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--color-text-muted, #6b7280); }

/* Aside cards */
.detay-aside { display: flex; flex-direction: column; gap: 1rem; }
.aside-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}
.aside-card h3 { font-size: .95rem; margin: 0 0 .75rem; }
.aside-card p  { font-size: .87rem; color: var(--color-text-muted, #6b7280); margin: 0 0 .75rem; }
.aside-card hr { border: none; border-top: 1px solid var(--color-border, #f3f4f6); margin: .75rem 0; }
.aside-card .hint { font-size: .8rem; color: var(--color-text-muted, #9ca3af); }
.match-found { border-color: #10b981; }
.own-listing { border-color: var(--color-primary); }

.share-box { }
.share-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: .5rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: .4rem;
    cursor: pointer;
    border: none;
}
.share-btn.whatsapp { background: #25d366; color: #fff; }
.share-btn.twitter  { background: #000; color: #fff; }
.share-btn.copy     { background: var(--color-bg, #f3f4f6); color: var(--color-text, #374151); border: 1px solid var(--color-border, #e5e7eb); }

.becayis-not-found {
    max-width: 600px;
    padding-block: 4rem;
    text-align: center;
}

.bk-toast {
    position: fixed;
    z-index: 9999;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: .7rem 1.2rem;
    border-radius: 8px;
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    font-size: .88rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}
.bk-toast-error {
    background: #ef4444;
}
.bk-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Genel yardımcılar */
.btn-primary { display: inline-block; padding: .6rem 1.3rem; background: var(--color-primary); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: .9rem; }
.btn-primary:hover { opacity: .88; }
.btn-outline { display: inline-block; padding: .6rem 1.3rem; border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 8px; font-weight: 600; text-decoration: none; background: transparent; cursor: pointer; font-size: .9rem; }
.btn-outline:hover { background: var(--color-primary-soft); }

.empty-state-small { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted, #6b7280); }
.empty-state-small .empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* Responsive */
@media (max-width: 600px) {
    .becayis-hero { padding: 2rem 1rem; }
    .hero-stats { gap: 1rem; }
    .becayis-filter-bar { flex-direction: column; }
    .filter-group select, .filter-group input { min-width: unset; width: 100%; }
    .listing-grid { grid-template-columns: 1fr; }
    .my-chain-matches { grid-column: 1; }
    .chain-section-head { flex-direction: column; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .listing-card, .sidebar-card, .my-listing-item, .match-card, .chain-card, .chain-empty, .detay-card, .aside-card {
        background: var(--color-surface-dark, #1f2937);
        border-color: var(--color-border-dark, #374151);
    }
    .card-route { background: var(--color-bg-dark, #111827); }
    .il-chip    { background: var(--color-bg-dark, #111827); border-color: var(--color-border-dark, #374151); }
}