/* ==========================================================================
   FONT İMPORT - ESTETİK
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,700&display=swap');

/* ==========================================================================
   1. KART VE GÖRSEL SABİTLEYİCİLERİ
   ========================================================================== */
.glass-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
    background: #ffffff;
    width: 100%;
    height: 340px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dark .glass-card {
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px rgba(6, 182, 212, 0.15);
}

.place-card-img, .region-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   2. MODERN FLOATING GLASS BAR
   ========================================================================== */
.floating-glass-bar {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    pointer-events: none;
}

.floating-glass-bar span {
    color: #000000 !important;
    text-shadow: none !important;
}

.dark .floating-glass-bar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.dark .floating-glass-bar span {
    color: #000000 !important;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.dark .glass-effect {
    background: rgba(15, 23, 42, 0.8) !important;
}

/* ==========================================================================
   3. KATEGORİ CHİP BUTONLARI - SİYAH
   ========================================================================== */
.filter-chip {
    cursor: pointer; 
    padding: 0.5rem 1.2rem; 
    border-radius: 9999px; 
    font-size: 0.875rem; 
    font-weight: 600;
    transition: all 0.2s ease; 
    border: 1px solid rgba(0, 0, 0, 0.08); 
    background-color: rgba(255, 255, 255, 0.6); 
    color: #000000 !important;
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

.dark .filter-chip {
    border: 1px solid rgba(255, 255, 255, 0.08); 
    background-color: rgba(255, 255, 255, 0.6); 
    color: #000000 !important;
}

.filter-chip.active, 
.dark .filter-chip.active {
    background-color: #06b6d4 !important; 
    color: #0f172a !important; 
    border-color: #06b6d4 !important;
}

/* ==========================================================================
   4. MODAL ALANLARI
   ========================================================================== */
.custom-modal {
    position: fixed; 
    inset: 0; 
    background-color: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
}

.custom-modal.active { 
    opacity: 1; 
    pointer-events: auto; 
}

/* ==========================================================================
   5. GALERİ MODALI
   ========================================================================== */
#galleryModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#galleryModal.active {
    display: flex !important;
    opacity: 1;
}

#galleryModal .close-gallery-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#galleryModal .close-gallery-btn:active {
    transform: scale(0.95);
    background: rgba(239, 68, 68, 0.8);
}

.custom-gallery-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-gallery-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 70px;
}

.custom-gallery-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.custom-gallery-img.fade-in {
    opacity: 1;
    transform: scale(1);
}

.custom-gallery-img.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

#galleryModal .nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: #22d3ee !important;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 999999 !important;
    transition: all 0.3s ease !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#galleryModal .nav-arrow-left { left: 12px; }
#galleryModal .nav-arrow-right { right: 12px; }

#galleryModal .nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
    background: rgba(6, 182, 212, 0.7);
}

/* ==========================================================================
   6. DETAY MODALI
   ========================================================================== */
#detailModal .bg-white {
    max-width: 1100px;
}

#detailModal .grid {
    gap: 24px;
}

/* SAĞ TARAF YAZILARI - SİYAH */
#detailDescription,
#detailLocation,
#detailHours,
#detailFood,
#detailPrice,
#detailTransport,
#detailAccommodation,
#detailCategoryBadge,
#detailModal .info-item .value,
#detailModal .info-item .label,
#detailModal strong,
#detailModal b {
    color: #000000 !important;
}

/* BAŞLIK - TURKUAZ */
#detailTitle {
    color: #06b6d4 !important;
}

/* KATEGORİ BADGE */
#detailCategoryBadge {
    background: rgba(0, 0, 0, 0.08) !important;
}

.dark #detailCategoryBadge {
    background: rgba(255, 255, 255, 0.1) !important;
}

#detailModal .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

#detailModal .info-item {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 10px 14px;
}

#detailModal .info-item .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000000 !important;
    font-weight: 600;
}

#detailModal .info-item .value {
    font-size: 13px;
    font-weight: 600;
    color: #000000 !important;
    margin-top: 2px;
}

.dark #detailModal .info-item {
    background: rgba(255, 255, 255, 0.04);
}

/* KARANLIK MODDA SAĞ TARAF YAZILARI - SİYAH KALSIN */
.dark #detailDescription,
.dark #detailLocation,
.dark #detailHours,
.dark #detailFood,
.dark #detailPrice,
.dark #detailTransport,
.dark #detailAccommodation,
.dark #detailCategoryBadge,
.dark #detailModal .info-item .value,
.dark #detailModal .info-item .label,
.dark #detailModal strong,
.dark #detailModal b {
    color: #000000 !important;
}

.dark #detailTitle {
    color: #06b6d4 !important;
}

/* ==========================================================================
   7. DETAY BUTONLARI
   ========================================================================== */
.detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    flex: 1;
    min-width: 120px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color: #ffffff !important;
}

