/* ─── Breadcrumb Base ─────────────────────────────────────────── */
.breadcrumb {
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-6);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* ─── Breadcrumb Link ─────────────────────────────────────────── */
.breadcrumb-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-primary);
}

/* ─── Breadcrumb Separator ────────────────────────────────────── */
.breadcrumb-separator {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

.breadcrumb-separator svg {
    width: 14px;
    height: 14px;
}

/* ─── Breadcrumb Current ──────────────────────────────────────── */
.breadcrumb-current {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

/* ─── Breadcrumb Dark (koyu arka plan üzeri) ──────────────────── */
.breadcrumb-dark .breadcrumb-link {
    color: rgb(255 255 255 / 0.65);
}

.breadcrumb-dark .breadcrumb-link:hover {
    color: var(--color-white);
}

.breadcrumb-dark .breadcrumb-separator {
    color: rgb(255 255 255 / 0.4);
}

.breadcrumb-dark .breadcrumb-current {
    color: var(--color-accent);
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .breadcrumb-list {
        gap: var(--spacing-1);
    }

    .breadcrumb-link,
    .breadcrumb-current {
        font-size: var(--font-size-xs);
    }
}