/* ==========================================
   1- DEĞİŞKENLER VE GENEL AYARLAR
   ========================================== */
:root {
    --font-body: 'Poppins', sans-serif;
    --female-primary: #ff63c1;
    --male-primary: #3b5998;
    --text-color: #333;
    --bg-color: #f4f1ea;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
}

h2 {
    font-size: 26px !important; 
    font-weight: 700;
    text-align: center;
    margin: 40px 0 20px 0;
    color: #444;
}

/* ==========================================
   2- FİLTRE BUTONLARI
   ========================================== */
.filter-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.filter-btn {
    padding: 10px 25px;
    border-radius: 50px;
    border: 2px solid #eee;
    background: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-all.active { background: #FF7A00; color: white; border-color: #FF7A00; }
.btn-male { border-color: var(--male-primary); color: var(--male-primary); }
.btn-male.active { background: var(--male-primary); color: white; }
.btn-female { border-color: var(--female-primary); color: var(--female-primary); }
.btn-female.active { background: var(--female-primary); color: white; }

/* ==========================================
   3- ANASAYFA GRID SİSTEMİ (6'LI)
   ========================================== 
.dog-grid-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
    padding: 20px !important;
    max-width: 1400px;
    margin: 0 auto;
} */


/* Masaüstü için 5'li düzen */
.dog-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr) !important; /* 6 yerine 5 yapıldı */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}


.dog-card {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
    border: 1px solid #eee;
}

.dog-card:hover { transform: translateY(-5px); }

.dog-card img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
}

.dog-id-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    z-index: 10;
}

.dog-card-info { padding: 15px 10px; text-align: center; }

.dog-name {
    font-size: 18px !important; /* İsim boyutu büyütüldü (Eski: 14px) */
    font-weight: 700 !important;
    margin: 5px 0 2px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* İsim ve ikon arası mesafe */
}

/* 2. KÖPEK CİNSİ (Küçültüldü) */
.dog-breed {
    font-size: 11px !important; /* Cins boyutu küçültüldü */
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
    font-weight: 400;
    letter-spacing: 0.3px; /* Daha temiz görünüm için karakter arası açıldı */
}

/* 3. KART İÇİNDEKİ GENEL HİZALAMA */
.dog-card-info {
    padding: 10px 5px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* İsim yanındaki cinsiyet ikonunun boyutu */
.dog-name .material-symbols-outlined {
    font-size: 20px !important; /* İkon boyutu büyütüldü (Eski: 16px) */
    font-variation-settings: 'FILL' 1, 'wght' 700; /* Daha belirgin olması için kalınlaştırıldı */
}

.text-male { color: var(--male-primary); }
.text-female { color: var(--female-primary); }
.icon-male { color: var(--male-primary); font-size: 16px !important; }
.icon-female { color: var(--female-primary); font-size: 16px !important; }

/* ==========================================
   4- MODAL (POP-UP) DÜZENİ
   ========================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Modal İçeriği Kapsayıcısı */
.modal-content {
    position: relative; /* Patilerin buna göre konumlanması için ŞART */
    background: white;
    width: 90%;
    max-width: 900px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}

/* MODAL İÇERİK - YAN YANA FORMAT  182. SATIRI KALDIR MODAL GÖRSELİ İLE BANA YUVA OL BUTONU AYNI HİZAYA GELİR */
.modal-body-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
/*    align-items: flex-start !important; */
}

.modal-image-container {
    flex: 0 0 45% !important;
}

.modal-image-container img {
    width: 100% !important;
    height: auto !important;
    border-radius: 15px !important; */
    object-fit: cover;
}

.modal-info-container {
    flex: 1 !important;
    text-align: left !important;
}


.modal-image-container img {
    width: 100% !important;
    height: auto !important;
    border-radius: 15px !important;
    object-fit: cover;
}

.modal-info-container {
    flex: 1 !important;
    text-align: left !important;
}