.detail-btn i {
    color: #ffffff !important;
    font-size: 15px;
}

.detail-btn.gallery {
    background: #06b6d4;
    color: #ffffff !important;
}
.detail-btn.gallery:active { transform: scale(0.97); }
.detail-btn.gallery i { color: #ffffff !important; }

.detail-btn.maps {
    background: #22c55e;
    color: #ffffff !important;
}
.detail-btn.maps:active { transform: scale(0.97); }
.detail-btn.maps i { color: #ffffff !important; }

.detail-btn.video {
    background: #ef4444;
    color: #ffffff !important;
}
.detail-btn.video:active { transform: scale(0.97); }
.detail-btn.video i { color: #ffffff !important; }

.detail-btn.website {
    background: #8b5cf6;
    color: #ffffff !important;
}
.detail-btn.website:active { transform: scale(0.97); }
.detail-btn.website i { color: #ffffff !important; }

/* ===== GALERİ BUTONU - TURKUAZ ZEMİN, BEYAZ YAZI ===== */
#galleryFromDetailBtn {
    background: #06b6d4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

#galleryFromDetailBtn:hover {
    background: #0891b2 !important;
    color: #ffffff !important;
    transform: scale(1.03);
}

#galleryFromDetailBtn:active {
    transform: scale(0.97);
}

#galleryFromDetailBtn i {
    color: #ffffff !important;
}

.dark #galleryFromDetailBtn {
    color: #ffffff !important;
}

.dark #galleryFromDetailBtn:hover {
    color: #ffffff !important;
}

#detailVideoContainer {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

#detailVideoContainer iframe,
#detailVideoContainer video {
    width: 100%;
    height: 100%;
    border: none;
}

#detailVideoContainer .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#map {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* ==========================================================================
   8. GERİ DÖN BUTONU - SİYAH
   ========================================================================== */
#backBtn {
    color: #000000 !important;
}

#backBtn i {
    color: #000000 !important;
}

.dark #backBtn {
    color: #000000 !important;
}

.dark #backBtn i {
    color: #000000 !important;
}

/* ==========================================================================
   9. HEADER FONT - ESTETİK
   ========================================================================== */
header .font-black {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: 1.5px !important;
}

header .font-black span {
    font-family: 'Playfair Display', serif !important;
    font-weight: 300 !important;
}

@media (max-width: 640px) {
    header .font-black {
        font-size: 1.1rem !important;
    }
    header .font-black span {
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   10. TOAST VE MOBİL YAN MENÜ
   ========================================================================== */
#mobileMenu { 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#mobileMenu.open { transform: translateX(0); }

#toast { 
    position: fixed; 
    bottom: 24px; 
    left: 50%; 
    transform: translateX(-50%) translateY(100px); 
    background-color: #0f172a; 
    color: #ffffff; 
    padding: 12px 24px; 
    border-radius: 50px; 
    font-size: 14px; 
    z-index: 1000; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   11. ARAMA ÇUBUĞU
   ========================================================================== */
#searchInput {
    color: #000000 !important;
}

#searchInput::placeholder {
    color: #9ca3af !important;
}

.dark #searchInput {
    color: #ffffff !important;
}

/* ==========================================================================
   12. HERO BAŞLIK - BEYAZ KALSIN
   ========================================================================== */
#heroBanner h1,
#heroBanner p {
    color: #ffffff !important;
}

/* ==========================================================================
   13. MOBİL UYUM
   ========================================================================== */
@media (max-width: 640px) {
    #galleryModal .custom-gallery-wrapper {
        padding: 0 10px;
    }
    
    #galleryModal .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    #galleryModal .nav-arrow-left { left: 6px; }
    #galleryModal .nav-arrow-right { right: 6px; }
    
    #galleryModal .close-gallery-btn {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    #detailModal .grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #detailModal .info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .detail-btn {
        font-size: 12px;
        padding: 10px 14px;
        min-width: 80px;
    }

    #detailModal .detail-btn-wrap {
        flex-wrap: wrap;
    }

    #detailModal .detail-btn-wrap .detail-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    #detailVideoContainer {
        aspect-ratio: 16/9;
    }

    #map {
        height: 160px;
    }
}

@media (max-width: 480px) {
    #detailModal .info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    #detailModal .info-item {
        padding: 6px 10px;
    }

    #detailModal .info-item .value {
        font-size: 11px;
    }

    .detail-btn {
        font-size: 11px;
        padding: 8px 10px;
    }

    #galleryModal .nav-arrow {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* ==========================================================================
   14. MOBİL TIKLAMA HATALARI İÇİN
   ========================================================================== */
button, 
.detail-btn, 
.nav-arrow,
.filter-chip,
.close-gallery-btn,
#galleryFromDetailBtn,
#mapsBtn,
#videoBtn,
#websiteBtn,
.glass-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}