/* ===================================================
   HAYVANPAZARI.COM — Yeni Tema Sistemi v1.0
   Bu dosyayı kaldırarak eski görünüme dönebilirsiniz.
   =================================================== */

/* ── 1. Renk Sistemi ──────────────────────────────── */
:root {
    --brand-dark:    #064E3B;   /* navbar, drawer başlığı */
    --brand-main:    #059669;   /* birincil buton, fiyat, link hover */
    --brand-soft:    #D1FAE5;   /* badge arka planı, hafif vurgu */
    --brand-border:  #A7F3D0;   /* yeşil kenarlık */

    --accent:        #ea580c;   /* CTA (İlan Ver) turuncu vurgu */
    --accent-hover:  #c2410c;

    --danger:        #dc2626;   /* acil, hata */
    --gold:          #d97706;   /* premium, yıldız */

    --bg-page:       #f8fafc;   /* sayfa arka planı */
    --bg-card:       #ffffff;   /* kart arka planı */
    --bg-section:    #f1f5f9;   /* bölüm arka planı */

    --text-primary:  #111827;   /* başlık */
    --text-secondary:#4b5563;   /* ikincil metin */
    --text-muted:    #9ca3af;   /* zayıf metin */

    --border:        #e5e7eb;   /* kart kenarlığı */
    --border-focus:  #059669;

    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     14px;
    --radius-xl:     20px;

    --shadow-xs:     0 1px 3px rgba(0,0,0,.06);
    --shadow-sm:     0 2px 8px rgba(0,0,0,.08);
    --shadow-md:     0 4px 16px rgba(0,0,0,.10);

    --font-xs:       0.72rem;
    --font-sm:       0.84rem;
    --font-base:     1rem;
    --font-lg:       1.1rem;
    --font-xl:       1.25rem;
    --font-2xl:      1.5rem;
}

/* ── Dark Mode Override ───────────────────────────── */
[data-theme="dark"] {
    --bg-page:       #0f172a;
    --bg-card:       #1e293b;
    --bg-section:    #1e293b;
    --text-primary:  #f1f5f9;
    --text-secondary:#94a3b8;
    --text-muted:    #64748b;
    --border:        #334155;
    --shadow-xs:     0 1px 3px rgba(0,0,0,.3);
    --shadow-sm:     0 2px 8px rgba(0,0,0,.4);
    --shadow-md:     0 4px 16px rgba(0,0,0,.5);
    --bg-page-dark:  #0f172a;
}

/* ── 2. Sayfa Arka Planı & Temel ─────────────────── */
body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-base);
    -webkit-font-smoothing: antialiased;
}

/* Mobil alt nav yüksekliği kadar padding — içerik gizlenmesin */
@media (max-width: 767.98px) {
    body {
        padding-bottom: 72px !important;
    }
    /* Dark mode toggle yukarıya al */
    .theme-toggle {
        bottom: 88px !important;
    }
}

/* ── 3. Navbar Renk Birliği ───────────────────────── */
.navbar,
.mobile-top-bar,
.mobile-drawer-header {
    background-color: var(--brand-dark) !important;
    background-image: none !important;
}
[data-theme="dark"] .navbar,
[data-theme="dark"] .mobile-top-bar,
[data-theme="dark"] .mobile-drawer-header {
    background-color: #0d3320 !important;
}

