/* site-surface-card-gold-v2 — bir tık daha koyu tatlı altın, palet uyumlu */

:is(.browse-page, .listing-page-compact, .browse-panel) .browse-hero-card,
.browse-hero-card {
    --card-gold-cream: color-mix(in srgb, var(--gold-50) 58%, color-mix(in srgb, var(--primary) 14%, #efe3c6));
    --card-gold-honey: color-mix(in srgb, var(--primary) 20%, color-mix(in srgb, var(--accent-light) 12%, var(--gold-50)));
    --card-gold-border: color-mix(in srgb, var(--primary) 28%, var(--separator));
    --card-gold-border-soft: color-mix(in srgb, var(--primary) 17%, var(--separator));
    --card-gold-bg: linear-gradient(
        155deg,
        color-mix(in srgb, var(--surface) 72%, var(--card-gold-cream)),
        color-mix(in srgb, var(--card-gold-honey) 88%, var(--card-gold-cream))
    );
    --card-gold-panel: color-mix(in srgb, var(--surface) 68%, var(--card-gold-cream));
    --card-gold-footer: color-mix(in srgb, var(--primary-soft) 62%, var(--card-gold-cream));
    --card-gold-media: linear-gradient(
        168deg,
        color-mix(in srgb, var(--card-gold-honey) 75%, var(--card-gold-cream)),
        color-mix(in srgb, var(--primary) 22%, color-mix(in srgb, var(--accent-light) 10%, var(--gold-50)))
    );
    --card-gold-chip: linear-gradient(
        145deg,
        color-mix(in srgb, var(--surface) 82%, var(--card-gold-cream)),
        color-mix(in srgb, var(--card-gold-honey) 70%, var(--surface))
    );
    border: 1px solid var(--card-gold-border-soft) !important;
    background: var(--card-gold-bg) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 72%, var(--card-gold-cream)),
        0 4px 16px color-mix(in srgb, var(--primary) 10%, transparent);
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.browse-hero-card:hover {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--card-gold-honey) 72%, var(--surface)),
        color-mix(in srgb, var(--card-gold-honey) 95%, color-mix(in srgb, var(--primary) 10%, var(--gold-50)))
    ) !important;
    border-color: var(--card-gold-border) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 78%, var(--card-gold-cream)),
        0 6px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.browse-hero-card--applied {
    border-color: color-mix(in srgb, var(--primary) 32%, #22c55e 14%) !important;
}

.browse-hero-media {
    background: var(--card-gold-media) !important;
}

.browse-hero-media-fallback {
    background: var(--card-gold-media) !important;
    color: color-mix(in srgb, var(--gold-700) 88%, var(--accent-deep)) !important;
}

.browse-hero-card--venue .browse-hero-media-fallback,
.browse-hero-card--musician .browse-hero-media-fallback {
    background: var(--card-gold-media) !important;
}

.browse-hero-card-main,
.browse-hero-body {
    background: var(--card-gold-panel) !important;
}

.browse-hero-body {
    border-top: 1px solid var(--card-gold-border-soft) !important;
}

.browse-hero-card-footer {
    background: var(--card-gold-footer) !important;
    border-top: 1px solid var(--card-gold-border-soft) !important;
}

.browse-hero-name {
    color: var(--text);
}

.browse-hero-title {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--gold-700));
}

.browse-hero-subtitle,
.browse-hero-card-cta-price,
.browse-hero-listen-label {
    color: var(--gold-700) !important;
}

.browse-hero-city {
    color: color-mix(in srgb, var(--text-muted) 90%, var(--gold-700));
}

.browse-hero-city::before {
    background: var(--primary) !important;
    opacity: 0.9;
}

.browse-hero-tags span {
    background: var(--card-gold-chip) !important;
    border: 1px solid var(--card-gold-border-soft) !important;
    color: var(--gold-700) !important;
}