/* MODAL BİLGİ LİSTESİ */
.modal-details-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 20px 0 !important;
}

.modal-details-grid p { margin: 0; font-size: 14px; color: #555; }

/* NAVİGASYON (PATİLER) */
/* Navigasyon Butonları (Arka planı ve gölgeyi kaldırdık) */
.nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;      /* Beyaz yuvarlağı kaldırır */
    border: none !important;          /* Çerçeveyi kaldırır */
    box-shadow: none !important;      /* Gölgeyi kaldırır */
    width: auto !important;           /* Sabit genişliği iptal eder */
    height: auto !important;          /* Sabit yüksekliği iptal eder */
    cursor: pointer;
    z-index: 10005;
    padding: 0;
    outline: none;
}

/* Sol Pati Konumu */
.prev-btn {
    left: -70px; /* Modalın biraz dışında durması için */
}

/* Sağ Pati Konumu */
.next-btn {
    right: -70px;
}

/* Pati Görseli ve Renklendirme */
.pati-icon {
    width: 60px; /* İkon boyutunu buradan ayarlayabilirsin */
    height: auto;
    /* Saf #FF7A00 rengini siyah görsele uygulamak için en yakın filtre */
    filter: invert(56%) sepia(87%) saturate(3015%) hue-rotate(3deg) brightness(102%) contrast(106%);
    transition: all 0.3s ease;
}

/* Üzerine gelince efekt (İsteğe bağlı) */
.nav-btn:hover .pati-icon {
    filter: brightness(1.2) invert(56%) sepia(87%) saturate(3015%) hue-rotate(3deg);
    transform: scale(1.1);
}

/* Yön Çevirmeleri */
.pati-left {
    transform: scaleX(-1); /* Eğer paw.png sağa bakıyorsa bunu sola çevirir */
}
/* ==========================================
   5- RESPONSIVE
   ========================================== 
@media (max-width: 1100px) { .dog-grid-container { grid-template-columns: repeat(3, 1fr) !important; } }

@media (max-width: 900px) {
    .modal-body-layout { flex-direction: column !important; }
    .modal-image-container { max-width: 100% !important; flex: none !important; }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .modal-content { padding: 20px; }
}

@media (max-width: 600px) { .dog-grid-container { grid-template-columns: repeat(2, 1fr) !important; } } */

/* Tablet ve orta ekranlar için 3'lü düzen */
@media (max-width: 1024px) {
    .dog-grid-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobil cihazlar için 2'li veya tekli düzen */
@media (max-width: 768px) {
    .dog-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .dog-grid-container {
        grid-template-columns: 1fr !important;
    }
}

/* Mobil Görünüm: Patiler ekran dışına çıkmasın diye içeri alıyoruz */
@media (max-width: 1100px) {
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .pati-icon { 
        width: 45px; 
        filter: drop-shadow(0px 0px 5px rgba(255,255,255,0.8)); /* Mobilde okunurluk için hafif gölge */
    }
}


/* ==========================================
   MODAL PATİ NAVİGASYON DÜZELTME (Sadece Modal İçin)
   ========================================== */

/* 1. Beyaz yuvarlağı, gölgeyi ve sabit boyutları kaldır */
#dog-modal .modal-content .nav-btn {
    background: none !important;      /* Arka planı siler */
    border: none !important;          /* Çerçeveyi siler */
    box-shadow: none !important;      /* Gölgeyi siler */
    width: auto !important;           /* Sabit genişliği siler */
    height: auto !important;          /* Sabit yüksekliği siler */
    border-radius: 0 !important;      /* Yuvarlaklığı siler */
    padding: 0 !important;            /* İç boşluğu siler */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
   /* z-index: 10005; */
        z-index: 10010 !important;
}

/* 2. Patilerin Konumu */
#dog-modal .modal-content .prev-btn {
  /*  left: -70px;  Modalın sol dışına */
        left: 20px !important; /* Dışarıdaki -70px yerine içeriye 20px */
}

