﻿html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --theme-bordo: #8A2F2E;
    --theme-background: #EDE8DF;
}

.btn-theme {
    background-color: var(--theme-bordo);
    border-color: var(--theme-bordo);
    color: #fff;
}
.text-theme {
    color: var(--theme-bordo);
}

html, body {

    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background-color: var(--theme-background); /* her sayfada genel arka plan rengi */
    color: #fff; /* varsayılan metin rengi (kontrast) */
     
}
/*.prayer-text {
    color: #4a4a4a; 
    line-height: 1.6;
}

.prayer-head {
    color: #E51A21;
    line-height: 1.6;
}*/
.prayer-head {
    color: #E51A21  !important; /* TÜRKİYE kırmızısı */
    font-weight: 700;
}

.prayer-text {
    color: #4a4a4a !important;
    line-height: 1.6;
}


.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Container yapılarını sıfırla (tam genişlik) */
body, .container, .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}


/* Form alanları için placeholder hizalama */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Navbar arka planı */
.navbar {
    background-color: var(--theme-bordo);
    margin-bottom: 4px;
}

/* Görsellerin kenar boşluklarını tamamen kaldır */
img, .img-fluid {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* Footer görünümü */
footer {
    background-color: var(--theme-bordo);
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: relative;
    z-index: 10;
    margin-top: 40px;
}


#turkiyeMap path {
    fill: #cccccc;
    stroke: #ffffff;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.2s ease;
}

    #turkiyeMap path:hover {
        fill: var(--theme-bordo);
    }



#map-tooltip {
    position: absolute;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: #333;
    display: none;
    pointer-events: none;
    z-index: 9999;
    width: clamp(100px, 40vw, 320px);
    text-align: center;
}

    #map-tooltip .map-tooltip-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(2px, 1vw, 10px);
    }

    #map-tooltip img {
     
            object-fit: cover;
        border-radius: 6px; 
    }

    #map-tooltip .map-tooltip-text strong {
        display: block;
        font-size: clamp(5px, 1vw + 0.4rem, 17px);
        font-weight: bold;
        color: var(--theme-bordo);
        
    }


    #map-tooltip .map-tooltip-text span {
        font-size: clamp(6px, 1vw + 0.4rem, 17px);
        opacity: 0.7;
        gap: clamp(2px, 0.6vw, 8px);
    }

.city-hero {
    position: relative;
    z-index: 1;
}

.city-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.city-detail-wrapper {
    position: relative;
    z-index: 2;
    margin-top: -100px;
    padding-top: 35px;
    background: var(--theme-background);
    padding: 24px 20px;
    border-radius: 0;
    box-shadow: 0 -8px 16px rgba(0,0,0,0.18);
    min-height: calc(100vh + 120px);
}

@media (max-width: 576px) {
    .city-detail-wrapper {
        margin-top: -60px;
        min-height: calc(100vh + 60px);
    }
}

/* Resme hover yapınca büyüme efekti */
.zoomable {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

  

    .zoomable:hover {
        transform: scale(1.06);
        filter: brightness(1.2);
    }

.modal-backdrop.show {
    opacity: 0.85 !important; /* arka plan kararması */
}

.user-profile-card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}

.user-profile-header {
    background: linear-gradient(135deg, #7b1e3a, #9b2c4d);
    padding: 24px 32px;
}

.user-profile-card .label {
    font-size: 12px;
    color: #8b8b8b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.user-profile-card .value {
    font-size: 15px;
    font-weight: 500;
    color: #2b2b2b;
}

.user-profile-card .badge {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
}
html, body {
    height: 100%;
}

    body.layout-root {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

/* RenderBody alanı boşluğu doldursun */
.layout-main {
    flex: 1;
}

/* ekstra garanti */
.layout-footer {
    margin-top: auto;
}
.card.rounded-4 {
    border-radius: 1rem !important;
}

.input-group-text {
    min-width: 44px;
    justify-content: center;
}
/* intl-tel-input + Bootstrap input-group FIX */
.input-group .iti {
    flex: 1 1 auto;
    width: 1%;
}

    .input-group .iti input {
        width: 100%;
    }

/* Görsel hizalama */
.iti--allow-dropdown .iti__flag-container {
    margin-left: 0.5rem;
}

label.form-label {
    display: block !important;
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
}


