/* ══════════════════════════════════════════════════════════════
   GALLARDO GROUP — breadcrumb.css
   Evrensel Breadcrumb Navigasyonu
   Kullanım: Master'da otomatik yüklenir, tüm sayfalara uygulanır
   ══════════════════════════════════════════════════════════════ */

/* ── Kapsayıcı ──────────────────────────────────────────────── */
.breadcrumb-nav {
    width: 100%;
    background: rgba(11, 50, 109, 0.04);
    border-bottom: 1px solid rgba(11, 50, 109, 0.08);
    padding: 0;
    /* Navbar'ın (fixed, ~80px) altında kalır */
    margin-top: 80px;
    position: relative;
    z-index: 1;
}

/* Ana sayfada (hero section'ın hemen altında) breadcrumb gizlenir.
   Hero olan sayfalarda .breadcrumb-nav'ı gizlemek için
   sayfa bazlı class eklenebilir. Örnek: body.has-hero .breadcrumb-nav { display:none } */

/* ── Liste ──────────────────────────────────────────────────── */
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    max-width: 1400px;
}

    /* ── Öğeler ─────────────────────────────────────────────────── */
    .breadcrumb-list li {
        display: flex;
        align-items: center;
        font-size: 0.82rem;
        line-height: 1;
        white-space: nowrap;
    }

        /* Ayırıcı (›) */
        .breadcrumb-list li[aria-hidden="true"] {
            color: #adb5bd;
            margin: 0 0.5rem;
            font-size: 0.75rem;
            user-select: none;
            pointer-events: none;
        }

    /* ── Linkler ────────────────────────────────────────────────── */
    .breadcrumb-list a {
        color: #0b326d;
        text-decoration: none;
        font-weight: 500;
        padding: 0.2rem 0;
        border-bottom: 1px solid transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

        .breadcrumb-list a:hover {
            color: #14417d;
            border-bottom-color: #14417d;
        }

        /* Ana sayfa ikonu (opsiyonel) */
        .breadcrumb-list a[href="/"]::before {
            content: '';
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b326d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            flex-shrink: 0;
            margin-top: -1px;
        }

    /* ── Aktif sayfa (son öğe, link değil) ─────────────────────── */
    .breadcrumb-list li > span[itemprop="name"] {
        color: #495057;
        font-weight: 400;
        cursor: default;
    }

/* ── Koyu arka planlı hero içinde breadcrumb (overlay) ──────── */
/* Hero section'ın üstünde göstermek istiyorsanız:
   .breadcrumb-nav.breadcrumb-over-hero {
       position: absolute;
       top: 90px;
       background: transparent;
       border-bottom: none;
       margin-top: 0;
       z-index: 5;
   }
   .breadcrumb-nav.breadcrumb-over-hero .breadcrumb-list a { color: rgba(255,255,255,0.8); }
   .breadcrumb-nav.breadcrumb-over-hero .breadcrumb-list li > span { color: rgba(255,255,255,0.6); }
   .breadcrumb-nav.breadcrumb-over-hero li[aria-hidden="true"] { color: rgba(255,255,255,0.4); }
*/

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .breadcrumb-list {
        max-width: 100%;
        padding: 0.7rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .breadcrumb-nav {
        /* Mobil navbar ~72px */
        margin-top: 72px;
    }

    .breadcrumb-list {
        padding: 0.6rem 1.25rem;
        gap: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .breadcrumb-list::-webkit-scrollbar {
            display: none;
        }

        .breadcrumb-list li {
            font-size: 0.78rem;
            flex-shrink: 0;
        }

        /* Mobilde "Ana Sayfa" yerine sadece ev ikonu göster */
        .breadcrumb-list a[href="/"] span[itemprop="name"] {
            display: none;
        }
}

@media (max-width: 480px) {
    .breadcrumb-nav {
        margin-top: 68px;
    }

    .breadcrumb-list {
        padding: 0.55rem 1rem;
    }

        .breadcrumb-list li {
            font-size: 0.75rem;
        }

            .breadcrumb-list li[aria-hidden="true"] {
                margin: 0 0.35rem;
            }
}

@media (max-width: 360px) {
    .breadcrumb-nav {
        margin-top: 64px;
    }

    .breadcrumb-list {
        padding: 0.5rem 0.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   Hero section'ı olan sayfalarda breadcrumb'ın
   sayfayı aşağı itme sorunu:

   Hero'da margin-top: -100px gibi negatif değer
   kullanıldığında breadcrumb da yukarı kayar.
   Bu durumu önlemek için:
   ══════════════════════════════════════════════════════════════ */
.hero-section + .breadcrumb-nav,
.breadcrumb-nav + .hero-section {
    /* Hero ile breadcrumb birlikte kullanılmıyorsa bu kural işe yarar */
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   DARK VARIANT — Koyu arka plan için (opsiyonel, class ekle)
   Kullanım: <nav class="breadcrumb-nav breadcrumb-dark">
   ══════════════════════════════════════════════════════════════ */
.breadcrumb-dark {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

    .breadcrumb-dark .breadcrumb-list a {
        color: rgba(255, 255, 255, 0.85);
        border-bottom-color: transparent;
    }

        .breadcrumb-dark .breadcrumb-list a:hover {
            color: #ffffff;
            border-bottom-color: rgba(255, 255, 255, 0.5);
        }

        .breadcrumb-dark .breadcrumb-list a[href="/"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
        }

    .breadcrumb-dark .breadcrumb-list li > span[itemprop="name"] {
        color: rgba(255, 255, 255, 0.55);
    }

    .breadcrumb-dark .breadcrumb-list li[aria-hidden="true"] {
        color: rgba(255, 255, 255, 0.3);
    }