/* ── 4. Bootstrap Renk Overrides ─────────────────── */
.btn-success, .btn-primary {
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-primary:hover {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}
.btn-outline-success, .btn-outline-primary {
    color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}
.btn-outline-success:hover, .btn-outline-primary:hover {
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
    color: #fff !important;
}
.text-primary { color: var(--brand-main) !important; }
.text-success  { color: var(--brand-main) !important; }
.bg-primary    { background-color: var(--brand-main) !important; }
.bg-success    { background-color: var(--brand-main) !important; }

/* İlan Ver butonu — öne çıkan yeşil CTA */
.btn-ilan-ver,
.bottom-nav-center {
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}
.bottom-nav-center:hover,
.bottom-nav-center.active {
    background-color: var(--brand-dark) !important;
}

/* ── 5. Kart Sistemi ─────────────────────────────── */
.card {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: box-shadow .2s ease, transform .15s ease !important;
}
.card:hover {
    box-shadow: var(--shadow-md) !important;
}
@media (max-width: 767.98px) {
    .card:active {
        transform: scale(0.985) !important;
        box-shadow: var(--shadow-xs) !important;
    }
}

/* ── 6. İlan Listesi Kartı ───────────────────────── */
.listing-card {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
}

/* Fotoğraf yüksekliği — mobilde daha büyük */
.listing-image-container {
    height: 165px !important;
    overflow: hidden;
    background: var(--bg-section, #f1f5f9);
}
@media (min-width: 768px) {
    .listing-image-container {
        height: 200px !important;
    }
}
.listing-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
    background: var(--bg-section, #f1f5f9);
}
.listing-card:hover .listing-image {
    transform: scale(1.03);
}

/* Kart içi padding sıkılaştırma — mobil */
.home-listing-card .card-body {
    padding: 0.6rem 0.65rem !important;
}
@media (min-width: 768px) {
    .home-listing-card .card-body {
        padding: 0.8rem !important;
    }
}

/* Kart başlığı */
.home-listing-title {
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
    margin-bottom: 0.3rem !important;
}

/* Fiyat */
.listing-price-label {
    font-size: var(--font-lg) !important;
    font-weight: 700 !important;
    color: var(--brand-main) !important;
    line-height: 1.2;
}

/* Şehir / Tarih */
.listing-city-label {
    font-size: var(--font-xs) !important;
    color: var(--text-muted) !important;
}
.listing-date-label {
    font-size: var(--font-xs) !important;
    color: var(--text-muted) !important;
}

/* Trust badge'lerini karttan kaldır — sadece ilan detayında göster */
.listing-card .trust-badges {
    display: none !important;
}

/* ── 7. Yeni İlan Rozeti — Sadece 48 saatte ───────── */
.new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--brand-main);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .3px;
    pointer-events: none;
}

/* Premium & Acil badge */
.premium-badge {
    background: linear-gradient(135deg, #d97706, #fbbf24) !important;
    color: #fff !important;
    font-size: var(--font-xs) !important;
}
.urgent-badge {
    background: var(--danger) !important;
    color: #fff !important;
    font-size: var(--font-xs) !important;
}

/* ── 8. Kategori Şeridi (Mobil) ──────────────────── */
.category-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.category-strip::-webkit-scrollbar { display: none; }

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 7px 13px;
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all .18s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 38px;
}
.cat-chip:hover,
.cat-chip.active {
    background: var(--brand-soft);
    border-color: var(--brand-main);
    color: var(--brand-dark);
    font-weight: 600;
}
.cat-chip i {
    font-size: 0.9rem;
}

/* ── 9. Hızlı Filtre Çipleri ─────────────────────── */
.home-quick-filter {
    border-radius: var(--radius-xl) !important;
    font-size: var(--font-sm) !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    border-width: 1.5px !important;
}

/* ── 10. Arama Bölümü ────────────────────────────── */
.search-section {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
}
.search-section .form-control,
.search-section .form-select {
    border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
    min-height: 44px !important;
    font-size: var(--font-base) !important;
}
.search-section .form-control:focus,
.search-section .form-select:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(5,150,105,.15) !important;
}
.search-section .input-group-text {
    border-color: var(--border) !important;
    background: var(--bg-section) !important;
}

/* ── 11. Alt Navigasyon Barı ─────────────────────── */
.bottom-nav {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.07) !important;
    height: 60px;
}
.bottom-nav-container {
    height: 60px;
    padding: 0 4px;
}
.bottom-nav-item {
    color: var(--text-muted) !important;
    padding: 6px 4px !important;
    border-radius: var(--radius-sm);
    min-width: 44px;
}
.bottom-nav-item.active {
    color: var(--brand-main) !important;
}
.bottom-nav-item:hover {
    color: var(--brand-main) !important;
    background: var(--brand-soft);
}
.bottom-nav-item i {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
}
.bottom-nav-item span {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
}