.browse-hero-badge {
    border: 1px solid var(--card-gold-border-soft) !important;
    background: color-mix(in srgb, var(--card-gold-honey) 65%, var(--surface)) !important;
    color: var(--gold-700);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.browse-hero-badge.badge-open {
    background: color-mix(in srgb, var(--primary-soft) 75%, var(--card-gold-cream)) !important;
    color: var(--gold-700) !important;
}

.browse-hero-badge.badge-accepted {
    background: color-mix(in srgb, #22c55e 16%, var(--card-gold-honey)) !important;
    border-color: color-mix(in srgb, #22c55e 30%, var(--card-gold-border-soft)) !important;
    color: color-mix(in srgb, #15803d 75%, var(--gold-700)) !important;
}

.browse-hero-badge.badge-pending,
.browse-hero-badge.badge-pending-review {
    background: color-mix(in srgb, var(--badge-warn-bg, rgba(234, 179, 8, 0.14)) 100%, var(--card-gold-cream) 40%) !important;
    color: var(--badge-warn-text, var(--gold-700)) !important;
}

.browse-hero-fav {
    background: color-mix(in srgb, var(--card-gold-honey) 70%, var(--surface)) !important;
    border: 1px solid var(--card-gold-border-soft);
    color: var(--gold-700);
}

.browse-hero-fav.is-faved {
    color: var(--primary);
}

.browse-hero-card-cta {
    background: color-mix(in srgb, var(--card-gold-honey) 58%, var(--surface)) !important;
    border: 1px dashed var(--card-gold-border-soft) !important;
    color: color-mix(in srgb, var(--text-muted) 85%, var(--gold-700));
}

.browse-hero-card-cta:hover {
    background: color-mix(in srgb, var(--primary-soft) 85%, var(--card-gold-cream)) !important;
    border-color: var(--card-gold-border) !important;
    border-style: solid !important;
    color: var(--gold-700) !important;
}

.browse-hero-card-cta--job {
    background: color-mix(in srgb, var(--primary-soft) 78%, var(--card-gold-honey)) !important;
    border: 1px solid var(--card-gold-border-soft) !important;
    border-style: solid !important;
}

.browse-hero-card-cta--job:hover {
    background: color-mix(in srgb, var(--primary-soft) 95%, var(--card-gold-cream)) !important;
    border-color: var(--card-gold-border) !important;
}

.browse-hero-listen {
    background: color-mix(in srgb, var(--primary-soft) 82%, var(--card-gold-honey)) !important;
    border: 1px solid var(--card-gold-border-soft);
}

.browse-hero-listen-icon {
    background: color-mix(in srgb, var(--primary) 24%, var(--card-gold-cream)) !important;
    color: var(--gold-700) !important;
}

/* —— Liste / Keşfet çevresi: kartlarla aynı palet —— */
.listing-page-compact .page-header-compact {
    border-bottom-color: color-mix(in srgb, var(--primary) 16%, var(--separator));
}

.listing-page-compact .page-header-compact h1,
.browse-panel .browse-solo-title,
.fav-section-title {
    color: var(--text);
    letter-spacing: -0.02em;
}

.fav-section-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--gold-700);
    margin: 0.85rem 0 0.45rem;
}

.listing-toolbar .btn-secondary {
    background: color-mix(in srgb, var(--card-gold-cream, var(--gold-50)) 45%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--separator)) !important;
    color: var(--gold-700) !important;
}

.browse-page .browse-filter-chip {
    border-color: color-mix(in srgb, var(--primary) 14%, var(--separator));
    background: color-mix(in srgb, var(--surface) 88%, var(--gold-50));
}

.browse-page .browse-filter-chip.is-active {
    background: color-mix(in srgb, var(--primary-soft) 88%, color-mix(in srgb, var(--primary) 10%, var(--gold-50))) !important;
    border-color: color-mix(in srgb, var(--primary) 30%, var(--separator)) !important;
}

.browse-page .browse-filter-chip.is-active .browse-filter-chip-label,
.browse-page .browse-filter-chip.is-active .browse-filter-chip-value {
    color: var(--gold-700) !important;
}

.browse-page .browse-tabs--musician {
    background: color-mix(in srgb, var(--card-gold-cream, var(--gold-50)) 35%, var(--fill-secondary)) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--separator));
}

.browse-page .browse-tabs--musician .browse-tab.active {
    background: color-mix(in srgb, var(--primary-soft) 80%, var(--card-gold-cream, var(--gold-50))) !important;
    color: var(--gold-700);
}

.browse-page .browse-map-preview {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-soft) 82%, color-mix(in srgb, var(--primary) 12%, var(--gold-50))),
        var(--bg)
    ) !important;
    border-color: color-mix(in srgb, var(--primary) 14%, var(--separator)) !important;
}

.musician-subnav a.is-active,
.musician-subnav .is-active {
    color: var(--gold-700);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--separator));
    background: color-mix(in srgb, var(--primary-soft) 70%, var(--gold-50));
}

/* Koyu tema */
:root[data-theme="dark"] .browse-hero-card {
    --card-gold-cream: color-mix(in srgb, var(--primary) 14%, var(--surface-2, var(--surface)));
    --card-gold-honey: color-mix(in srgb, var(--primary) 22%, var(--surface-2, var(--surface)));
    --card-gold-bg: linear-gradient(
        155deg,
        color-mix(in srgb, var(--surface) 94%, transparent),
        var(--card-gold-cream)
    );
    --card-gold-panel: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, var(--card-gold-cream));
    --card-gold-footer: color-mix(in srgb, var(--primary) 16%, var(--surface-2, var(--surface)));
    --card-gold-media: linear-gradient(
        168deg,
        color-mix(in srgb, var(--primary) 18%, var(--surface-2, var(--surface))),
        color-mix(in srgb, var(--primary) 10%, var(--surface))
    );
    --card-gold-chip: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 18%, var(--surface-2, var(--surface))),
        color-mix(in srgb, var(--primary) 10%, var(--surface))
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .browse-hero-card:hover {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--primary) 18%, var(--surface)),
        color-mix(in srgb, var(--primary) 12%, var(--surface-2, var(--surface)))
    ) !important;
}

:root[data-theme="dark"] .browse-hero-subtitle,
:root[data-theme="dark"] .browse-hero-card-cta-price,
:root[data-theme="dark"] .browse-hero-tags span,
:root[data-theme="dark"] .browse-hero-listen-label,
:root[data-theme="dark"] .fav-section-title {
    color: #f0d78c !important;
}

:root[data-theme="dark"] .browse-hero-title {
    color: color-mix(in srgb, var(--text-secondary) 80%, #f0d78c);
}

:root[data-theme="dark"] .listing-toolbar .btn-secondary {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-2, var(--surface))) !important;
    border-color: color-mix(in srgb, var(--primary) 20%, var(--separator)) !important;
    color: #f0d78c !important;
}