#dog-modal .modal-content .next-btn {
   /* right: -70px;  Modalın sağ dışına */
        right: 20px !important; /* Dışarıdaki -70px yerine içeriye 20px */
}

/* 3. Pati Görseli Ayarları (Boyut ve Renk) */
#dog-modal .modal-content .pati-icon {
    width: 60px; /* İstediğiniz boyuta göre ayarlayın */
    height: auto;
    display: block;
    /* Siyah paw.png'yi #FF7A00 (Turuncu) rengine boyar */
    filter: invert(56%) sepia(87%) saturate(3015%) hue-rotate(3deg) brightness(102%) contrast(106%);
    transition: all 0.3s ease;
}

/* 4. Yönlendirmeler (Görselin yukarı baktığını varsayarak) */

/* Sol Pati: Sola bakması için 90 derece sola döndür */
#dog-modal .modal-content .pati-left {
    transform: rotate(-90deg);
}

/* Sağ Pati: Sağa bakması için 90 derece sağa döndür */
#dog-modal .modal-content .pati-right {
    transform: rotate(90deg);
}

/* 5. Hover Efekti (Büyüme) */
#dog-modal .modal-content .nav-btn:hover .pati-icon {
    filter: brightness(1.1) invert(56%) sepia(87%) saturate(3015%) hue-rotate(3deg);
}

/* Sol patiyi hoverda hem yönünü koru hem büyüt */
#dog-modal .modal-content .nav-btn.prev-btn:hover .pati-left {
    transform: rotate(-90deg) scale(1.1);
}

/* Sağ patiyi hoverda hem yönünü koru hem büyüt */
#dog-modal .modal-content .nav-btn.next-btn:hover .pati-right {
    transform: rotate(90deg) scale(1.1);
}

/* Mobil Görünüm: Patileri içeri al */
@media (max-width: 1100px) {
    #dog-modal .modal-content .prev-btn { left: 10px; }
    #dog-modal .modal-content .next-btn { right: 10px; }
    #dog-modal .modal-content .pati-icon { width: 45px; }
}

/* Sol patiyi sola döndür */
.pati-left {
    transform: rotate(-90deg);
}

/* Sağ patiyi sağa döndür */
.pati-right {
    transform: rotate(90deg);
}

/* Hover durumunda yönlerini koruyarak büyüt */
.prev-btn:hover .pati-left {
    transform: rotate(-90deg) scale(1.1);
}

.next-btn:hover .pati-right {
    transform: rotate(90deg) scale(1.1);
}

/* Kapatma Butonunu Sağ Üst Köşeye Konumlandır */
#dog-modal .close-modal-btn {
    position: absolute !important;
    top: 15px !important;    /* Üstten boşluk */
    right: 20px !important;  /* Sağdan boşluk */
    left: auto !important;   /* Eğer soldan bir değer varsa iptal eder */
    margin: 0 !important;    /* Ortalamayı bozabilecek marginleri sıfırlar */
    font-size: 30px !important;
    line-height: 1 !important;
    color: #333 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10015 !important; /* Patilerin ve içeriğin üstünde kalması için */
}

/* Hover efekti (isteğe bağlı) */
#dog-modal .close-modal-btn:hover {
    color: #FF7A00 !important; /* Turuncu patilerle uyumlu olması için */
    transform: scale(1.1);
}

/* Mobil cihazlarda butonun parmakla basılabilmesi için hafif düzenleme */
@media (max-width: 768px) {
    #dog-modal .close-modal-btn {
        top: 10px !important;
        right: 15px !important;
        font-size: 35px !important;
    }

    