/* İlan Ver — ortadaki büyük buton */
.bottom-nav-center {
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
    border: none !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    border-radius: 50% !important;
    transform: translateY(-16px) !important;
    box-shadow: 0 4px 16px rgba(5,150,105,.35) !important;
}
.bottom-nav-center i {
    font-size: 1.45rem !important;
    color: #fff !important;
    margin-bottom: 0 !important;
}
.bottom-nav-center span {
    font-size: 0.62rem !important;
    color: #fff !important;
    margin-top: 1px;
}
.bottom-nav-center:hover,
.bottom-nav-center.active {
    background-color: var(--brand-dark) !important;
    color: #fff !important;
    transform: translateY(-18px) scale(1.04) !important;
}

/* ── 12. Bölüm Başlıkları ────────────────────────── */
.section-title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.3px;
}
@media (max-width: 767.98px) {
    .section-title { font-size: var(--font-lg); }
}

/* ── 13. Skeleton Loader ─────────────────────────── */
.skeleton-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.skeleton-img {
    height: 165px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton-img {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}
.skeleton-body {
    padding: 0.65rem;
}
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    margin-bottom: 8px;
}
[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.price { width: 45%; height: 16px; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 14. Footer ──────────────────────────────────── */
footer {
    background: var(--brand-dark) !important;
}
footer a { color: #6EE7B7 !important; }
footer a:hover { color: #fff !important; }

/* ── 15. İlan Detay Sayfası ──────────────────────── */
.listing-header {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.listing-title {
    color: var(--text-primary) !important;
}
.price-tag {
    background: var(--brand-main) !important;
}
.feature-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.feature-item:hover {
    border-color: var(--brand-main) !important;
}
.stats-badge {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
    border-color: var(--brand-border) !important;
}
.contact-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* ── 16. Form Genel ──────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    min-height: 44px;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important;
}
.form-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

/* ── 17. Toast Bildirimleri ──────────────────────── */
#hp-toast-container {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}
.hp-toast {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: var(--font-sm);
    font-weight: 500;
    color: #fff;
    box-shadow: var(--shadow-md);
    animation: toastIn .25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hp-toast.success { background: var(--brand-main); }
.hp-toast.danger  { background: var(--danger); }
.hp-toast.warning { background: var(--gold); color: #111; }
.hp-toast.info    { background: #0891b2; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 18. İstatistik Sayıları (Anasayfa) ───────────── */
.home-stat-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-main);
    line-height: 1;
}
.home-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── 19. PWA Install Banner ─────────────────────── */
.pwa-install-banner {
    padding: 8px 0;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-bottom: 1px solid #A7F3D0;
}
.pwa-install-card {
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pwa-install-icon img { display:block; }
.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pwa-install-text strong { font-size: .88rem; color: var(--brand-dark, #064E3B); }
.pwa-install-text small  { font-size: .72rem; color: var(--text-muted, #6b7280); }
.pwa-install-actions { display: flex; align-items: center; flex-shrink: 0; }

/* ── 20. Listing Share Buttons ──────────────────── */
.share-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.share-bar .btn { border-radius: 10px; font-size: .82rem; padding: 6px 14px; }
.share-bar .btn i { margin-right: 5px; }
.share-btn-whatsapp { background: #25D366; color: #fff; border: none; }
.share-btn-whatsapp:hover { background: #1da851; color: #fff; }
.share-btn-telegram { background: #0088cc; color: #fff; border: none; }
.share-btn-telegram:hover { background: #006fa3; color: #fff; }
.share-btn-x { background: #000; color: #fff; border: none; }
.share-btn-x:hover { background: #333; color: #fff; }
.share-btn-facebook { background: #1877F2; color: #fff; border: none; }
.share-btn-facebook:hover { background: #0b5fcc; color: #fff; }
.share-btn-copy { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.share-btn-copy:hover { background: #e5e7eb; color: #111; }
.share-btn-native { background: var(--brand-main, #059669); color: #fff; border: none; }
.share-btn-native:hover { background: var(--brand-dark, #064E3B); color: #fff; }