/*btn-animated-rainbow-neon*/

:root {
    --mainColor: #0b3d91;
    /*    --mainColor: #7950f2;*/
    /* --mainColor: #ff5a5f;*/
    --mainColor2: #2f5fb0;
    --mainColor3: #6f95d6;
}

.bg-mainColor {
    background: var(--mainColor2);
}

.c-mainColor {
    color: var(--mainColor3);
}

.form-check-input:checked {
    background: var(--mainColor2);
    color: var(--mainColor2);
}

.bi-none {
    background-image: none !important;
}

.btn-text-pro {
    position: relative;
    background: transparent;
    border: none;
    color: #343a40;
    font-weight: 500;
    padding: 8px 10px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
}

    /* hover’da hafif büyüme */
    .btn-text-pro:hover {
        color: var(--mainColor);
        transform: translateY(-1px);
    }

    /* 🧠 soft underline (fade-in) */
    .btn-text-pro::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3px;
        width: 0%;
        height: 2px;
        background: var(--mainColor);
        transition: all 0.3s ease;
        transform: translateX(-50%);
        opacity: 0;
    }

    .btn-text-pro:hover::after {
        width: 60%;
        opacity: 1;
    }

.btn-text-pro-v3 {
    position: relative;
    background: transparent;
    border: none;
    color: #495057;
    font-weight: 500;
    padding: 8px 10px;
    transition: color 0.25s;
}

    .btn-text-pro-v3:hover {
        color: #000;
    }

    /* 🔥 gradient underline */
    .btn-text-pro-v3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0%;
        height: 2px;
        background: linear-gradient(90deg, #ff5a5f, #4dabf7);
        transition: width 0.35s ease;
    }

    .btn-text-pro-v3:hover::after {
        width: 100%;
    }


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.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;
}

/*body {
    transform: scale(0.67);
    transform-origin: top left;
    width: 149.25%; 
}*/

/*.mt-100{
margin-top:100px;
}

.p-100 {
    padding-top: 100px;
}*/

.margin-top-100 {
    margin-top: -100px;
}

a {
    text-decoration: none;
}

.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;
}

/*INDEX*/
.hero {
    position: relative;
    height: 87vh;
    border-radius: 16px;
    overflow: hidden;
}

/* BACKGROUND LAYERS */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1.2s ease-in-out, transform 8s ease-in-out;
}

#bg1.hero-bg {
    background-image: url('/images/home/home1.jpg');
}

.hero-bg.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
}

.hero-bg.inactive {
    opacity: 0;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(120deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
    background-size: 200% 200%;
    animation: gradientMove 8s ease infinite;
    overflow: hidden;
}

    .hero-overlay::after {
        content: "";
        position: absolute;
        inset: -20% -40%;
        background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.06) 65%, transparent 100% );
        filter: blur(12px);
        animation: heroBlurWave 9s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes heroBlurWave {
    0%, 100% {
        transform: translateX(-25%) skewX(-8deg);
        opacity: 0.5;
        filter: blur(8px);
    }

    50% {
        transform: translateX(25%) skewX(-8deg);
        opacity: 0.85;
        filter: blur(16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-overlay::after {
        animation: none;
        display: none;
    }
}

/*SELECT FIX*/
/* SINGLE SELECT */
.select2-container .select2-selection--single {
    height: 48px !important;
    border-radius: 10px !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
}

.hero .select2-container--default .select2-selection--single {
    backdrop-filter: blur(6px);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #212529 !important;
}

/* COMMON */
.select2-selection__rendered {
    line-height: normal !important;
}

.select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}

.select2-dropdown {
    border-radius: 10px;
    overflow: hidden;
}

/* Z-INDEX FIX */
.select2-container {
    z-index: 9999;
}

.select2-container--open {
    z-index: 99999 !important;
}

/* MULTIPLE SELECT */
.select2-container--default .select2-selection--multiple {
    min-height: 48px;
    border-radius: 10px;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
}

    /* İç yapı */
    .select2-container--default .select2-selection--multiple .select2-search {
        width: 100%;
    }

    .select2-container--default .select2-selection--multiple .select2-search__field {
        width: 100% !important;
        margin-top: 0 !important;
        text-align: center;
        background: transparent !important;
        color: #000 !important; /* yazı rengi siyah */
    }

    /* SEÇİM VARSA sola yasla */
    .select2-container--default .select2-selection--multiple.has-selection .select2-search__field {
        text-align: left;
    }

    /* CUSTOM PLACEHOLDER (SİYAH) */
    .select2-container--default .select2-selection--multiple:before {
        content: "İlçe seç";
        color: #000; /* 🔥 istediğin gibi siyah */
        position: absolute;
        left: 12px;
        pointer-events: none;
    }

    /* seçim varsa placeholder gizle */
    .select2-container--default .select2-selection--multiple.has-selection:before {
        display: none;
    }

/* TAG (SEÇİLENLER) */
.select2-selection__choice {
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    border: none;
    color: white;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px !important;
}

/* CONTENT */
.hero-content {
    position: relative;
    z-index: 3;
    color: white;
    padding: 150px;
    animation: fadeUp 1s ease;
}

.hero-title {
    font-size: 44px;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.hero-sub {
    font-size: 18px;
    opacity: 0.9;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* SEARCH */
.hero-search {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 15px;
    margin-top: 80px;
    align-items: end;
}

.form-select {
    border-radius: 10px;
    padding: 12px;
}

.search-btn {
    width: 130px;
    font-weight: 600;
    transition: 0.2s;
}

/*    .search-btn:hover {
        transform: translateY(-2px);
    }*/

.popular-cities {
    padding-top: 40px;
}

.city-card {
    display: block;
    position: relative;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    background: #fff;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

    .city-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

.city-img {
    position: relative;
    overflow: hidden;
}

    .city-img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform .5s ease;
    }

.city-card:hover .city-img img {
    transform: scale(1.08);
}

.city-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-25deg);
}

.city-card:hover .city-img::after {
    animation: shine 1s;
}

.city-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .30);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.platform-stats {
    padding: 70px 0;
}

    .platform-stats h2 {
        font-size: 40px;
        font-weight: 700;
    }

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

