/* ALL CSS */ *{ margin: 0; padding: 0; box-sizing: border-box;} :root{ --main-orange: #e7881c; --dark-blue: #36304a; --dark-blue-for-opacity: 54, 48, 74; --success-green: #1bc21b; } html{ scroll-behavior: smooth;} body{ font-family: 'Poppins', sans-serif; height: calc(var(--vh, 1vh) * 99.9);} .d-none{ display: none !important;} .illakiburada-txt{ color: #f7992a !important;} .illakiburada-txt span{ color: #44C9E8 !important;} /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .mt-1{ margin-top: 5px !important;} .mt-2{ margin-top: 10px !important;} .mt-3{ margin-top: 15px !important;} .mt-4{ margin-top: 20px !important;} .mt-5{ margin-top: 25px !important;} .d-none{ display: none;} .noselect {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .hide{ filter: blur(2px); cursor: not-allowed; user-select: none;} .hide *{ pointer-events:none; } .msg-box:not(:has(.msg)){ transition: all .2s ease; border: 1px solid; position: relative; border-radius: 3px; width: 100%; max-width: 1180px; padding: 10px 25px 10px 15px; margin: 0 auto; margin-bottom: 15px} .msg-box:not(:has(.msg)).go{ pointer-events: none; opacity:0; } .msg-box:not(:has(.msg)) p{ font-size: 14px;} .msg-box:not(:has(.msg)) span{ cursor: pointer; font-size: 16px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .msg-box:not(:has(.msg)).g{ color: #155724; border-color: #c3e6cb; background-color: #d4edda;} .msg-box:not(:has(.msg)).b{ color: #004085; border-color: #b8daff; background-color: #cce5ff;} .msg-box:not(:has(.msg)).r{ color: #721c24; border-color: #f5c6cb; background-color: #f8d7da;} .seo-area{} .seo-area main{ } .seo-area main article{ border-radius: 5px; box-shadow: -3px 3px 8px 0px #a6a6a6; padding: 20px;} .seo-area main article section{} .seo-area h1, .seo-area h2, .seo-area h3, .seo-area h4, .seo-area h5, .seo-area h6{ color: #222;} .seo-area h1{ font-size: 27px;} .seo-area h2{ font-size: 22px;} .seo-area h3{ font-size: 18px;} .seo-area h4{ font-size: 14px;} .seo-area h5{ font-size: 10px;} .seo-area h6{ font-size: 6px;} .seo-area p{ font-size: 14px; margin-bottom: 12px; color: #666;} #notice-container{ position: fixed; right: 20px; top: 60px; z-index: 30; display: flex; flex-direction: column; gap: 7px;} #notice-container > div{ opacity: 0; transform: translateY(-100px); transition: all .5s ease; position: relative; overflow: hidden; max-width: 300px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 15px; border-radius: 3px 3px;} #notice-container > div.go{ transition: all .7s ease; transform: translateX(100%) !important; opacity: 0 !important;} #notice-container > div.active{ opacity: 1; transform: translateY(0);} #notice-container > div p{ font-size: 12px; font-weight: 600;} #notice-container > div span{ cursor: pointer; font-size: 20px; height: 20px; width: 20px; background-color: /*#21b621*/ transparent; border-radius: 50%; /*padding-left: 3.8px;*/ text-align: end; line-height: 1.1;} #notice-container > div .timer{ position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; transition: all 3s linear;} #notice-container > div.time .timer{ width: 0px;} #notice-container > div.success{ background-color: #7ce456; color: #002000;} #notice-container > div.success span{ color: #0f3700;} #notice-container > div.success .timer{ background-color: #185b00;} #notice-container > div.warning{ background-color: #dfe456; color: #1d2000;} #notice-container > div.warning span{ color: #373500;} #notice-container > div.warning .timer{ background-color: #757100;} #notice-container > div.danger{ background-color: #e45656; color: #200000;} #notice-container > div.danger span{ color: #370000;} #notice-container > div.danger .timer{ background-color: #6a0000;} /* #notice.success .icon{ border-color: #003d00;} */ /************************************************************************** ---------------------------------- NAVBAR --------------------------------- ***************************************************************************/ .navbar{ width: 100%; box-shadow: 0 0 15px 1px #ddd; position: fixed; /*top: 0;*/ background-color: white; z-index: 6;} .ghost-navbar{ height:62px; } .navbar .nav{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px;} /* .navbar .nav .logo{} */ .navbar .nav .logo img{ height: 35px;} .navbar .nav .search{ position: relative;} .navbar .nav .search .search-bar{ outline: 1px solid #d5d5d5; border-radius: 5px; display: flex; overflow: hidden; width: 300px; background-color: white; padding-left: 10px; position: relative; z-index: 4;} .navbar .nav .search.active .search-bar{ border-radius: 5px 5px 0 0;} .navbar .nav .search .search-bar input{ border: none; width: 100%; background-color: transparent; font-size: 13px;} .navbar .nav .search .search-bar input:focus-visible{ outline: none;} .navbar .nav .search .search-bar button{ border:none; color: white; width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #dedede; background-color: #44c9e8; cursor: pointer;} .navbar .nav .search .search-result{ width: calc(100% + 1.5px); left: -1px; height: 0; opacity: 0; transition: all .3s ease; overflow-y: auto; background-color: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 7px 7px; position: absolute; z-index: 3; top: calc(100% + 1px); box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);} .navbar .nav .search.active .search-result{ height: 350px; opacity: 1;} .navbar .nav .search .search-result::-webkit-scrollbar{ width: 10px; background-color: #eeeeee;} .navbar .nav .search .search-result::-webkit-scrollbar-thumb{ background-color: #d1d1d1;} .navbar .nav .search .search-result .empty, .navbar .nav .search .search-result .free{ display: none; transition: all .15s; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column;} .navbar .nav .search .search-result.empty .empty, .navbar .nav .search .search-result.free .free{ display: flex;} .navbar .nav .search .search-result .empty .logo, .navbar .nav .search .search-result .free .logo{ font-size: 30px; margin-bottom: 10px; width: 60px; height: 60px; border: 4px solid black; display: flex; align-items: center; justify-content: center; border-radius: 50%;} .navbar .nav .search .search-result .empty p, .navbar .nav .search .search-result .free p{ text-align: center; font-size: 12px;} .navbar .nav .search .search-result > a{ position: relative; width: 100%; height: 50px; transition: all .2s; padding-right: 45px; padding-left: 10px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; text-decoration: none;} .navbar .nav .search .search-result.empty > a, .navbar .nav .search .search-result.free > a{ display: none;} .navbar .nav .search .search-result > a:hover{ background-color: #f4f4f4; cursor: pointer;} .navbar .nav .search .search-result > a::after{ content: ''; position: absolute; display: inline-block; right: 10px; font-size: 8px; color: #9c9c9c; top: 50%; transform: translateY(-50%);} .navbar .nav .search .search-result > a .detail{ display: flex; align-items: center; gap: 5px; width: 100%} .navbar .nav .search .search-result > a .detail .img{ min-width: 40px; width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 3px 1px rgb(0, 0, 0, .2);} .navbar .nav .search .search-result > a .detail .img img{ height: 100%;} .navbar .nav .search .search-result > a .detail .name{ color: black; font-size: 11.5px; width: 100%; height: 13px; line-height: 1.1; word-break: break-all; -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;} .navbar .nav .search .search-result .advert::after{ content: 'İlan';} .navbar .nav .search .search-result .advert .detail .img{ border-radius: 5px;} .navbar .nav .search .search-result .store::after{ content: 'Mağaza';} .navbar .nav .search .search-result .store .detail .img{ border-radius: 50%;} .navbar .nav .buttons{ display: flex; gap: 10px;} .navbar .nav .buttons a{ padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 10px; transition: all .2s ease-out;} .navbar .nav .buttons a:hover{ cursor: pointer;} .navbar .nav .buttons a.login{ border: 1px solid #44C9E8; color: #44C9E8; background-color: white; text-decoration: none;} .navbar .nav .buttons a.login:hover { color: white; background-color: #44C9E8;} .navbar .nav .buttons a.register{ background-color: #44C9E8; color: white; border: 1px solid #44C9E8; text-decoration: none;} /* .navbar .nav .buttons button.register:hover{ background-color: #0095b7;} */ .navbar .nav .buttons a.register:hover{ background-color: white; color: #44C9E8;} .navbar .nav .buttons a.free-advert{ border: 1px solid #f7992a; background-color: #f7992a; color: white; position: relative; padding-right: 20px; text-decoration: none;} .navbar .nav .buttons a.free-advert:hover{ background-color: white; color: #f7992a;} .navbar .nav .buttons a.free-advert::before{ content: '\f02e'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; bottom: -11px; right: 4px; color: white; font-size: 18px; transition: all .2s ease-out; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #f7992a;} .navbar .nav .buttons a.free-advert:hover::before{ color: #f7992a;} .navbar .nav .buttons a.free-advert::after{ content: '+'; position: absolute; bottom: -9px; right: 7.5px; color: #f7992a; font-size: 12px; transition: all .2s ease-out;} .navbar .nav .buttons a.free-advert:hover::after{ color: white;} .navbar .nav .mobile-btns{ display: flex; align-items: center; gap: 20px;} .navbar .nav .mobile-btns .profile{ font-size: 24px; cursor: pointer;} .navbar .nav .mobile-btns .open-menu{ font-size: 26px; cursor: pointer;} .navbar .nav .mobile-btns .search-btn{ font-size: 26px; cursor: pointer;} .navbar .nav .mobile-btns{ display: none;} .navbar .nav .user-buttons{ display: flex; gap: 15px; align-items: center;} .navbar .nav .user-buttons .count{ position: absolute; right: -5px; top: -2px; background-color: #ff143d; color: white; width: 15px; height: 15px; text-align: center; padding-top: 1.5px; font-weight: 600; border-radius: 50%; font-size: 9px;} .navbar .nav .user-buttons .shortcuts{ display: flex; gap: 12px;} .navbar .nav .user-buttons .shortcuts > a:not(.free-advert){ color: #848484; font-size: 20px; cursor: pointer; display: inline-block; position: relative;} .navbar .nav .user-buttons .shortcuts > span{ color: #848484; font-size: 20px; cursor: pointer; display: inline-block; position: relative;} .navbar .nav .user-buttons .shortcuts > span .notification-container{ opacity: 0; pointer-events: none; position: absolute; width: 260px; top: 45px; left: 50%; transform: translateX(-50%); z-index: 3; background-color: white; border-radius: 10px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .4); transition: all .25s ease;} .navbar .nav .user-buttons .shortcuts > span.active .notification-container{ opacity: 1; pointer-events: all;} .navbar .nav .user-buttons .shortcuts > span.active .notification-container > div{ overflow: hidden; transition: all .25s ease;} .navbar .nav .user-buttons .shortcuts > span .notification-container::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: -10px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #44c9e8 transparent; z-index: 2;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > a{ text-decoration: none; box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .4); color: black; font-weight: 600; width: 100%; font-size: 11px; height: 35px; background-color: #c1f3fe; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; gap: 5px;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > a i{ display: inline-block; margin-left: 2px;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > a:hover i{ animation: left-right 1s ease infinite;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div{ background-color: white; max-height: 300px; overflow-y: auto; border-radius: 10px 10px 0 0;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div::-webkit-scrollbar{ width:8px; background-color: #ddd; border-top-right-radius: 10px;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div::-webkit-scrollbar-thumb{ background-color:#c5c5c5; border-top-right-radius: 10px;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a{ position: relative; display: flex; align-items: center; gap: 10px; height: 75px; padding: 10px 10px; width: 100%; border-bottom: 1px solid #bbced5;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a:first-child{ border-radius: 10px 10px 0 0;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a:hover{ background-color: #f4f4f4;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .img-area{ pointer-events: none; min-width: 30px; width: 30px; min-height: 30px; height: 30px; border-radius: 10%; overflow: hidden;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .img-area img{ width: 100%; min-height: 100%;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .detail{ pointer-events: none;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .detail h6{ font-size: 12px; opacity: .8; margin-bottom: 3px; font-weight: 600; color: black;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .detail p{ font-size: 11px; color: black; height: 32px; overflow: hidden;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .detail p span{ color: #f3870b; font-size: 9px; font-weight: 600;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div > div a .detail small{ font-size: 8px; position: absolute; top: 10px; right: 10px;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div .empty{ width:100%; height: 200px; display: flex; gap: 15px; align-items: center; justify-content: center; flex-direction: column; } .navbar .nav .user-buttons .shortcuts > span .notification-container > div .empty .logo{ width:60px; height: 60px; font-size: 25px; color: #666; border: 3px solid #7e7e7e; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .navbar .nav .user-buttons .shortcuts > span .notification-container > div .empty p{ max-width: 90%; line-height: 1.2; font-size: 14px; font-weight: 500; text-align: center;} .navbar .nav .user-buttons .shortcuts > span .envelope-container{ opacity: 0; pointer-events: none; position: absolute; width: 250px; top: 45px; left: 50%; transform: translateX(-50%); z-index: 3; background-color: white; border-radius: 10px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .4); transition: all .27s ease-in-out;} .navbar .nav .user-buttons .shortcuts > span.active .envelope-container{ opacity: 1; pointer-events: all;} .navbar .nav .user-buttons .shortcuts > span .envelope-container::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: -10px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #44c9e8 transparent; z-index: 2;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div{ overflow: hidden; transition: all .25s ease;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > a{ text-decoration: none; box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .4); color: black; font-weight: 600; width: 100%; font-size: 11px; height: 35px; background-color: #c1f3fe; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; gap: 5px;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > a i{ display: inline-block; margin-left: 2px;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > a:hover i{ animation: left-right 1s ease infinite;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div{ background-color: white; max-height: 300px; overflow-y: auto; border-radius: 10px 10px 0 0;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div::-webkit-scrollbar{ width:8px; background-color: #ddd; border-top-right-radius: 10px;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div::-webkit-scrollbar-thumb{ background-color:#c5c5c5; border-top-right-radius: 10px;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a{ position: relative; text-decoration: none; display: flex; align-items: center; gap: 10px; height: 75px; padding: 5px 10px; width: 100%; border-bottom: 1px solid #6d7c82;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a:first-child{ border-radius: 10px 10px 0 0;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a:hover{ background-color: #f4f4f4;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .img-area{ pointer-events: none; min-width: 40px; width: 30px; min-height: 30px; height: 40px; border-radius: 10%; overflow: hidden; box-shadow: 0 0 3px 1px rgb(0 0 0 / 20%);} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .img-area img{ width: 100%; min-height: 100%;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .detail{ pointer-events: none;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .detail h6{ font-size: 12px; opacity: .8; margin-bottom: 0px; font-weight: 600; color: black; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .detail p{ font-size: 11px; color: black; height: 32px; overflow: hidden;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .detail p span{ color: #f3870b; font-size: 9px; font-weight: 600;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div > div a .detail small{ font-size: 8px; position: absolute; top: 0; right: 0;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div .empty{ width:100%; height: 200px; display: flex; gap: 15px; align-items: center; justify-content: center; flex-direction: column; } .navbar .nav .user-buttons .shortcuts > span .envelope-container > div .empty .logo{ width:60px; height: 60px; font-size: 25px; color: #666; border: 3px solid #7e7e7e; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .navbar .nav .user-buttons .shortcuts > span .envelope-container > div .empty p{ line-height: 1.2; font-size: 14px; font-weight: 500; text-align: center;} .navbar .nav .user-buttons .shortcuts .free-advert{ padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; font-weight: 600; transition: all .2s ease-out;} .navbar .nav .user-buttons .shortcuts .free-advert{ text-decoration: none; border: 1px solid #f7992a; background-color: #f7992a; color: white; position: relative; padding-right: 20px;} .navbar .nav .user-buttons .shortcuts .free-advert:hover{ background-color: white; color: #f7992a;} .navbar .nav .user-buttons .shortcuts .free-advert::before{ content: '\f02e'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; bottom: -11px; right: 4px; color: white; font-size: 18px; transition: all .2s ease-out; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #f7992a;} .navbar .nav .user-buttons .shortcuts .free-advert:hover::before{ color: #f7992a;} .navbar .nav .user-buttons .shortcuts .free-advert::after{ content: '+'; position: absolute; bottom: -9px; right: 7px; color: #f7992a; font-size: 12px; transition: all .2s ease-out;} .navbar .nav .user-buttons .shortcuts .free-advert:hover::after{ color: white;} .navbar .nav .user-buttons .profile{ cursor: pointer; display: flex; align-items: center; gap: 5px; position: relative;} .navbar .nav .user-buttons .profile h5{ display: flex; font-weight: 500; font-size: 12px; color: #979797;} .navbar .nav .user-buttons .profile .img-area{ border-radius: 50%; box-shadow: 0 0 3px 1px rgba(0,0,0, .8); overflow: hidden; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;} .navbar .nav .user-buttons .profile img{ width: 100%;} .navbar .nav .user-buttons .profile .profile-container{ opacity: 0; pointer-events: none; position: absolute; width: 160px; top: 45px; left: -3px; z-index: 3; background-color: white; border-radius: 10px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .4); display: flex; flex-direction: column; align-content: flex-start; transition: all .27s cubic-bezier(0, 0, 0,0);} .navbar .nav .user-buttons .profile.active .profile-container{ opacity: 1; pointer-events: all; overflow: unset;} .navbar .nav .user-buttons .profile .profile-container::before{ opacity: 0; transition: all .2s ease-in-out; content: ''; display: inline-block; position: absolute; left: 8px; top: -10px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #44c9e8 transparent; z-index: 2;} .navbar .nav .user-buttons .profile.active .profile-container::before{ opacity: 1;} .navbar .nav .user-buttons .profile .profile-container > div{ overflow: hidden; height: 0px; transition: all .25s ease;} .navbar .nav .user-buttons .profile.active .profile-container > div{ height: auto; height: 285.8px;} .navbar .nav .user-buttons .profile .profile-container > div > div{ display: flex; flex-direction: column;} .navbar .nav .user-buttons .profile .profile-container > div > div:first-child{ overflow: hidden; border-radius: 10px 10px 0 0;} .navbar .nav .user-buttons .profile .profile-container > div > div > a{ transition: all .2s ease; border-bottom: 1px solid #ddd; text-decoration: none; color: black; font-size: 12px; padding: 6px 0 6px 8px; display: flex; gap: 10px; align-items: center; width: 100%;} .navbar .nav .user-buttons .profile .profile-container > div > div > a:hover{ background-color: #f4f4f4; padding-left: 15px;} .navbar .nav .user-buttons .profile .profile-container > div > div > a:last-child{ border-bottom: none;} .navbar .nav .user-buttons .profile .profile-container > div > .exit{ border-radius: 0 0 10px 10px; transition: all .2s ease; display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 8px; width: 100%; text-align: center; text-decoration: none; color: red; font-size: 11px;} .navbar .nav .user-buttons .profile .profile-container > div > .exit:hover{ background-color: #ffe2e2; padding-left: 15px;} .navbar .nav .user-buttons .profile .profile-container > div > .line{ cursor: default; width: 100%; height: 4px; background: linear-gradient(170deg, #44c9e8 30%, #f7992a 70%);} .check-filter-buttons{ position: sticky; position: -webkit-sticky; top: 0px; z-index: 20; background-color: white; transform: translateY(-64px);} .filter-buttons{ display: none; grid-template-columns: 1fr 1fr; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: sticky; position: -webkit-sticky; top: 58px; z-index: 5; background-color: white;} .filter-buttons.is-pinned{ position: fixed; top: 60px; width: calc(100% + 20px); transform: translateX(-10px);} .filter-buttons > div{ display: flex; justify-content: center; align-items: center; padding: 10px 0;} .filter-buttons > div > i{ color: #f7992a;} .filter-buttons > div:first-child{border-right: 1px solid #ddd;} .filter-buttons > div button{ border: none; background-color: white; color: #f7992a; cursor: pointer;} .filter-buttons > div button i{ margin-left: 5px; margin-top: 2px;} .filter-buttons > div select{ border: none; width: 120px; cursor: pointer; outline: none; color: #f7992a; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';} .filter-buttons > div select::-ms-expand{ display: none;} /* .navbar .nav .buttons button.free-advert:hover::before{ color: #f7992a;} .navbar .nav .buttons button.free-advert:hover::after{ color: white;} .navbar .nav .buttons button.free-advert::before{ content: '\f02e'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; bottom: -1px; right: 5px; color: white; font-size: 20px; transition: all .2s ease-out; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #f7992a; height: 10px; overflow: hidden;} .navbar .nav .buttons button.free-advert::after{ content: '\f02e'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; bottom: -11px; right: 5px; color: #f7992a; font-size: 20px; transition: all .2s ease-in-out; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #f7992a; height: 10px; overflow: hidden; display: flex; align-items: flex-end;} */ /************************************************************************** ---------------------------------- FOOTER --------------------------------- ***************************************************************************/ footer{ } footer .we{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} footer .we > .social{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between;;} footer .we > .social > a{ display: inline-flex;} footer .we > .social > a img{ height: 30px;} footer .we > .social > span{ font-size: 13px; color: #7a7a7a;} footer .we > .social > span a{ font-size: 13px; color: #0f0f0f; text-decoration: none; font-weight: 500; font-size: 12px; transition: all .2s;} footer .we > .social > span a:hover{ color: #f7992a;} footer .we > .social > div{ display: flex; gap: 17px;} footer .we > .social > div a{ font-size: 22px; text-decoration: none; display: inline-block; transition: all .1s;} footer .we > .social > div a:hover{ animation: shake 1s ease-in-out infinite;} footer .we > .social > div a.facebook{ color: #003ace;} footer .we > .social > div a.twitter{ color: #4976ea;} footer .we > .social > div a.insta{ color: rgb(184, 42, 179);} footer .we > .direct{ display: flex; align-items: center; justify-content: center; padding: 10px 10px; gap: 6px 20px; flex-wrap: wrap; box-shadow: inset 0 0 10px 1px #f1f1f1; border-top: 1px solid #ddd} /* footer .we > .direct > a{ text-decoration: none; border: 2px solid; padding: 5px 10px; border-radius: 10px; transition: all .2s ease; font-size: 12px; color: white;} footer .we > .direct > a.tel{ background-color: #118a00; border-color: #118a00;} footer .we > .direct > a.tel:hover{ background-color: white; color: #118a00;} footer .we > .direct > a.mail{ background-color: #44C9E8; border-color: #44C9E8;} footer .we > .direct > a.mail:hover{ background-color: white; color: #44C9E8;} */ footer .we > .direct > a{ text-decoration: none; transition: all .2s ease; font-size: 12px; color: black;} footer .we > .direct > a:hover{ text-decoration: underline;} footer .we > .direct > a.tel::before{ content: '\f095'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;} footer .we > .direct > a.mail::before{ content: '\f0e0'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; margin-right: 5px;} /* footer .we > .direct > a.tel:hover{ background-color: white; color: #118a00;} */ footer .we > .direct > a.mail{ } /* footer .we > .direct > a.mail:hover{ background-color: white; color: #44C9E8;} */ footer .links{} footer .links > div{ display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 10px;} footer .links > div ul{ list-style: none;} footer .links > div ul li{} footer .links > div ul li a{ text-decoration: none; color: #4e4e4e; font-size: 12.5px; display: inline-block; transition: all .2s;} footer .links > div ul li a::before{ content: ''; display: inline-block; width: 0px; height: 1px; background-color: black; transition: all .2s; transform: translateY(-3px);} footer .links > div ul li a:hover{ color: #f3870b;} footer .links > div ul li a:hover::before{ width: 11px; margin-right: 5px;} footer .links > div ul li a b{ color: #1b1b1b; transition: all .2s;} footer .links > div ul li a.h:hover b{ color: #003ace;} footer .cards{ box-shadow: inset 0 0 10px 1px #f1f1f1; display: flex; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 10px 10px; border-top: 1px solid #ddd;} footer .cards img{ height: 20px;} footer .copyright{ padding: 10px 0; text-align: center; font-size: 12px; color: #5b5b5b; border-top: 1px solid #ddd;} footer .copyright a{ text-decoration: none; color: #44C9E8; font-weight: 500; font-size: 13px;} footer .copyright a span{ text-decoration: none; color: #f7992a;} footer .copyright a small{ color: black; font-size: 9px;} @media screen and (max-widtH: 960px){ footer .links > div{ display: flex; flex-direction: column; align-items: center;} footer .links > div > div{ margin-bottom: 20px; text-align: center;} footer .links > div ul{ text-align:center; } footer .links > div ul li{ text-align:center; } footer .links > div a{ font-size: 15px;} footer .links > div ul li a::before{ display: none; } } @keyframes shake { 0%{ transform: rotate(0deg) scale(1.15);} 25%{ transform: rotate(20deg) scale(1.15);} 50%{ transform: rotate(-20deg) scale(1.15);} 75%{ transform: rotate(20deg) scale(1.15);} 100%{ transform: rotate(0) scale(1.15);} } /* LOGIN */ .login-container{ --main-blue-txt: rgb(134, 134, 157); --main-blue-txt-o: 134, 134, 157; } .login-container{ display: flex; align-items: center; justify-content: center; width: 100%;} .login-container > div{ padding: 100px 10px; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: row;} .login-container > div .form-area{ padding: 0 10px; position: relative; width: 100%; max-width: 500px; padding-bottom: 30px; background-color: white; border-radius: 7px; box-shadow: -1px 1px 30px 0 rgba(0, 0, 0, .15);} .login-container > div .form-area .login-txt{ width: 80px; height: 80px; line-height: 1.1; border-radius: 50%; text-align: center; background-color: #35ccef; color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; position: absolute; left: -27px; top: -26px; box-shadow: -2px -2px 7px 0 rgb(0 0 0 / 20%); transform: rotate(-10deg);} .login-container > div .form-area .login-txt.r{ left: unset; right: -27px; transform: rotate(10deg);} .login-container > div .form-area .logo{ width: fit-content; position: absolute; right: 0; bottom: -5px; transform: translateY(100%);} .login-container > div .form-area .logo img{ height: 17px;} .login-container > div .form-area form{ padding-top: 30px; width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 17px; justify-content: center; align-items: center; margin: 0 auto;} .login-container > div .form-area form h2{ padding-bottom: 15px; font-size: 25px; font-weight: 600; color: rgba(0, 0, 0, 1);} .login-container > div .form-area form .reg { display: flex; flex-direction: column; align-items: center; justify-content: center;} .login-container > div .form-area form .reg h2{ padding-bottom: 0;} .login-container > div .form-area form .reg h2 .control{ padding-bottom: 15px;} .login-container > div .form-area form .control{ display: flex; gap: 5px; margin: 10px 0; align-items: center; justify-content: center;} .login-container > div .form-area form .control a{ box-shadow: 0px 1px 5px 0 #04384742; padding: 3px 15px 4px; border-radius: 3px; cursor: pointer; transition: all .2s ease; color: #799197; font-size: 13px; font-weight: 600;} .login-container > div .form-area form .control a:hover{ box-shadow: 0px 1px 5px 0 #04384783; color: #37616b;} .login-container > div .form-area form .control a.active{ color: white; pointer-events: none; background-color: #188faa;} .login-container > div .form-area form .login-btn-area{ display: flex; flex-direction: column; align-items: flex-end; width: 100%;} .login-container > div .form-area form .login-btn-area .login-btn{ display: flex; align-items: center; justify-content: center; transition: all .2s ease; cursor: pointer; background-color: #f7992a; color: white; font-size: 13px; font-weight: 600; padding: 0 12px; height: 38px; border: 1px solid #f7992a; border-radius: 3px; width: 100%;} .login-container > div .form-area form .login-btn-area .login-btn:hover{ color: #f7992a; background-color: white; box-shadow: inset 0 0 7px 0 #f7972a25;} .login-container > div .form-area form .login-btn-area .login-btn:active{ box-shadow: inset 0 0 15px 0 #f7972a55; transform: scale(.98);} .login-container > div .form-area form .login-btn-area .login-btn i{ margin-right: 5px; position: absolute; transform: translate(-38px, -1px);} .login-container > div .form-area form b{ margin: 5px 0; position: relative; display: flex; align-items: center; justify-content: center; width: 100%;} .login-container > div .form-area form b::before{ content: ''; width: 100%; border-top: 1px solid rgba(0, 0, 0, .25); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .login-container > div .form-area form b span{ background-color: white; padding: 0 10px; position: relative; z-index: 2; font-size: 13px; font-weight: 700; color: rgba(0, 0, 0, .35);} .login-container > div .form-area form .social-area{ width: 100%; display: flex; gap: 5px; flex-direction: column; align-items: center;} .login-container > div .form-area form .social-area .social{ transition: all .2s ease; padding-bottom: 1px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; transition: all .2s ease; cursor: pointer; color: white; font-size: 13px; font-weight: 600; height: 38px; border-radius: 3px; width: 100%;} .login-container > div .form-area form .social-area .social span{ box-shadow: 0 0 13px 0 rgba(0, 0, 0, .6); position: absolute; left: 0; height: 100%; width: 40px; display: flex; align-items: center; justify-content: center; font-size: 15px;} .login-container > div .form-area form .social-area .social.facebook{ background-color: #4b78d3; border:none;} .login-container > div .form-area form .social-area .social.facebook:hover{ background-color: #4267B2;} .login-container > div .form-area form .social-area .social.facebook span{ background-color: #4267B2;} .login-container > div .form-area form .social-area .social.google{ background-color: #d28826; border:none;} .login-container > div .form-area form .social-area .social.google:hover{ background-color: #cb7d17;} .login-container > div .form-area form .social-area .social.google span{ background-color: #b16d15;} .login-container > div .form-area form .social-area .social.instagram{ background: linear-gradient(90deg, #fa47e2e0, #0861a5da); border:none;} .login-container > div .form-area form .social-area .social.instagram:hover{ background-color: rgb(106, 3, 191);} .login-container > div .form-area form .social-area .social.instagram span{ background-color: #a514b0;} .login-container > div .form-area form .social-area .social.twitter{ background-color: #38adf5; border:none;} .login-container > div .form-area form .social-area .social.twitter:hover{ background-color: #1DA1F2;} .login-container > div .form-area form .social-area .social.twitter span{ background-color: #1DA1F2;} .login-container > div .form-area form .social-area .social.linkedin{ background-color: #198dc3; border:none;} .login-container > div .form-area form .social-area .social.linkedin:hover{ background-color: #0e76a8;} .login-container > div .form-area form .social-area .social.linkedin span{ background-color: #0e76a8;} .login-container > div .form-area form .social-area .social.github{ background-color: #444; border:none;} .login-container > div .form-area form .social-area .social.github:hover{ background-color: #333;} .login-container > div .form-area form .social-area .social.github span{ background-color: #333;} .login-container > div .form-area form .social-area .social.spotify{ background-color: #22d360; border:none;} .login-container > div .form-area form .social-area .social.spotify:hover{ background-color: #1db954;} .login-container > div .form-area form .social-area .social.spotify span{ background-color: #1db954;} .login-container > div .form-area form .social-area .social.steam{ background-color: #1f1f1f; border:none;} .login-container > div .form-area form .social-area .social.steam:hover{ background-color: #000000;} .login-container > div .form-area form .social-area .social.steam span{ box-shadow: 0 0 13px 0 rgba(255, 255, 255, .3); background-color: #000000;} .login-container > div .form-area form .social-area .social.wordpress{ background-color: #258dbe; border:none;} .login-container > div .form-area form .social-area .social.wordpress:hover{ background-color: #21759b;} .login-container > div .form-area form .social-area .social.wordpress span{ background-color: #21759b;} .login-container > div .form-area form .social-area .social.yahoo{ background-color: #530aad; border:none;} .login-container > div .form-area form .social-area .social.yahoo:hover{ background-color: #410093;} .login-container > div .form-area form .social-area .social.yahoo span{ background-color: #410093;} .login-container > div .form-area form .social-area small{ font-size: 12px; margin-top: 7px;} .login-container > div .form-area form .social-area small a{ text-decoration: none; color: #115aa8;} .login-container > div .form-area form .social-area small a:hover{ text-decoration: underline; color: #06488f;} .login-container > div .form-area form .helper{ width: 100%; display: flex; align-items: center; justify-content: space-between;} .login-container > div .form-area form .helper .chckbx{ position: relative; display: flex; align-items: center;} .login-container > div .form-area form .helper .chckbx input[type="checkbox"]{ position: absolute; cursor: pointer; transform: translate(6.5px, 10px); top: .5px; width: 2px; height: 2px;} .login-container > div .form-area form .helper .chckbx input[type="checkbox"]::before{ box-sizing: border-box; transition: all .1s ease; box-shadow: inset 0 0 7px 0px rgba(var(--main-blue-txt), 1); content: ''; position: absolute; left: 0; top: 0; display: inline-block; box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .1); border: 1px solid rgb(214, 220, 232); background-color: white; width: 17px; height: 17px; border-radius: 3px;} .login-container > div .form-area form .helper .chckbx input[type="checkbox"]:checked::before{ padding-bottom: 1px; content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-size: 11px; font-weight: 900; color: white; background-color: var(--main-blue-txt); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 17px; height: 17px;} .login-container > div .form-area form .helper .chckbx input[type="checkbox"]::before, .login-container > div .form-area form .helper .chckbx input[type="checkbox"]:checked:before{ transform: translate(-6.5px, -9.8px);} .login-container > div .form-area form .helper .chckbx label{ cursor: pointer; font-size: 12px; padding-left: 22px; user-select: none;} .login-container > div .form-area form .helper a{ font-size: 11px; font-weight: 500; text-decoration: none; color: rgba(0, 0, 0, .7);} .login-container > div .form-area form .helper a:hover{ text-decoration: underline;} .login-container > div .form-area form > p{ text-align: center; font-size: 12px; margin-top: 10px; color: rgba(0, 0, 0, .9); line-height: 1.45;} .login-container > div .form-area form .changed-form{ transition: all .2s ease; width: 100%; display: flex; flex-direction: column; gap: 17px;} .login-container > div .form-area form .changed-form.hide{ opacity: 0;} .login-container > div .form-area form .corporate{ width: 100%; display: none; flex-direction: column; gap: 17px;} .login-container > div .form-area form .cp .corporate{ display: flex;} ._2{ display: grid; grid-template-columns: 1fr 1fr; gap: 17px;} .readonly{ caret-color: transparent;} .login-container > div .forget-password{ display: flex; flex-direction: column; gap: 70px; width: 100%; max-width: 500px;} .login-container > div .forget-password .send-mail{ display: flex; align-items: center; justify-content: center; flex-direction: column;} .login-container > div .forget-password .send-mail h1{ margin-bottom: 5px; font-size: 30px; font-weight: 600;} .login-container > div .forget-password .send-mail p{ font-size: 15px; text-align: center;} .login-container > div .forget-password .send-mail p b{ font-weight: 600;} .login-container > div .forget-password .send-mail > form{ margin-top: 25px; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 30px; background-color: white; border-radius: 7px; box-shadow: -1px 1px 30px 0 rgba(0, 0, 0, .15);} .login-container > div .forget-password .send-mail > form > button{ margin-top: 15px; display: flex; align-items: center; justify-content: center; transition: all .2s ease; cursor: pointer; background-color: #f7992a; color: white; font-size: 13px; font-weight: 600; padding: 0 12px; height: 38px; border: 1px solid #f7992a; border-radius: 3px; width: 100%;} .login-container > div .forget-password .send-mail > form > button > span{ display: none; margin-left: 5px;} .login-container > div .forget-password .send-mail > form > button.disabled{ background-color: #e8e8e8; color: #555; border: 1px solid #999; pointer-events: none;} .login-container > div .forget-password .send-mail > form > button.disabled > span{ display: inline-block;} .login-container > div .forget-password .send-mail > form > button:hover{ color: #f7992a; background-color: white;} .login-container > div .forget-password .send-mail > form > button:active{ transform: scale(.98);} .login-container > div .forget-password .send-mail > form > button i{ margin-right: 5px; position: absolute; transform: translate(-38px, -1px);} .login-container > div .forget-password .send-mail > form > a{ font-size: 13px; font-weight: 600; text-decoration: none; color: #114b58; margin-top: 10px;} .login-container > div .forget-password .send-mail > form > a:hover{ text-decoration: underline;} .login-container > div .forget-password .send-mail > form > h5{ width: 100%; font-size: 13px; margin-bottom: 10px; font-weight: 600;} .login-container > div .forget-password .send-mail > form > ul{ list-style: none; width: 100%;} .login-container > div .forget-password .send-mail > form > ul li{ font-size: 13px; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #333;} .login-container > div .forget-password .send-mail > form > ul li::before{ content: ''; display: inline-block; width: 6px; min-width: 6px; height: 6px; border-radius: 50%; background-color: #f7992a;} .mb-3{ margin-bottom: 15px;} .login-container .txt-area{ padding: 30px; position: relative; width: 100%; max-width: 500px; padding-bottom: 30px; background-color: white; border-radius: 7px; box-shadow: -1px 1px 30px 0 rgba(0, 0, 0, .08);} .login-container .txt-area > div{ transition: all .2s ease;} .login-container .txt-area.hide > div{ opacity: 0;} .login-container .txt-area > div{} .login-container .txt-area > div h3{ text-align: center; margin-bottom: 30px; color: #06213e; font-weight: 600; font-size: 20px;} .login-container .txt-area > div > div{ gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: baseline;} .login-container .txt-area > div > div:not(:last-child){ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd;} .login-container .txt-area > div > div .logo{ display: flex; align-items: center; justify-content: center; font-size: 40px; color: #375469;} .login-container .txt-area > div > div .logo i{} .login-container .txt-area > div > div .txt{} .login-container .txt-area > div > div .txt p{ font-size: 13px; color: #5c6c78; text-align: center;} .login-container .txt-area .corporate{ display: none;} .login-container .txt-area.cp .corporate{ display: block;} .login-container .txt-area.cp .individual{ display: none;} .login-container .conn{ padding-top: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 100px;} .login-container .conn > div{ width: 40px; height: 20px; background-color: #fafafa; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;} .custom-input{ position: relative; width: 100%;} .custom-input.slct::before{ content: '\f107'; color: var(--main-blue-txt); display: inline-block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900;} .custom-input input[type="file"]{ padding-top: 8px !important;} .custom-input input, .custom-input textarea{ width: 100%; transition: all .3s ease; width: 100%; border-radius: 8px; padding: 0 10px; height: 40px; background-color: white; border: .1px solid rgba(var(--main-blue-txt-o), .4);} .custom-input input:focus, .custom-input textarea:focus{ outline: none; box-shadow: 0 0 0 1px rgba(var(--main-blue-txt-o), 1);} .custom-input input + label, .custom-input textarea + label{ width: fit-content; padding: 0 3px; background-color: white; pointer-events: none; transition: all .2s ease; color: var(--main-blue-txt); font-size: 13px; position: absolute;} .custom-input select{ -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; appearance: none; background-color: transparent; transition: all .3s ease; width: 100%; border-radius: 8px; padding: 0 10px; height: 40px; background-color: white; border: .1px solid rgba(var(--main-blue-txt-o), .4);} .custom-input select::after{ content: 'sssssSSS';} .custom-input select:focus{ outline: none; box-shadow: 0 0 0 1px rgba(var(--main-blue-txt-o), 1);} .custom-input select + label{ top: -7.7px; left: 10px; pointer-events: none; transition: all .2s ease; background-color: var(--white-bg); color: var(--main-blue-txt); font-size: 12px; position: absolute;} .custom-input input:placeholder-shown + label, .custom-input textarea:placeholder-shown + label{ top: 11px; left: 10px;} /* Placeholder Görünüyorsa */ .custom-input input:not(:placeholder-shown) + label, .custom-input textarea:not(:placeholder-shown) + label{ font-size: 11px; top: -6px; left: 10px;} /* Placeholder Görünmüyorsa */ .custom-input:not(.custom-dropdown) input::placeholder, .custom-input textarea::placeholder{ opacity: 0;} /* Placeholedrın gizledik çünkü label'ı placeholder gibi kullanıyoruz */ .custom-input:not(.custom-dropdown) input:focus + label, .custom-input textarea:focus + label{ font-size: 11px; top: -6px;} .custom-input textarea{ resize: none; height: 78px; padding: 10px;} .custom-input textarea::-webkit-scrollbar{ cursor: default; border-radius: 0 8px 8px 0; width: 7px; background-color: rgba(var(--main-blue-txt-o), .1);} .custom-input textarea::-webkit-scrollbar-thumb{ border-radius: 0 8px 8px 0; background-color: var(--main-blue-txt);} .custom-input.txt::before{ content: ''; display: inline-block; width: calc(100% - 20px); height: 10px; background-color: white; position: absolute; left: 50%; transform: translateX(-50%); top: .9px; border-radius: 8px 8px 0 0;} .custom-dropdown{ position: relative;} .custom-dropdown::before{ line-height: 1; transition: all .2s ease; content: '\f107'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--main-blue-txt);} .custom-dropdown.active::before{ transform: rotate(-180deg) translateY(10px);} .custom-dropdown > input{ cursor: default;} .custom-dropdown input:focus{ border-color: transparent;} .custom-dropdown.active > input{ border-color: transparent; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgba(var(--main-blue-txt-o), 1);} .custom-dropdown .dropdown{ transition: all .2s ease; opacity: 0; pointer-events: none; border-top: 1px solid rgba(var(--main-blue-txt-o), .5); border-radius: 0 0 8px 8px; box-shadow: -1px 0 0 0 rgba(var(--main-blue-txt-o), 1), 1px 0 0 0 rgba(var(--main-blue-txt-o), 1), 0 1px 0 0 rgba(var(--main-blue-txt-o), 1); width: 100%; top: calc(100% - 1px); position: absolute; z-index: 3; background-color: white; max-height: 200px; overflow-y: auto;} .custom-dropdown .dropdown .options > span{ display: none; font-size: 11px; width: 100%; text-align: center; padding: 10px 5px; word-break: break-word;} .custom-dropdown.no-result .dropdown .options > span{ display: inline-block;} .custom-dropdown.active .dropdown{ opacity: 1; pointer-events: all;} .custom-dropdown .dropdown::-webkit-scrollbar{ border-radius: 0 0 8px 0; width: 6px; background-color: rgba(var(--main-blue-txt-o), .1);} .custom-dropdown .dropdown::-webkit-scrollbar-thumb{ border-radius: 0 0 8px 0; background-color: rgba(var(--main-blue-txt-o), 1);} .custom-dropdown .dropdown .search-area{ margin-bottom: 2px; box-shadow: -2px -2px 7px 1px rgba(var(--main-blue-txt-o), 0.5); z-index: 2; display: flex; align-items: center; justify-content: center; padding: 10px 0; position: sticky; top: 0; background-color: white;} .custom-dropdown .dropdown .search-area input{ border-radius: 3px; width: calc(100% - 20px); height: 30px; font-size: 11px;} .custom-dropdown .dropdown .search-area input:focus{ box-shadow: none; border-color: rgba(var(--main-blue-txt-o), 1);} .custom-dropdown .dropdown .search-area > div{ display: flex; gap: 10px; width: calc(100% - 20px);} .custom-dropdown .dropdown .search-area > div span{ cursor: pointer; transition: all .2s ease; white-space: nowrap; background-color: var(--main-blue-txt); color: white; border: 1px solid var(--main-blue-txt); font-size: 10px; font-weight: 600; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 3px;} .custom-dropdown .dropdown .search-area > div span:hover{ background-color: white; color: var(--main-blue-txt); box-shadow: inset 0 0 7px 0 rgba(var(--main-blue-txt-o), .2);} .custom-dropdown .dropdown .options{ display: flex; flex-direction: column;} .custom-dropdown .dropdown .options > a{ position: relative; transition: all .15s ease; font-size: 13px; padding: 6px 10px; cursor: pointer;} .custom-dropdown .dropdown .options > a:hover{ background-color: rgba(var(--main-blue-txt-o), .05); padding-left: 15px;} .custom-dropdown .dropdown .options > a:not(:last-child){ border-bottom: 1px solid rgba(var(--main-blue-txt-o), .07);} /* .custom-dropdown.multiple .dropdown .options > a{ padding-left: 27px;} .custom-dropdown.multiple .dropdown .options > a::before{ transition: all .1s ease; content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; width: 12px; height: 12px; background-color: white; border: 1px solid rgba(var(--main-blue-txt-o), .5); border-radius: 2px; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);} .custom-dropdown.multiple .dropdown .options > a.active::before{ background-color: rgba(var(--black-o), .8);} */ .login-container > div .txt-area > .logo{ display: none; width: fit-content; position: absolute; right: 0; bottom: -5px; transform: translateY(100%);} .login-container > div .txt-area > .logo img{ height: 17px;} @media screen and (max-width: 869px) { .login-container > div .form-area .login-txt{ z-index: -1; left: 5px; top: -65px;} .login-container > div{ flex-direction: column-reverse; align-items: center;} .login-container .conn{ flex-direction: row; padding: 0; gap: 40px;} .login-container .conn > div{ height: 50px; width: 30px; border: none; border-right: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9;} .register-area .logo{ display: none;} .login-container > div .txt-area > .logo{ display: inline-block;} .login-container > div .forget-password .send-mail h1{ font-size: 23px;} .login-container > div .forget-password .send-mail p{ font-size: 13px;} .login-container > div .forget-password .send-mail > form{ padding: 25px;} } @media screen and (max-width: 1100px){ .login-container > div .form-area .login-txt.r{ z-index: -1; right: 5px; top: -65px;} } /************************************************************************** ------------------------------- MAIN CONTENT ------------------------------ ***************************************************************************/ /* Categories */ .navbar .categories-container{ display: none;} .main-container{ padding: 35px 0;} .main-container > div{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; display: flex; display: flex; gap: 50px;} .categories-container .categories-area{ width: 193px; display: block; position: sticky; position: -webkit-sticky; top: 20px;} .main-container.filter > div .categories-container{ display: none;} .categories-container .categories-area .header{ display: none; border-bottom: 1px solid #ddd; box-shadow: 0 0 7px 1px #b9b9b9; margin-bottom: 20px; padding: 10px; justify-content: space-between; align-items: center;} .categories-container .categories-area .header img{ height: 30px;} .categories-container .categories-area .header i{ font-size: 25px; transition: all .15s;} .categories-container .categories-area .header i:hover{ cursor: pointer; color: rgb(101, 0, 0);} .categories-container .categories-area ul{ list-style: none;} .categories-container .categories-area ul li > span, .categories-container .categories-area ul li > ul li a{ text-decoration: none; font-size: 13px; color: black; display: flex; gap: 10px; align-items: center; width: 100%; padding-left: 3px; padding-right: 23px;} .categories-container .categories-area ul li > span > a > div{ display: flex;} .categories-container .categories-area ul li > span img{ height: 15px; margin-left: 3px;} .categories-container .categories-area ul li > span > a{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: black;} .categories-container .categories-area .mains{ margin-bottom: 20px;} .categories-container .categories-area .mains ul li > span{ position: relative; transition: all .2s ease-in-out; border-radius: 3px 3px 0 0 ;} .categories-container .categories-area .mains ul li > span::before{ content: ''; display: inline-block; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: black; transition: all .2s ease-in-out;} .categories-container .categories-area .mains ul li > span:hover{ background-color: #f2f2f2; padding-left: 10px;} .categories-container .categories-area .mains ul li > span:hover::before{ width: 100%;} .categories-container .categories-area .mains ul li > span > a{ padding: 7px 0; display: inline-block; display: flex; width: 100%;} .categories-container .categories-area > ul > li{ position: relative; transition: all .2s ease-in-out;} .categories-container .categories-area > ul > li > span{ padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #c5c5c5; transition: all .2s ease-in-out;} .categories-container .categories-area > ul > li:not(.open) > span:hover{ cursor: pointer; background-color: #fafafa; padding-left: 10px;} .categories-container .categories-area > ul > li:not(.open) > span:hover::after{ animation: up-down 1s ease infinite;} .categories-container .categories-area > ul > li.open > span:hover::after{ animation: up-downX 1s ease infinite;} .categories-container .categories-area > ul > li > span.more::after{ content: '\f107'; font-family: 'FONT AWESOME 5 FREE'; font-size: 16px; font-weight: 900; position: absolute; display: inline-block; right:10px; color: #8d8d8d; transition: all .2s;} .categories-container .categories-area > ul > li.open > span.more{ background-color: #f9f9f9; box-shadow: inset 0 0 10px 1px #f1f1f1; transition: all .2s; border-radius: 0 0 5px 5px; padding-left: 10px;} .categories-container .categories-area > ul > li.open > span.more::after{ transform: rotate(-180deg);} .categories-container .categories-area > ul > li.open > span.more:hover::after{ color: black;} .categories-container .categories-area > ul > li.open > span.more::after{ color: black;} .categories-container .categories-area > ul > li.open > span.more:hover{ cursor: pointer; background-color: #fff; box-shadow: inset 0 0 15px 4px #dbdbdb;} .categories-container .categories-area > ul > li.open > ul{ padding-bottom: 10px; padding-top: 5px;} .categories-container .categories-area > ul > li:last-child{ border-bottom: 1px solid #c5c5c5;} .categories-container .categories-area > ul > li > ul{ height: 0; overflow: hidden; transition: all .2s ease-in-out;} .categories-container .categories-area > ul > li > ul > li a{ transition: all .15s ease-in-out; border-radius: 5px; height: auto; padding: 5px 15px 5px 40px; display: flex; align-items: center; width: 100%; position: relative;} .categories-container .categories-area > ul > li > ul > li a::after{ transition: all .2s ease; content:'\f105'; font-family: 'FONT AWESOME 5 FREE'; color: rgb(0 0 0 / 60%); font-weight: 900; font-size: 13px; color: black; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);} .categories-container .categories-area > ul > li > ul > li:hover a::after{ color: white;} .categories-container .categories-area > ul > li > ul > li a::before{ content: ''; display: inline-block; width: 25px; height: 100%; background-color: #f9f9f9; position: absolute; left: 3px; bottom: 0;} .categories-container .categories-area > ul > li > ul > li:first-child a::before{ height: calc(100% + 10px);} .categories-container .categories-area > ul > li > ul > li:last-child a::before{ height: calc(100% + 20px); bottom: unset; top: 0;} .categories-container .categories-area > ul > li > ul > li:nth-child(even) a:hover{ background-color: #f3870b; color: white;} .categories-container .categories-area > ul > li > ul > li:nth-child(odd) a:hover{ background-color: #44c9e8; color: white;} .main-container > div > .filter-container{ display: flex; align-items: inherit; height: fit-content;} .main-container > div > .filter-container > .filter-area{ width: 280px; overflow: hidden; display: block; position: sticky; position: -webkit-sticky; top: 20px; box-shadow: 0 0 10px 1px #c5c5c5; transition: all .2s ease;} .main-container > div > .filter-container > .filter-area .head{ display: none; position: sticky; top: 0; background-color: white; z-index: 3; width: 100%; padding: 10px 0; background-color: white; border-bottom: 1px solid #c1c1c1; font-size: 17px; font-weight: 600; text-align: center;} .main-container > div > .filter-container > .filter-area .head span{ position: absolute; left: 10px; top: 5px; font-size: 25px;} .main-container > div > .filter-container > .filter-area .header{ display: none; background-color: #f0f0f0; padding-bottom: 15px; padding-top: 15px;} .main-container > div > .filter-container > .filter-area .header .total-filters{ padding: 10px 10px 15px; display: flex; flex-direction: column; margin-bottom: 10px; margin-top: 5px; background-color: white; align-items: flex-start; border-top: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1;} .main-container > div > .filter-container > .filter-area .header .total-filters > div{ display: flex; flex-wrap: wrap; gap: 10px;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > div{ display: flex; flex-wrap: wrap; gap: 7px;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > div > div{ font-size: 12px; box-shadow: 0 0 2px 1px #ddd; border: 1px solid #ddd; padding: 2px 7px; border-radius: 5px; display: flex; align-items: center;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > div > div b{ display: flex; align-items: center; margin-right: 4px; color: #333;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > div > div a{ border: none; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white; background-color: #f7992a; width: 15px; height: 15px; border-radius: 50%; padding: 0 0 2px 0; margin-left: 4px; cursor: pointer; font-size: 10px; transition: all .2s;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > a{ text-decoration: none; transition: all .2s ease; font-size: 11px; padding: 3px 10px; border: 1px solid #f7992a; background-color: #f7992a; color: white; border-radius: 5px;} .main-container > div > .filter-container > .filter-area .header .total-filters > div > a:hover{ cursor: pointer; background-color: white; color: #f7992a;} /*.main-container > div > .filter-container > .filter-area > .categori{ border-bottom: 1px solid #ddd; background-color: #fcfcfc;} .main-container > div > .filter-container > .filter-area > .categori h5{ color: white; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; background-color: #44c9e8; padding: 5px 10px; box-shadow: 0 0 5px 1px #ddd;} .main-container > div > .filter-container > .filter-area > .categori header{color: black; font-size: 25px; font-weight: 600;} .main-container > div > .filter-container > .filter-area > .categori ul{ list-style: none;} .main-container > div > .filter-container > .filter-area > .categori ul{ padding-left: 7px; margin-top: 3px;} .main-container > div > .filter-container > .filter-area > .categori ul > div::-webkit-scrollbar{ width: 7px; background-color: #e3e3e3; border-radius: 3px;} .main-container > div > .filter-container > .filter-area > .categori ul > div::-webkit-scrollbar-thumb{ background-color: #ccc; border-radius: 3px;} .main-container > div > .filter-container > .filter-area > .categori ul > div{ max-height: 250px; overflow: auto;} .main-container > div > .filter-container > .filter-area > .categori ul li{ line-height: 1.4; position: relative;} .main-container > div > .filter-container > .filter-area > .categori ul li.open::before{ content: ''; display: inline-block; width: 1.5px; height: 18px; position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .main-container > div > .filter-container > .filter-area > .categori ul li.open::after{ content: ''; display: inline-block; width: 4px; height: 2px; position: absolute; top: 37px; left: 0; background-color: #c9c9c9;} .main-container > div > .filter-container > .filter-area > .categori ul li.finish::before{ content: ''; display: inline-block; width: 2px; height: calc(100% - 25px); position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .main-container > div > .filter-container > .filter-area > .categori ul li a{ font-size: 13px; text-decoration: none; color: #161658; transition: all .2s ease;} .main-container > div > .filter-container > .filter-area > .categori ul li a::before{ content: ''; transition: all .2s ease; margin-right: 0px; display: inline-block; width: 0px; margin-bottom: 3px; height: 1.5px; background-color: #f7992a;} .main-container > div > .filter-container > .filter-area > .categori ul li a:hover::before{ width: 8px; margin-right: 3px;} .main-container > div > .filter-container > .filter-area > .categori ul li a:hover{ color: #c96b00;} .main-container > div > .filter-container > .filter-area > .categori ul li a.active{ color: #c96b00;} .main-container > div > .filter-container > .filter-area > .categori ul li a span{ font-size: 11px; margin-left: 5px;} .main-container > div > .filter-container > .filter-area > .categori > ul{ padding-left: 0; margin-top: 0; padding: 10px; background-color: #fdfdfd;} .main-container > div > .filter-container > .filter-area > .categori > ul > div > li > a{ font-weight: 600;}*/ .filter-area > .categori{ border-bottom: 1px solid #ddd; background-color: #fcfcfc;} .filter-area > .categori h5{ color: white; border-bottom: 1px solid #ddd; border-radius: 3px 3px 0 0; background-color: #44c9e8; padding: 5px 10px; box-shadow: 0 0 5px 1px #ddd;} .filter-area > .categori header{color: black; font-size: 25px; font-weight: 600;} .filter-area > .categori ul{ list-style: none;} .filter-area > .categori ul{ padding-left: 7px; margin-top: 3px;} .filter-area > .categori ul > div::-webkit-scrollbar{ width: 7px; background-color: #e3e3e3; border-radius: 3px;} .filter-area > .categori ul > div::-webkit-scrollbar-thumb{ background-color: #ccc; border-radius: 3px;} .filter-area > .categori ul > div{ max-height: 250px; overflow: auto;} .filter-area > .categori ul li{ line-height: 1.4; position: relative;} .filter-area > .categori ul li.open::before{ content: ''; display: inline-block; width: 1.5px; height: 18px; position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .filter-area > .categori ul li.open::after{ content: ''; display: inline-block; width: 4px; height: 2px; position: absolute; top: 37px; left: 0; background-color: #c9c9c9;} .filter-area > .categori ul li.finish::before{ content: ''; display: inline-block; width: 2px; height: calc(100% - 25px); position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .filter-area > .categori ul li a{ font-size: 13px; text-decoration: none; color: #161658; transition: all .2s ease;} .filter-area > .categori ul li a::before{ content: ''; transition: all .2s ease; margin-right: 0px; display: inline-block; width: 0px; margin-bottom: 3px; height: 1.5px; background-color: #f7992a;} .filter-area > .categori ul li a:hover::before{ width: 8px; margin-right: 3px;} .filter-area > .categori ul li a:hover{ color: #c96b00;} .filter-area > .categori ul li a.active{ color: #c96b00;} .filter-area > .categori ul li a span{ font-size: 11px; margin-left: 5px;} .filter-area > .categori > ul{ padding-left: 0; margin-top: 0; padding: 10px; background-color: #fdfdfd;} .filter-area > .categori > ul > div > li > a{ font-weight: 600;} #store-categry{ padding:0;} .main-container > div > .filter-container > .filter-area > .other-filters{ padding: 10px;} .main-container > div > .filter-container > .filter-area > .other-filters > div{ border-bottom: 1px solid #ddd; padding: 15px 0 25px;} .main-container > div > .filter-container > .filter-area > .other-filters > div:first-child{ padding-top: 10px;} .main-container > div > .filter-container > .filter-area > .other-filters > div label{ font-size: 12px; font-weight: 600; margin-bottom: 7px; display: inline-block;} .main-container > div > .filter-container > .filter-area > .other-filters > div input:not([type='checkbox'], [type='radio']), .main-container > div > .filter-container > .filter-area > .other-filters > div select{ width: 100%; height: 28px; padding: 0 5px; border: none; box-shadow: 0 0 10px 1px #e4e4e4; border: 1px solid #ddd; border-radius: 4px; transition: all .2s;} .main-container > div > .filter-container > .filter-area > .other-filters > div input::placeholder{ font-size: 13px; opacity: .4; color: black;} .main-container > div > .filter-container > .filter-area > .other-filters > div input:not([type='checkbox'], [type='radio']):focus{ outline: none; box-shadow: 0 0 5px 2px #80d6e9;} .main-container > div > .filter-container > .filter-area > .other-filters > div select:focus-within{ box-shadow: 0 0 0 2px #44c9e8; outline: none;} .main-container > div > .filter-container > .filter-area > .other-filters > div .compare{ display: flex; gap: 20px;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-column > div{ display: flex; align-items: center; gap: 3px; height: 30px;} .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="checkbox"]{ position: absolute; cursor: pointer; height: 0; width: 0;} .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; border: 1px solid #44c9e8; width: 15px; height: 15px; border-radius: 3px;} .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: #44c9e8; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #44c9e8; width: 15px; height: 15px;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-column > div > span{ font-size: 13px; margin-left: 22px;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-column > div > span > small{ font-size: 11px; color: #5b5b5b;} .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="radio"]{ position: absolute; cursor: pointer; height: 0; width: 0;} .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="radio"]::before{ content: ''; position: absolute; left: 0; top: 0; margin-top: 3px; border-radius: 50%; display: inline-block; border: 1px solid #44c9e8; width: 15px; height: 15px; } .main-container > div > .filter-container > .filter-area > .other-filters > div input[type="radio"]:checked::before{ content: ''; color: white; background-color: #44c9e8; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #44c9e8; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px white, 0 0 0 1px #44c9e8;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-row { display: grid; grid-template-columns: 1fr 1fr;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-row > div > span{ font-size: 13px; margin-left: 22px;} .main-container > div > .filter-container > .filter-area > .other-filters > div .checkbox-row > div > span > small{ font-size: 11px; color: #5b5b5b;} .main-container > div > .filter-container > .filter-area > .button button{ transition: all .2s ease; border: none; border-radius: 7px; width: calc(100% - 20px); height: 40px; margin: 20px 10px; background-color: #f7992a; color: white; font-weight: 600; box-shadow: 0 0 10px 1px #b9b9b9;} .main-container > div > .filter-container > .filter-area > .button button:hover{ transform: translateY(-3px) translateX(3px); box-shadow: -3px 6px 8px 1px #878787; cursor: pointer;} .main-container > div .content-area{ width: 100%; max-width: calc(100% - 243px);} .main-container > div .content-area .advert-area.no-slider .categori{ border: 1px solid #ddd; background-color: #fcfcfc; display: none;} .main-container > div .content-area .advert-area.no-slider .categori h5{ color: white; border-bottom: 1px solid #ddd; background-color: #44c9e8; padding: 5px 10px; box-shadow: 0 0 5px 1px #ddd;} .main-container > div .content-area .advert-area.no-slider .categori header{color: black; font-size: 25px; font-weight: 600;} .main-container > div .content-area .advert-area.no-slider .categori ul{ list-style: none;} .main-container > div .content-area .advert-area.no-slider .categori ul{ padding-left: 7px; margin-top: 3px;} .main-container > div .content-area .advert-area.no-slider .categori ul > div::-webkit-scrollbar{ width: 7px; background-color: #e3e3e3; border-radius: 3px;} .main-container > div .content-area .advert-area.no-slider .categori ul > div::-webkit-scrollbar-thumb{ background-color: #ccc; border-radius: 3px;} .main-container > div .content-area .advert-area.no-slider .categori ul > div{ max-height: 250px; overflow: auto;} .main-container > div .content-area .advert-area.no-slider .categori ul li{ line-height: 1.4; position: relative;} .main-container > div .content-area .advert-area.no-slider .categori ul li.open::before{ content: ''; display: inline-block; width: 1.5px; height: 18px; position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .main-container > div .content-area .advert-area.no-slider .categori ul li.open::after{ content: ''; display: inline-block; width: 4px; height: 2px; position: absolute; top: 37px; left: 0; background-color: #c9c9c9;} .main-container > div .content-area .advert-area.no-slider .categori ul li.finish::before{ content: ''; display: inline-block; width: 2px; height: calc(100% - 25px); position: absolute; top: 20px; left: 0; background-color: #c9c9c9;} .main-container > div .content-area .advert-area.no-slider .categori ul li a{ font-size: 15px; text-decoration: none; color: #161658; transition: all .2s ease;} .main-container > div .content-area .advert-area.no-slider .categori ul li a::before{ content: ''; transition: all .2s ease; margin-right: 0px; display: inline-block; width: 0px; margin-bottom: 3px; height: 1.5px; background-color: #f7992a;} .main-container > div .content-area .advert-area.no-slider .categori ul li a:hover::before{ width: 8px; margin-right: 3px;} .main-container > div .content-area .advert-area.no-slider .categori ul li a:hover{ color: #c96b00;} .main-container > div .content-area .advert-area.no-slider .categori ul li a.active{ color: #c96b00;} .main-container > div .content-area .advert-area.no-slider .categori ul li a span{ font-size: 11px; margin-left: 5px;} .main-container > div .content-area .advert-area.no-slider .categori > ul{ padding-left: 0; margin-top: 0; padding: 10px; background-color: #fdfdfd;} .main-container > div .content-area .advert-area.no-slider .categori > ul > div > li > a{ font-weight: 600;} /* First Banner */ .main-container > div .content-area .first-banner{ position: relative; margin-bottom: 40px;} .main-container > div .content-area .first-banner > span{ font-size: 23px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 10px; cursor: pointer; transition: all .2s ease-in-out; position: absolute; top: 50%; transform: translateY(-50%);} .main-container > div .content-area .first-banner > span.disabled{ pointer-events: none;} .main-container > div .content-area .first-banner > span:hover{ background-color: #f5f5f5;} .main-container > div .content-area .first-banner > span.disabled:hover{ background-color: rgb(255, 237, 237);} .main-container > div .content-area .first-banner .prev{ left: -25px;} .main-container > div .content-area .first-banner .next{ right: -25px;} .main-container > div .content-area .first-banner .first-banner-slider{ max-height: 240px; border-radius: 10px; display: flex; flex-wrap: nowrap; width: 100%; margin: 0 auto; overflow: hidden; scroll-behavior: smooth;} .main-container > div .content-area .first-banner .first-banner-slider > img{ min-width: 100%; max-width: 100%; height: auto;} .main-container > div .content-area .first-banner .dots{ width: 97%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); height: 20px; /*background-color: rgba(0, 0, 0, 0.05);*/ display: flex; align-items: center; justify-content: center; gap: 10px;} .main-container > div .content-area .first-banner .dots > span{ width: 20px; height: 4px; background-color: #e5e5e5; /*border: 1px solid #c1c1c1;*/ border-radius: 2px; transition: all .2s ease-in-out;} .main-container > div .content-area .first-banner .dots > span:not(.active):hover{ cursor: pointer;} .main-container > div .content-area .first-banner .dots > span.active{ pointer-events: none; background-color: #535353; /*border: 1px solid #f0952d;*/} @keyframes up-down { 0%{ transform: translateY(0px);} 25%{ transform: translateY(1px);} 50%{ transform: translateY(-1px);} 75%{ transform: translateY(1px);} 100%{ transform: translateY(0px);} } @keyframes up-downX { 0%{ transform: translateY(0px) rotate(-180deg);} 25%{ transform: translateY(1px) rotate(-180deg);} 50%{ transform: translateY(-1px) rotate(-180deg);} 75%{ transform: translateY(1px) rotate(-180deg);} 100%{ transform: translateY(0px) rotate(-180deg);} } /* Advert */ .advert-area{ width: 100%; margin-bottom: 30px;} .advert-area > .header{ border-bottom: 1px solid #7a7a7a; display: flex; justify-content: space-between; padding: 0 10px;} .advert-area > .header h3{ font-weight: 500; font-size: 20px;} .advert-area > .header a{ color: #7a7a7a; text-decoration: none; font-size: 13px;} .advert-area > .header a i{ margin-left: 5px; display: inline-block;} .advert-area > .header a:hover i{ animation: left-right 1s ease infinite;} .advert-area > .filter-header{ border-bottom: 1px solid #bcbcbc; box-shadow: 0 7px 8px -5px #bcbcbc;} .advert-area > .filter-header .header{ display: flex; align-items: center; justify-content: space-between;} .advert-area > .filter-header .header .route{ border-bottom: 1px solid #043b665b; margin-bottom: 7px;} .advert-area > .filter-header .header .route a{ font-size: 16px; text-decoration: none; color: #072268;} .advert-area > .filter-header .header .route span{ font-size: 14px; text-decoration: none; color: black;} .advert-area > .filter-header .header .route a:nth-last-child(2){ color: #072268; font-weight: 600;} .advert-area > .filter-header .header .route a:not(:first-child)::before{ content: '>'; margin-right: 3px;} .advert-area > .filter-header select{ height: 32px; transform: translateY(1px); border-color: #b9b8b8; color: #000; border-bottom: none; border-radius: 3px 3px 0 0; font-family: 'Poppins', sans-serif; padding-left: 4px; font-size: 12px;} .advert-area > .filter-header select:focus-visible{ outline: none;} .advert-area > .filter-header select option{ font-size: 12px; color: #000; font-family: 'Poppins', sans-serif; padding-left: 4px;} .advert-area > .filter-header .total-filter-area{ display: flex; margin-bottom: 10px; margin-top: 5px;} .advert-area > .filter-header .total-filter-area > div{ display: flex; gap: 7px;} .advert-area > .filter-header .total-filter-area > div > div{ font-size: 12px; /*box-shadow: 0 0 2px 1px #ddd;*/ border: 1px solid #ddd; padding: 2px 7px; border-radius: 5px; display: flex; align-items: center;} .advert-area > .filter-header .total-filter-area > div > div b{ margin-right: 4px; color: #333; } .advert-area > .filter-header .total-filter-area > div > div a{ border: none; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white; background-color: #f7992a; width: 15px; height: 15px; border-radius: 50%; padding: 0 0 2px 0; margin-left: 4px; cursor: pointer; font-size: 10px; transition: all .2s;} .advert-area > .filter-header .total-filter-area > div > div a:hover{ background-color: #d1663b; } .advert-area > .filter-header .total-filter-area > a{ text-decoration: none; transition: all .2s ease; font-size: 11px; padding: 3px 10px; border: 1px solid #f7992a; background-color: #f7992a; color: white; margin-left: 10px; border-radius: 5px;} .advert-area > .filter-header .total-filter-area > a:hover{ cursor: pointer; background-color: white; color: #f7992a;} .advert-area > .filter-header .filter-area{ display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; margin-top: 15px;} .advert-area > .filter-header .filter-area .buttons{ display: flex; align-items: center; gap: 5px;} .advert-area > .filter-header .filter-area .buttons a{ text-decoration: none; font-size: 12px; background-color: white; color: #222; border: 1px solid #b9b8b8; border-radius: 7px 7px 0 0; height: 30px; padding: 0 13px; transform: translateY(1px); cursor: pointer; transition: all .15s ease; border-bottom: none; display: flex; align-items: center; justify-content: center;} .advert-area > .filter-header .filter-area .buttons a.active{ background-color: #f7992a; color: white; /*box-shadow: 0 0px 4px 1px #ac7730;*/ border-color: transparent;} .advert-area > .filter-header .filter-area .buttons a:not(.active):hover{ box-shadow: inset 0 0 13px 1px #ddd; cursor: pointer;} .advert-area > .filter-header .filter-area .select{ margin-left: auto; display: flex; align-items: center; gap: 5px; transform: translateY(-1px);} .advert-area > .filter-header .filter-area .select button{ background-color: white; border-radius: 3px; cursor: pointer; transition: all .2s ease; border: 1px solid #b9b8b8; border-bottom: none; transform: translateY(1px);} .advert-area > .filter-header .filter-area .select button.active{ pointer-events: none; background-color: #f7992a; color: white; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease;} .advert-area > .filter-header .filter-area .select button:not(.active):hover{ color: #ee8b00; border-color: #ee8b00;} .advert-area > .filter-header .filter-area .select .line{ display: flex; font-size: 17px; width: 32px; height: 32px; align-items: center; justify-content: center; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;} .advert-area > .filter-header .filter-area .select .box{ display: flex; font-size: 9px; width: 32px; margin-right: 5px; gap: 3px; height: 32px; align-items: center; justify-content: center; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;} .advert-area > .filter-header .filter-area .select .box span{ display: flex; flex-direction: column; gap: 2px;} .advert-area > .body{ position: relative;} .advert-area > .body > span{ font-size: 23px; height: calc(100% - 30px); display: flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 10px; cursor: pointer; transition: all .2s ease-in-out; position: absolute; top: 50%; transform: translateY(-50%);} .advert-area > .body > span.last{ background-color: #fdbebe; box-shadow: inset 0 0 10px 1px #ff8080; color: #760000;} .advert-area > .body > span i{ pointer-events: none;} .advert-area > .body > span:not(.last):hover{ background-color: #f5f5f5;} .advert-area > .body > span.prev{ left: -25px;} .advert-area > .body > span.next{ right: -25px;} .advert-area > .body::before, .advert-area > .body::after{ content: ''; display: inline-block; position: absolute; width: 50px; height: calc(100% - 30px); top: 50%; transform: translateY(-50%); transition: all .15s ease; pointer-events: none; z-index: 2;} .advert-area > .body::before{ left: 0; border-radius: 0 10px 10px 0; background: linear-gradient(-90deg, #ffffff00, #ffffff71 42%, #ffffff 89%); opacity: 0;} .advert-area > .body::after{ right: 0; border-radius: 10px 0 0 10px; background: linear-gradient(90deg, #ffffff00, #ffffff71 42%, #ffffff 89%); opacity: 0;} .advert-area > .body.left::before{ opacity: 1;} .advert-area > .body.right::after{ opacity: 1;} .advert-area > .body > div{ width: 100%; margin: 20px 0 20px auto; display: flex; flex-wrap: nowrap; gap: 25px; padding: 15px 1px; overflow: hidden; position: relative; scroll-behavior: smooth;} .advert-area > .body > div .advert{ position: relative; width: 240px; min-width: 240px; border-radius: 7px; box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.1); text-decoration: none; transition: all .3s;} .advert-area > .body > div .advert::before, .advert-area > .body > div .advert::after{ z-index: -1; border-radius: 5px; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .advert-area > .body > div .advert:hover{ box-shadow: 0 0 7px 1px #bcbcbc;} .advert-area > .body > div .advert::before { box-shadow: 0 -3px 0 0 white;} .advert-area > .body > div .advert.boost::before { box-shadow: 0 -3px 0 0 #59ca42;} .advert-area > .body > div .advert.boost .img-area > small::before{ content: '\eb9b'; font-family: 'Material Icons'; position: absolute; display: inline-block; right: 0; top: 0; font-size: 11px; color: white; background-color: #35c319; padding: 5px 5px 7px 7px; font-size: 15px; border-radius: 0 0 0 5px; opacity: .95; z-index: 3;} .advert-area > .body > div .advert.showcase > .img-area::before{ content: 'Vitrin İlanı'; position: absolute; display: inline-block; left: 0; top: 0; font-size: 11px; color: white; background-color: #59ca42; padding: 2px 6px; opacity: .95; z-index: 2; border-radius: 0 0 3px 0;} .advert-area > .body > div .advert::after{ box-shadow: 0 3px 0 0 white;} .advert-area > .body > div .advert.urgent::after{ box-shadow: 0 3px 0 0 #ed2b2b;} .advert-area > .body > div .advert.urgent > .img-area::after{ content: 'Acil Acil'; position: absolute; display: inline-block; left: 0; bottom: 0; font-size: 11px; color: white; background-color: #ed2b2b; padding: 2px 6px; opacity: .95; z-index: 2; border-radius: 0 3px 0 0;} .advert-area > .body > div .advert.bold .header > .store-detail h5{ font-weight: 600;} .advert-area > .body > div .advert.bold .advert-detail h5{ font-weight: 600;} .advert-area > .body > div .advert .header{ height: 65px; background-color: white; border-radius: 7px 7px 0 0; position: relative;} .advert-area > .body > div .advert .header > .seller-logo{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background-color: white; width: 50px; height: 50px;} .advert-area > .body > div .advert .header > .seller-logo img{ width: 100%;} .advert-area > .body > div .advert.corporate .header > .seller-logo{ border-radius: 10px;} .advert-area > .body > div .advert.corporate .header > .seller-logo img{ border-radius: 8px;} .advert-area > .body > div .advert.individual .header > .seller-logo{ border-radius: 50%;} .advert-area > .body > div .advert.individual .header > .seller-logo img{ border-radius: 50%;} .advert-area > .body > div .advert .header > .store-detail{ padding: 10px 5px 7px 67px; overflow: hidden; position: relative;} .advert-area > .body > div .advert .header > .store-detail h5{ position: relative; text-transform: uppercase; font-weight: 500; font-size: 14px; color: black; width: fit-content; max-width: 100%; height: 15px; line-height: 1.1; -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; padding-righT: 25px;} .advert-area > .body > div .advert .header > .store-detail h5 img{ width: 13px; position: absolute; transform: translate(2px, -1px); top: .5px; right: 5px;} .advert-area > .body > div .advert .header > .store-detail > div{ display: flex; position: relative; overflow: hidden;} .advert-area > .body > div .advert .header > .store-detail > div .trust{ font-size: 10px;} .advert-area > .body > div .advert .header > .store-detail > div .trust.box{ font-size: 10px; color: white; padding: 2px 7px; border-radius: 3px; margin-top: 5px;} .advert-area > .body > div .advert .header > .store-detail > div .trust:not(.box).g{ color: rgb(7, 127, 7);} .advert-area > .body > div .advert .header > .store-detail > div .trust:not(.box).b{ color: rgb(35 150 214);} .advert-area > .body > div .advert .header > .store-detail > div .trust:not(.box).o{ color: rgb(247 153 42)} .advert-area > .body > div .advert .header > .store-detail > div .trust.box.g{ background-color: rgb(7, 127, 7);} .advert-area > .body > div .advert .header > .store-detail > div .trust.box.b{ background-color: rgb(35 150 214);} .advert-area > .body > div .advert .header > .store-detail > div .trust.box.o{ background-color: rgb(247 153 42)} .advert-area > .body > div .advert .img-area{ height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;} .advert-area > .body > div .advert .img-area img{ width: 100%; transition: all .5s ease;} .advert-area > .body > div .advert .img-area .hearth-btn{ display: inline-block; position: absolute; right: 5px; bottom: 5px; height: 30px; width: 30px; border-radius: 50%; display: flex; justify-content: center; padding-top: 6px; background-color: #f5f5f5; color: #b9b9b9; border: 1px solid #b9b9b9; font-size: 16px;} .advert-area > .body > div .advert .img-area .hearth-btn.active{ color: #f9c50b; animation: hearth-effect-shadow 1.5s linear 1;} .advert-area > .body > div .advert .img-area .hearth-btn.active i{ animation: hearth-effect 1.5s linear 1; display: inline-block;} .advert-area > .body > div .advert:hover > .img-area img{ transform: scale(1.1) /*rotate(1deg)*/;} .advert-area > .body > div .advert .advert-detail{ background-color: white; border-radius: 0 0 7px 7px; padding: 11px 10px 10px;} .advert-area > .body > div .advert .advert-detail h5{ font-weight: 400; font-size: 14px; font-weight: 600; color: #262626; height: 32px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;} .advert-area > .body > div .advert .advert-detail p{ font-weight: 400; font-size: 11px; color: #4e4e4e; height: 25px; line-height: 1.1; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;} .advert-area > .body > div .advert .advert-detail .icons{ display: flex; gap: 5px; margin-bottom: 5px;} .advert-area > .body > div .advert .advert-detail .icons span{ color: #666; font-size: 12px; display: flex; align-items: center; gap: 5px; } .advert-area > .body > div .advert .advert-detail .icons span i{ font-size: 10px; transform: translateY(1px);} .advert-area > .body > div .advert .advert-detail .prices{ font-weight: 600; display: flex; gap: 3px; align-items: flex-end; margin-top: 5px;} .advert-area > .body > div .advert .advert-detail .prices .current-price{ font-size: 14px; color: #000; display: inline-block;} .advert-area > .body > div .advert .advert-detail .prices .current-price span{ color: black; margin-left: 2px;} .advert-area > .body > div .advert .advert-detail .prices .last-price{ text-decoration: line-through; margin-bottom: 1px; font-size: 11px; color: #2e5124;} .advert-area > .body > div .advert .advert-detail .prices .last-price span{ color: #505050;} .advert-area > .body > div .advert .advert-detail .prices .another-unit{ background-color: #a3a3a3; color: white; font-size: 11px; padding: 2px 5px; font-weight: 500;} .advert-area > .body > div .advert .advert-detail .prices .another-unit::before{ content: '\f0ec'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; margin-right: 2px; font-size: 8px; display: inline-block; transform: translateY(-2px);} .advert-area > .body > div .advert .advert-detail .info{ display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding-top: 10px; border-top: 1px solid #ddd;} .advert-area > .body > div .advert .advert-detail .info span{ font-size: 10px; color: #666670; font-weight: 500; } /* ADVERT NO SLIDER */ .main-container > div.single{ gap: 30px;} /* Adverts page css */ .advert-area.no-slider{} .advert-area.no-slider > .body > span{ display: none;} .advert-area.no-slider > .body > div{ width: 100%; flex-wrap: wrap; gap: 20px; overflow: unset; margin-top: 10px;} .advert-area.no-slider.grid > .body > div{ gap: 16px;} .advert-area.no-slider.grid > .body > div .advert{ width: calc(33% - 9px);} .advert-area.no-slider.grid > .body > div .advert .right-area{ display: none;} /* .advert-area.no-slider.line > .body > div .advert{ width: 100%;} */ /* .advert-area.no-slider.line > .body > div .advert.boost{ border-top: none; border-left: 5px solid #59ca42;} */ /* .advert-area.no-slider.line > .body > div .advert.urgent{ border-bottom: none; border-right: 5px solid #ed2b2b;} */ /* .advert-area.no-slider.line > .body > div .advert{ display: flex; overflow: hidden;} */ /* .advert-area.no-slider.line > .body > div .advert .img-area{ width: 280px; min-width: 280px ; height: calc(100% + 2px);} */ /* .advert-area.no-slider.line > .body > div .advert .img-area img{ display: block;} */ /* .advert-area.no-slider.line > .body > div .advert .header{ display: none;} */ /* .advert-area.no-slider.line > .body > div .advert .advert-detail{ display: none;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area{ width: 100%; display: none; display: flex; flex-direction: column; justify-content: space-between;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail{ width: 100%; display: flex;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .img-area{ display: flex; min-height: 100px; max-height: 100px; min-width: 100px; max-width: 100px; align-items: center; justify-content: center; border: 1px solid #ddd; padding: 5px; box-shadow: 0 0 10px 1px #ddd; border-bottom-left-radius: 8px; overflow: hidden;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .img-area > div{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-bottom-left-radius: 8px; overflow: hidden;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .img-area img{ width: 100%; border-bottom-left-radius: 7px;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .texts{ width: 100%;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .texts h5{ width: 100%; height: 34px; box-shadow: 0 1px 3px 1px #ddd; color: black; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .texts b{ color: #232323; padding: 10px 7px 5px; font-size: 15px;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .top-detail .texts p{ color: #474747; padding: 0px 7px; font-size: 13px; overflow: hidden; height: 32px; line-height: 1.2; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .bottom-detail{ width: 100%; } */ /* .advert-area.no-slider.line > .body > div .advert .right-area .bottom-detail .prices{ padding: 0 7px; margin-bottom: 5px;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .bottom-detail .prices .price{ color: black; font-weight: 600;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .bottom-detail .prices .price span{ color: #23960c;} */ /* .advert-area.no-slider.line > .body > div .advert .right-area .bottom-detail .footer{ display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666; padding: 0 7px; box-shadow: 0 -1px 3px 1px #ddd; width: 100%; height: 25px;} */ .advert-area.no-slider > .body > div .advert{ transition: all .3s;} .advert-area.no-slider > .body > div .advert:hover{ box-shadow: 0 0 7px 1px #a4a4a4;} .advert-area.no-slider > .body > div .advert .header{ height: 62px;} .advert-area.no-slider > .body > div .advert .header > .seller-logo{ width: 50px; height: 50px;} .advert-area.no-slider > .body > div .advert .header .store-detail{ padding-left: 67px; padding-top: 7px;} .advert-area.no-slider > .body > div .advert .header .store-detail h5{ text-transform: uppercase; font-size: 15px; height: 18px; font-weight: 400;} .advert-area.no-slider > .body > div .advert .header > .store-detail > div .trust{ font-size: 10px; font-weight: 300;} .advert-area.no-slider > .body > div .advert .img-area{ height: 175px;} .advert-area.no-slider > .body > div .advert .advert-detail .info span{ font-size: 12px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices{ margin-top: 12px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .current-price{ font-size: 16px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .last-price{ font-size: 13px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .another-unit{ background-color: #a3a3a3; color: white; font-size: 11px; padding: 2px 5px; font-weight: 500;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .another-unit span{ margin-left: 2px; margin-right: 2px;} .advert-area.no-slider .other-adverts{ display: flex; justify-content: center;} .advert-area.no-slider .other-adverts ul{ list-style: none; display: flex; outline: 1px solid #b2bcc7; border-radius: 5px; overflow: hidden;} .advert-area.no-slider .other-adverts ul li{} .advert-area.no-slider .other-adverts ul li a{ color: #686868; font-size: 12px; font-weight: 400; display: flex; justify-content: center; align-items: center; padding: 5px 13px; text-decoration: none; border-left: 1px solid #b2bcc7; transition: all .2s ease;} .advert-area.no-slider .other-adverts ul li a:hover{ background-color: #eaf5ff; color: #003ace;} .advert-area.no-slider .other-adverts ul li a.active{ background-color: #0d6efd; color: #fff; pointer-events: none;} .advert-area.no-slider .other-adverts ul li a.disabled{ background-color: #f1f1f1; color: #8a8a8a; pointer-events: none;} .advert-area.no-slider .other-adverts ul li:first-child a{ border-left: none;} .advert-area.no-slider .other-adverts ul li:last-child a{ } /* STORE */ .store-section{ margin-top: 60px;} .store-section > div{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px;} .store-section > div .header{ padding: 0 10px; border-bottom: 1px solid #7a7a7a; display: flex; justify-content: space-between; align-items: center;} .store-section > div .header h3{ font-weight: 500; font-size: 20px;} .store-section > div .header a{ color: #7a7a7a; text-decoration: none; font-size: 13px;} .store-section > div .header a i{ margin-left: 5px; display: inline-block;} .store-section > div .header a:hover i{ animation: left-right 1s ease infinite;} .store-section > div .body{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;} .store-section > div .body .store{ transition: all .3s ease; width: 214px; border-radius: 7px; box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.2); text-decoration: none;} .store-section > div .body .store:hover{ box-shadow: -5px 7px 11px 1px #949494; transform: translateX(1px) translateY(-2px);} .store-section > div .body .store .store-img{ position: relative; width: 100%; height: 215px; padding: 20px; border-radius: 7px 7px 0 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; overflow: hidden;} .store-section > div .body .store.three .store-img::before{ content: '\f005 \f005'; font-family: 'FONT AWESOME 5 FREE'; color: rgb(251, 255, 0); font-weight: 900; display: flex; align-items: center; letter-spacing: 16px; position: absolute; width: 60px; height: 20px; background-color: transparent; transform: rotate(40deg); top: 13.6px; right: -22px; font-size: 9px; z-index: 3;} .store-section > div .body .store.three .store-img::after, .store-section > div .body .store.one .store-img::after{ content: '\f005'; font-family: 'FONT AWESOME 5 FREE'; color: rgb(251, 255, 0); font-weight: 900; display: flex; align-items: center; justify-content: center; position: absolute; width: 100px; height: 23px; background-color: #003f70; transform: rotate(40deg); top: 2px; right: -35px;} .store-section > div .body .store .store-img > div{ width: 100%; height: 100%; overflow: hidden; box-shadow: 0 0 5px 1px #dedede; border-radius: 10%; display: flex; align-items: center; justify-content: center;} .store-section > div .body .store .store-img > div img{ height: 100%;} .store-section > div .body .store .store-detail{ border-radius: 0 0 7px 7px; padding: 6px 10px; background: linear-gradient(16deg, #e4e4e4, white, #e4e4e4); height: 65px; display: flex; flex-direction: column; justify-content: space-between;} .store-section > div .body .store .store-detail h4{ color: black; font-size: 14px; font-weight: 500; -webkit-line-clamp: 2; height: 32px; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;} .store-section > div .body .store .store-detail .detail{ display: flex; justify-content: space-between; align-items: center; border-top: 1px solid transparent;} .store-section > div .body .store .store-detail .detail .trust{ font-size: 9.5px; color: #20a605; display: flex; align-items: center; gap: 3px;} .store-section > div .body .store .store-detail .detail .advert-count{ font-size: 11px; color: #7a7a7a; margin-left: auto;} /* Stores Page css */ .store-section.just-page{ margin-top: 0;} @keyframes left-right { 0%{ transform: translateX(0px)} 25%{ transform: translateX(1px)} 50%{ transform: translateX(-1px)} 75%{ transform: translateX(1px)} 100%{ transform: translateX(0px)} } @keyframes rotate-shake { 0%{ transform: rotate(32deg) scale(1)} 25%{ transform: rotate(32deg) scale(1.1)} 50%{ transform: rotate(32deg) scale(1)} 75%{ transform: rotate(32deg) scale(1.1)} 100%{ transform: rotate(32deg) scale(1)} } @keyframes hearth-effect-shadow{ 0%{ box-shadow: 0 0 0 0 white;} 25%{ box-shadow: 0 0 10px 1px #f9c50b;} 50%{ box-shadow: 0 0 0 0 #f9cc2a;} 75%{ box-shadow: 0 0 10px 1px #f9c50b;} 100%{ box-shadow: 0 0 0 0 white;} } @keyframes hearth-effect{ 0%{ transform: scale(1);} 25%{ transform: scale(1.1);} 50%{ transform: scale(1);} 75%{ transform: scale(1.1);} 100%{ transform: scale(1);} } /* .advert-area.no-slider.grid > .body > div .advert .left-area, .advert-area.no-slider.grid > .body > div .advert .right-area{ display: none;} */ /* .advert-area.no-slider.line > .body > div .advert > .header{ display: none;} .advert-area.no-slider.line > .body > div .advert > .advert-detail{ display: none;} .advert-area.no-slider.line > .body > div .advert > .img-area{ display: none;} .advert-area.no-slider.line > .body > div .advert{ width: 100%; display: flex; height: 200px;} .advert-area.no-slider.line > .body > div .advert .left-area{ } .advert-area.no-slider.line > .body > div .advert .left-area .img-area{ height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom-right-radius: 5px;} .advert-area.no-slider.line > .body > div .advert .left-area .img-area img{ height: 100%; min-width: 100%;} .advert-area.no-slider.line > .body > div .advert .left-area .info-area{ box-shadow: inset 0 0 15px 1px #f5f5f5; border-top: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; border-top-right-radius: 5px; height: 40px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .left-area .info-area span{ color: #777; font-size: 12px;} .advert-area.no-slider.line > .body > div .advert .right-area{ width: 100%; display: flex; flex-direction: column; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail{ height: 100%; padding: 5px; display: flex; flex-direction: column; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .text h4{ color: #1b1b1b;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .text p{ color: #2a2a2a; font-size: 14px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices{ display: flex; justify-content: end; align-items: center; gap: 2px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .current-price{ color: black; font-weight: 600;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .current-price span{ margin-right: 3px; color: black;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .last-price{ color: #4f4f4f; text-decoration: line-through; font-size: 12px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .last-price span{ color: #3ba12c;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail{ box-shadow: inset 0 0 15px 1px #f5f5f5; border-top: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7; border-top-left-radius: 5px; height: 40px; width: 100%; padding: 0 5px; display: flex;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store{ display: flex; align-items: center; height: 40px;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store .seller-logo{ width: 35px; height: 35px; border-radius: 50%; overflow: hidden;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store .seller-logo img{ height: 100%; min-width: 100%;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store h5{ color: black; margin-left: 7px;} */ .advert-area.no-slider.line > .body > div .advert{ width: 100%; display: flex;} .advert-area.no-slider.line > .body > div .advert > .header{ } .advert-area.no-slider.line > .body > div .advert > .img-area{ width: 285px; height: 190px; border-radius: 5px 0 0 7px;} .advert-area.no-slider.line > .body > div .advert > .img-area .hearth-btn{ display: none;} .advert-area.no-slider.line > .body > div .advert > .advert-detail{ padding:10px; width: calc(100% - 285px); position: relative;} .advert-area.no-slider.grid > .body > div .advert .advert-detail .header{ display: none;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header{ display: flex; width: 70%; height: auto; margin-bottom: 7px; gap: 5px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .seller-logo{ min-width: 50px; min-height: 50px; position: static; transform: unset; left: unset; top: unset;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .store-detail{ padding: 0;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .store-detail h5{ width: 100%;} .advert-area.no-slider.line > .body > div .advert .advert-detail > h5{ width: 70%;} .advert-area.no-slider.line > .body > div .advert .advert-detail .info{ border-top: none; position: absolute; bottom: 10px; width: calc(100% - 10px); padding-right: 10px;} .advert-area.no-slider.grid > .body > div .advert .advert-detail .user-buttons{ display: none;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons{ display: none; position: absolute; right: 10px; top: 10px; flex-direction: column; gap: 8px;} .advert-area.no-slider.line > .body > div .advert:hover .advert-detail .user-buttons{ display: flex;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button{ font-size: 13px; font-family: 'Poppins', sans-serif; transition: all .2s; position: relative; height: 33px; width: 160px; background-color: #514e60; border: none; color: white; border-radius: 3px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button:hover{ cursor: pointer; box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .4);} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button i{ position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 1px));} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button.active i{ color: #ffff0a;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button:last-child{ background-color: rgb(0, 186, 0);} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button:last-child:hover{ box-shadow: 0 2px 6px 2px rgba(14, 94, 0, 0.4);} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a{ font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; text-decoration: none; transition: all .2s; position: relative; height: 33px; width: 160px; background-color: #514e60; border: none; color: white; border-radius: 3px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a:hover{ cursor: pointer; box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .4);} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a i{ position: absolute; left: 10px; top: 50%; transform: translateY(calc(-50% - 1px));} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a:last-child{ background-color: rgb(0, 186, 0);} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a:last-child:hover{ box-shadow: 0 2px 6px 2px rgba(14, 94, 0, 0.4);} .advert-area.no-slider.line > .body > div .advert > .img-area img{ transform: scale(1) !important;} .advert-area.no-slider.line > .body > div .advert > .header{ display: none;} /* .advert-area.no-slider.line > .body > div .advert .left-area{ } .advert-area.no-slider.line > .body > div .advert .left-area .img-area{ height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom-right-radius: 5px;} .advert-area.no-slider.line > .body > div .advert .left-area .img-area img{ height: 100%; min-width: 100%;} .advert-area.no-slider.line > .body > div .advert .left-area .info-area{ box-shadow: inset 0 0 15px 1px #f5f5f5; border-top: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; border-top-right-radius: 5px; height: 40px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .left-area .info-area span{ color: #777; font-size: 12px;} .advert-area.no-slider.line > .body > div .advert .right-area{ width: 100%; display: flex; flex-direction: column; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail{ height: 100%; padding: 5px; display: flex; flex-direction: column; justify-content: space-between;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .text h4{ color: #1b1b1b;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .text p{ color: #2a2a2a; font-size: 14px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices{ display: flex; justify-content: end; align-items: center; gap: 2px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .current-price{ color: black; font-weight: 600;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .current-price span{ margin-right: 3px; color: black;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .last-price{ color: #4f4f4f; text-decoration: line-through; font-size: 12px;} .advert-area.no-slider.line > .body > div .advert .right-area .product-detail .prices .last-price span{ color: #3ba12c;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail{ box-shadow: inset 0 0 15px 1px #f5f5f5; border-top: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7; border-top-left-radius: 5px; height: 40px; width: 100%; padding: 0 5px; display: flex;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store{ display: flex; align-items: center; height: 40px;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store .seller-logo{ width: 35px; height: 35px; border-radius: 50%; overflow: hidden;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store .seller-logo img{ height: 100%; min-width: 100%;} .advert-area.no-slider.line > .body > div .advert .right-area .store-detail .store h5{ color: black; margin-left: 7px;} */ .advert-area.no-slider.line > .body > div .advert.ad{ border-radius: 5px; overflow: hidden; background-color: #fffff2;} .advert-area.no-slider.line > .body > div .advert.ad .ad-img{ height: 190px; width: 285px; min-width: 285px; display: flex; align-items: center; justify-content: center; overflow: hidden;} .advert-area.no-slider.line > .body > div .advert.ad .ad-img img{ width: 100%;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail{ display: flex; flex-direction: column; padding: 15px; position: relative;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail::before{ content: 'Reklam'; display: inline-block; padding: 3px 7px; position: absolute; right: 15px; top: 15px; border-radius: 10px; background-color: #ebeba2; color: #646907; font-size: 10px;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail strong{ color: #161523; font-size: 16px; font-weight: 600; margin-bottom: 7px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; padding-right: 55px;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail p{ color: #26242b; font-size: 14px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 6;} .advert-area.no-slider.grid > .body > div .advert.ad{ position: relative; border-radius: 5px; overflow: hidden; background-color: #fffff2;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-img{ height: 190px; width: 320px; min-width: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-img img{ width: 100%;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-detail{ display: flex; flex-direction: column; padding: 15px;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-detail::before{ content: 'Reklam'; display: inline-block; padding: 3px 7px; position: absolute; right: 10px; top: 10px; border-radius: 10px; background-color: #ebeba2; color: #646907; font-size: 10px;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-detail strong{ color: #202033; font-size: 16px; font-weight: 600; margin-bottom: 7px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;} .advert-area.no-slider.grid > .body > div .advert.ad .ad-detail p{ color: #4d4d4d; font-size: 14px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 6;} /* ADVERT AREA */ .advert-detail-container .route{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px 1px; } .advert-detail-container .route > div{ z-index: 20; border-bottom: 1px solid #00007823; width: fit-content;} .advert-detail-container .route > div span a{ position: relative; color: #000078; font-size: 12px; font-weight: 500; text-decoration: none;} .advert-detail-container .route > div span a::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); bottom: -3px; width: 0px; height: .7px; background-color: #000078; transition: all .2s;} .advert-detail-container .route > div span a:hover::before{ width: 100%;} .advert-detail-container .route > div span::before{ content: '>'; color: #4141cd; margin-right: 5px; font-size: 12px;} .advert-detail-container .route > div span:first-child::before{ content: ''; margin: 0;} .advert-detail-container .content{ width: 100%; max-width: 1200px; padding: 10px 10px; margin: 0 auto; margin-top: 10px;} .advert-detail-container .content > .detail-head{ display: flex; align-items: flex-start; justify-content: space-between;} .advert-detail-container .content > .detail-head h1{ font-size: 16px; line-height: 1.3; margin-bottom: 10px; font-weight: 600;} .advert-detail-container .content > .detail-head .print{ transition: all .2s; background-color: #0b75d7c0; color: white; border-radius: 5px; font-size: 12px; text-align: center; padding: 2px 13px;} .advert-detail-container .content > .detail-head .print:hover{ background-color: #77bdffc0; color: #0017c6; box-shadow: 0 0 3px 1px #5366f6; cursor: pointer;} .advert-detail-container .content > .detail-head .print i{ margin-right: 2px;} .advert-detail-container .content > .content-area{ display: flex; gap: 20px; width: 100%;} .advert-detail-container .content > .content-area .left-area{ width: calc(100% - 300px); height: fit-content;} /* .advert-detail-container .content > .content-area .left-area{ display: flex; gap: 16px;} */ .advert-detail-container .content > .content-area .left-area .img-and-detail{ width: 100%; display: flex; border: 1px solid #ddd;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container{ width: calc(100% - 300px); padding: 10px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area{ overflow: hidden; position: relative; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 1px solid #ddd;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area img{ transition: all .2s ease; width: 100%;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area .arr{ transition: all .2s; position: absolute; font-size: 20px; display: flex; align-items: center; color: white; width: 40px; height: 60px; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0, .6);} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area .arr:hover{ cursor: pointer; background-color: rgba(255, 255, 255, 0.4); color: black;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area .left-arr{ left: 0; border-radius: 0 50% 50% 0; padding-left: 13px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area .right-arr{ right: 0; border-radius: 50% 0 0 50%; padding-left: 17px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area{ border: 1px solid #ddd; border-radius: 5px; overflow: hidden;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head{ display: grid; grid-template-columns: 1fr 1fr;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head > a{ border-bottom: 1px solid #ddd; text-align: center; /*background-color: #eeeeee; color: #06328b;*/ background-color: #f7992a; opacity: .7; color: white; text-decoration: none; font-weight: 600; font-size: 14px; padding: 5px 0;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head > a:first-child{ border-right: 2px solid #ffebd2;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head > a.disabled{ /*background-color: #eeeeee; color: #666;*/ background-color: #ffe9cd; color: #dfb48b; opacity: 1;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head > a.active{ /*background-color: #eeeeee; color: #666;*/ background-color: #f7992a; color: white; opacity: 1;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .head > a i{ margin-right: 5px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos{ padding: 10px; position: relative;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container{ scroll-behavior: smooth; overflow: hidden;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images{ display: flex; gap: 8px; padding: 2px; flex-wrap: nowrap;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div{ border: 1px solid #888; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: white; cursor: pointer; min-width: 104.5px; width: 104.5px; height: 70px; outline: 2px solid transparent;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div.active{ outline: 2px solid #f7992a;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div img{ width: 100%;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows{ width: fit-content; position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; margin-bottom: 3px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .circle{ cursor: pointer; transition: all .2s; width: 100%; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ffcf9f;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .circle.active{ cursor: default; pointer-events: none; transform: scale(1.1) translateY(-.7px); background-color: #ed8a28;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .arr{ transition: all .2s; cursor: pointer; transform: translateY(1px); background-color: #ffdfae; color: #8b5a00; width: 23px; height: 23px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .arr.disabled{ background-color: #f6eada; border: 1px solid #bcaaa0; color: #e1c6ac; pointer-events: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .arr:hover{ box-shadow: 0 0 4px 1px #ffb662; background-color: #ffffff} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .arr.left-arr{ margin-right: 3px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .arrows .arr.right-arr{ margin-left: 3px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .order{ margin-top: 11px; font-size: 14px; margin-left: 2px; color: #111; font-weight: 300; display: flex; align-items: center; gap: 2px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .order small{ font-size: 10px; transform: translateY(1px); font-weight: 500; color: #777;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons{ display: flex; align-items: center; margin-top: 20px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div{ width: 25%; border-left: 1px solid #f7992a; display: flex; align-items: center; justify-content: center; padding: 10px 10px; gap: 7px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div.real-estate{ order: 1;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div.room{ order: 2;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div.bath{ order: 3;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div.area{ order: 4;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div:first-child{ border-left: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > span{ font-size: 45px; color: #7b4200;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div{ display: flex; flex-direction: column; gap: 5px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div > b{ color: #f7992a; font-size: 600; line-height: 1.1; font-size: 16px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div > span{ color: #4b4b4b; font-size: 12px; padding-left: 2px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail{ padding: 10px; width: 292px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices{ display: flex; gap: 7px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices > span > span{ margin-left: 2px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices .current-price{ font-size: 18px; font-weight: 600; color: #ee7f00;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices .changed-price{ font-size: 14px; font-weight: 400; color: #b25600; background-color: #d36d012e; padding: 2px 5px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices .changed-price::before{ content: '\f0ec'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; font-size: 10px; margin-right: 5px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .prices .last-price{ text-decoration: line-through;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location{ margin-top: 5px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location a{ position: relative; color: #000078; font-size: 12px; font-weight: 500; text-decoration: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location a::before{ content: ''; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0px; height: .7px; background-color: #000078; transition: all .2s;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location a:hover::before{ width: 100%;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location span::before{ content: '/'; color: #9292e4; margin-right: 5px; font-size: 11px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .location span:first-child::before{ content: ''; margin: 0;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area{ margin: 20px 0;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > button{ cursor: pointer; transition: all .2s ease; font-size: 14px; background-color: #3e81de; color: white; padding: 9px 0; width: 100%; position: relative; border-radius: 3px; border: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > button:hover{ background-color: #2770d6; transform: translateY(-2px); box-shadow: 0 10px 12px -8px rgba(0,0,0, 1);} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > button:active{ transform: translateY(0); box-shadow: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > button i{ font-size: 12px; margin-right: 8px; position: absolute; transform: translate(-20px, -50%); top: 50%;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > .detail{ border: 1px solid #ddd; margin: 15px 0 10px; padding: 5px 10px 7px; display: grid; gap: 2px 0; grid-template-columns: repeat(2, 1fr);} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > .detail > div{ color: rgba(0, 0, 0, .7);} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > .detail > div.green{ color: #057c05;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > .detail > div .icon{ font-size: 12px; display: inline-block; width: 8px; text-align: center; margin-right: 7px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .get-buy-area > .detail > div .txt{ font-size: 11px; font-weight: 500;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features{ margin-top: 10px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div{ display: grid; grid-template-columns: 1fr 1fr;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div:nth-child(odd){ background-color: rgba(247, 152, 43, 0.03); } .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div{ padding: 6px 10px 5px 3px; border-bottom: 1px solid #ddd;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div:first-child{ font-size: 11px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div:last-child{ font-size: 12px; font-weight: 400; display: flex; align-items: center;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction{ margin-top: 15px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div{ display: grid; gap: 5px; grid-template-columns: 1fr 1fr;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons{ transition: all .2s ease; padding: 5px 3px 3px; border: 1px solid #c2c2c2; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons:hover{ background-color: #f3f3f3; cursor: pointer;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons:last-child{ grid-column-start: 1; grid-column-end: 3;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons span{ font-size: 12px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons.favori.active{ background-color: #ffffb6; border-color: #b7b700; color: #1c1c00;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction > div > .icons.favori.active i{ color: #d4d400;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal{ opacity: 0; pointer-events: none; transition: all .3s ease; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0, .7); backdrop-filter: blur(1px); z-index: 20;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal.active{ pointer-events: all; opacity: 1;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container{ opacity: 0; transform: translateY(50px); transition: all .25s; overflow: hidden; width: 90%; max-width: 500px; min-height: 30vh; background-color: white; box-shadow: 0 0 10px 1px #121212;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal.active .share-modal-container{ opacity: 1; transform: translateY(0px);} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .header{ box-shadow: 0 0 5px 1px #ccc; border-bottom: 2px solid #ccc; position: relative; padding: 10px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .header h6{ font-size: 22px; font-weight: 600; width: 100%; text-align: center;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .header span{ transition: all .1s ease; cursor: pointer; position: absolute; right: 15px; top: 15px; font-size: 40px; height: 26px; line-height: 0.65;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .header span:hover{ color: #640000;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 20px 10px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a{ display: block; text-decoration: none; cursor: pointer; transition: all .12s ease; display: flex; flex-direction: column; align-items: center; padding: 7px 0 5px; justify-content: center; color: white;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.facebook{ background-color: #023284; border: 2px solid #023284;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.facebook:hover{ background-color: white; color: #023284;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.twitter{ background-color: #49a8f1; border: 2px solid #49a8f1;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.twitter:hover{ background-color: white; color: #49a8f1;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.pinterest{ background-color: #8e0910; border: 2px solid #8e0910;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.pinterest:hover{ background-color: white; color: #8e0910;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.whatsapp{ background-color: #1f7202; border: 2px solid #1f7202;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.whatsapp:hover{ color: #1f7202; background-color: white;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.linkedin{ background-color: #0a66c2; border: 2px solid #0a66c2;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.linkedin:hover{ color: #0a66c2; background-color: white;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.mail{ background-color: #db8222; border: 2px solid #db8222;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a.mail:hover{ color: #db8222; background-color: white;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a span{ font-size: 16px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a i{ font-size: 23px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .share-buttons > a:last-child i{ font-size: 26px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area{ position: relative; padding: 0 10px 20px; transition: all .2s ease; display: flex; gap: 10px; /* box-shadow: 0 0 5px 1px #ccc; border-top: 2px solid #ccc;*/} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area.active{ margin-top: 17px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area::before{ content: 'Kopyalandı !'; opacity: 0; position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); color: rgb(0, 16, 136); top: 0px; font-weight: 600; transition: all .2s ease-in-out;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area.active::before{ top: -27px; opacity: 1;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area input{ font-size: 14px; font-weight: 500; width: 100%; height: 40px; padding: 0 7px; box-shadow: none; outline: none; border: 1px solid #999;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area button{ width: 240px; background-color: white; color: #2d2d2d; border: 1px solid #999; transition: all .12s ease;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .share-modal .share-modal-container .copy-area button:hover{ box-shadow: 0 4px 8px 1px #888; background-color: white; color: black; border: 1px solid black; cursor: pointer;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal{ opacity: 0; pointer-events: none; transition: all .3s ease; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0, .7); backdrop-filter: blur(1px); z-index: 20;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal.active{ pointer-events: all; opacity: 1;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container{ opacity: 0; transform: translateY(50px); transition: all .25s; overflow: hidden; width: 90%; max-width: 500px; min-height: 30vh; background-color: white; box-shadow: 0 0 10px 1px #121212;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal.active .complaint-modal-container{ opacity: 1; transform: translateY(0px);} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container .header{ box-shadow: 0 0 5px 1px #ccc; border-bottom: 2px solid #ccc; position: relative; padding: 10px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container .header h6{ font-size: 22px; font-weight: 600; width: 100%; text-align: center;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container .header span{ transition: all .1s ease; cursor: pointer; position: absolute; right: 15px; top: 15px; font-size: 40px; height: 26px; line-height: 0.65;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container .header span:hover{ color: #640000;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form{ padding: 20px 20px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form label{ font-size: 14px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form input{ font-family: 'Poppins', sans-serif; background-color: #f3f9ff; transition: all .1s; padding: 0 7px; font-size: 14px; width: 100%; margin-bottom: 10px; height: 40px; border-radius: 4px; border: 1px solid #999;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form input:focus-within{ background-color: white; /*border: 1px solid #00007a;*/ box-shadow: 0 0 0 2px #6bdaf3; outline: none;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form textarea{ font-family: 'Poppins', sans-serif; background-color: #f3f9ff; transition: all .1s; padding: 7px; font-size: 14px; width: 100%; margin-bottom: 10px; height: 120px; resize: none; border-radius: 4px; border: 1px solid #999;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form textarea:focus-within{ background-color: white; box-shadow: 0 0 0 2px #6bdaf3; outline: none;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .devide{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons{ display: flex; justify-content: flex-end; gap: 10px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button{ transition: all .1s; cursor: pointer; width: 120px; font-weight: 600; height: 30px; border: none; border-radius: 3px;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button:hover{ box-shadow: 0 3px 7px 1px #999; transform: scale(1.01);} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button.cancel{ color: white; background-color: #9e9e9e;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button.cancel:hover{ background-color: #8e8e8e;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button.send{ color: white; background-color: #004ca2;} .advert-detail-container .content > .content-area .img-and-detail .advert-detail .interaction .complaint-modal .complaint-modal-container form > .buttons button.send:hover{ background-color: #003f87;} #open-complaint-modal{ grid-column-start: 1; grid-column-end: 3;} .advert-detail-container .content > .content-area .left-area .advert-detail-area{ margin-top: 20px;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .header{ width: 100%; border-bottom: 4px solid #2a2d3e; margin-bottom: 5px;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .header button{ transition: all .2s; width: 170px; height: 30px; background-color: #f5f5f5; color: #868686; margin-left: 5px; font-weight: 600; border: 2px solid #a5a5a5; border-bottom: none;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .header button:hover{ border-color: #343845; color: #333c42; cursor: pointer;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .header button.active{ pointer-events: none; box-shadow: inset 0 -2px 3px 0px #595858; background-color: #4f536c; color: #fff; border-color: #2a2d3e;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .body{ overflow: hidden; position: relative; width: 100%; height: auto; background-color: #fff; box-shadow: 0 0 2px 1px #ccc;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .body .advert-detail-section{ padding: 10px;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .body .advert-detail-section h3{ font-size: 16px; margin-bottom: 7px;} .advert-detail-container .content > .content-area .left-area .advert-detail-area .body .advert-detail-section p{ font-size: 14px; margin-bottom: 10px;} .advert-detail-container .content > .content-area .left-area .map-area{ margin-top: 20px;} .advert-detail-container .content > .content-area .left-area .map-area .header{ width: 100%; border-bottom: 4px solid #2a2d3e; margin-bottom: 5px;} .advert-detail-container .content > .content-area .left-area .map-area .header button{ transition: all .2s; width: 170px; height: 30px; background-color: #f5f5f5; color: #868686; margin-left: 5px; font-weight: 600; border: 2px solid #a5a5a5; border-bottom: none;} .advert-detail-container .content > .content-area .left-area .map-area .header button:hover{ border-color: #343845; color: #333c42; cursor: pointer;} .advert-detail-container .content > .content-area .left-area .map-area .header button.active{ pointer-events: none; box-shadow: inset 0 -2px 3px 0px #595858; background-color: #4f536c; color: #fff; border-color: #2a2d3e;} .advert-detail-container .content > .content-area .left-area .map-area .body{ overflow: hidden; position: relative; width: 100%; height: 500px; background-color: #f3f3f3;} .advert-detail-container .content > .content-area .left-area .map-area .body > div{ transition: all .2s ease; width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .advert-detail-container .content > .content-area .left-area .map-area .body > div iframe{ width: 100%; height: 100%;} .advert-detail-container .content > .content-area .left-area .map-area.street .body .map{ transform: translateX(-100%);} .advert-detail-container .content > .content-area .left-area .map-area .body .street{ transform: translateX(100%);} .advert-detail-container .content > .content-area .left-area .map-area.street .body .street{ transform: translateX(0);} .advert-detail-container .content > .content-area .left-area .technical-features-area{ margin-top: 20px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .header{ width: 100%; border-bottom: 4px solid #2a2d3e; margin-bottom: 5px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .header button{ transition: all .2s; width: 170px; height: 30px; background-color: #f5f5f5; color: #868686; margin-left: 5px; font-weight: 600; border: 2px solid #a5a5a5; border-bottom: none;} .advert-detail-container .content > .content-area .left-area .technical-features-area .header button:hover{ border-color: #343845; color: #333c42; cursor: pointer;} .advert-detail-container .content > .content-area .left-area .technical-features-area .header button.active{ pointer-events: none; box-shadow: inset 0 -2px 3px 0px #595858; background-color: #4f536c; color: #fff; border-color: #2a2d3e;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body{ overflow: hidden; position: relative; width: 100%; background-color: #fff; box-shadow: 0 0 2px 1px #ccc; padding: 10px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article{} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article h5{ margin-bottom: 2px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div{ display: grid; grid-template-columns: repeat(3, 1fr); background-color: #f9f9f9; border-radius: 5px; box-shadow: 0 0 5px 1px #00000017; margin-top: 5px; padding: 10px; margin-bottom: 15px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div > span{ color: #636363; font-weight: 600; padding-left: 25px; margin: 6px 0; font-size: 13px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div > span.active{ color: black; background-image: url(../assets/images/tick.png); background-size: 16px; background-repeat: no-repeat; background-position: 0 2px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div > span.active::before{ } /* RIGHT AREA */ .advert-detail-container .content > .content-area .right-area{ width: 280px; } .advert-detail-container .content > .content-area .right-area > div:first-child{ margin-top:0 } .advert-detail-container .content > .content-area .right-area .owner-buttons{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px;} .advert-detail-container .content > .content-area .right-area .owner-buttons > a{ text-decoration: none; transition: all .15s; background-color: #f7992a; color: white; border: none; padding: 6px 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 13px;} .advert-detail-container .content > .content-area .right-area .owner-buttons > a:hover{ box-shadow: 0 0 3px 1px #f7992a; cursor: pointer; background-color: #ffb155;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div{ position: relative;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > span{ border-bottom: 1px solid transparent; border-radius: 3px; transition: all .15s; display: inline-block; width: 100%; text-align: center; background-color: #e0dede; padding: 8px 0; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > span i{ transition: all .2s;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div.active > div{ height: 90px;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div.active > span{ border-radius: 3px 3px 0 0; border-color: #666;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div.active > span i{ transform: rotate(180deg);} /* .advert-detail-container .content > .content-area .right-area .owner-buttons > div.active > span i{ transform: rotateX(180deg);} */ .advert-detail-container .content > .content-area .right-area .owner-buttons > div > span:hover{ background-color: #ccc; box-shadow: 0 0 5px 1px #666; cursor: pointer;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > div{ transition: all .1s linear; height: 0; overflow: hidden; position: absolute; background-color: white; z-index: 3; background-color: #e0e0e0; width: 100%; right: 0; display: flex; flex-direction: column;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > div > a{ text-decoration: none; transition: all .15s; background-color: #f7992a; color: white; border: none; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; font-size: 11px;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > div > a:hover{ box-shadow: 0 0 3px 1px #f7992a; cursor: pointer; background-color: #ffb155;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > div > a:first-child{ border-bottom: 1px solid #ffd09a;} .advert-detail-container .content > .content-area .right-area .owner-buttons > div > div > a:last-child{ border-radius: 0 0 5px 5px;} .advert-detail-container .content > .content-area .right-area .profile-card{ box-shadow: 0 0 3px 1px #ddd; padding-bottom: 25px; margin-top: 54px;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area{ position: relative; display: flex; gap: 7px; border-bottom: 1px solid #b9b9b9; padding: 40px 10px 10px; background-color: #fff; z-index: 2;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area::before{ z-index: 1; content: ''; width: 100%; margin: 0 auto; height: 7px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; background: linear-gradient(0deg, transparent, #b1b1b1 118%);} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .img-area{ position: absolute; left: 50%; transform: translateX(-50%); top: -30px; width: 60px; height: 60px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ddd, 0 0 0 3px #ddd;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .img-area img{ width: 100%;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail{ transform: translateY(-5px); display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail h6{ font-size: 14px; font-weight: 400;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .trust{ color: #2e5124; font-size: 12px;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .buttons{ margin-top: 10px; border: 1px solid #ccc; border-radius: 7px; overflow: hidden;display: flex; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .buttons a{ position: relative; padding: 5px 0; transition: all .15s; color: #222; border-bottom: 1px solid #ccc; text-align: center; font-size: 12px; text-decoration: none;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .buttons a i{ position: absolute; left: 10px; font-size: 14px; top: 6px;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .buttons a:hover{ background-color: #f5f5f5; cursor: pointer;} .advert-detail-container .content > .content-area .right-area .profile-card .store-area .store-detail .buttons a:last-child{ border-bottom: none;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile{ display: flex; gap: 7px; padding: 25px 10px; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .img-area{ width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ddd, 0 0 0 3px #ddd;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .img-area img{ width: 100%;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail{ transform: translateY(-5px); width: 100%; text-align: center;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail h6{ font-size: 16px; font-weight: 400; text-align: center;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .work{ color: #999; font-weight: 500; font-size: 12px;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .buttons{ margin-top: 10px; border: 1px solid #ccc; border-radius: 7px; overflow: hidden;display: flex; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .buttons a{ position: relative; padding: 5px 0; transition: all .15s; color: #222; border-bottom: 1px solid #ccc; text-align: center; font-size: 12px; text-decoration: none;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .buttons a i{ position: absolute; left: 10px; font-size: 14px; top: 6px;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .buttons a:hover{ background-color: #f5f5f5; cursor: pointer;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .profile .user-detail .buttons a:last-child{ border-bottom: none;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons{ width: calc(100% - 12px); margin: 0 auto; display: grid; gap: 5px; grid-template-columns: 1fr;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a{ text-decoration: none; font-size: 12px; transition: all .2s ease; padding: 6px 0; border: 1px solid #c2c2c2; border-radius: 3px; gap: 4px; display: flex; align-items: center; justify-content: center;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a:hover{ opacity: .8;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a i{ font-size: 14px; display: inline-block;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a:hover i{ animation: shake ease 1s 1;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button{ cursor: pointer; width: 100%; height: 32.2px; text-decoration: none; font-size: 14px; transition: all .2s ease; padding: 6px 0; border: 1px solid #c2c2c2; border-radius: 3px; gap: 4px; display: flex; align-items: center; justify-content: center;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button + a{ display: none; } .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button:hover{ opacity: .8;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button i{ font-size: 14px; display: inline-block;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button:hover i{ animation: shake ease 1s 1;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a.phone{ background-color: #51ce24; color: white; border: 1px solid #51ce24;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button.phone{ background-color: #51ce24; color: white; border: 1px solid #51ce24;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a.whatsapp{ background-color: green; color: white; border: 1px solid green;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a.whatsapp i{ font-size: 19px;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button.whatsapp{ background-color: green; color: white; border: 1px solid green;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons button.whatsapp i{ font-size: 19px;} .advert-detail-container .content > .content-area .right-area .profile-card .user-area .user-buttons a.message{ cursor: pointer; font-weight: 500; color: black; box-shadow: 0 0 5px 1px #ddd; background-color: white; border: 1px solid #ddd;} .advert-detail-container .content > .content-area .right-area .statistics{ margin-top: 20px;} .advert-detail-container .content > .content-area .right-area .statistics .header{ position: relative;} .advert-detail-container .content > .content-area .right-area .statistics .header > div{ position: relative; width: 100%; font-size: 13px; font-weight: 600; margin: 0 auto; height: 30px; display: flex; align-items: center; justify-content: center; background-color: white;} .advert-detail-container .content > .content-area .right-area .statistics .header > div::before{ content: ''; display: inline-block; width: 100%; height: 1px; background-color: #555; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .advert-detail-container .content > .content-area .right-area .statistics .header > div > span{ background-color: white; position: relative; z-index: 2; padding: 0 7px;} .advert-detail-container .content > .content-area .right-area .statistics .body{ user-select: none; display: flex; gap: 7px; padding: 5px 0 0;} .advert-detail-container .content > .content-area .right-area .statistics .body > div{ overflow: hidden; position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 100px; background-color: #fefefe; padding: 10px 15px; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);} .advert-detail-container .content > .content-area .right-area .statistics .body > div .icon{ position: absolute; left: 0px; top: 7px; font-size: 50px; color: #6081a426; z-index: 2;} .advert-detail-container .content > .content-area .right-area .statistics .body > div .bg-dot{ position: absolute; right: -5px; bottom: -5px; font-size: 40px; color: #465f7926;} .advert-detail-container .content > .content-area .right-area .statistics .body > div .txt{ color: #6081a4; font-size: 14px; line-height: 1.2; display: inline-block; width: 100%; text-align: center; margin-bottom: 5px; font-weight: 500;} .advert-detail-container .content > .content-area .right-area .statistics .body > div b{ font-size: 20px; color: #000; color: #385f87;} .advert-detail-container .content > .content-area .right-area .security-info{ position: relative; border: 2px solid #ddd; padding: 10px; margin-top: 15px; overflow: hidden; background-color: #fefefe; box-shadow: 0 0 3px 1px rgb(0 0 0 / 20%);} .advert-detail-container .content > .content-area .right-area .security-info h4{ font-size: 14px; margin-bottom: 5px; position: relative; z-index: 1; color: #00465d;} .advert-detail-container .content > .content-area .right-area .security-info p{ font-size: 11px; margin-bottom: 5px; color: #2a3452; position: relative; z-index: 1;} .advert-detail-container .content > .content-area .right-area .security-info .danger{ position: absolute; color: #e9e9f9; transform: rotate(-20deg); bottom: -10px; right: -10px; font-size: 135px; z-index: 0;} .advert-detail-container .content > .content-area .right-area .advert-note{ background-color: #f3fbf3; border: 1px solid #869986; padding: 10px; border-radius: 5px; margin-top: 20px;} .advert-detail-container .content > .content-area .right-area .advert-note .header{ padding: 2px 0 5px; border-bottom: 1px solid #ccc; margin-bottom: 5px; line-height: 12px;} .advert-detail-container .content > .content-area .right-area .advert-note .header span{ font-size: 12px; font-weight: 600; color: #333;} .advert-detail-container .content > .content-area .right-area .advert-note .header small{ font-size: 10px; font-weight: 400; color: #777;} .advert-detail-container .content > .content-area .right-area .advert-note .body{ font-size: 12px; padding: 7px 0;} /* MOBILE RIGHT AREA */ .advert-detail-container .content > .content-area .mobile-right-area{ width: 100%; display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 20px; display: none;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons{ order: 1;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons{ order: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > button{ transition: all .15s; background-color: #f7992a; color: white; border: none; padding: 6px 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > button:hover{ box-shadow: 0 0 3px 1px #f7992a; cursor: pointer; background-color: #ffb155;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div{ position: relative;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > span{ border-bottom: 1px solid transparent; border-radius: 3px; transition: all .15s; display: inline-block; width: 100%; text-align: center; background-color: #e0dede; padding: 6px 0; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div.active > span{ border-radius: 3px 3px 0 0; border-color: #666;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > span:hover{ background-color: #ccc; box-shadow: 0 0 5px 1px #666; cursor: pointer;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > div{ transition: all .1s linear; height: 0; overflow: hidden; position: absolute; background-color: white; z-index: 3; background-color: #e0e0e0; width: 100%; right: 0; display: flex; flex-direction: column;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div.active > div{ height: 90px;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > div > button{ transition: all .15s; background-color: #f7992a; color: white; border: none; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; font-size: 12px;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > div > button:hover{ box-shadow: 0 0 3px 1px #f7992a; cursor: pointer; background-color: #ffb155;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > div > button:first-child{ border-bottom: 1px solid #ffd09a;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .owner-buttons > div > div > button:last-child{ border-radius: 0 0 5px 5px;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics{ margin-top: 20px;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .header{ position: relative;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .header > div{ border-bottom: 1px solid #999; position: relative; width: 100%; font-size: 13px; font-size: 17px; margin: 0 auto; height: 30px; display: flex; align-items: center; justify-content: center; background-color: white;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body{ display: flex; gap: 7px; border-bottom: 1px solid #999; padding: 15px 0;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body > div{ overflow: hidden; position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 100px; background-color: #fefefe; padding: 10px 15px; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body > div .icon{ position: absolute; left: 0px; top: 7px; font-size: 50px; color: #6081a426; z-index: 2;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body > div .bg-dot{ position: absolute; right: -5px; bottom: -5px; font-size: 40px; color: #465f7926;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body > div .txt{ color: #6081a4; font-size: 14px; line-height: 1.2; display: inline-block; width: 100%; text-align: center; margin-bottom: 5px; font-weight: 500;} .advert-detail-container .content > .content-area .mobile-right-area .helper-icons .statistics .body > div b{ font-size: 20px; color: #000; color: #385f87;} .advert-detail-container .content > .content-area .mobile-right-area .security-info{ order: 2; position: relative; border: 2px solid #ddd; padding: 10px; overflow: hidden; background-color: #fefefe; box-shadow: 0 0 3px 1px rgb(0 0 0 / 20%); border-radius: 10px;} .advert-detail-container .content > .content-area .mobile-right-area .security-info h4{ font-size: 14px; margin-bottom: 5px; position: relative; z-index: 1; color: #00465d;} .advert-detail-container .content > .content-area .mobile-right-area .security-info p{ font-size: 11px; margin-bottom: 8px; color: #2a3452; position: relative; z-index: 1;} .advert-detail-container .content > .content-area .mobile-right-area .security-info .danger{ position: absolute; color: #e9e9f9; transform: rotate(-20deg); bottom: -10px; right: -10px; font-size: 135px; z-index: 0;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card{ grid-column-start: 1; grid-column-end: 3; order: 3; box-shadow: 0 0 3px 1px #ddd; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: hidden;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 25px 10px 10px; background-color: #fefefe; z-index: 2; box-shadow: 0 0 10px 1px #000000ad;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .img-area{ width: 60px; height: 60px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ddd, 0 0 0 3px #ddd;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .img-area img{ width: 100%;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail{ transform: translateY(-5px); display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail h6{ font-size: 14px; font-weight: 400; margin-top: 5px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .trust{ color: #2e5124; font-size: 12px; margin-top: 4px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .buttons{ margin-top: 10px; border: 1px solid #ccc; border-radius: 7px; overflow: hidden;display: flex; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .buttons a{ position: relative; padding: 5px 0; transition: all .15s; color: #222; border-bottom: 1px solid #ccc; text-align: center; font-size: 12px; text-decoration: none;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .buttons a i{ position: absolute; left: 10px; font-size: 14px; top: 6px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .buttons a:hover{ background-color: #f5f5f5; cursor: pointer;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .store-area .store-detail .buttons a:last-child{ border-bottom: none;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area{ padding-bottom: 25px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile{ display: flex; gap: 7px; padding: 25px 10px; align-items: center; justify-content: center; flex-direction: column;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .img-area{ width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ddd, 0 0 0 3px #ddd;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .img-area img{ width: 100%;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail{ transform: translateY(-5px); width: 100%; text-align: center;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail h6{ font-size: 16px; font-weight: 400; text-align: center;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .work{ color: #999; font-weight: 500; font-size: 12px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .buttons{ margin-top: 10px; border: 1px solid #ccc; border-radius: 7px; overflow: hidden;display: flex; flex-direction: column; width: 100%;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .buttons a{ position: relative; padding: 5px 0; transition: all .15s; color: #222; border-bottom: 1px solid #ccc; text-align: center; font-size: 12px; text-decoration: none;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .buttons a i{ position: absolute; left: 10px; font-size: 14px; top: 6px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .buttons a:hover{ background-color: #f5f5f5; cursor: pointer;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .profile .user-detail .buttons a:last-child{ border-bottom: none;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons{ width: calc(100% - 12px); margin: 0 auto; display: grid; gap: 5px; grid-template-columns: 1fr;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a{ text-decoration: none; font-size: 12px; transition: all .2s ease; padding: 6px 0; border: 1px solid #c2c2c2; border-radius: 3px; gap: 4px; display: flex; align-items: center; justify-content: center;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a:hover{ opacity: .8;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a i{ font-size: 14px; display: inline-block;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a:hover i{ animation: shake ease 1s 1;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button{ width: 100%; height: 32.2px; cursor: pointer; text-decoration: none; font-size: 14px; transition: all .2s ease; padding: 6px 0; border: 1px solid #c2c2c2; border-radius: 3px; gap: 4px; display: flex; align-items: center; justify-content: center;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button:hover{ opacity: .8;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button i{ font-size: 14px; display: inline-block;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button:hover i{ animation: shake ease 1s 1;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a.phone{ background-color: #51ce24; color: white; border: 1px solid #51ce24;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button.phone{ background-color: #51ce24; color: white; border: 1px solid #51ce24;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a.whatsapp{ background-color: green; color: white; border: 1px solid green;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a.whatsapp i{ font-size: 19px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button.whatsapp{ background-color: green; color: white; border: 1px solid green;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons button.whatsapp i{ font-size: 19px;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card .user-area .user-buttons a.message{ font-weight: 500; color: black; box-shadow: 0 0 5px 1px #ddd; background-color: white; border: 1px solid #ddd;} @keyframes shake{ 0%{ transform: rotate(0deg);} 25%{ transform: rotate(10deg);} 50%{ transform: rotate(-10deg);} 75%{ transform: rotate(10deg);} 100%{ transform: rotate(0deg);} } .big-img-container{ opacity: 0; pointer-events: none; transition: all .3s ease; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: rgba(0,0,0, .8); backdrop-filter: blur(1px); z-index: 25;} .big-img-container.active{ opacity: 1; pointer-events: all; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: rgba(0,0,0, .8); backdrop-filter: blur(1px); z-index: 25;} .big-img-container .big-img{ opacity: 0; transform: translateY(50px); transition: all .25s; position: relative; width: 80%; max-width: 650px; height: 85vh; background-color: white; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 15px 2px black;} .big-img-container.active .big-img{ opacity: 1; transform: translateY(0px);} .big-img-container .big-img img{ width: 100%; transition: all .2s ease;} .big-img-container .big-img .close-btn{ cursor: pointer; position: absolute; right: 10px; top: 10px; line-height: .6; font-size: 40px; color: #720000;} .big-img-container .big-img .arr{ transition: all .1s ease; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; color: white; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(0,0,0, .8); display: flex; align-items: center; justify-content: center;} .big-img-container .big-img .arr:hover{ background-color: rgba(0, 0, 0, .5); color: white; box-shadow: inset 0 0 15px 1px black;} .big-img-container .big-img .left-arr{ left: 5px;} .big-img-container .big-img .right-arr{ right: 5px;} /* MODALX */ .modalx{ opacity: 0; pointer-events: none; transition: all .1s ease; position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 20; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(.5px);} .modalx .modalx-container{ transition: all .3s ease; opacity: 0; pointer-events: none; transform: translateY(50px); width: 100%; max-width: 600px; border-radius: 5px; background-color: white;} .modalx.active{ opacity: 1; pointer-events: all;} .modalx.active .modalx-container{ opacity: 1; pointer-events: all; transform: translateY(0);} .modalx .modalx-container .header{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc; padding: 10px 15px;} .modalx .modalx-container .header > b{ font-size: 21px; font-weight: 600; color: #111;} .modalx .modalx-container .header > span{ line-height: 1; font-size: 35px; color: #333;} .modalx .modalx-container .header > span:hover{ cursor: pointer; color: #000;} .modalx .modalx-container .body{ padding: 10px 15px;} /* Payment Notice Modal */ .payment-notice-modal{ padding: 0 10px; opacity: 0; pointer-events: none; transition: all .1s ease; position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 20; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(.5px);} .payment-notice-modal .payment-notice-modal-container{ overflow: hidden; transition: all .3s ease; opacity: 0; pointer-events: none; transform: translateY(50px); width: 100%; max-width: 500px; border-radius: 5px; background-color: white;} .payment-notice-modal.active{ opacity: 1; pointer-events: all;} .payment-notice-modal.active .payment-notice-modal-container{ opacity: 1; pointer-events: all; transform: translateY(0);} .payment-notice-modal .payment-notice-modal-container .header{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #aaa; box-shadow: 0 0 5px 0 #999; padding: 10px 15px;} .payment-notice-modal .payment-notice-modal-container .header > b{ font-size: 16px; font-weight: 600; color: #111;} .payment-notice-modal .payment-notice-modal-container .header > span{ line-height: 1; font-size: 30px; color: #333;} .payment-notice-modal .payment-notice-modal-container .header > span:hover{ cursor: pointer; color: #000;} .payment-notice-modal .payment-notice-modal-container .body:not(:has(form)), .payment-notice-modal .payment-notice-modal-container form{ padding: 15px 15px; display: flex; flex-direction: column; gap: 15px;} .payment-notice-modal .payment-notice-modal-container .body > div, .payment-notice-modal .payment-notice-modal-container .body > form > div{ display: flex; flex-direction: column;} .payment-notice-modal .payment-notice-modal-container .body > div label, .payment-notice-modal .payment-notice-modal-container .body > form > div label{ line-height: 1; margin-bottom: 7px; font-weight: 600; font-size: 13px;} .payment-notice-modal .payment-notice-modal-container .body > div label small, .payment-notice-modal .payment-notice-modal-container .body > form > div label small{ font-size: 13px; color: #b40606; vertical-align: top; margin-left: 2px;} .payment-notice-modal .payment-notice-modal-container .body > div span, .payment-notice-modal .payment-notice-modal-container .body > form > div span{ line-height: 1; margin-bottom: 7px; font-size: 11px; color: #666;} .payment-notice-modal .payment-notice-modal-container .body > div input, .payment-notice-modal .payment-notice-modal-container .body > div textarea, .payment-notice-modal .payment-notice-modal-container .body > div select, .payment-notice-modal .payment-notice-modal-container .body > form > div input, .payment-notice-modal .payment-notice-modal-container .body > form > div textarea, .payment-notice-modal .payment-notice-modal-container .body > form > div select{ transition: all .2s; width: 100%; border: 1px solid #c0c0c0; outline: none; background-color: #fbfbfb; border-radius: 3px; padding: 5px 7px; font-family: 'Poppins', sans-serif; font-size: 12px;} .payment-notice-modal .payment-notice-modal-container .body > div input:focus, .payment-notice-modal .payment-notice-modal-container .body > div textarea:focus, .payment-notice-modal .payment-notice-modal-container .body > div select:focus, .payment-notice-modal .payment-notice-modal-container .body > form > div input:focus, .payment-notice-modal .payment-notice-modal-container .body > form > div textarea:focus, .payment-notice-modal .payment-notice-modal-container .body > form > div select:focus{ box-shadow: 0 0 0 3px rgba(var(--dark-blue-for-opacity), .3); background-color: white; border-color: rgba(var(--dark-blue-for-opacity), .3);} .payment-notice-modal .payment-notice-modal-container .body > div textarea, .payment-notice-modal .payment-notice-modal-container .body > form > div textarea{ height: 68px; resize: none;} .payment-notice-modal .payment-notice-modal-container .body .buttons{ display: flex; flex-direction: row !important; justify-content: end; gap: 10px; margin: 5px 0;} .payment-notice-modal .payment-notice-modal-container .body .buttons button{ transition: all .15s ease; font-size: 11px; font-weight: 600; border: 1px solid; padding: 8px 15px; border-radius: 3px; outline: none;} .payment-notice-modal .payment-notice-modal-container .body .buttons button:hover{ cursor: pointer; transform: translate(1px, -1px); box-shadow: -1px 1px 5px 0 #ccc; background-color: white !important;} .payment-notice-modal .payment-notice-modal-container .body .buttons button:active{ transform: translate(0, 0); box-shadow: none;} .payment-notice-modal .payment-notice-modal-container .body .buttons button.send{ background-color: var(--dark-blue); color: white; border-color: var(dark-blue);} .payment-notice-modal .payment-notice-modal-container .body .buttons button.send:hover{ color: var(--dark-blue);} .payment-notice-modal .payment-notice-modal-container .body .buttons button.close{ background-color: #eee; color: #666; border-color: #ccc;} .payment-notice-modal .payment-notice-modal-container .body .buttons button.close:hover{ color: #666;} .order-form input::-webkit-outer-spin-button, .order-form input::-webkit-inner-spin-button { -webkit-appearance: button !important; margin: unset !important;} .order-form input[type=number] { -moz-appearance: unset !important;} .order-form .detail{ display: flex; flex-direction: column; border: 1px solid #c0c0c0; background-color: #fbfbfb; border-radius: 4px; padding: 10px;} .order-form .detail > b{ font-size: 12px; margin-bottom: 10px;} .order-form .detail > div{ display: grid; grid-template-columns: 100px 1fr;} .order-form .detail > div > span{ margin-bottom: 7px !important;} .order-form .detail > div > span.value{ color: rgba(0, 0, 0, .9) !important; font-weight: 500; margin-left: 5px;} .order-form .detail p{ font-size: 11px; font-weight: 500; color: rgba(0, 0, 0, .7);} .order-form .detail p a{ font-weight: 600; text-decoration: none; color: rgba(0, 0, 0, .9);} .order-form .detail p a:hover{ text-decoration: underline;} .order-form .detail p:first-child{ margin-bottom: 3px;} /* Sales Contract Modal */ .sales-contract-modal{ padding: 0 10px; opacity: 0; pointer-events: none; transition: all .1s ease; position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 20; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(.5px);} .sales-contract-modal .sales-contract-modal-container{ transition: all .3s ease; opacity: 0; pointer-events: none; transform: translateY(50px); width: 100%; max-width: 500px; border-radius: 5px; background-color: white;} .sales-contract-modal.active{ opacity: 1; pointer-events: all;} .sales-contract-modal.active .sales-contract-modal-container{ opacity: 1; pointer-events: all; transform: translateY(0);} .sales-contract-modal .sales-contract-modal-container .header{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #aaa; box-shadow: 0 0 5px 0 #999; padding: 10px 15px;} .sales-contract-modal .sales-contract-modal-container .header > b{ font-size: 16px; font-weight: 600; color: #111;} .sales-contract-modal .sales-contract-modal-container .header > span{ line-height: 1; font-size: 30px; color: #333;} .sales-contract-modal .sales-contract-modal-container .header > span:hover{ cursor: pointer; color: #000;} .sales-contract-modal .sales-contract-modal-container .body{ padding: 15px 15px; display: flex; flex-direction: column; gap: 15px;} .sales-contract-modal .sales-contract-modal-container .body > .contract{ padding: 25px; border-radius: 10px; background-color: #f0f0f0;} .sales-contract-modal .sales-contract-modal-container .body > .contract > div{ font-size: 11px; font-weight: 500; color: #707070; max-height: 200px; overflow-y: auto; padding-right: 10px;} .sales-contract-modal .sales-contract-modal-container .body > .contract > div::-webkit-scrollbar{ background-color: #dedede; width: 8px; border-radius: 5px;} .sales-contract-modal .sales-contract-modal-container .body > .contract > div::-webkit-scrollbar-thumb{ background-color: #9b9b9b; border-radius: 5px;} .sales-contract-modal .sales-contract-modal-container .body > .contract > div p{ margin-bottom: 10px;} .sales-contract-modal .sales-contract-modal-container .body > .check-area{ position: relative; display: flex; align-items: center;} .sales-contract-modal .sales-contract-modal-container .body > .check-area input[type="checkbox"]{ position: absolute; cursor: pointer; height: 1px; width: 1px; top: 50%; transform: translateY(-50%);} .sales-contract-modal .sales-contract-modal-container .body > .check-area input[type="checkbox"]::before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; border: 1px solid #b1b1b1; background-color: #f9f9f9; width: 14px; height: 14px; border-radius: 3px;} .sales-contract-modal .sales-contract-modal-container .body > .check-area input[type="checkbox"]:checked::before{ content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; color: white; background-color: #e7881c; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; border: 1px solid #e7881c; width: 13px; height: 13px; font-size: 11px;} .sales-contract-modal .sales-contract-modal-container .body > .check-area label{ font-size: 12px; font-weight: 400; color: #333; padding-left: 22px; line-height: 1.2;} .sales-contract-modal .sales-contract-modal-container .body > .check-area label a{ text-decoration: none; color: #333;} .sales-contract-modal .sales-contract-modal-container .body > .check-area label a:hover{ text-decoration: underline; color: #000;} .sales-contract-modal .sales-contract-modal-container .body .buttons{ display: flex; flex-direction: row !important; justify-content: end; gap: 10px; margin: 10px 0;} .sales-contract-modal .sales-contract-modal-container .body .buttons button{ transition: all .15s ease; font-size: 11px; font-weight: 600; border: 1px solid; padding: 8px 15px; border-radius: 3px; outline: none;} .sales-contract-modal .sales-contract-modal-container .body .buttons button:hover{ cursor: pointer; transform: translate(1px, -1px); box-shadow: -1px 1px 5px 0 #ccc; background-color: white !important;} .sales-contract-modal .sales-contract-modal-container .body .buttons button:active{ transform: translate(0, 0); box-shadow: none;} .sales-contract-modal .sales-contract-modal-container .body .buttons button.send{ background-color: var(--dark-blue); color: white; border-color: var(dark-blue);} .sales-contract-modal .sales-contract-modal-container .body .buttons button.send:hover{ color: var(--dark-blue);} .sales-contract-modal .sales-contract-modal-container .body .buttons button.close{ background-color: #eee; color: #666; border-color: #ccc;} .sales-contract-modal .sales-contract-modal-container .body .buttons button.close:hover{ color: #666;} .sales-contract-modal .sales-contract-modal-container .body .custom-input{ display: flex; gap: 3px; flex-direction: column;} .sales-contract-modal .sales-contract-modal-container .body .custom-input label{ line-height: 1; margin-bottom: 7px; font-weight: 600; font-size: 13px;} .sales-contract-modal .sales-contract-modal-container .body .custom-input input{} .sales-contract-modal .sales-contract-modal-container .body .custom-input select{} .sales-contract-modal .sales-contract-modal-container .body .custom-input input, .sales-contract-modal .sales-contract-modal-container .body .custom-input select{ transition: all .2s; width: 100%; border: 1px solid #c0c0c0; outline: none; background-color: #fbfbfb; border-radius: 3px; padding: 5px 7px; font-family: 'Poppins', sans-serif; font-size: 12px} .sales-contract-modal .sales-contract-modal-container .body .custom-input input:focus, .sales-contract-modal .sales-contract-modal-container .body .custom-input select:focus{ box-shadow: 0 0 0 3px rgba(var(--dark-blue-for-opacity), .3); background-color: white; border-color: rgba(var(--dark-blue-for-opacity), .3);} /* MOBILE CSS */ .mobile-profile-container{ width: 100%; height: 100vh; position: fixed; background-color: rgb(0, 0, 0, .4); z-index: 10; top: 0; left: 0; backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: all .25s ease;} .mobile-profile-container.active{ pointer-events: all; opacity: 1;} .mobile-profile-container .mobile-profile-area{ width: 90%; box-shadow: 0 0 10px 1px #0f0f0f; max-width: 300px; height: 100vh; overflow-y: auto; position: absolute; background-color: white; z-index: 10; top: 0; left: -300px; transition: all .3s ease;} .mobile-profile-container.active .mobile-profile-area{ left: 0;} .mobile-profile-container .mobile-profile-area .body::-webkit-scrollbar{ width: 10px; background-color: #ddd;} .mobile-profile-container .mobile-profile-area .body::-webkit-scrollbar-thumb{ background-color: #c6c6c6;} .mobile-profile-container .mobile-profile-area .header{ display: flex; border-bottom: 1px solid #ddd; box-shadow: 0 0 7px 1px #b9b9b9; padding: 10px; justify-content: space-between; align-items: center; background-color: white; z-index: 2;} .mobile-profile-container .mobile-profile-area .header img{ height: 30px;} .mobile-profile-container .mobile-profile-area .header i{ font-size: 25px; transition: all .15s;} .mobile-profile-container .mobile-profile-area .header i:hover{ cursor: pointer; color: rgb(101, 0, 0);} /* .mobile-profile-container .mobile-profile-area .body{ padding-top: 30px;} */ .mobile-profile-container .mobile-profile-area .body > a{ } .mobile-profile-container .mobile-profile-area .body > a{ display: block; width: fit-content; padding: 10px 15px; border-radius: 6px; font-weight: 600; font-size: 11px; transition: all .15s ease; border: 1px solid #f7992a; background-color: #f7992a; color: white; position: relative; padding-right: 20px; text-decoration: none; margin: 20px auto;} .mobile-profile-container .mobile-profile-area .body > a:hover{ background-color: white; color: #f7992a;} .mobile-profile-container .mobile-profile-area .body > a::before{ content: '\f02e'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; bottom: -11px; right: 5px; color: white; font-size: 20px; transition: all .2s ease-out; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #f7992a;} .mobile-profile-container .mobile-profile-area .body > a:hover::before{ color: #f7992a;} .mobile-profile-container .mobile-profile-area .body > a::after{ content: '+'; position: absolute; bottom: -10px; right: 7.8px; color: #f7992a; font-size: 14px; transition: all .2s ease-out;} .mobile-profile-container .mobile-profile-area .body > a:hover::after{ color: white;} .mobile-profile-container .mobile-profile-area ul{ list-style: none;} .mobile-profile-container .mobile-profile-area ul.no-account{ margin-top: 30px;} .mobile-profile-container .mobile-profile-area ul li{ } .mobile-profile-container .mobile-profile-area ul li a{ font-size: 14px; text-decoration: none; color: #2a2a2a; display: inline-block; width: 100%; padding: 12px 15px; border-top: 1px solid #ddd; transition: all .2s;} .mobile-profile-container .mobile-profile-area ul li a:hover{ background-color: #f1f1f1; padding-left: 23px;} .mobile-profile-container .mobile-profile-area ul li a i{ color: #0f0f0f; margin-right: 10px;} .mobile-profile-container .mobile-profile-area ul li:last-child{ border-bottom: 1px solid #ddd;} /* SEND MESSAGE MODAL */ .send-msg-modal-container{ opacity: 0; pointer-events: none; transition: all .3s ease; display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0, .7); backdrop-filter: blur(1px); z-index: 20;} .send-msg-modal-container.active{ pointer-events: all; opacity: 1;} .send-msg-modal-container .send-msg-modal{ opacity: 0; transform: translateY(50px); transition: all .25s; overflow: hidden; width: 90%; max-width: 400px; min-height: 30vh; background-color: white; border-radius: 3px;} .send-msg-modal-container.active .send-msg-modal{ opacity: 1; transform: translateY(0px);} .send-msg-modal-container .send-msg-modal .head{ position: relative; color: white; background-color: #f7992a; padding: 10px 17px;} .send-msg-modal-container .send-msg-modal .head b{ font-size: 16px; font-weight: 600;} .send-msg-modal-container .send-msg-modal .head span{ cursor: pointer; font-size: 18px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);} .send-msg-modal-container .send-msg-modal .body{ background-color: white; padding: 17px;} .send-msg-modal-container .send-msg-modal .body .profile-area{ margin-bottom: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column;} .send-msg-modal-container .send-msg-modal .body .profile-area .img-area{ margin-bottom: 10px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;} .send-msg-modal-container .send-msg-modal .body .profile-area .img-area img{ width: 100%;} .send-msg-modal-container .send-msg-modal .body .profile-area b{ margin-bottom: 2px; line-height: 1; font-size: 14px; font-weight: 600; color: black;} .send-msg-modal-container .send-msg-modal .body .profile-area span{ line-height: 1; font-size: 12px; font-weight: 500; color: #999;} .send-msg-modal-container .send-msg-modal .body .input-area{ } .send-msg-modal-container .send-msg-modal .body .input-area label{ display: inline-block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: #555;} .send-msg-modal-container .send-msg-modal .body .input-area textarea{ resize: none; padding: 7px; border-radius: 3px; outline: none; font-size: 11px; color: #333; font-family: inherit; width: 100%; height: 100px; background-color: #f7fafb; transition: all .2s ease; border: 1px solid #bec3d5;} .send-msg-modal-container .send-msg-modal .body .input-area textarea:focus{ background-color: white;} .send-msg-modal-container .send-msg-modal .body .send-btn{ cursor: pointer; transition: all .2s ease; width: 100%; padding: 11px 0 10.5px; background-color: #f7992a; border: 1px solid #f7992a; color: white; font-size: 14px; font-weight: 600; border-radius: 3px; margin: 15px 0;} .send-msg-modal-container .send-msg-modal .body .send-btn:hover{ background-color: white; color: #f7992a;} .send-msg-modal-container .send-msg-modal .body > p{ line-height: 1.3; font-size: 10px; text-align: center; color: #000;} .send-msg-modal-container .send-msg-modal .body > p a{ font-weight: 600; cursor: pointer; text-decoration: none;} .send-msg-modal-container .send-msg-modal .body > p a:hover{ text-decoration: underline;} @media screen and (max-width: 1250px) { .main-container > div{ gap: 30px;} .main-container > div .content-area{ max-width: calc(100% - 224px);} .main-container > div .content-area .first-banner .first-banner-slider{ width: 94%;} .main-container > div .content-area .first-banner .prev{ left: 0;} .main-container > div .content-area .first-banner .next{ right: 0;} a .advert-area > .body > div{ width: 94%; margin: 0 auto;} .advert-area > .body::before{ left: 23px;} .advert-area > .body::after{ right: 23px;} .advert-area > .body > span.prev{ left: 0px;} .advert-area > .body > span.next{ right: 0px;} } @media screen and (max-width: 1170px) { .advert-area.no-slider.grid > .body > div .advert .img-area{ height: 12.5vw;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div{ width: 85px; min-width: 85px; height: 60px;} } @media screen and (max-width: 1150px){ .advert-area.no-slider.line > .body > div .advert.ad .ad-img{ min-width: 270px; width: 270px; height: 170px;} .advert-area.no-slider.line > .body > div .advert > .img-area{ width: 270px; height: 170px;} .advert-area.no-slider.line > .body > div .advert > .img-area img{ width: unset; height: 100%;} .advert-area.no-slider.line > .body > div .advert > .advert-detail{ width: calc(100% - 270px);} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .seller-logo{ width: 40px; height: 40px; min-width: 40px; min-height: 40px} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons button{ font-display: 12px; height: 29px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons a{ font-display: 12px; height: 29px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices{ margin-top: 3px;} .advert-area > .body > div .advert .advert-detail .icons{ margin-bottom: 0;} } @media screen and (max-width: 1100px) { .advert-detail-container .content > .content-area .right-area{ display: none;} .advert-detail-container .content > .content-area .mobile-right-area{ display: grid;} .advert-detail-container .content > .content-area .left-area{ width: 100%;} /* .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container{ max-width: 507px;} */ .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail{ width: 100%;} } @media screen and (max-width: 1025px) { .main-container > div .content-area .first-banner .first-banner-slider{ width: 93%;} .main-container > div .content-area .first-banner .prev{ left: 0;} .main-container > div .content-area .first-banner .next{ right: 0;} .advert-area > .body > div{ width: 93%; margin: 0 auto;} .advert-area > .body::before{ left: 18px;} .advert-area > .body::after{ right: 18px;} .advert-area > .body > span.prev{ left: 0px;} .advert-area > .body > span.next{ right: 0px;} .main-container > div > .filter-container > .filter-area{ width: 200px;} } @media screen and (max-width: 870px) { #pinned-helper.pinned-helper{ margin-top: 25px;} .advert-area > .filter-header{ border: none; padding: 0;} .advert-area > .filter-header select{ display: none;} .advert-area > .filter-header .filter-area.fix{ position: fixed; top: 61px; z-index: 6; left: 50%; margin-top: 0; transform: translateX(10px);} .advert-area > .filter-header .filter-area .buttons{ display: none;} .advert-area > .filter-header .filter-area .select{ gap: 0; margin-left: 0; transform: translateY(15px) translateX(-50%); position: absolute; left: 50%; z-index: 6;} .advert-area > .filter-header .filter-area .select button.active{ box-shadow: none; border-radius: 0;} .advert-area > .filter-header .filter-area .select button{ box-shadow: none !important; border-radius: 0;} .filter-buttons{ gap: 64px;} .filter-buttons > div{ padding: 8px 0; font-size: 13px;} .filter-buttons > div select{ font-size: 13px; width: 100%; height: 100%; text-align: center;} .filter-buttons > div > i{ display: none;} .filter-buttons > div button i{ display: none;} /* .filter-buttons > div:last-child{ border-left: 1px solid #ddd;}*/ .main-container > div .content-area .advert-area.no-slider .categori{ margin-bottom: 10px;} .main-container > div .content-area .advert-area.no-slider .categori{ display: block;} .navbar .nav .logo img{ height: 35px;} .navbar .nav .mobile-btns .open-menu{ font-size: 20px;} .navbar .nav .mobile-btns .profile{ font-size: 18px;} .navbar .nav .mobile-btns .search-btn{ font-size: 18px;} .navbar .nav .user-buttons .shortcuts{ display: none;} .navbar .nav .search{ opacity: 0; pointer-events: none; transition: all .2s; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0, .6); backdrop-filter: blur(1px); z-index: 10;} .navbar .nav .search.active{ opacity: 1; pointer-events: all;} .navbar .nav .search .search-bar{ margin: 30px auto;} .navbar .nav .search .search-result{ width: 301.5px; left: 50%; transform: translateX(-50%); top: 61px;} .navbar .nav .buttons{ display: none;} .navbar .nav .mobile-btns{ display: flex;} .main-container > div .content-area{ min-width: 100%;} .navbar .categories-container{ display: block;} .categories-container { display: block; width: 100%; height: 100vh; position: fixed; background-color: rgb(0, 0, 0, .4); z-index: 10; top: 0; left: 0; backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: all .2s ease;} .categories-container.active { opacity: 1; pointer-events: all;} .categories-container .categories-area{ width: 90%; box-shadow: 0 0 10px 1px #0f0f0f; max-width: 300px; height: 100vh; overflow-y: auto; position: absolute; background-color: white; z-index: 10; top: 0; left: -300px; transition: all .3s ease;} .categories-container .categories-area::-webkit-scrollbar{ width: 10px; background-color: #ddd;} .categories-container .categories-area::-webkit-scrollbar-thumb{ background-color: #c6c6c6;} .categories-container .categories-area .header{ display: flex; position: sticky; top: 0; background-color: white; z-index: 2;} .categories-container .categories-area .header i:hover{ cursor: pointer;} .categories-container.active .categories-area{ left: 0px;} .categories-container .categories-area .mains, .categories-container .categories-area > ul{ padding: 0 10px;} .advert-area.no-slider.grid > .body > div .advert .img-area{ height: 18vw;} .main-container > div .filter-container { display: block; width: 100%; height: 100vh; position: fixed; background-color: rgb(0, 0, 0, .4); z-index: 10; top: 0; left: 0; backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: all .2s ease;} .main-container > div .filter-container.active { opacity: 1; pointer-events: all;} .main-container > div .filter-container .filter-area{ border-radius: 0; background-color: white; width: 100%; box-shadow: 0 0 10px 1px #0f0f0f; height: 100vh; overflow-y: auto; position: absolute; background-color: white; z-index: 10; top: 100%; left: 0; transition: all .3s ease; } .main-container > div .filter-container .filter-area .head{ display: block;} .main-container > div .filter-container .filter-area .header{ display: block;} .main-container > div .filter-container.active .filter-area{ top: 0;} .main-container > div .filter-container .filter-area .categori{ display: none; padding: 0 0 10px; width: calc(100% - 20px); margin-left: 10px; box-shadow: none;} .main-container > div .filter-container .filter-area .categori h5{ box-shadow: none; color: black; font-size: 12px; background-color: white; border-bottom: none; padding: 10px 0;} .main-container > div .filter-container .filter-area .categori > ul{ padding: 0;} .main-container > div .filter-container .filter-area > .button{ background-color: white; width: 100%; position: sticky; bottom: 0; box-shadow: 0 0 5px 1px #44c9e8;} .main-container > div .filter-container .filter-area > .other-filters > div:last-child{ border-bottom: none;} .advert-area > .filter-header .total-filter-area{ display: none;} .advert-area > .filter-header .header select{ display: none;} .filter-buttons{ display: grid;} } @media screen and (max-width: 845px) { .advert-detail-container .content > .content-area .mobile-right-area .security-info p{ font-size: 13px;} .advert-detail-container .content > .content-area .left-area .img-and-detail{ flex-direction: column; align-items: center;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container{ width: 100%; padding: 0;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail { border-top: 1px solid #ffcf9f; padding-top: 10px; margin-top: 10px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div:first-child{ font-size: 12px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div:last-child{ font-size: 13px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .order{ display: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container{ overflow-x: scroll; padding-right: 10px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images{ width: 100% !important;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div{ min-width: 100px; width: 100px; height: 70px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail{ padding: 0; padding-top: 10px;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div{ box-shadow: unset; padding: unset; background-color: white;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div > span{ display: none;} .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div > span.active{ display: inline-block; font-size: 11px; background-size: 14px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .advert-detail .features > div > div:last-child{ justify-content: end;} .advert-detail-container .content > .detail-head .print{ display: none;} } @media screen and (max-width: 748px) { .store-section > div .body .store{ width: calc(33% - (40px / 3));} .store-section > div .body .store .store-img{ height: 28vw;} .advert-area.no-slider.grid > .body > div .advert{ width: calc( 50% - 8px);} .advert-area.no-slider.grid > .body > div .advert .img-area{ height: 26.5vw;} } @media screen and (max-width: 650px) { .advert-area.no-slider.line > .body > div .advert.ad .ad-img{ min-width: 170px; width: 170px; height: 136px;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail strong{ font-size: 14px; padding-right: 0;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail::before{ left: -160px; top: 10px; right: unset;} .advert-area.no-slider.line > .body > div .advert.ad .ad-detail p{ font-size: 12px; -webkit-line-clamp: 3;} .advert-area.no-slider.line > .body > div .advert.ad .ad-img img{ width: unset; height: 100%;} .advert-area.no-slider.line > .body > div .advert > .img-area{ width: 170px; height: 136px;} .advert-area.no-slider.line > .body > div .advert > .advert-detail{ width: calc(100% - 170px); padding-bottom: 30px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header{ width: 100%;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .seller-logo{ margin-left: 0; width: 35px !important; height: 35px !important; min-width: 35px !important; min-height: 35px !important} .advert-area.no-slider.line > .body > div .advert .advert-detail .user-buttons{ display: none !important;} .advert-area.no-slider.line > .body > div .advert .advert-detail .prices{ margin-top: 3px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .prices .current-price{ font-size: 13px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .prices .another-unit{ font-size: 10px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .prices .another-unit::before{ transform: translateY(-.3px);} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons{ margin-bottom: 0;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .store-detail h5{ font-size: 13px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .header .seller-logo{ width: 40px; height: 40px; min-width: 40px; min-height: 40px;} .advert-area.no-slider.line > .body > div .advert .header > .store-detail > div .trust{ margin-top: 0; font-size: 11px;} .advert-area.no-slider.line > .body > div .advert.boost .img-area > small::before{ font-size: 14px; padding: 5px 5px 7px 7px;} .advert-area.no-slider.line > .body > div .advert .advert-detail > h5{ font-size: 13px; width: 100%; -webkit-line-clamp: 1; height: 15px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons{ gap: 3px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons span{ gap: 2px; font-size: 11px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons span i{ display: none;} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons span::before{ content: '/';} .advert-area.no-slider.line > .body > div .advert .advert-detail .icons span:first-child::before{ display: none;} .advert-area.no-slider.line > .body > div .advert .advert-detail .info span{ font-size: 9px;} .advert-area.no-slider.line > .body > div .advert .advert-detail .info span i{ display: none;} } @media screen and (max-width: 614px) { .advert-detail-container .content > .content-area .left-area .technical-features-area .body article > div{ grid-template-columns: repeat(2, 1fr);} } @media screen and (max-width: 585px) { .advert-area.no-slider.grid > .body > div .advert.ad .ad-img{ min-width: 100%;} /* .main-container{ padding: 0;} */ .main-container > div .content-area .first-banner .first-banner-slider{ width: 100%;} .main-container > div{ padding: unset;} .advert-area{ padding: 0 10px;} .main-container > div .content-area .first-banner .first-banner-slider{ height: 170px; border-radius: 0px; align-items: center; background-color: #f3f3f3;} .main-container > div .content-area .first-banner .first-banner-slider img{ height: fit-content;} .main-container > div .content-area .first-banner > span{ font-size: 22px; background-color: rgb(0, 0, 0, .4); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;border-radius: 50%;} .main-container > div .content-area .first-banner > span:hover{ background-color: rgb(0, 0, 0, .4);} .main-container > div .content-area .first-banner > span.disabled:hover{ background-color: rgb(0, 0, 0, .4);} .advert-area > .body > div .advert .header{ height: 53px;} .advert-area > .body > div .advert .header > .seller-logo{ width: 40px; height: 40px;} .advert-area > .body > div .advert .header > .store-detail{ padding-left: 55px;} .advert-area.no-slider > .body > div .advert .header > .seller-logo{ margin-left: 5px;} .advert-area.no-slider > .body > div .advert .header > .store-detail{ padding-left: 70px;} .advert-area > .body > div .advert .header > .store-detail::after{ font-size: 6.5px; right: -33px; top: 6px; height: 10px;} .advert-area > .body > div .advert .header > .store-detail h5{ font-size: 11px; width: fit-content; max-width: 100%; padding-right: 25px; word-break: break-all; -webkit-line-clamp: 1; height: 14px; line-height: 1.2713; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;} .advert-area > .body > div .advert .header > .store-detail > div .trust{ font-size: 9px;} .advert-area > .body > div .advert .img-area{ height: 35vw;} .advert-area > .body > div .advert .advert-detail h5{ font-size: 12.5px; height: 31px;} .advert-area > .body > div .advert .advert-detail .prices .current-price{ font-size: 12px;} .advert-area > .body > div .advert .advert-detail .prices .last-price{ font-size: 9.5px;} .advert-area > .body > div .advert .advert-detail .info span{ font-size: 8.4px;} .advert-area > .body > span{ display: none;} .advert-area > .body::before, .advert-area > .body::after{ display: none;} .advert-area > .body > div{ overflow-x: scroll; width: 100%; gap: 15px;} .advert-area > .body > div .advert{ width: calc(50% - 5px);} .store-section > div .body .store .store-detail h4{ font-size: 12px; height: 27px;} .store-section > div .body .store .store-detail .detail .trust{ font-size: 8px;} .store-section > div .body .store .store-detail .detail .advert-count{ font-size: 10px;} .advert-area.no-slider.grid > .body > div{ gap: 40px;} .advert-area.no-slider.grid > .body > div .advert{ width: 100%; transition: all .3s;} .advert-area.no-slider.grid > .body > div .advert .img-area{ height: 55vw;} .advert-area.no-slider.grid > .body > div .advert .header{ height: 70px;} .advert-area.no-slider > .body > div .advert .header .store-detail{ padding-top: 13px;} .advert-area.no-slider > .body > div .advert .header > .store-detail h5{ font-size: 18px;} .advert-area.no-slider > .body > div .advert .header > .store-detail > div .trust{ font-size: 13px; margin-top: 8px;} .advert-area.no-slider > .body > div .advert:hover img{ transform: scale(1) !important;} .advert-area.no-slider > .body > div .advert .advert-detail h5{ font-size: 18px; height: 41px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .current-price{ font-size: 19px;} .advert-area.no-slider > .body > div .advert .advert-detail .prices .another-unit{ font-size: 14px; transform: translateY(-2px);} .advert-area > .body > div .advert .advert-detail .prices .current-price{ font-size: 14px;} .advert-area > .body > div .advert .advert-detail .prices .last-price{ font-size: 12px;} .advert-area.no-slider > .body > div .advert .advert-detail .info span{ font-size: 14px;} .advert-area > .body > div .advert.boost .img-area > small::before{ padding: 5px 5px 7px 7px; font-size: 16px;} .advert-area > .body > div .advert .img-area .hearth-btn{ font-size: 15px; height: 30px; width: 30px;} .advert-detail-container .content > .content-area .mobile-right-area{ grid-template-columns: 1fr; gap: 20px 0;} .advert-detail-container .content > .content-area .mobile-right-area .security-info{ order: 3;} .advert-detail-container .content > .content-area .mobile-right-area .profile-card{ grid-template-columns: 1fr;} } @media screen and (max-width: 577px) { .advert-detail-container .content > .content-area .left-area .img-and-detail{ border: none;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container{ max-width: unset; padding: 0;} /* .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div{ min-width: calc(16.5vw + 0px); width: calc(16.5vw + 0px); height: 11.5vw;} */ .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .main-img-area{ height: 73vw;} } @media screen and (max-width: 520px) { .store-section > div .body .store{ width: 100%; display: flex; position: relative; overflow: hidden;} .store-section > div .body .store .store-img{ height: 20vw; width: 27%; min-width: 69px; position: static; padding: 8px;} .store-section > div .body .store .store-detail{ width: 100%; height: 100%;} .store-section > div .body .store .store-detail h4{ width: 87%;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .other-img-area .photos > .small-img-container > .images > div{ } .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > span{ font-size: 35px;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div > b{ font-size: 14px;} } @media screen and (max-width: 476px) { footer .we > .direct > a.mail{ order: 2;} } @media screen and (max-width: 460px) { .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div{ flex-direction: column;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div{ align-items: center;} .advert-detail-container .content > .content-area .left-area .img-and-detail .img-container .helper-icons > div > div > b{ text-align: center;} }