/* Görsel ve altındaki etiketi kapsayan alan */
.modal-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Cins Etiketi Genel Tasarımı */
.modal-breed-tag {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: white; /* Yazı rengi beyaz */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Cinsiyet Bazlı Renkler (Senin projenin renk kodlarına göre güncelleyebilirsin) */
.gender-male {
    background-color: #3b5998 !important; /* Erkek için mavi tonu */
}

.gender-female {
    background-color: #ff63c1 !important; /* Dişi için pembe tonu */
}

/* Modal düzeninin bozulmaması için (Eğer ekran daralırsa) */
@media (max-width: 768px) {
    .modal-body-layout {
        flex-direction: column;
    }
    .modal-breed-tag {
        margin-bottom: 20px;
    }
}
    
//* Resim Alanı */
.modal-image-container {
    position: relative !important; /* İçindeki absolute elemanı tutması için */
    display: block !important;    /* Flex'i iptal ettik ki alt alta dizilmesin */
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.modal-image-container img {
    width: 100%;
    display: block;
    height: auto;
}

/* Resmin Üzerindeki Renkli Bant */
.modal-breed-overlay {
    position: absolute !important;
    bottom: 0 !important;         /* Resmin en altına yapıştır */
    left: 0 !important;
    right: 0 !important;
    padding: 12px 5px !important;
    text-align: center;
    color: white !important;
    font-weight: 600;
    font-size: 16px;
    z-index: 10;
}

/* Cinsiyet Renkleri (Görseldeki gibi canlı tonlar) */
.bg-male {
    background-color: rgba(59, 89, 152, 0.85) !important; /* Mavi Bant */
}

.bg-female {
    background-color: rgba(255, 99, 193, 0.85) !important; /* Pembe Bant */
}

/* BANA YUVA OL BUTONU */
.adopt-btn-modal {
    display: block !important;
    background-color: #FF7A00 !important;
    color: white !important;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none !important;
    font-weight: bold;
    margin-top: 20px;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(255,122,0,0.2);
}

.adopt-btn-modal:hover {
    background-color: #e66e00 !important;
    transform: translateY(-2px);
}
    
    
    
/* ============================================================
   MODAL ÖZEL DÜZENLEME (BANT VE BUTON)
   ============================================================ */

/* 1. Resim Konteynırı: Flex'i bozup absolute düzeni sağlar */
.modal-image-container {
    position: relative !important;
    display: block !important; 
    width: 100% !important;
    max-width: 450px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    margin: 0 auto !important;
}

.modal-image-container img {
    width: 100% !important;
    display: block !important;
    height: auto !important;
    border-radius: 15px !important;
}

/* 2. Resmin Üzerindeki Renkli Cinsiyet Bandı */
.modal-breed-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 12px 0 !important;
    text-align: center !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    z-index: 10 !important;
    margin: 0 !important;
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

/* Cinsiyet Bazlı Bant Renkleri */
.bg-male { 
    background-color: rgba(59, 89, 152, 0.9) !important; /* Mavi */
}
.bg-female { 
    background-color: rgba(255, 99, 193, 0.9) !important; /* Pembe */
}

/* 3. Bana Yuva Ol Butonu (WhatsApp) */
.adopt-btn-modal {
    display: block !important;
    background-color: #FF7A00 !important; /* Turuncu */
    color: white !important;
    text-align: center !important;
    padding: 15px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    margin-top: 25px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3) !important;
}

.adopt-btn-modal:hover {
    background-color: #e66e00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(255, 122, 0, 0.4) !important;
}

/* 4. Patiler (Navigasyon) - Beyaz kutuyu siler */
#dog-modal .nav-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

#dog-modal .pati-icon {
    width: 60px !important;
    filter: invert(56%) sepia(87%) saturate(3015%) hue-rotate(3deg) brightness(102%) contrast(106%) !important;
}

/* 5. Kapatma Butonu (X) */
.close-modal-btn {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 10020 !important;
    color: #333 !important;
    font-size: 35px !important;
}

/* Mobil Uyumluluk */
@media (max-width: 900px) {
    .modal-body-layout {
        flex-direction: column !important;
    }
    .modal-image-container {
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    .nav-btn.prev-btn { left: 5px !important; }
    .nav-btn.next-btn { right: 5px !important; }
}