/* LAYOUT >*/

/* NAVBAR */
.main-navbar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
    padding: 15px 0;
    z-index: 99999;
}

/* LOGO */
.brand-logo {
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* MENU */
.main-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #444;
    transition: 0.2s;
}

    .main-menu .nav-link:hover {
        color: #0d6efd;
    }

.logo-linear {
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    border: none;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    transition: 0.3s;
}

    .logo-linear:hover {
        background: linear-gradient(135deg, #0d6efd, #4dabf7);
        color: white
    }



.btn-main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 10px;
    transition: .3s;
}

    .btn-main:hover {
        box-shadow: 0 5px 15px rgba(13,110,253,0.3);
        color: white !important;
    }

    .btn-main::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
        transform: skewX(-25deg);
    }

    .btn-main:hover::after {
        animation: shine 0.8s ease;
    }

@keyframes shine {
    100% {
        left: 125%;
    }
}

.btn-linear-main {
    background: linear-gradient(135deg, #1864ab, #4dabf7);
}

.btn-main-dark {
    background: linear-gradient(135deg, #0b3d91, #1864ab);
    color: #fff;
}

.btn-main-soft {
    background: linear-gradient(135deg, #1864ab, #74c0fc);
    color: #fff;
}

.btn-main-electric {
    background: linear-gradient(135deg, #1864ab, #228be6, #4dabf7);
    background-size: 200% 200%;
    animation: blueFlow 5s ease infinite;
    color: #fff;
}

.btn-main-deep {
    background: linear-gradient(135deg, #0a2540, #1864ab, #4dabf7);
    color: #fff;
}

.btn-main-glass {
    background: linear-gradient(135deg, rgba(24,100,171,0.9), rgba(77,171,247,0.7));
    backdrop-filter: blur(6px);
    color: #fff;
}


@keyframes blueFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.btn-linear-blue-soft {
    background: linear-gradient(135deg, #1864ab, #74c0fc);
    color: #fff;
}

.btn-linear-red {
    background: linear-gradient(135deg, #ff5a5f, #ff7a7f) !important;
}

/* 🟠 ORANGE */
.btn-linear-orange {
    background: linear-gradient(135deg, #f76707, #ffa94d);
}

/* 🟢 GREEN */
.btn-linear-green {
    background: linear-gradient(135deg, #2f9e44, #69db7c);
}

/* ⚪ GRAY */
.btn-linear-gray {
    background: linear-gradient(135deg, #868e96, #ced4da);
}

.btn-linear-purple {
    background: linear-gradient(135deg, #ae3ec9, #da77f2);
}

/* 🔵 CYAN */
.btn-linear-cyan {
    background: linear-gradient(135deg, #15aabf, #66d9e8);
}

/* 🔷 INDIGO */
.btn-linear-indigo {
    background: linear-gradient(135deg, #3b5bdb, #748ffc);
}

/* 🌸 PINK */
/*.btn-linear-pink {
    background: linear-gradient(135deg, #e64980, #faa2c1);
}*/

/* 🟤 BROWN */
.btn-linear-brown {
    background: linear-gradient(135deg, #7950f2, #9775fa);
}

/* 🌊 TEAL */
.btn-linear-teal {
    background: linear-gradient(135deg, #0ca678, #63e6be);
}

/* 🧊 ICE */
/*.btn-linear-ice {
    background: linear-gradient(135deg, #e3fafc, #a5d8ff);
    color: #0b7285;
}*/

/* 🌑 DARK */
/*.btn-linear-dark {
    background: linear-gradient(135deg, #212529, #495057);
    color: #fff;
}*/

/* 🌈 RAINBOW */
/*.btn-linear-rainbow {
    background: linear-gradient(135deg, #ff6b6b, #f59f00, #40c057, #339af0, #845ef7);
    color: #fff;
}


.btn-linear-rainbow-soft {
    background: linear-gradient( 135deg, #ff9a9e, #fad0c4, #fad0c4, #fbc2eb, #a18cd1 );
    color: #fff;
}

.btn-linear-rainbow-vibrant {
    background: linear-gradient( 135deg, #ff0000, #ff7a00, #ffd000, #00d084, #0099ff, #7a00ff );
    color: #fff;
}

.btn-linear-rainbow-neon {
    background: linear-gradient( 135deg, #ff00cc, #ff0066, #ffcc00, #00ffcc, #0066ff, #cc00ff );
    color: #fff;
}

    .btn-linear-rainbow-neon:hover {
        box-shadow: 0 0 20px rgba(255,0,200,0.5);
    }

.btn-linear-rainbow-pastel {
    background: linear-gradient( 135deg, #ffd6e0, #ffe5b4, #d4f8e8, #cde7ff, #e4c1f9 );
    color: #555;
}*/
/*
.btn-linear-rainbow-dark {
    background: linear-gradient( 135deg, #ff4d4d, #ff9900, #33cc33, #3399ff, #9933ff );
    color: #fff;
}

.btn-linear-rainbow-animated {
    background: linear-gradient( 270deg, #ff0000, #ff7a00, #ffd000, #00d084, #0099ff, #7a00ff );
    background-size: 1200% 120%;
    color: #fff;
    animation: rainbowMove 6s linear infinite;
}

@keyframes rainbowMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


.btn-animated-rainbow2 {
    background: linear-gradient(270deg, #ff6b6b, #f59f00, #40c057, #339af0, #845ef7 );
    background-size: 1200% 120%;
    color: #fff;
    animation: rainbowMove2 6s ease infinite;
}

@keyframes rainbowMove2 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.btn-animated-smoke {
    background: linear-gradient(120deg, #2b2d42, #4a4e69, #9a8c98, #c9ada7, #f2e9e4 );
    background-size: 300% 300%;
    color: #fff;
    animation: smokeFlow 8s ease-in-out infinite;
}

@keyframes smokeFlow {
    0% {
        background-position: 0% 50%;
        filter: blur(0px);
    }

    50% {
        background-position: 100% 50%;
        filter: blur(0.5px);
    }

    100% {
        background-position: 0% 50%;
        filter: blur(0px);
    }
}*/

.btn-animated-ocean {
    background: linear-gradient(270deg, #00b4d8, #0077b6, #90e0ef, #48cae4, #0096c7 );
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}

    .btn-animated-ocean:hover {
        color: white;
    }


/*
.btn-animated-rainbow {
    background: linear-gradient(135deg, #ff6b6b, #f59f00, #40c057, #339af0, #845ef7);
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}

.btn-animated-rainbow-vibrant {
    background: linear-gradient( 135deg, #ff0000, #ff7a00, #ffd000, #00d084, #0099ff, #7a00ff );
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}

.btn-animated-galaxy2 {
    background: linear-gradient(270deg, #10002b, #240046, #3c096c, #5a189a, #7b2cbf, #9d4edd );
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}*/

.btn-animated-rainbow-neon {
    background: linear-gradient( 135deg, #ff00cc, #ff0066, #ffcc00, #00ffcc, #0066ff, #cc00ff );
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}

/*.btn-animated-cyan {
    background: linear-gradient(135deg, #15aabf, #66d9e8);
    background-size: 400% 400%;
    color: #fff;
    animation: oceanFlow 7s ease infinite;
}*/

@keyframes oceanFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*.btn-animated-fire {
    background: linear-gradient(270deg, #ff0000, #ff6b00, #ffb703, #fb8500, #ff2e63 );
    background-size: 300% 300%;
    color: #fff;
    animation: fireFlow 5s ease infinite;
}

@keyframes fireFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.btn-animated-galaxy {
    background: linear-gradient(270deg, #10002b, #240046, #3c096c, #5a189a, #7b2cbf, #9d4edd );
    background-size: 500% 500%;
    color: #fff;
    animation: galaxyFlow 9s ease infinite;
}

@keyframes galaxyFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.btn-animated-liquid {
    background: linear-gradient(270deg, #ffafcc, #bde0fe, #a2d2ff, #cdb4db, #ffc8dd );
    background-size: 400% 400%;
    color: #333;
    animation: liquidFlow 10s ease-in-out infinite;
}

@keyframes liquidFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
*/
/* ICON LINK */
.icon-link {
    font-size: 18px;
}

/* USER DROPDOWN */
.user-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* MODERN DROPDOWN */
.modern-dropdown {
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

    .modern-dropdown .dropdown-item {
        border-radius: 8px;
        padding: 8px 12px;
    }

        .modern-dropdown .dropdown-item:hover {
            background: #f5f7fa;
        }


.main-content {
    min-height: 75vh;
    padding-top: 90px;
}

.navbar-brand {
    font-weight: 700;
}

.user-menu img {
    border: 2px solid #eee;
}

.footer-main {
    background: #0f172a;
    color: #cbd5e1;
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: 10px;
}

    .footer-main h5,
    .footer-main h6 {
        color: white;
        margin-bottom: 15px;
    }

    .footer-main ul {
        list-style: none;
        padding: 0;
    }

        .footer-main ul li {
            margin-bottom: 8px;
        }

            .footer-main ul li a {
                color: #cbd5e1;
                text-decoration: none;
            }

                .footer-main ul li a:hover {
                    color: white;
                }

.social-icons i {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
}

.dropdown-menu {
    border-radius: 10px;
    padding: 10px;
}

.dropdown-item {
    padding: 10px;
    border-radius: 6px;
}

    .dropdown-item:hover {
        background: #f1f5f9;
    }



/* MOBILE MENU FIX */

@media (max-width: 991px) {

    .main-navbar {
        height: auto;
    }

    .main-menu {
        margin-top: 15px;
    }

    .user-menu-wrapper {
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .w-mobile {
        width: 100%;
    }

    .mb-mobile {
        margin-bottom: 12px;
    }

    .icon-mobile a {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dropdown-menu {
        width: 100%;
    }
}

/*HOME INDEX*/





/* LISTING >>*/

.latest-listings {
    padding: 80px 0;
}

.search-listings {
    padding: 20px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-weight: 600;
}

    .section-header h2 {
        font-size: 28px;
        font-weight: 600;
    }

.see-all {
    color: #f58242;
    text-decoration: none;
    font-weight: 500;
}

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.listing-grid-380 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 25px;
}

.listing-card {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

    .listing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

/* IMAGE GLOW EFFECT */
.listing-img {
    position: relative;
    overflow: hidden;
}

    .listing-img img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: transform .5s ease;
    }

.listing-card:hover img {
    transform: scale(1.08);
}

/* SHINE EFFECT */
.listing-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.5), transparent );
    transform: skewX(-25deg);
}

.listing-card:hover .listing-img::after {
    animation: shine 1s;
}

.listing-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: #4caf50;
    color: white;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 6px;
}

    .listing-badge.red {
        background: rgb(255, 90, 95);
    }

    .listing-badge.orange {
        background: #f58242;
    }

.listing-body {
    padding: 15px;
    height: 155px;
}

    .listing-body h5 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #333;
    }

    .listing-body p {
        color: #777;
        font-size: 14px;
    }

.listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.price {
    font-weight: 600;
    font-size: 16px;
    color: #2c3e50;
}

.meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #777;
}

    .meta i {
        margin-right: 4px;
    }

.time {
    white-space: nowrap;
}

/* BLOG >>*/

.latest-blog {
    padding: 0 0 80px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 25px;
}

.blog-card {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .blog-card a {
        display: block;
        text-decoration: none;
        color: inherit;
    }

.blog-img {
    position: relative;
    overflow: hidden;
}

    .blog-img img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: transform .5s ease;
    }

.blog-card:hover .blog-img img {
    transform: scale(1.08);
}

.blog-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-25deg);
}

.blog-card:hover .blog-img::after {
    animation: shine 1s;
}

.blog-body {
    padding: 15px;
}

    .blog-body h3 {
        font-size: 16px;
        margin-bottom: 6px;
        color: #333;
        font-weight: 600;
    }

    .blog-body p {
        color: #777;
        font-size: 14px;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 40px;
    }

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #777;
}

    .blog-footer .meta {
        display: flex;
        gap: 10px;
    }

        .blog-footer .meta span {
            white-space: nowrap;
        }

.blog-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.blog-favorite-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all .3s ease;
    overflow: hidden;
}

    .blog-favorite-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

.blog-favorite-img {
    flex: 0 0 110px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

    .blog-favorite-img img {
        width: 110px;
        height: 90px;
        object-fit: cover;
        transition: transform .4s ease;
    }

.blog-favorite-card:hover .blog-favorite-img img {
    transform: scale(1.06);
}

.blog-favorite-body {
    flex: 1;
    min-width: 0;
}

/* BLOG INDEX TOPS >>*/

.blog-top-panel {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    height: 100%;
}

.blog-top-panel-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.blog-top-item {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background .2s ease, transform .2s ease;
}

    .blog-top-item:hover {
        background: #f8fafc;
        transform: translateX(3px);
    }

.page-top-band-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-top-thumb {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

    .blog-top-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

.blog-top-item:hover .blog-top-thumb img {
    transform: scale(1.08);
}

.blog-top-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-top-info {
    flex: 1;
    min-width: 0;
}

.blog-top-commenter {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 4px;
}

.blog-top-commenter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-top-commenter-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.blog-search-bar {
    border-radius: 14px;
    border: none;
}

/* SEARCH / BLOG SIDE RAILS + ACCOUNT SUBNAV */

:root {
    --search-rail-width: 196px;
    --search-filters-width: 300px;
}

.search-page-layout,
.blog-page-layout {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.search-page-layout {
    grid-template-columns: var(--search-filters-width) minmax(0, 1fr);
}

.search-filters-col {
    grid-column: 1;
    width: var(--search-filters-width);
    max-width: 100%;
}

.search-results-col {
    grid-column: 2;
    min-width: 0;
}

.search-page-layout--with-rails {
    grid-template-columns: minmax(0, 1fr) var(--search-rail-width) var(--search-filters-width) minmax(0, 2fr) var(--search-rail-width) minmax(0, 1fr);
}

    .search-page-layout--with-rails .search-rail--left {
        grid-column: 2;
    }

    .search-page-layout--with-rails .search-filters-col {
        grid-column: 3;
    }

    .search-page-layout--with-rails .search-results-col {
        grid-column: 4;
    }

    .search-page-layout--with-rails .search-rail--right {
        grid-column: 5;
    }

.search-rail {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
}

    .search-rail .blog-top-panel {
        height: auto;
    }

.blog-page-layout {
    grid-template-columns: minmax(0, 1fr);
}

.blog-page-main {
    grid-column: 1;
    min-width: 0;
}

.blog-page-layout--with-rails {
    grid-template-columns: minmax(0, 1fr) var(--search-rail-width) minmax(0, 3fr) var(--search-rail-width) minmax(0, 1fr);
}

    .blog-page-layout--with-rails .search-rail--left {
        grid-column: 2;
    }

    .blog-page-layout--with-rails .blog-page-main {
        grid-column: 3;
    }

    .blog-page-layout--with-rails .search-rail--right {
        grid-column: 4;
    }

.blog-search-toolbar .form-control,
.blog-search-toolbar .form-select {
    min-height: 38px;
}

.account-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8ecef;
}

    .account-subnav a {
        color: #5c6570;
        font-weight: 500;
        text-decoration: none;
        padding: 4px 0;
        border-bottom: 2px solid transparent;
        transition: color .2s ease, border-color .2s ease;
    }

        .account-subnav a:hover {
            color: black
        }

/*        .account-subnav a.active {
            color: #f58242;
            border-bottom-color: #f58242;
        }*/

@media (max-width: 1399.98px) {
    .search-page-layout--with-rails,
    .search-page-layout {
        grid-template-columns: var(--search-filters-width) minmax(0, 1fr);
    }

    .search-rail {
        display: none !important;
    }

    .search-page-layout--with-rails .search-filters-col,
    .search-filters-col {
        grid-column: 1 !important;
    }

    .search-page-layout--with-rails .search-results-col,
    .search-results-col {
        grid-column: 2 !important;
    }

    .blog-page-layout--with-rails {
        grid-template-columns: minmax(0, 1fr);
    }

        .blog-page-layout--with-rails .blog-page-main {
            grid-column: 1 !important;
        }
}

@media (max-width: 767.98px) {
    .search-page-layout,
    .search-page-layout--with-rails {
        grid-template-columns: minmax(0, 1fr);
    }

        .search-filters-col,
        .search-results-col,
        .search-page-layout--with-rails .search-filters-col,
        .search-page-layout--with-rails .search-results-col {
            grid-column: 1 !important;
            width: 100%;
        }
}

/* BLOG DETAIL >>*/

.blog-detail-page {
    padding-top: 16px;
    padding-bottom: 60px;
}

.blog-breadcrumb {
    margin-bottom: 16px;
}

.blog-detail-hero {
    margin-bottom: 28px;
}

.blog-detail-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.blog-detail-lead {
    color: #666;
    font-size: 1.05rem;
}

.blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #777;
    font-size: 14px;
    margin-bottom: 20px;
}

.blog-cover-card {
    background: #fff;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}

.blog-cover-card--wide .blog-detail-cover-img img {
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 420px;
    object-fit: cover;
}

.blog-detail-hero-block {
    margin-bottom: 24px;
}

.blog-author-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.blog-sidebar-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.blog-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-detail-cover-img {
    border-radius: 10px;
}

    .blog-detail-cover-img img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        display: block;
        border-radius: 10px;
    }

.blog-action-bar--full {
    width: 100%;
}

.blog-action-group--spread {
    width: 100%;
    justify-content: stretch;
}

    .blog-action-group--spread .blog-action-btn {
        flex: 1;
        justify-content: center;
    }

.blog-comments-wide {
    width: 100%;
}

    .blog-comments-wide .blog-comment-list {
        display: grid;
        gap: 12px;
    }

@media (min-width: 768px) {
    .blog-comments-wide .blog-comment-item {
        max-width: 100%;
    }
}

.blog-detail-body-row {
    align-items: flex-start;
}

.listing-owner-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.listing-owner-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    color: #777;
    font-size: 14px;
}

.blog-action-bar {
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.blog-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.blog-action-guest {
    justify-content: flex-start;
}

.blog-action-stat {
    font-size: 14px;
    color: #555;
    margin-right: 12px;
}

.blog-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    .blog-action-btn em {
        font-style: normal;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .blog-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

    .blog-action-btn.is-active.is-like {
        border-color: #f58242;
        background: #fff5f0;
        color: #e85d26;
    }

    .blog-action-btn.is-active.is-fav {
        border-color: #f0ad4e;
        background: #fffbf0;
        color: #c98a00;
    }

    .blog-action-btn.is-link {
        color: #555;
    }

.blog-detail-page .section-card,
.blog-content-card,
.blog-comments-section {
    background: #fff;
    padding: 22px;
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.blog-content {
    line-height: 1.7;
    color: #444;
}

    .blog-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        transition: transform .4s ease;
    }

    .blog-content a {
        color: #f58242;
    }

.blog-comments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .blog-comments-head h2 {
        font-size: 1.1rem;
        margin: 0;
        font-weight: 600;
    }

.blog-comment-form textarea {
    border-radius: 10px;
}

.blog-comment-login-hint {
    margin-bottom: 16px;
}

.blog-sidebar-card {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.08);
}

.blog-sidebar-sticky {
    position: sticky;
    top: 90px;
}

.blog-sidebar-stats-list li {
    font-size: 14px;
    color: #555;
    padding: 6px 0;
}

.blog-comment-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-comment-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 10px;
}

.blog-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.blog-comment-body p {
    color: #444;
    white-space: pre-wrap;
}

/* LİSTING INDEX*/

.listing-page {
    padding: 60px 0;
}

.listing-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
}

.filter-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: fit-content;
}

.filter-group {
    margin-bottom: 15px;
}

    .filter-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid #ddd;
    }

.radio-group label {
    display: block;
    margin-bottom: 5px;
}

.price-range {
    display: flex;
    gap: 10px;
}

.btn-filter {
    width: 100%;
    background: #f58242;
    border: none;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.purpose-card {
    cursor: pointer;
}

/* LISTING DETAIL*/
.preview-page {
    max-width: 1200px;
}
/* HEADER */
.listing-header {
    margin-bottom: 10px;
}

.listing-title {
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 8px;
}

.listing-meta {
    color: #6b7280;
    font-size: 14px;
    display: flex;
    gap: 20px;
}
/* GALERİ */
.gallery-wrapper {
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.main-image-wrapper {
    position: relative;
}

.main-image {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 8px;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
}

    .gallery-nav.prev {
        left: 10px;
    }

    .gallery-nav.next {
        right: 10px;
    }

.message-card {
    background: white;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.message-box {
    min-height: 110px;
    resize: none;
    margin-bottom: 10px;
}

.send-message-btn {
    width: 100%;
    background: #ff5a5f;
    color: white;
    font-weight: 600;
    padding: 10px;
}

    .send-message-btn:hover {
        background: #e74c50;
        color: white;
    }
/* THUMBNAIL */

.thumbnail-row {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.thumb {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s;
}

    .thumb:hover {
        opacity: 1;
        transform: scale(1.03);
    }


/* SECTION CARD */

.section-card {
    background: white;
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.section-title {
    font-weight: 600;
    margin-bottom: 14px;
}


/* DESCRIPTION */

.description {
    white-space: pre-line;
    color: #444;
    line-height: 1.6;
}


/* FEATURES */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.feature-item {
    display: flex;
    justify-content: space-between;
    background: #f9fafb;
    padding: 10px 14px;
    border-radius: 6px;
}

.feature-name {
    font-weight: 500;
}

.feature-value {
    color: #555;
}

.feature-group-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-badge {
    background: #eef2f7;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.feature-group {
    padding: 10px;
}

.feature-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.form-check {
    margin-bottom: 4px;
}

/* SIDE PANEL */

.side-panel {
    position: sticky;
    top: 90px;
}


/* PRICE CARD */

.price-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 15px;
}

.price-label {
    color: #777;
    font-size: 14px;
}

.price-value {
    font-size: 32px;
    font-weight: 700;
    color: #ff5a5f;
}

.copyable {
    user-select: text;
    caret-color: transparent;
    cursor: default;
}
/* INFO CARD */

.info-card {
    background: white;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 15px;
}

.info-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    color: #444;
}

    .info-row i {
        width: 18px;
        color: #888;
        margin-top: 4px;
    }

.districts {
    margin-top: 4px;
}

.district-badge {
    background: #eef2f7;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 4px;
}


/* BUTTONS */

.publish-btn {
    font-weight: 600;
    padding: 12px;
    width: 200px;
}

.back-btn {
    padding: 10px;
    width: 200px;
}

/*STEPPER*/
.stepper {
    max-width: 600px;
    margin: auto
}

.step {
    text-align: center;
    width: 100px
}

    .step .circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #ddd;
        line-height: 36px;
        font-weight: 600;
        margin: auto
    }

    .step.active .circle {
        background: var(--mainColor2);
        color: #fff
    }

.line {
    flex: 1;
    height: 3px;
    background: #ddd
}
/*                      BTN >*/


.btn-gradient {
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    border: none;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    transition: 0.3s;
}

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(13,110,253,0.3);
        color: #fff !important;
    }


/* MESAJ INDEX */
.chat-item, .chat-main, .chat-info, .chat-meta, .chat-header, .footer-main, #scrollTopBtn {
    /*user-select: none;*/ /* Seçimi engeller */
    outline: none; /* Focus çizgisi kaybolur */
    /* caret-color: transparent; */
}

.chat-container {
    display: flex;
    height: 84vh;
    border: 1px solid #eee;
}

.chat-sidebar {
    width: 350px;
    border-right: 1px solid #eee;
    overflow-y: auto;
    background: white;
}

.chat-search {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

    .chat-search input {
        width: 100%;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #ddd;
    }

.chat-item {
    display: flex;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #f2f2f2;
}

    .chat-item:hover {
        background: #f8f8f8;
    }

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.chat-info {
    flex: 1;
}

.chat-name {
    font-weight: 600;
}

.chat-last {
    font-size: 13px;
    color: #777;
}

.chat-meta {
    text-align: right;
    font-size: 13px;
}

.badge {
    background: red;
    color: white;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 15px;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: white;
    caret-color: transparent;
}

.header-info {
    flex: 1;
}

.header-name {
    font-weight: 600;
}

.header-seen {
    font-size: 12px;
    color: #777;
}

.header-actions form {
    display: inline;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    caret-color: transparent;
}

.message-row {
    margin-bottom: 10px;
}

    .message-row.mine {
        text-align: right;
    }

.bubble {
    position: relative;
    display: inline-block;
    padding: 5px 25px;
    border-radius: 14px;
    background: #f1f1f1;
    max-width: 60%;
    /*    white-space: pre-wrap;
*/ word-break: break-word;
    text-align: left;
}

    .bubble .message-link {
        color: inherit;
        text-decoration: underline;
    }

.message-row.mine .bubble .message-link {
    color: #fff;
}

.message-row.mine .bubble {
    background: #0d6efd;
    color: white;
}

.message-meta {
    font-size: 11px;
    margin-top: 3px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.delete-btn {
    position: absolute;
    top: -1px;
    right: 1px;
    background: transparent;
    border: none;
    font-size: 11px;
    cursor: pointer;
}

.chat-input {
    padding: 10px;
    border-top: 1px solid #eee;
    background: white;
}

    .chat-input textarea {
        width: 100%;
        border-radius: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        resize: none;
        margin-bottom: 6px;
    }


/* PROFİLE > */

.bg-male {
    background: #0d6efd
}

.bg-female {
    background: #ff6f91
}

.avatar-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .avatar-upload img {
        transition: 0.3s;
    }

    .avatar-upload .male {
        border: 3px solid #0d6efd;
    }

    .avatar-upload .female {
        border: 3px solid #ff6f91;
    }

    .avatar-upload:hover img {
        transform: scale(1.05);
    }

    .avatar-upload .overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        border-radius: 50%;
        padding: 8px;
        font-size: 12px;
    }

.profile-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.profile-card {
    width: 100%;
    max-width: 500px;
    border-radius: 14px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}

.flatpickr-input {
    cursor: pointer;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}

#scrollTopBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    border: none;
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all .3s;
}

    #scrollTopBtn:hover {
        background: linear-gradient(135deg, #0d6efd, #4dabf7);
    }


/*similar sliding*/

.similar-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.similar-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 5px;
    /* scroll görünüm temiz */
    scrollbar-width: none;
}

    .similar-slider::-webkit-scrollbar {
        display: none;
    }

/* 4 KART GÖRÜNÜM */
.similar-item {
    flex: 0 0 calc(25% - 15px);
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .similar-item {
        flex: 0 0 calc(33.333% - 15px);
    }
}

@media (max-width: 768px) {
    .similar-item {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 576px) {
    .similar-item {
        flex: 0 0 100%;
    }
}

/* NAV BUTTONS */
.slider-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slider-btn.left {
        left: -15px;
    }

    .slider-btn.right {
        right: -15px;
    }


.bg-danger {
    background: linear-gradient(135deg, #ff5a5f, #ff7a7f) !important;
}


/*LOGIN*/
/* Google Button */
.btn-google {
    background: linear-gradient(90deg, #dfe1e5 0%, #ffffff 100%);
    color: #444;
    border: 1px solid #dadce0;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .btn-google:hover {
        background: linear-gradient(90deg, #d2d5da 0%, #f8f9fa 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        color: black !important;
    }

.btn-blue {
    background: linear-gradient(90deg, #0d5ed7 0%, #1877f2 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    transition: all 0.25s ease;
}

    .btn-blue:hover {
        background: linear-gradient(90deg, #0b4db3 0%, #166fe5 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        color: #fff;
    }

/* Icon */
.social-icon {
    width: 18px;
    height: 18px;
}

.btn-green {
    background: linear-gradient(135deg,#2E7D32, #4CAF50);
    border: none;
}


.breadcrumb-custom {
    font-size: 12px;
    padding: 2px 2px;
}

.fs-15 {
    font-size: 15px;
}

textarea {
    resize: none;
}

.mtb-100 {
    margin: 140px 0;
}

.p-4rem {
    padding: 4rem !important;
}

.listing-desc {
    font-style: italic;
    font-weight: 320;
}