@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

:root {
    --primary-color: #3474F6;
    --secondary-color: #ef4444;
    --warning-color: #f97316;
    --success-color: #22c55e;
    --background-light: #f8fafc;
    --light-color: #ddebfd;
    --text-dark: #0f172a;
    --instagram-color: #e1306c;
    --youtube-color: #ff0000;
    --twitch-color: #9146ff;
    --facebook-color: #1877f2;
    --twitter-color: #1da1f2;
    --threads-color: #262626;
    --spotify-color: #1db954;
    --telegram-color: #0088cc;
    --linkedin-color: #0077b5;
    --google-color: #4285f4;
    --snapchat-color: #bfad14;
    --kick-color: #52ff00;
    --soundcloud-color: #ff5500;
    --ucretsiz-color: #fbbf24;
    --white-color: #fff;
    --tiktok-color: #010101;
    --dolap: #ff6f61;
    --pinterest-color: #e60023;
    --likee-color: #ff4d00;
    --twitch-color: #6441A5;
    --free-color: #FFD700;
}

.container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

a.cartss:after,
a.cartss:before {
    height: 18px;
    width: 100%;
    content: ""
}

a.cartss {
    color: var(--white-color) !important;

}

.empty-basket .icon-empty-basket i {
    font-size: 100px;
    color: var(--primary-color);
}

.btn-green-basket:hover i,
.ftsocialhead ul li:hover i,
.offcanvasarea .tophead a:nth-child(3) i,
.orderArea button:hover,
a,
a.cartss {
    color: var(--white-color)
}

.bg-image,
.login-background {
    z-index: -1;
    position: absolute;
    width: 100%
}

.eye-icon,
.input-group img {
    transform: translateY(-50%)
}

.eye-icon,
.input-group-2.password-group img.eye-icon,
.input-group.password-group img.eye-icon {
    right: 20px
}

.wrapper-dropdown,
section.comments {
    -webkit-user-select: none;
    -moz-user-select: none
}

.max-w-fit-content {
    max-width: fit-content;
}

.siparisbilgileri b {
    overflow-y: auto
}

#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-color: #f5f5f5
}

#style-2::-webkit-scrollbar {
    width: 2px;
    height: 7px;
    background-color: #f5f5f5
}

a.cartss,
a.cartss:after,
a.cartss:before {
    background-color: var(--primary-color)
}

#style-2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
    background-color: var(--secondary-color)
}

.login-card,
.login-main-card,
.register-card {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
    display: flex
}

.dropdown,
.headmenu .container,
.rating,
.relative,
a.cartss {
    position: relative
}

a.cartss:before {
    position: absolute;
    top: -18px;
    border-radius: 10px 10px 0 0
}

a.cartss:after {
    position: absolute;
    top: 65px
}

.input-group input,
.register-terms input[type=checkbox]:checked {
    background-color: var(--background-light)
}

.cartNumberss {
    position: absolute;
    border-radius: 16px;
    background-color: var(--white-color);
    color: var(--primary-color);
    font-size: 13px !important;
    padding: 0 14px;
    top: -25px;
    font-style: normal
}

@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Samsung Sharp Sans'), url('../font/samsungsharpsans.woff') format('woff')
}

@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Samsung Sharp Sans'), url('../font/samsungsharpsans-medium.woff') format('woff')
}

@font-face {
    font-family: 'Samsung Sharp Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Samsung Sharp Sans'), url('../font/samsungsharpsans-bold.woff') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 200;
    src: local('Gilroy'), url('../font/Gilroy-UltraLight.otf') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 600;
    src: local('Gilroy'), url('../font/subset-Gilroy-Semibold.woff2') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 400;
    src: local('Gilroy'), url('../font/subset-Gilroy-Regular.woff2') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 500;
    src: local('Gilroy'), url('../font/subset-Gilroy-Medium.woff2') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 300;
    src: local('Gilroy'), url('../font/Gilroy-Light.otf') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 800;
    src: local('Gilroy'), url('../font/Gilroy-Extrabold.otf') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 700;
    src: local('Gilroy'), url('../font/subset-Gilroy-Bold.woff2') format('woff')
}

@font-face {
    font-family: Gilroy;
    font-style: normal;
    font-weight: 900;
    src: local('Gilroy'), url('../font/Gilroy-Black.otf') format('woff')
}

body {
    background-color: #FDFDFD;
    font-family: Gilroy, sans-serif
}

#detayModal .modal-body,
.SocialMediaCardList .card .card-footer .form-control,
.SocialMediaCardList .input-group input,
.offcanvas-body,
ul {
    padding: 0
}

td,
th {
    padding: 8px
}

.balance-input input:focus,
.coupon-input input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0
}

a {
    text-decoration: none
}

header {
    margin-bottom: 1rem;
    float: left;
    width: 100%;
    background: var(--light-color)
}

.login-background {
    top: 0;
    left: 0;
    height: 100%;
    background-color: #e9f3f7
}

.bg-image {
    height: 1000px;
    object-fit: cover;
    object-position: center;
    background-color: var(--primary-color);
    top: 0;
    left: 0
}

.login-card,
.register-card {
    width: 693px;
    z-index: 1;
    background-color: var(--white-color);
    position: relative
}

.login-card {
    height: 550px;
    flex-direction: column;
    margin: 150px auto 0
}

.register-card {
    height: 837px;
    flex-direction: column;
    margin: 95px auto 0
}

.register-terms {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    margin-top: 20px;
    padding: 0 30px
}

.register-terms input[type=checkbox] {
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--background-light);
    position: relative;
    cursor: pointer
}

.register-terms input[type=checkbox]:checked::after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../img/icons/ico_check.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.register-terms label {
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    color: #2125298c
}

.login-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 3px solid var(--primary-color)
}

.login-card-header-title h1,
.login-card-header-title p,
section.comments ul.comments li .ctop .name {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600
}

.login-card-header-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px
}

.login-card-header-icon {
    width: 50px;
    height: 52px;
    background-color: var(--primary-color) 7a;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-green-register,
.btn-orange {
    height: 40px;
    border: none;
    font-weight: 600;
    display: flex;
    cursor: pointer
}

.login-card-header-icon i {
    color: var(--primary-color);
    font-size: 1.2rem
}

.rlx:hover {
    color: var(--white-color) !important
}

.kategoriler.tiktok .itemkategori .toptitle,
.norm,
.norm:hover,
.normal {
    color: #000
}


.secildi {
    color: var(--primary-color) !important
}

.btn-orange {
    width: 130px;
    border-radius: 5px;
    background-color: var(--primary-color);
    font-size: 12px;
    color: var(--white-color);
    justify-content: center;
    align-items: center
}

.btn-orange i {
    font-size: 1.1rem
}

.btn-green-register:hover,
.btn-orange:hover {
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
    transition: .3s ease-in-out;
    color: var(--primary-color) !important
}

.btn-green-register {
    width: 168px;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    justify-content: center;
    align-items: center
}

.btn-green-register i {
    font-size: 1.2rem
}

.login-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    margin-top: 30px
}


.input-group i {
    position: absolute;
    top: 31%;
    color: var(--primary-color);
}

.input-group i:first-child,
.input-group-2 i:first-child {
    left: 10px;
    font-size: 26px;
}

.input-group input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    padding: 0 60px;
    font-size: 18px;
    font-weight: 300
}

.eye-icon {
    position: absolute;
    top: 50%;
    cursor: pointer
}

.login-card-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px
}

.btn-green-login {
    border: 1px solid var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-green-basket:hover,
.btn-green-login:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transition: .3s ease-in-out
}

.login-card-footer a {
    color: #212529;
    font-size: 18px;
    font-weight: 500;
    opacity: .5
}

.login-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    background-color: #e9f3f7
}

.login-main p {
    font-size: 16px;
    font-weight: lighter;
    color: #212529
}

.login-main .toptitle,
.login-main h1 {
    font-size: 24px;
    font-weight: bolder;
    color: #191b2a;
    text-align: center
}

.login-main-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 40px;
    margin-top: 40px;
    margin-bottom: 30px
}

.login-main-card {
    width: 201px;
    height: 247px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    margin-bottom: 20px;
    padding: 10px
}

.login-main-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 40px
}

.login-main-card .toptitle {
    font-size: 28px;
    color: var(--white-color);
    font-weight: bolder
}

.login-main-card p {
    font-size: 20px;
    color: var(--white-color);
    font-weight: 400;
    text-align: center
}


.icon-security:before {
    content: url('https://test.follower7.de/assets/img/icons/ico_security.png')
}

.icon-basket:before {
    content: url('https://test.follower7.de/assets/img/icons/ico_basket.png')
}

.icon-power:before {
    content: url('https://test.follower7.de/assets/img/icons/ico_power.png')
}

.tophead {
    float: left;
    width: 100%;
    background: #DDEBFD;
    border-radius: 0 0 17px 17px;
}

.tophead .container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.payment_methods .checkbox,
.tophead span {
    display: flex;
    align-items: center
}

.tophead span i {
    font-size: 20px;
    color: var(--white-color);
    margin-right: 10px
}

.tophead span b {
    font-size: 14px;
    font-weight: 600;
    color: #17305A
}

.tophead a span span {
    font-size: 14px;
    font-weight: 400;
    color: #9da6ba
}

.tophead ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.tophead ul li {
    float: left;
    padding: 10px 10px;
}

.tophead ul li a {
    color: #17305A;
    font-weight: 600;
    font-size: 14px;
    display: flex
}

.tophead ul li i {
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
    margin-right: 10px
}

.w-max-content {
    width: max-content;
}

.headmenu {
    float: left;
    width: 100%;
    padding: 15px 0
}

.headmenu .logo {
    float: left;
    width: 20%;
    height: 55px;
    margin-right: 35px;
}

.headmenu .menu {
    margin-right: 30%;
}

.basettotal b,
.headmenu .menu,
.headright,
.newordersalan .title span,
.newordersdetail .title span {
    float: right
}

.headmenu .logo img,
.loginlogo img,
.panellogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left
}

.headmenu .menu ul {
    float: right;
    margin-bottom: 0;
    list-style: none;
    margin-top: 10px
}

.headmenu .menu ul li {
    float: left;
    margin-left: 35px;
    padding-bottom: 10px
}

.headright {
    width: 30%
}

.headmenu .menu ul li i {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
    transition: .6s
}

.headmenu .menu ul li a {
    font-style: normal !important;
    font-weight: 500 !important; /* medium = 500 */
    font-size: 18px !important;
    line-height: 22px !important;
    font-family: 'Rubik', sans-serif !important;
    letter-spacing: 0px;
    color: #17305A;
    transition: .6s;
    position: relative
}

.balance-text span,
.blogdesctext a,
.btn-green-basket i,
.burgermenu ul li.active i,
.burgermenu ul li.active span,
.faqsection .h3title span,
.headmenu .menu ul li a:hover,
.headmenu .menu ul li a:hover ~ i,
.itemkategori .toptitle,
.pagealtdesc a,
.pagedesc a,
.pagetitle.purple h1,
.pagetitle.yellow .toptitle,
.poppakitem.instagram .title i,
.settings-menu-text,
.slider-nav-button.instagram i,
.sosyalservices .mySwipersosyalservice .itemsosyal.instagram .h2title,
.sosyalservices .mySwipersosyalservice .itemsosyal.youtube .h2title,
.support-header-icon,
.text-success,
section.comments ul.comments li .ctop .stars i.checked,
thead {
    color: var(--primary-color)
}

.kategoriler.instagram {
    color: var(--instagram-color)
}

.kategoriler.star {
    color: var(--secondary-color)
}

.headmenu .menu ul li .dropdown {
    padding: 15px;
    border-radius: 12px;
    background-color: var(--white-color);
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 9999;
    min-width: 170px
}

.dropdown:hover .dropdown-content,
.headmenu .menu ul li:hover .dropdown,
.offcanvasarea ul li:hover .dropdown,
.productSocialServices .collapse.open {
    display: block
}

.headmenu .menu ul li .dropdown li {
    float: none;
    margin-left: 0;
    padding: 10px
}

.hmslider {
    float: left;
    width: 100%;
    background: var(--background-light);
    padding-bottom: 30px
}

.hmslider .sliderimg {
    float: left;
    width: 100%;
    height: 500px;
    position: relative
}

.hmslider .sliderimg img {
    width: 100%;
    height: 600px;
    object-fit: contain;
    position: absolute;
    bottom: 0;
    top: 0;
    object-position: top
}

.hmslider .slidertext {
    float: left;
    width: 100%;
    padding-top: 80px
}

.hmslider .slidertext .h2title {
    font-size: 32px;
    font-weight: 400;
    color: #373a3f
}

.btn-orange-check,
.ftsociallist ul li a b,
.hmslider .slidertext .h2title b,
th {
    color: var(--primary-color);
    font-weight: 600
}

.hmslider .slidertext .h6title {
    font-size: 16px;
    font-weight: 400;
    color: #373a3f;
    margin-bottom: 35px
}

.hmslider .slidertext .h6title i {
    color: var(--primary-color);
    font-weight: 600;
    font-family: Gilroy, sans-serif
}

.hmslider .slidertext p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 20px;
    margin-bottom: 35px
}

.hmslider .slidertext .search {
    background-color: var(--white-color);
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center
}

.hmslider .slidertext .search input {
    background-color: var(--white-color);
    padding: 15px;
    border: none;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark)
}

.hmslider .slidertext .search input::placeholder {
    color: rgba(26, 29, 35, 50%);
    font-size: 18px;
    font-weight: 400
}

.hmslider .slidertext .search button {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: none;
    height: 60px;
    width: 65px;
    padding: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.hmslider .slidertext .search button i {
    font-size: 18px;
    font-weight: 400;
    color: var(--white-color)
}

.hmslider .slidertext .search button:hover {
    background-color: #ff9b53
}

.hmslider .slidertext .search > i {
    margin-left: 20px;
    color: var(--text-dark);
    font-size: 18px
}

.hmslider .swiper-pagination {
    width: auto;
    bottom: 30px
}

.hmslider .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: #fffff8;
    opacity: 1;
    border-radius: 50%;
    margin: 0 5px;
    border: 1px solid var(--primary-color);
    transition: .7s
}

.kategorisayfa .nav-item .nav-link {
    padding-top: 1rem;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    border-radius: 17px 17px 0px 0px;
}

.kategorisayfa .nav-item .nav-link.active {

    background-color: var(--white-color);
    border-bottom: none;
}


.kategorisayfa.instagram .nav-link.active {
    color: var(--instagram-color);
}

.kategorisayfa.pinterest .nav-link.active {
    color: var(--pinterest-color);
}
.kategorisayfa.likee .nav-link.active {
    color: var(--likee-color);
}
.kategorisayfa.star .nav-link.active {
    color: var(--free-color);;
}
.kategorisayfa.tiktok .nav-link.active {
    color: var(--tiktok-color);
}
.kategorisayfa.youtube .nav-link.active {
    color: var(--youtube-color);
}
.kategorisayfa.twitch .nav-link.active {
    color: var(--twitch-color);
}
.kategorisayfa.facebook .nav-link.active {
    color: var(--facebook-color);
}
.kategorisayfa.twitter .nav-link.active {
    color: var(--twitter-color);
}
.kategorisayfa.threads .nav-link.active {
    color: var(--threads-color);
}
.kategorisayfa.spotify .nav-link.active {
    color: var(--spotify-color);
}
.kategorisayfa.telegram .nav-link.active {
    color: var(--telegram-color);
}
.kategorisayfa.linkedin .nav-link.active {
    color: var(--linkedin-color);
}
.kategorisayfa.google .nav-link.active {
    color: var(--google-color);
}
.kategorisayfa.snapchat .nav-link.active {
    color: var(--snapchat-color);
}
.kategorisayfa.kick .nav-link.active {
    color: var(--kick-color);
}
.kategorisayfa.soundcloud .nav-link.active {
    color: var(--soundcloud-color);
}



.kategorisayfa.instagram {
    background-color: var(--instagram-color);
}

.kategorisayfa.pinterest {
    background-color: var(--pinterest-color);
}

.kategorisayfa.likee {
    background-color: var(--likee-color);
}

.kategorisayfa.instagram
.kategorisayfa.star {
    background-color: var(--free-color);;
}

.kategorisayfa.tiktok {
    background-color: var(--tiktok-color);
}

.kategorisayfa.youtube {
    background-color: var(--youtube-color);
}

.kategorisayfa.twitch {
    background-color: var(--twitch-color);
}

.kategorisayfa.facebook {
    background-color: var(--facebook-color);
}

.kategorisayfa.twitter {
    background-color: var(--twitter-color);
}

.kategorisayfa.threads {
    background-color: var(--threads-color);
}

.kategorisayfa.spotify {
    background-color: var(--spotify-color);
}

.kategorisayfa.telegram {
    background-color: var(--telegram-color);
}

.kategorisayfa.linkedin {
    background-color: var(--linkedin-color);
}

.kategorisayfa.google {
    background-color: var(--google-color);
}

.kategorisayfa.snapchat {
    background-color: var(--snapchat-color);
}

.kategorisayfa.kick {
    background-color: var(--kick-color);
}

.kategorisayfa.soundcloud {
    background-color: var(--soundcloud-color);
}

.kategorisayfa.youtube {
    background-color: var(--youtube-color); /* YouTube */
}

.kategorisayfa.twitch {
    background-color: var(--twitch-color); /* Twitch */
}


.ftsocialhead ul li:hover,
.hmslider .swiper-pagination-bullet-active,
.hmstepsection .swiper-slide:nth-child(2) .icon,
.platgormbtn .icon,
.siparistable .item .status.kismi,
element.style {
    background: var(--primary-color)
}

.sosyalkategoriler .item.instagram,
.kategoriler.instagram .itemkategori .incelebtn {
    background: var(--instagram-color)
}

.sosyalkategoriler .item.pinterest,
.kategoriler.pinterest .itemkategori .incelebtn {
    background: var(--pinterest-color)
}

.sosyalkategoriler .item.likee,
.kategoriler.likee .itemkategori .incelebtn {
    background: var(--likee-color)
}

.sosyalkategoriler .item.star,
.kategoriler.star .itemkategori .incelebtn {
    background: var(--free-color);;
}

.sosyalkategoriler .big-title {
    margin-bottom: 2rem;
}

.sosyalkategoriler .sub-title {
    font: normal normal bold 48px/57px Rubik;
    color: #17305A;
    margin-bottom: 0;
}

.sosyalkategoriler .sub-title b {
    font: normal normal bold 48px/57px Rubik;
    color: var(--primary-color);
}

.sosyalkategoriler .title .description {
    color: #17305A;
    font: normal normal normal 16px/17px Rubik;
}


.guvenbox {
    float: left;
    width: 100%;
    margin-top: -1.5%;
    background-color: var(--white-color)
}

.guvenbox .container {
    display: flex
}

.guvenbox .itemguven {
    display: flex;
    align-items: center;
    border-right: 1px solid #eae9ef;
    padding: 30px 50px 30px 0
}

.guvenbox .itemguven:last-child {
    border: none;
    padding: 30px 0 30px 50px
}

.guvenbox .itemguven:nth-child(2) {
    padding: 30px 50px
}

.guvenbox .itemguven span {
    background-color: var(--primary-color);
    border-radius: 10px;
    height: 80px;
    width: 80px;
    padding: 20px 25px;
    margin-right: 20px
}

.guvenbox .itemguven span i {
    color: var(--white-color);
    font-size: 30px
}

.balances-container-title h1,
.guvenbox .itemguven .text .toptitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color)
}

.guvenbox .itemguven .text p {
    font-size: 16px;
    font-weight: 400;
    color: #48474f;
    margin-bottom: 0
}

.sosyalservices {
    background-color: #e2e8f0;
    padding: 60px 0;
    float: left;
    width: 100%
}

.sosyalservices .baslik {
    margin-bottom: 20px;
    text-align: left
}

.sosyalservices .baslik .toptitle {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0
}

.sosyalservices .baslik p {
    font-size: 18px;
    font-weight: 400;
    color: #787d83;
    margin-bottom: 0
}

.apititle,
.ftpmenubody .footermenuitem ul.tekn li,
.payment_methods .payment-item .detail,
.sosyalservices .mySwipersosyalservice {
    width: 100%
}

.sosyalservices .mySwipersosyalservice .itemsosyal {
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    text-align: left
}

.sosyalservices .mySwipersosyalservice .swiper-button-nextss,
.sosyalservices .mySwipersosyalservice .swiper-button-prevss {
    background-color: var(--primary-color);
    height: auto;
    top: 7px;
    bottom: 7px;
    padding: 10px 27px;
    position: absolute;
    border-radius: 10px;
    width: 30px;
    display: flex;
    z-index: 2
}

.sosyalservices .mySwipersosyalservice .itemsosyal span {
    padding: 10px;
    border-radius: 10px;
    margin-right: 15px;
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px
}

.apititle .icon i,
.istatisticbar .item .icon i,
.panelheader .burger i,
.sosyalservices .mySwipersosyalservice .itemsosyal span i {
    font-size: 25px
}

.circle-pagination-item.active,
.custom-dropdown.instagram .service-info:hover::after,
.href-instagram .service-info:hover::after,
.poppakitem.instagram .satinal button,
.poppakitem.instagram ul li span,
.sosyalservices .mySwipersosyalservice .itemsosyal.instagram span,
.sosyalservices .mySwipersosyalservice .itemsosyal.youtube span {
    background-color: var(--primary-color)
}

.kategoriler.instagram .itemkategori .icon {
    background-color: var(--instagram-color)
}

.kategoriler.pinterest .itemkategori .icon {
    background-color: var(--pinterest-color)
}

.kategoriler.likee .itemkategori .icon {
    background-color: var(--likee-color)
}

.kategoriler.pinterest .itemkategori .icon {
    background-color: var(--pinterest-color)
}

.kategoriler.likee .itemkategori .icon {
    background-color: var(--likee-color)
}


.kategoriler.soundcloud .itemkategori .icon {
    background-color: var(--soundcloud-color)
}

.custom-dropdown.twitter .service-info:hover::after,
.href-twitter .service-info:hover::after,
.kategoriler.twitter .itemkategori .icon,
.sosyalservices .mySwipersosyalservice .itemsosyal.twitter span {
    background-color: var(--twitter-color)
}

.sosyalservices .mySwipersosyalservice .itemsosyal.twitch span {
    background-color: #8653f6
}

.sosyalservices .mySwipersosyalservice .itemsosyal.tiktok span {
    background-color: #0e121e
}

.sosyalservices .mySwipersosyalservice .itemsosyal.spotify span {
    background-color: #65d36e
}

.kategoriler.twitter .itemkategori .toptitle,
.kategorisayfa.twitter i,
.sosyalservices .mySwipersosyalservice .itemsosyal.twitter .h2title {
    color: var(--twitter-color)
}

.sosyalservices .mySwipersosyalservice .itemsosyal.twitch .h2title {
    color: #8653f6
}

.sosyalservices .mySwipersosyalservice .itemsosyal.tiktok .h2title {
    color: #0e121e
}

.sosyalservices .mySwipersosyalservice .itemsosyal.spotify .h2title {
    color: #65d36e
}


.sosyalservices .mySwipersosyalservice .itemsosyal .text .h2title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0
}

.sosyalservices .mySwipersosyalservice .itemsosyal .text .h6title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0
}

.sosyalservices .mySwipersosyalservice .swiper-button-nextss {
    right: 0;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    color: var(--white-color)
}

.sosyalservices .mySwipersosyalservice .swiper-button-prevss {
    left: 0;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    color: var(--white-color)
}

.sosyalservices .mySwipersosyalservice::before {
    content: "";
    width: 30%;
    background: linear-gradient(to left, rgba(247, 247, 255, 0) 0, #e2e8f0 100%);
    display: flex;
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    z-index: 2
}

.sosyalservices .mySwipersosyalservice::after {
    content: "";
    width: 30%;
    background: linear-gradient(to right, rgba(247, 247, 255, 0) 0, #e2e8f0 100%);
    display: flex;
    position: absolute;
    top: -20px;
    bottom: -20px;
    right: 0;
    z-index: 1
}

.poppakitem.discord .follow,
.poppakitem.google .follow,
.poppakitem.linkedin .follow,
.poppakitem.netflix .follow,
.poppakitem.snapchat .follow,
.poppakitem.spotify .follow,
.poppakitem.telegram .follow,
.poppakitem.threads .follow,
.poppakitem.trovo .follow,
.poppakitem.twitter .follow {
    background-color: rgba(29, 155, 240, 20%)
}

.populerpakets {
    margin: 20px 0;
    float: left;
    width: 100%
}

.faqsection,
.populerpakets .col-md-3,
.turkishguven {
    margin-bottom: 30px
}

.populerpakets .baslik {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: 30px
}

.populerpakets .baslik .toptitle {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color)
}

.populerpakets .baslik svg {
    height: 30px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px
}

.poppakitem {
    background-color: var(--white-color);
    border-radius: 10px;
    border-top: 4px solid;
    position: relative;
    height: 100%;
    width: 100%
}

.aboutguvenli,
.aboutyorumlar {
    position: absolute;
    height: 90px
}

.poppakitem .follow {
    position: absolute;
    left: 15px;
    top: 20px;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer
}

.poppakitem .follow.active,
.poppakitem .follow:focus,
.poppakitem .follow:hover {
    filter: brightness(150%)
}

.poppakitem .title {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 20px
}

.poppakitem .title i {
    font-size: 30px;
    line-height: 30px
}

.poppakitem .title .h6title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px
}

.h1-title,
.poppakitem .title .toptitle {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 10px
}

.blogitem,
.poppakitem ul {
    padding: 15px
}

.poppakitem ul li {
    padding: 10px;
    border-radius: 30px;
    background-color: #f1f2f7;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark)
}

.poppakitem ul li span {
    border-radius: 100%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white-color);
    margin-right: 15px;
    padding: 5px
}

.poppakitem .satinal {
    padding: 15px;
    border-top: 1px solid #e0e2eb;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.left-align,
.poppakitem .satinal .ucret {
    text-align: left
}

.h6-oldprice,
.poppakitem .satinal .ucret .h6title {
    font-size: 16px;
    font-weight: 600;
    color: #bcbfcf;
    text-decoration: line-through;
    margin-bottom: 0
}

.dropdown-content a,
.stars223 {
    text-decoration: none;
    color: #000
}

.h4-price,
.poppakitem .satinal .ucret .h4title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0
}

.poppakitem .satinal button {
    border-radius: 5px;
    border: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    padding: 10px;
    transition: .6s
}

.poppakitem .satinal button i {
    font-size: 18px;
    font-weight: 400;
    margin-right: 7px
}

.poppakitem.twitter {
    border-color: #1d9bf0
}

.poppakitem.twitter .follow,
.poppakitem.twitter .title i,
.slider-nav-button.twitter i {
    color: #1d9bf0
}

.poppakitem.twitter .satinal button,
.poppakitem.twitter ul li span {
    background-color: #1d9bf0
}

.poppakitem.google {
    border-color: var(--warning-color)
}

.kategorisayfa.google i,
.poppakitem.google .follow,
.poppakitem.google .title i,
.siparissonuc b,
.slider-nav-button.google i {
    color: var(--warning-color)
}

.kategoriler.google .itemkategori .icon,
.poppakitem.google .satinal button,
.poppakitem.google ul li span {
    background-color: var(--warning-color)
}

.poppakitem.telegram {
    border-color: #34a6d8
}

.kategorisayfa.telegram i,
.poppakitem.telegram .follow,
.poppakitem.telegram .title i,
.slider-nav-button.telegram i {
    color: #34a6d8
}

.kategoriler.telegram .itemkategori .icon,
.poppakitem.telegram .satinal button,
.poppakitem.telegram ul li span {
    background-color: #34a6d8
}

.poppakitem.trovo {
    border-color: #00b662
}

.kategorisayfa.trovo i,
.poppakitem.trovo .follow,
.poppakitem.trovo .title i,
.slider-nav-button.trovo i {
    color: #00b662
}

.kategoriler.trovo .itemkategori .icon,
.poppakitem.trovo .satinal button,
.poppakitem.trovo ul li span {
    background-color: #00b662
}

.poppakitem.linkedin {
    border-color: #026fac
}

.kategorisayfa.linkedin i,
.poppakitem.linkedin .follow,
.poppakitem.linkedin .title i,
.slider-nav-button.linkedin i {
    color: #026fac
}

.kategoriler.linkedin .itemkategori .icon,
.poppakitem.linkedin .satinal button,
.poppakitem.linkedin ul li span {
    background-color: #026fac
}

.poppakitem.spotify {
    border-color: #22974c
}

.kategorisayfa.spotify i,
.poppakitem.spotify .follow,
.poppakitem.spotify .title i,
.slider-nav-button.spotify i {
    color: #22974c
}

.kategoriler.spotify .itemkategori .icon,
.poppakitem.spotify .satinal button,
.poppakitem.spotify ul li span {
    background-color: #22974c
}

.poppakitem.snapchat {
    border-color: var(--snapchat-color)
}

.kategorisayfa.snapchat i,
.poppakitem.snapchat .follow,
.poppakitem.snapchat .title i,
.slider-nav-button.snapchat i {
    color: var(--snapchat-color)
}

.kategoriler.snapchat .itemkategori .icon,
.poppakitem.snapchat .satinal button,
.poppakitem.snapchat ul li span {
    background-color: var(--snapchat-color)
}

.poppakitem.netflix {
    border-color: #e50914
}

.kategorisayfa.netflix i,
.poppakitem.netflix .follow,
.poppakitem.netflix .title i,
.slider-nav-button.netflix i {
    color: #e50914
}

.kategoriler.netflix .itemkategori .icon,
.poppakitem.netflix .satinal button,
.poppakitem.netflix ul li span {
    background-color: #e50914
}

.poppakitem.discord {
    border-color: #5865f2
}

.kategorisayfa.discord i,
.poppakitem.discord .follow,
.poppakitem.discord .title i,
.slider-nav-button.discord i {
    color: #5865f2
}

.kategoriler.discord .itemkategori .icon,
.poppakitem.discord .satinal button,
.poppakitem.discord ul li span {
    background-color: #5865f2
}

.kategorisayfa.threads i,
.poppakitem.threads .follow,
.poppakitem.threads .title i,
.slider-nav-button.threads i {
    color: #333
}

.custom-dropdown.threads .service-info:hover::after,
.href-threads .service-info:hover::after,
.kategoriler.threads .itemkategori .icon,
.poppakitem.threads .satinal button,
.poppakitem.threads ul li span {
    background-color: #333
}

.poppakitem.twitch {
    border-color: #8d45f8
}

.poppakitem.twitch .follow {
    color: #8d45f8;
    background-color: #8d45f87a
}

.kategorisayfa.twitch i,
.poppakitem.twitch .title i,
.slider-nav-button.twitch i {
    color: #8d45f8
}

.kategoriler.twitch .itemkategori .icon,
.poppakitem.twitch .satinal button,
.poppakitem.twitch ul li span {
    background-color: #8d45f8
}

.poppakitem.instagram {
    border-color: var(--instagram-color)
}

.poppakitem.instagram .follow {
    color: var(--instagram-color);
    background-color: rgba(225, 48, 108, 20%)
}

.poppakitem.instagram .satinal button:hover {
    background-color: var(--instagram-color)
}

.poppakitem.tiktok {
    border-color: #0d121f
}

.poppakitem.tiktok .follow {
    color: #0d121f;
    background-color: rgba(13, 18, 31, 20%)
}

.poppakitem.tiktok .title i,
.slider-nav-button.tiktok i {
    color: #0d121f
}

.poppakitem.tiktok .satinal button,
.poppakitem.tiktok ul li span {
    background-color: #0d121f
}

.poppakitem.youtube {
    border-color: red
}

.poppakitem.youtube .follow {
    color: red;
    background-color: rgba(255, 0, 0, 20%)
}

.kategoriler.youtube .itemkategori .toptitle,
.kategorisayfa.youtube i,
.poppakitem.youtube .title i,
.slider-nav-button.youtube i {
    color: red
}

.custom-dropdown.youtube .service-info:hover::after,
.href-youtube .service-info:hover::after,
.kategoriler.youtube .itemkategori .icon,
.poppakitem.youtube .satinal button,
.poppakitem.youtube ul li span {
    background-color: red
}

.poppakitem.facebook {
    border-color: #1873eb
}

.poppakitem.facebook .follow {
    color: #1873eb;
    background-color: rgba(225, 48, 108, 20%)
}

.kategoriler.facebook .itemkategori .toptitle,
.kategorisayfa.facebook i,
.poppakitem.facebook .title i,
.slider-nav-button.facebook i {
    color: #1873eb
}

.kategoriler.facebook .itemkategori .icon,
.poppakitem.facebook .satinal button,
.poppakitem.facebook .satinal button:hover,
.poppakitem.facebook ul li span {
    background-color: #1873eb
}

.aboutpagehwo {
    float: left;
    width: 100%;
    padding: 90px 0;
    background: #e9f3f7
}

.aboutpagehwo .img {
    float: left;
    width: 100%;
    height: 635px;
    position: relative
}

.aboutguvenli {
    left: 0;
    bottom: 70px;
    animation: 5s infinite bounce2
}

.aboutpagehwo .img img,
.hmcommentsection .img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.aboutyorumlar {
    right: 0;
    top: 200px;
    animation: 4s infinite bounce2
}

.aboutpagehwo .text,
.newordersalan .neworderitem .select,
.turkishguven {
    position: relative;
    float: left;
    width: 100%
}

.aboutpagehwo .text {
    background: #fcfcfd;
    border-radius: 20px;
    padding: 35px 45px
}

.aboutpagehwo .text .h5title {
    float: left;
    width: 100%;
    font-size: 36px;
    color: var(--primary-color);
    font-weight: 700
}

.aboutpagehwo .text p {
    float: left;
    width: 100%;
    color: var(--text-dark);
    margin-bottom: 50px
}

.aboutpagehwo hr {
    width: 100%;
    color: #081839;
    opacity: 20%;
    position: absolute;
    left: 0;
    right: 0;
    top: 145px
}

.aboutpagehwo .text .item,
.pagealtdesc {
    float: left;
    width: 100%;
    margin-bottom: 40px
}

.aboutpagehwo .text .item .icon {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    text-align: center;
    line-height: 40px;
    font-size: 17px
}

.aboutpagehwo .text .item .inftext {
    float: left;
    width: calc(100% - 40px);
    padding-left: 15px
}

.aboutpagehwo .text .item .inftext .h6title {
    float: left;
    width: 100%;
    color: #000b33;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px
}

.aboutpagehwo .text .item .inftext span {
    font-weight: 400;
    max-width: 450px;
    float: left
}

.aboutpagehwo .text .buycommerce {
    float: left;
    width: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    padding: 15px 18px;
    margin-top: 20px;
    font-size: 18px;
    transition: .6s;
    text-align: center;
    border-radius: 10px
}

.aboutpagehwo .text .buycommerce:hover {
    border: 1px solid var(--primary-color);
    background: var(--white-color);
    color: var(--primary-color)
}

@keyframes bounce2 {

    0%,
    100%,
    20%,
    50%,
    80% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}

.turkishguven {
    height: 600px;
    background: center/cover no-repeat var(--text-dark)
}

.turkishguven .container {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.turkishguven img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 20%
}

.turkishguven .efectgunes {
    position: absolute;
    top: -17%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 0
}

.turkishguven .efectgunes span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: rgba(255, 130, 43, 10%)
}

.turkishguven .efectgunes span.one {
    height: 170px;
    width: 170px
}

.turkishguven .efectgunes span.two {
    height: 135px;
    width: 135px
}

.turkishguven .efectgunes span.three {
    height: 100px;
    width: 100px
}

.turkishguven .efectgunes span.four {
    background-color: rgba(255, 130, 43, 100%);
    align-items: center;
    justify-content: center;
    height: 65px;
    width: 65px
}

.turkishguven .mySwiperturkishguven .swiper-button-nexttg,
.turkishguven .mySwiperturkishguven .swiper-button-prevtg {
    border-radius: 100%;
    height: 35px;
    width: 35px;
    align-items: center;
    font-weight: 400;
    background-color: var(--primary-color);
    font-size: 16px;
    position: absolute;
    z-index: 9;
    color: var(--white-color);
    bottom: 0;
    display: flex
}

.turkishguven .efectgunes span.four svg {
    height: 40px;
    width: auto;
    object-fit: contain
}

.turkishguven .mySwiperturkishguven {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 60px
}

.turkishguven .mySwiperturkishguven .swiper-button-nexttg {
    justify-content: center;
    left: calc(50% + 10px)
}

.turkishguven .mySwiperturkishguven .swiper-button-prevtg {
    justify-content: center;
    right: calc(50% + 10px)
}

.turkishguven .baslik {
    width: 100%;
    text-align: center;
    margin-top: 70px
}

.turkishguven .baslik .toptitle {
    font-size: 44px;
    font-weight: 700;
    color: var(--white-color)
}

.turkishguven .baslik .h6title {
    font-size: 24px;
    font-weight: 400;
    color: var(--white-color);
    margin-bottom: 0
}

.turkishguven .yorumitem {
    padding: 15px;
    border-radius: 10px;
    background-color: var(--primary-color)
}

.turkishguven .yorumitem p {
    font-size: 16px;
    font-weight: 400;
    color: var(--white-color)
}

.turkishguven .yorumitem span {
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    position: relative
}

.turkishguven .yorumitem span::after {
    content: "";
    height: 1px;
    width: 50px;
    position: absolute;
    top: -10px;
    left: 0;
    background-color: var(--white-color);
    opacity: 30%
}

.blogpop .text,
.hmstepsection {
    float: left;
    width: 100%;
    padding: 30px 0
}

.hmstepsection .h2title {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    color: var(--text-dark)
}

.hmstepsection .h6title {
    max-width: 660px;
    margin: 0 auto 40px;
    color: #353945;
    text-align: center;
    font-weight: 400
}

.hmstepsection .item {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    min-height: 340px;
    position: relative;
    z-index: 1
}

.hmstepsection .item .icon {
    background: #31e072;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    text-align: center;
    line-height: 70px;
    margin: 0 auto 45px;
    position: relative
}

.hmstepsection .swiper-backface-hidden .swiper-slide {
    transform: none
}

.hmstepsection .swiper-slide::after {
    content: "";
    background: url(../img/aboutline.png) center/contain no-repeat;
    position: absolute;
    width: calc(100% - 100px);
    height: 13px;
    top: 55px;
    z-index: 9;
    left: calc(50% + 60px)
}

.basetcupon .accordion-body,
.blogitem .text,
.commentSwiper .name,
.desteklerlist,
.destektalebikonusma,
.duyurulist,
.faqsection,
.faqsection .accordion,
.faqsection .h3title,
.faqsection .h6title,
.ftpmenubody .footermenuitem,
.hmstepsection .item span,
.iletisimsayfa,
.loginbox .logintext,
.panelaccount .hxs,
.panelcontent,
.panelssarea .accordion,
.profilcontent,
.siparisbilgileri,
.siparistable .tbody,
.sptbody {
    width: 100%;
    float: left
}

.hmstepsection .item .icon i {
    font-size: 23px;
    color: var(--white-color)
}

.hmstepsection .swiper-slide:last-child::after {
    display: none
}

.hmstepsection .item span {
    text-align: center;
    margin-bottom: 20px;
    color: #777e90;
    font-weight: 500;
    font-size: 14px
}

.hmstepsection .item .h5title {
    float: left;
    width: 100%;
    text-align: center;
    color: var(--text-dark);
    font-size: 21px;
    font-weight: 600
}

.hmstepsection .item p {
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--text-dark)
}

.hmstepsection .swiper-slide:nth-child(3) .icon,
.replysupport button:hover {
    background: #1d4ed8
}

.hmstepsection .swiper-slide:nth-child(4) .icon {
    background: #081839
}

.faqsection .accordion {
    background-color: var(--primary-color);
    background-image: url('/uploads/faq-bg.svg'); /* Görsel yolunu yaz */
    background-repeat: no-repeat;
    background-position: 170% 40%; /* %100 yerine %90 gibi daha sola kaydırır */
    background-size: auto; /* Gerekirse cover, contain veya belirli ölçü */
    padding: 50px 50px;
    border-radius: 17px;
}

.faqsection .h3title {
    text-align: center;
    font: normal normal bold 48px/57px Rubik;
    color: #17305A;
}

.faqsection .h3title b {
    text-align: center;
    font: normal normal bold 48px/57px Rubik;
    color: var(--primary-color);
}

.faqsection .h6title {
    text-align: center;
    color: #38455d;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 35px
}

.faqsection .accordion-item {
    background: 0 0;
    margin-bottom: 15px;
    border-bottom: 0;
    border-radius: 10px;
    overflow: hidden
}

.faqsection .accordion-item h3 {
    margin-bottom: 0;
    font: normal normal normal 16px/19px Rubik;
    letter-spacing: 0px;
    color: #17305A;
}

.faqsection .accordion-button {
    border-radius: 2px;
    border: 0;
    overflow: hidden;
    font-size: 17px;
    padding: 20px;
    font-weight: 400;
    color: #38455d
}

.apititle,
.pagedesc .title {
    border-bottom: 1px solid #d7e1f4
}


.blogitem,
.blogpop,
.blogtext,
.faqsection .accordion-body,
.pagedesc,
.pagination ul li a,
.servishead,
.servissearch,
body.lgnbody {
    background: var(--white-color)
}


.faqsection .accordion-button:focus,
.inptsitem select:focus,
.servisliste .accordion-button:focus,
.servisliste .accordion-button:not(.collapsed) {
    box-shadow: none
}

.blogdesctext img,
.follow-card-text img,
.pagealtdesc img,
.pagedesc img {
    max-width: 100%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.pagealtdesc ul {
    list-style-position: outside;
    margin-left: 40px
}

.pagealtdesc .detail {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 10px;
    padding: 20px 10px 20px 30px;
    word-wrap: break-word;
    overflow-wrap: break-word
}

.pagealtdesc .area {
    float: left;
    width: 100%;
    padding-right: 25px;
    overflow-y: scroll;
    max-height: 420px
}

.pagealtdesc .area::-webkit-scrollbar-track {
    border-radius: 5px;
    width: 100%;
    height: 100%
}

.pagealtdesc .area::-webkit-scrollbar {
    width: 4px;
    border-radius: 5px;
    background-color: #e6e4ef
}

.pagealtdesc .area::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: var(--primary-color);
    height: 5px
}

.pagealtdesc .h3title {
    color: #000b33;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px
}

.pagealtdesc p {
    color: #4e525d;
    font-size: 17px
}

.hmcommentsection {
    float: left;
    width: 100%;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden
}

.hmcommentsection::after {
    content: "";
    background: url(../img/bg-color.png) 0 0/cover no-repeat;
    width: 250px;
    height: 250px;
    position: absolute;
    right: -50px;
    bottom: 0;
    z-index: -1
}

.hmcommentsection .img {
    float: left;
    width: 100%;
    height: 500px
}

.basetcupon,
.hmcommentsection .text,
.inptsitem .select {
    float: left;
    width: 100%;
    position: relative
}

.hmcommentsection .swiper-button-nextcmt,
.hmcommentsection .swiper-button-prevcmt {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    line-height: 40px;
    text-align: center;
    bottom: 0
}

.hmcommentsection .text::before {
    content: "";
    background: url(../img/bg-color.png) 0 0/contain no-repeat;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

.hmcommentsection .text .h3title {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
    font-weight: 400;
    font-size: 40px
}

.hmcommentsection .text .h3title span {
    color: var(--primary-color);
    font-weight: 700
}

.commentSwiper {
    float: left;
    width: 100%;
    padding-bottom: 50px
}

.commentSwiper svg {
    margin-bottom: 25px
}

.commentSwiper p {
    font-weight: 400;
    font-size: 17px;
    margin-bottom: 30px
}

.commentSwiper .name .h5title {
    color: #081839;
    font-weight: 600;
    font-size: 21px;
    margin-bottom: 5px
}

.commentSwiper .name p {
    color: #08183991;
    font-size: 16px
}

.hmcommentsection .swiper-button-nextcmt {
    color: var(--white-color);
    left: 50px;
    position: absolute
}

.hmcommentsection .swiper-button-prevcmt {
    color: var(--white-color);
    left: 0;
    position: absolute
}

.abonebar {
    float: left;
    width: 100%;
    background: url(../img/abonebarbg.png) center/cover;
    margin-bottom: 50px;
    padding-bottom: 15px;
    position: relative
}

.abonebar .icon {
    margin: -20px auto 0;
    width: 200px
}

.abonebar .icon img {
    width: 100%;
    object-fit: contain
}

.abonebar .h5title {
    margin: 25px auto 0;
    color: var(--white-color);
    font-size: 25px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    font-family: 'Samsung Sharp Sans'
}

.abonebar p {
    margin: 0 auto 20px;
    color: var(--white-color);
    font-size: 17px;
    font-weight: 500;
    width: 100%;
    text-align: center
}

.abonebar .formarea {
    margin: 0 auto;
    width: 650px;
    position: relative
}

.abonebar::after,
.abonebar::before {
    width: 330px;
    height: 210px;
    bottom: -5px;
    content: ""
}

.abonebar::before {
    background: url(../img/aboneleft.png) 0 0/contain no-repeat;
    position: absolute;
    left: 50px
}

.abonebar::after {
    background: url(../img/aboneright.png) 0 0/contain no-repeat;
    position: absolute;
    right: 50px
}

.abonebar .formarea .input {
    float: left;
    width: calc(100% - 100px);
    position: relative
}

.abonebar .formarea .input input {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 10px;
    padding: 22px 22px 22px 50px;
    border: 0;
    color: #081839;
    font-size: 17px;
    font-weight: 500
}

.abonebar .formarea .input input::placeholder {
    color: #08183988
}

.abonebar .formarea .input i {
    position: absolute;
    left: 15px;
    color: #b3c1db;
    font-size: 20px;
    top: 16px
}

.abonebar .formarea button {
    width: 80px;
    float: right;
    border-radius: 10px;
    border: 0;
    background: var(--white-color) 5d;
    color: var(--white-color);
    height: 70px;
    transition: .6s
}

.abonebar .formarea button:hover {
    background: var(--white-color) 94
}

footer {
    float: left;
    width: 100%;
    background: var(--white-color);
    overflow: hidden;
    background-color: #17305a;
}

footer .ftleft {
    padding-right: 0;
    padding-left: 0
}

footer .fthead {
    float: left;
    width: 100%;
    padding: 31px 20px 31px 0;
    border-bottom: 1px solid #3a3c412d
}

footer ul.social li a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 100%;
    color: var(--white-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

footer ul.social li a:hover {
    background-color: var(--white-color);
    color: #131932;
}

footer ul.footer-menu li:hover {
    background: var(--white-color);

}

footer ul.footer-menu li:hover a {
    color: #131932;
}

footer ul.footer-menu li {
    position: relative;
    display: flex;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s;
}

footer ul.footer-menu li > a {
    padding-left: 36px;
    font-size: 16px;
    font-weight: 400;
    line-height: 2.45;
    display: flex;
    align-items: center;
}


footer ul.contact {

}

.ftlogo {
    float: left;
    height: 55px
}

.ftlogo img {
    height: 100%;
    object-fit: contain
}

.footerdesc ul,
footer .fthead ul {
    float: right;
    margin-bottom: 0
}

footer .fthead ul li {
    list-style: none;
    float: left;
    margin-left: 10px
}

footer .fthead ul li a {
    display: flex;
    padding: 14px 15px;
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    transition: .6s;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    align-items: center
}

.siparissorguitem button:hover,
.title-bg.red,
footer .fthead ul li a:hover {
    background: var(--primary-color);
    color: var(--white-color)
}

footer .fthead ul li a i {
    margin-right: 15px;
    font-weight: 200;
    font-size: 16px
}

.ftpmenubody {
    float: left;
    width: 100%;
    padding: 35px 0 35px 20px
}

.ftpmenubody .footermenuitem label {
    float: left;
    width: 100%;
    color: #081839;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    margin-bottom: 12px
}

.ftpmenubody .footermenuitem label::before {
    content: "";
    width: 20px;
    height: 5px;
    border-radius: 2px;
    background: var(--primary-color);
    position: absolute;
    left: -30px;
    top: 13px
}

.dropdownmenu ul,
.ftpmenubody .footermenuitem ul,
.ftsocialhead ul,
.ftsociallist ul {
    float: left;
    width: 100%;
    margin-bottom: 0

}

.ftpmenubody .footermenuitem ul li {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    list-style: none;
    margin-top: 3px
}

.ftsocialhead ul li,
.ftsociallist ul li .icon {
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px
}

.ftpmenubody .footermenuitem ul li a {
    font-size: 14px;
    color: #081839;
    font-weight: 400;
    transition: .5s
}

footer .ftright {
    float: right;
    background: var(--background-light);
    color: var(--white-color);
    padding-left: 0;
    padding-right: 0;
    position: relative
}

.footerdesc {
    background-color: #17305a;
    border-top: 1px solid #495275;
}

.footer-desc {
    color: var(--white-color);
}

.contact i {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    color: var(--white-color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.contact a {
    display: block;
    margin-top: 6px;
    color: var(--white-color);
    font-size: 22px;
    font-weight: 500;
}

.footbar {
    margin-top: 30px;
    background: var(--primary-color);
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0 0 8px 8px;
}

.footbar p {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

.footbar span.icon {
    width: 50px;
    height: 50px;
    box-shadow: -4px 4px 24px rgba(69, 94, 224, .44);
    border-radius: 8px;
    background-color: var(--white-color);

    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.footbar span.icon i {
    color: #0052a0 !important;
}


.footbar a.btn-alltools {
    box-shadow: -4px 4px 24px rgba(0, 0, 0, .05);
    border-radius: 8px;
    background-color: var(--white-color);
    color: var(--primary-color) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 15px 22px;
    display: flex;
    align-items: center;
}


.footbar a.btn-alltools:hover {
    background-color: #00386d !important;
    color: var(--white-color) !important;
}

.contact li:nth-of-type(1) i {
    background: #18d3a6;
}

.contact li:nth-of-type(2) i {
    background: #fe3174;
}

.contact li:nth-of-type(3) i {
    background: #3ba9da;
}

footer h5 {
    color: var(--white-color);
}

footer h5 i {
    color: #fe3174;
}

.ftsociallist ul li .icon,
.loginform button {
    background: var(--primary-color);
    float: left
}

footer .ftright::after {
    content: "";
    background: var(--background-light);
    position: absolute;
    left: 100%;
    height: 100%;
    width: 1500px;
    top: 0
}

.ftsocialhead,
.ftsociallist,
.mobilsiparis {
    float: left;
    width: 100%;
    padding: 15px 20px
}

.ftsocialhead span {
    float: left;
    width: 100%;
    color: #959eae;
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 10px
}

.ftsocialhead ul li {
    list-style: none;
    float: left;
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    margin-right: 13px;
    transition: .6s
}

.ftsocialhead ul li i {
    color: var(--primary-color);
    font-size: 20px
}

.ftsociallist ul li a,
.ftsociallist ul li span {
    width: calc(100% - 50px);
    padding-left: 15px;
    min-height: 48px;
    display: flex;
    color: #717988;
    font-weight: 300;
    float: left
}

.ftsociallist ul li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    list-style: none
}

.ftsociallist ul li .icon {
    border-radius: 5px
}

.ftsociallist ul li .icon i,
.modalhead .icon i,
section.comments ul.comments li .ctop .stars {
    font-size: 22px
}

.ftsociallist ul li a {
    flex-flow: column;
    justify-content: center;
    font-size: 18px
}

.ftsociallist ul li span {
    flex-flow: column;
    justify-content: center;
    font-size: 14px
}

.footerdesc {
    width: 100%;
    padding: 25px 0
}

.footerdesc span {
    float: left;
    color: var(--white-color);
    font-size: 15px
}

.loginform button,
.registerbtn {
    color: var(--white-color);
    font-size: 17px;
    display: flex;
    width: 100%;
    text-align: center
}

.footerdesc ul li {
    float: left;
    list-style: none;
    margin-left: 30px
}

.footerdesc ul li a {
    color: var(--white-color);
    font-size: 15px;
    transition: .6s
}

.loginarea {
    float: left;
    width: 100%;
    height: 100vh;
    overflow-x: hidden
}

.loginbox {
    float: left;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: -4px 4px 24px rgba(13, 18, 31, .062);
    padding: 25px 33px
}

.panelaccountarea,
.panelheader {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .082)
}

.desteklerlist .item,
.duyurulist .item,
.istatisticbar,
.newordersalan,
.newordersdetail,
.newsupportticket,
.orderfilter,
.panelssarea .accordion-item,
.pgstitle,
.profilebox,
.profilsidebar,
.siparistable {
    box-shadow: 0 0 5px rgba(13, 18, 31, .048)
}

.registerbtn {
    max-width: 500px;
    margin: 30px auto 0;
    border-radius: 8px;
    background: var(--success-color);
    position: relative;
    padding: 25px 45px;
    font-weight: 600;
    transition: .8s;
    justify-content: space-between
}

.registerbtn:hover {
    color: var(--white-color);
    background: #00a04a
}

.basketmenu ul li.active a i,
.registerbtn i,
.servisliste .hiz .icon i,
.servisliste .pricet .icon i {
    font-weight: 400
}

.loginbox .logintext .h5title {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 25px;
    font-weight: 600
}

.loginform,
.sidemenu {
    float: left;
    width: 100%;
    padding: 20px 0
}

.loginform .input {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    position: relative
}

.loginform .input input {
    float: left;
    width: 100%;
    padding: 18px 50px 18px 23px;
    border: 1px solid #a9bcc9;
    border-radius: 8px;
    color: #617583;
    font-size: 18px
}

.loginform .input input::placeholder {
    color: #b3c1db
}

.loginform .input i {
    position: absolute;
    right: 15px;
    top: 20px;
    font-size: 18px;
    color: #b3c1db
}

.loginform button {
    padding: 18px 15px;
    border-radius: 8px;
    border: 0;
    margin-top: 0;
    font-weight: 600;
    justify-content: center;
    transition: .7s
}

.loginform button i {
    font-weight: 400;
    margin-left: 10px
}

.loginform button:hover {
    background: #9b3a06
}

.loginarea .img {
    width: 100%;
    height: 100vh;
    float: left;
    display: block;
    overflow: hidden;
    background: #facc15;
    background: linear-gradient(180deg, #facc15 20%, #1d4ed8 78%);
    padding-top: 20%
}

.loginarea .img img {
    width: 100%;
    height: 100%;
    object-position: bottom;
    object-fit: contain
}

.loginarea .d-flex {
    float: left;
    width: 100%;
    min-height: 100vh;
    display: flex;
    overflow-y: scroll;
    flex-flow: column;
    justify-content: center;
    padding: 50px 0
}

.loginarea .d-flex::-webkit-scrollbar {
    display: none
}

.loginlogo {
    max-width: 500px;
    margin: 80px auto 30px;
    height: 70px
}

span.aktivstes {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px
}

.loginbtnbs {
    float: right;
    border-radius: 2px;
    position: relative;
    padding: 15px;
    cursor: pointer;
    background-color: var(--white-color);
    align-items: center;
    display: flex
}

.loginbtnbs svg {
    height: 16px;
    width: auto;
    object-fit: contain;
    margin-right: 10px
}

.loginbtnbs b {
    font-size: 14px;
    font-weight: 600;
    color: #64696f
}

.pagetitle {
    float: left;
    width: 100%;
    background: var(--primary-color);
    padding: 30px 30px;
    text-align: center
}

.pagetitle h1 {
    color: var(--white-color) !important;

}

.apititle,
.pagedesc .area,
.pagedesc .title {
    padding: 25px;
    float: left
}

.pagetitle .toptitle {
    font-weight: 600;
    font-size: 30px
}

.pagedesc {
    float: left;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 90px;
    margin-top: 70px
}

.pagedesc .title {
    width: 100%;
    color: var(--primary-color)
}

.pagedesc .title .h3title {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 600
}

.info-right-text span,
.pagedesc .area .h5title {
    font-size: 18px;
    font-weight: 600
}

.pagedesc .area p {
    font-size: 18px
}

.apititle .icon {
    float: left;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
    color: var(--white-color)
}

.apititle .tks {
    float: left;
    width: calc(100% - 60px);
    padding-left: 20px;
    min-height: 60px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.apititle .tks .h3title {
    margin-bottom: 0;
    font-size: 22px;
    color: var(--primary-color)
}

.apititle .tks p {
    margin-bottom: 0
}

.apicontent,
.dashboardbox .alan {
    float: left;
    width: 100%;
    padding: 25px
}

.apicontent .h2title {
    color: #717c91;
    font-size: 16px;
    font-weight: 600
}

.apicontent pre {
    background: #f3f3fb;
    border-radius: 10px;
    padding: 25px
}

.apicontent .exmalplebtn {
    float: right;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 15px 35px;
    border-radius: 10px;
    transition: .6s
}

.blogitem,
.bloglist,
.blogpop,
.blogpop .img,
.blogpop .text .h5title,
.blogpop .text p {
    float: left;
    width: 100%
}

.apicontent .exmalplebtn:hover,
.destekhead a:hover,
.desteklerlist .item .btnlist a:hover {
    background: #ff6a00
}

.blogpop {
    margin-top: -60px;
    position: relative;
    padding: 25px;
    border-radius: 20px
}

.blogitem,
.blogpop .img {
    border-radius: 15px
}

.blogpop .img {
    height: 100%;
    overflow: hidden
}

.blogpop .img img,
.blogtext .img img,
.customeritem .userimg img,
.loginbtn.lang .icon img,
.officialitem .userimg img,
.panelaccount .usericon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blogpop .text .h5title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px
}

.blogdetail .sidebar .blogitem,
.bloglist .h2title {
    margin-bottom: 20px
}

.blogpop .text p {
    font-size: 17px;
    line-height: 24px;
    border-bottom: 1px solid #e6ecf1;
    padding-bottom: 20px
}

.blogpop .text .altfoter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: left;
    width: 100%
}

.blogpop .text .date {
    display: flex;
    align-items: center;
    color: #1b232f;
    font-size: 16px;
    font-weight: 400
}

.blogpop .text .date i {
    margin-right: 10px;
    color: #b7c3ce
}

.bloglist {
    margin-top: 40px;
    margin-bottom: 40px
}

.blogdetail,
.serivscontent {
    margin-top: -60px;
    width: 100%;
    float: left
}

.bloglist .h2title {
    float: left;
    width: 100%;
    font-weight: 600;
    font-size: 22px
}

.bloglist .col-md-3 {
    margin-bottom: calc(var(--bs-gutter-x) * .5);
    margin-top: calc(var(--bs-gutter-x) * .5)
}

.blogitem img,
.blogtext,
.blogtext .img,
.servishead {
    border-radius: 10px;
    float: left;
    width: 100%
}

.blogdetail .sidebar a,
.bloglist a {
    color: #1b232f
}

.blogitem img {
    height: 170px;
    object-fit: cover;
    margin-bottom: 14px
}

.blogitem .text .h5title {
    float: left;
    width: 100%;
    font-size: 19px;
    font-weight: 600
}

.blogitem .text p {
    float: left;
    width: 100%;
    font-size: 15px;
    line-height: 20px
}

.blogitem .text .date {
    float: left;
    display: flex
}

.blogitem .text i {
    margin-right: 8px;
    color: #b7c3ce
}

.pagination {
    display: flex;
    float: left;
    width: 100%;
    margin-bottom: 80px
}

.pagination ul {
    margin: 0 auto
}

.pagination ul li {
    float: left;
    list-style: none;
    margin: 0 5px
}

.pagination ul li a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    font-weight: 600;
    color: #0b1a30
}

.pagination ul li.active a {
    background: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 0 15px -3px #1d4ed8
}

.blogdetail {
    padding: 0 0 40px;
    margin-bottom: 40px
}

.blogtext,
.box1,
.row1 {
    padding: 20px
}

.blogtext .img {
    height: 400px;
    overflow: hidden
}

.blogdetail .subtext {
    float: left;
    width: 100%;
    margin: 30px 0
}

.blogdetail .subtext .h3title {
    float: left;
    width: 100%;
    font-size: 24px;
    font-weight: 600
}

.blogdesctext,
.customeritem,
.newsupportticket .listem,
.officialitem,
.sorgusonuc .area .list {
    float: left;
    width: 100%;
    margin-bottom: 15px
}

.blogdesctext p {
    line-height: 28px;
    font-size: 17px
}

.blogdesctext .h4title {
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 5px;
    float: left;
    width: 100%
}

.blogdetail .date {
    display: flex;
    float: left
}

.blogdetail .date i,
.panelheader .bakiyeekle i,
.socialMediaButtons .item {
    margin-right: 10px
}

.servishead {
    padding: 30px
}

.kategoribtn,
.platgormbtn {
    float: left;
    width: 100%;
    border: 1px solid #bdc0c7;
    border-radius: 30px;
    background: var(--white-color);
    display: flex;
    padding: 10px;
    position: relative
}

.kategoribtn .icon,
.platgormbtn .icon {
    border-radius: 50%;
    text-align: center;
    color: var(--white-color);
    float: left;
    width: 34px;
    height: 34px;
    line-height: 34px
}

.kategoribtn span,
.platgormbtn span,
.servissearch span {
    float: left;
    width: calc(100% - 34px);
    padding-left: 15px;
    text-align: left;
    min-height: 34px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark)
}

.kategoribtn i.ri-arrow-down-s-fill,
.platgormbtn i.ri-arrow-down-s-fill {
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 20px
}

.kategoribtn .icon {
    background: #ccd4dc
}

.servissearch {
    float: left;
    width: 100%;
    border: 1px solid #bdc0c7;
    border-radius: 30px;
    display: flex;
    position: relative
}

.servissearch input {
    float: left;
    width: calc(100% - 34px);
    border: 0;
    border-radius: 30px;
    padding: 14px;
    font-weight: 600
}

.servissearch input::placeholder {
    color: var(--text-dark) 81;
    font-size: 15px;
    font-weight: 600
}

.servissearch .icon {
    float: left;
    width: 34px;
    height: 4px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
    color: var(--white-color)
}

.servissearch .icon button {
    background: 0 0;
    border: 0
}

.servisliste {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 70px;
    border-radius: 10px;
    overflow: hidden
}

.servisliste .accordion-button {
    background: #ff095c;
    border: 0;
    color: var(--white-color);
    padding: 13px 0
}

.servisliste .accordion-item:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden
}

.servisliste .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--white-color)
}

.servisliste .hiz,
.servisliste .maxt,
.servisliste .mint,
.servisliste .pricet {
    background: #08183933;
    border-radius: 20px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-size: 14px
}

.servisliste .accordion-item .pktitle {
    font-weight: 600;
    min-height: 42px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 25px
}

.servisliste .maxt,
.servisliste .mint {
    padding: 14px 15px
}

.servisliste .hiz {
    padding: 8px 23px 8px 8px
}

.servisliste .hiz .icon,
.servisliste .pricet .icon {
    float: left;
    background: #0818393f;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    display: block
}

.servisliste .hiz span,
.servisliste .pricet span {
    float: left;
    width: calc(100% - 30px);
    font-size: 14px;
    min-height: 30px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: left;
    padding-left: 8px
}

.servisliste .bs3 {
    width: 35%;
    justify-content: center
}

.servisliste .bs2 {
    width: 16%;
    display: flex;
    justify-content: center
}

.servisliste .bs1 {
    width: 11%;
    display: flex;
    justify-content: center
}

.servisliste .hizala {
    float: left;
    width: 100%;
    display: flex;
    flex-flow: wrap
}

.servisliste .pricet {
    padding: 8px 18px 8px 8px
}

.servisliste .accordion-button::after {
    color: var(--white-color);
    position: absolute;
    right: 25px;
    top: 30px;
    font-weight: 700;
    background: url(../img/icon/arrowicon.svg) 0 0/contain no-repeat;
    width: 15px;
    height: 15px
}

.accordion-button:not(.collapsed)::after {
    top: 27px
}

.servisliste .accordion-body {
    float: left;
    width: 100%;
    padding: 0;
    background: var(--white-color)
}

.servisliste .accordion-body .hizala {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d7e1f4
}

.servisliste .abstitle {
    float: left;
    width: 100%;
    height: 100%
}

.abstitle .id {
    float: left;
    border-right: 1px solid #d7e1f4;
    padding: 25px 20px;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.abstitle .id span {
    color: #ff095c;
    background: #ff095b25;
    border-radius: 13px;
    padding: 3px 15px;
    font-weight: 500;
    font-size: 14px
}

.abstitle .pttitle {
    float: left;
    width: 100%;
    padding: 5px 25px;
    font-weight: 600;
    color: #081839;
    max-width: calc(100% - 120px);
    text-align: left;
    min-height: 74px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.servisliste .accordion-body .pns {
    padding: 25px 0;
    text-align: center;
    color: #081839;
    font-weight: 600;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.servisliste .accordion-body .bs1,
.servisliste .accordion-body .bs2,
.servisliste .accordion-body .bs3 {
    border-right: 1px solid #d7e1f4;
    text-align: center
}

.servisliste .accordion-body .bs2.none {
    border-right: none
}

.servisliste .accordion-body .prices {
    padding: 25px 0;
    text-align: center;
    color: #ff095c;
    font-weight: 600;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.servisliste .accordion-body button {
    background: #ff095c;
    border-radius: 22px;
    color: var(--white-color);
    margin: 0 auto;
    padding: 10px 20px;
    font-weight: 600;
    transition: .6s;
    border: 0
}

.servisliste .accordion-body button:hover {
    background: #920433
}

.servisliste .accordion-body .d-flex {
    flex-flow: column;
    justify-content: center
}

.servisliste .accordion-body .hizala:last-child {
    border-bottom: 0
}

.modal-dialog {
    max-width: 750px;
    border-radius: 10px;
    border: 0
}

#detayModal .btn-close {
    position: absolute;
    width: 45px;
    height: 45px;
    background: var(--white-color);
    color: #a9bcc9;
    right: -15px;
    opacity: 1;
    border: 1px solid #a9bcc9;
    border-radius: 50%;
    font-size: 29px;
    padding: 0;
    top: -15px;
    z-index: 2
}

.modalhead .icon,
.modalozellikler .item {
    border-radius: 10px;
    float: left;
    text-align: center
}

.modalhead,
.modalozellikler {
    float: left;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #d7e1f4
}

.modalhead .icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    line-height: 50px;
    color: var(--white-color);
    font-weight: 400
}

.modalhead .text {
    float: left;
    width: calc(100% - 50px);
    padding-left: 14px
}

.modalhead .text .h5title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0
}

.modalhead .text span {
    color: var(--text-dark);
    font-size: 14px
}

.modalozellikler .col-md-6,
.productSocialServices .collapse-item {
    margin-bottom: 10px
}

.modalozellikler .item {
    width: 100%;
    background: #f6fafb;
    padding: 20px;
    height: 100%
}

.modalozellikler .item .icon {
    background: #ff832b2a;
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 12px;
    line-height: 50px
}

.copybtn i,
.duyurulist .item .icon i,
.modalozellikler .item .icon i,
.panelaccount .arrowicon i,
.productSocialServices .platform .icon i,
.support-content-body i {
    font-size: 20px
}

.modalozellikler .item .h6title {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark)
}

.modalozellikler .item span {
    color: var(--text-dark);
    font-size: 15px
}

.modalozellikler .col-md-6:nth-child(2) .icon {
    background: #31e07138;
    color: #31e072
}

.modalozellikler .col-md-6:nth-child(3) .icon {
    background: #0059ff2c;
    color: #0058ff
}

.modalozellikler .col-md-6:nth-child(4) .icon {
    background: #fa1c5033;
    color: #1d4ed8
}

.modalozellikler .col-md-6:nth-child(5) .icon {
    background: #2e4b622a;
    color: #2e4b62
}

.modalozellikler .col-md-6:nth-child(6) .icon {
    background: #31e07125;
    color: #31e072
}

.datadetail,
.profilebox .arcon,
.siparissepetitem .platform .area {
    float: left;
    width: 100%;
    padding: 20px
}

.panelheader {
    float: left;
    width: 100%;
    background: var(--white-color);
    position: fixed;
    z-index: 3
}

.panelheader .burger {
    float: left;
    background: #a9bcc983;
    color: #8598a5;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    transition: .6s
}

.panelheader .burger:hover {
    background: #a9bcc98e
}

.panellogo {
    float: left;
    width: 15%;
    height: 80px;
    padding: 20px 30px
}

.panelaccount {
    float: right;
    border-left: 1px solid #dfe8ee;
    border-right: 1px solid #dfe8ee;
    padding: 0 90px 0 25px;
    min-height: 80px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    cursor: pointer;
    position: relative
}

.burgermenu,
.burgermenu ul,
.burgermenu ul::after {
    min-height: calc(100vh - 80px)
}

.panelaccount .usericon {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden
}

.panelrighrt {
    float: right;
    padding-right: 50px
}

.duyurulist .item .tksite,
.panelaccount .username {
    float: left;
    width: calc(100% - 50px);
    padding-left: 15px;
    min-height: 50px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.panelaccount .username .h5title {
    font-weight: 600;
    font-size: 18px;
    color: #1e1e1f;
    margin-bottom: 0
}

.panelaccount .username span {
    color: #6a7291;
    font-size: 14px;
    font-weight: 500
}

.panelheader .bakiyeekle {
    float: right;
    background: #31e072;
    color: var(--white-color);
    display: flex;
    padding: 10px 15px;
    border-radius: 10px;
    margin-right: 25px;
    margin-top: 16px;
    font-weight: 600;
    transition: .6s
}

.panelheader .bakiyeekle:hover {
    background: #0cb44a
}

.panelaccount .arrowicon {
    position: absolute;
    background: #a9bcc941;
    width: 40px;
    color: #a9bcc9;
    height: 40px;
    border-radius: 8px;
    text-align: center;
    line-height: 40px;
    right: 15px;
    top: 19px
}

.panelaccount:hover .panelaccountarea {
    max-height: 500px
}

.panelaccountarea {
    position: absolute;
    top: 95px;
    background: var(--white-color);
    border-radius: 8px;
    width: calc(100% - 20px);
    left: 10px;
    max-height: 0;
    overflow: hidden;
    transition: .6s
}

.panelaccountarea .hs {
    float: left;
    width: 100%;
    padding: 20px 10px;
    border-bottom: 1px solid #dfe8ee
}

.panelaccountarea .username span.bakiye {
    color: #2cd09c;
    font-weight: 600
}

.panelaccountarea ul {
    float: left;
    width: 100%;
    list-style: none;
    padding: 14px 25px;
    margin-bottom: 0
}

.panelaccountarea ul li {
    float: left;
    width: 100%;
    margin: 6px 0
}

.panelaccountarea ul li a {
    color: #696e8b;
    font-weight: 400;
    display: flex;
    transition: .6s
}

.panelaccountarea ul li i {
    margin-right: 13px;
    font-size: 18px;
    margin-top: -1px
}

.panelaccountarea ul li a:hover {
    color: #23263b;
    font-weight: 500
}

.burgermenu {
    float: left;
    height: auto;
    background: var(--white-color);
    max-width: 350px;
    position: fixed;
    top: 80px
}

.burgermenu ul {
    float: left;
    width: 100%;
    margin-bottom: 0;
    list-style: none;
    background: #e9eff5
}

.burgermenu ul li {
    border-bottom: 1px solid #a9bcc92f;
    z-index: 2;
    position: relative;
    display: grid
}

.burgermenu ul li i {
    float: left;
    width: 80px;
    text-align: center;
    background: #e9eff5;
    padding: 16px 0;
    color: #0818398a;
    font-size: 22px;
    position: relative
}

.burgermenu ul li span {
    float: left;
    color: #50616d;
    font-weight: 500;
    background: var(--white-color);
    z-index: 2;
    position: relative;
    display: inline-block;
    width: 0;
    overflow-x: hidden;
    transition: .3s ease-in
}

.panelcontent.active .burgermenu ul li span {
    width: calc(100% - 80px);
    min-width: 270px
}

.burgermenu ul li span .pd {
    padding: 20.7px 25px;
    min-width: 270px
}

.panelcontent.active .burgermenu ul li span .pd {
    width: calc(100% - 80px);
    padding: 20.7px 25px;
    min-width: 270px
}

.burgermenu ul li.active i::after {
    content: "";
    position: absolute;
    background: var(--primary-color);
    width: 5px;
    height: 100%;
    left: 0;
    top: 0
}

.burgermenu .count {
    float: right;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    width: 26px;
    height: 20px;
    text-align: center;
    margin-top: 3px
}

.burgermenu ul li:last-child {
    position: relative;
    margin-top: 150px;
    border-top: 1px solid #a9bcc959
}

.burgermenu ul::after {
    content: "";
    background: var(--white-color);
    float: right;
    width: calc(100% - 80px);
    top: 0;
    position: absolute;
    left: 80px;
    z-index: 1
}

.panelcontent.active .panelarea {
    width: calc(100% - 350px)
}

.panelarea {
    float: right;
    width: calc(100% - 80px);
    padding: 30px 50px;
    margin-top: 80px
}

.panelarea .pagedesc,
.panelarea .serivscontent,
.relative .dropdownmenu .area ul {
    margin-top: 0
}

.panelssarea .accordion-item {
    margin-bottom: 15px;
    border: 0;
    border-radius: 8px;
    overflow: hidden
}

.panelssarea .accordion-flush .accordion-item .accordion-button {
    font-size: 17px;
    font-weight: 500;
    padding: 22px 24px
}

.panelssarea .accordion-button::after {
    content: "+";
    color: var(--primary-color);
    font-size: 27px;
    background: 0 0;
    text-align: center;
    margin-top: -11px
}

.panelssarea .accordion-button:not(.collapsed)::after {
    content: "-";
    transform: none
}

.panelssarea .accordion-button:not(.collapsed) {
    background: #ff832b3a;
    color: var(--primary-color);
    box-shadow: none
}

.pgstitle {
    float: left;
    width: 100%;
    margin-bottom: 25px;
    background: var(--white-color);
    border-radius: 10px;
    padding: 20px
}

.pgstitle .icon {
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--primary-color);
    text-align: center;
    line-height: 60px
}

.pgstitle .icon i {
    color: var(--white-color);
    font-size: 23px;
    font-weight: 400
}

.pgstitle .pgstext {
    float: left;
    width: calc(100% - 60px);
    padding-left: 15px;
    min-height: 60px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.pgstitle .pgstext .h5title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--primary-color)
}

.pgstitle .pgstext p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0
}

.destekhead {
    float: left;
    width: 100%;
    margin-bottom: 20px
}

.destekhead a {
    color: var(--white-color);
    background: var(--primary-color);
    float: left;
    padding: 14px 25px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    transition: .6s
}

.destekhead a i {
    font-weight: 400;
    margin-right: 10px
}

.desteklerlist .item {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px
}

.desteklerlist .item span {
    width: 100%;
    float: left;
    color: #8da0b1;
    font-weight: 400
}

.desteklerlist .item b {
    color: #0a0d2a;
    font-size: 17px;
    font-weight: 600
}

.desteklerlist .item .btnlist {
    float: right;
    display: flex
}

.desteklerlist .item .btnlist a {
    float: right;
    color: var(--white-color);
    background: var(--primary-color);
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 50px;
    transition: .6s
}

.desteklerlist .item .btnlist .status {
    float: right;
    background: #ff832b3a;
    color: var(--primary-color);
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 50px;
    margin-right: 15px;
    min-width: 190px;
    text-align: center
}

.desteklerlist .item .btnlist .status.closed {
    background: #d0d8e8;
    color: #0a0d2a
}

.desteklerlist .item .btnlist .status.reply {
    background: #00e07721;
    color: var(--success-color)
}

.desteklerlist .col-md-1 {
    border-right: 1px solid #efefef;
    padding-left: 30px
}

.dashboardbox {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 8px;
    margin-top: 25px
}

.dashboardbox .bsbttitle {
    float: left;
    width: 100%;
    padding: 15px 25px;
    border-bottom: 1px solid #efefef;
    font-size: 18px;
    font-weight: 600
}

.destektalebikonusma .scrool {
    float: left;
    width: 100%;
    max-height: 600px;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0 55px
}

.customeritem .text,
.officialitem .text {
    padding: 15px;
    max-width: 540px;
    text-align: right
}

.destektalebikonusma .scrool::-webkit-scrollbar-track {
    border-radius: 5px;
    width: 100%;
    height: 100%
}

.destektalebikonusma .scrool::-webkit-scrollbar {
    width: 4px;
    border-radius: 5px;
    background-color: #e6e4ef
}

.destektalebikonusma .scrool::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: var(--primary-color);
    height: 5px
}

.customeritem .text {
    float: right;
    border-radius: 8px 8px 0;
    border: 1px solid #c8d7e0
}

.customeritem .text p {
    margin-bottom: 0;
    color: #617583;
    font-weight: 400;
    font-size: 17px
}

.customeritem .user {
    float: right;
    width: 100%;
    margin-top: 10px
}

.customeritem .userimg {
    float: right;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden
}

.customeritem .userinfo {
    float: right;
    margin-right: 15px
}

.customeritem .userinfo span {
    float: right;
    font-size: 14px;
    color: #1d4ed8;
    min-height: 48px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.customeritem .userinfo .date {
    float: right;
    font-size: 14px;
    color: #6175839f;
    min-height: 48px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-right: 15px
}

.officialitem .text {
    float: left;
    border-radius: 8px 8px 8px 0;
    background: #f0f4f7
}

.officialitem .text p {
    margin-bottom: 0;
    color: #617583;
    font-weight: 400;
    text-align: left;
    font-size: 17px
}

.officialitem .user {
    float: left;
    width: 100%;
    margin-top: 10px
}

.officialitem .userimg {
    float: left;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden
}

.officialitem .userinfo {
    float: left;
    margin-left: 15px
}

.officialitem .userinfo span {
    float: left;
    font-size: 14px;
    color: var(--primary-color);
    min-height: 48px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.officialitem .userinfo .date {
    float: right;
    font-size: 14px;
    color: #6175839f;
    min-height: 48px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-left: 15px
}

.replysupport {
    float: left;
    width: 100%;
    padding: 15px 55px;
    background: var(--white-color)
}

.duyurulist .item,
.newsupportticket {
    background: var(--white-color);
    padding: 25px
}

.replysupport input {
    float: left;
    width: calc(100% - 70px);
    border-radius: 8px;
    border: 1px solid #d0d8e8;
    padding: 17px 20px
}

.replysupport input::placeholder {
    color: #d0d8e8
}

.replysupport button {
    float: right;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 8px;
    text-align: center;
    border: 0;
    color: var(--white-color);
    font-size: 23px;
    line-height: 60px;
    transition: .6s
}

.duyurulist .h2title {
    float: left;
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    color: #0a0d2a;
    margin-bottom: 30px
}

.duyurulist .item {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px
}

.duyurulist .item .icon {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    color: var(--white-color);
    text-align: center;
    line-height: 50px;
    background: var(--primary-color)
}

.duyurulist .item .tksite .h5title {
    float: left;
    width: 100%;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
    color: #0a0d2a
}

.duyurulist .item .tksite span {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #0a0d2a
}

.duyurulist .item.instagram {
    border-left: 10px solid var(--instagram-color)
}

.duyurulist .item.twitter {
    border-left: 10px solid var(--twitter-color)
}

.duyurulist .item.tiktok {
    border-left: 10px solid #0f131d
}

.duyurulist .item.facebook {
    border-left: 10px solid #056be8
}

.duyurulist .item.twitter .icon,
.kategoriler.twitter .itemkategori .incelebtn,
.sosyalkategoriler .item.twitter {
    background: var(--twitter-color)
}

.duyurulist .item.tiktok .icon {
    background: #0f131d
}

.duyurulist .item.facebook .icon {
    background: #056be8
}

.duyurulist .paginations,
.siparistable .paginations {
    float: left;
    width: 100%;
    padding-right: 20px;
    margin-top: 15px
}

.duyurulist .paginations ul,
.siparistable .paginations ul {
    float: right;
    list-style: none
}

.duyurulist .paginations ul li,
.siparistable .paginations ul li {
    float: left;
    margin-left: 10px
}

.duyurulist .paginations ul li a,
.siparistable .paginations ul li a {
    background: #c8d7e028;
    border: 1px solid #c8d7e0;
    border-radius: 5px;
    width: 34px;
    height: 34px;
    display: block;
    text-align: center;
    line-height: 34px;
    color: #a9bcc9;
    font-size: 15px;
    font-weight: 600
}

.duyurulist .paginations ul li.active a,
.siparistable .paginations ul li.active a {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color)
}

.catitem {
    float: left;
    margin-right: 13px
}

.catitem label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: .375em
}

.catitem label input {
    position: absolute;
    left: -9999px
}

.catitem label input:checked + span:before {
    box-shadow: inset 0 0 0 .4375em var(--primary-color)
}

.catitem label span {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 5px;
    transition: .25s;
    border: 1px solid #d0d8e8
}

.catitem label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: var(--white-color);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-right: .375em;
    transition: .25s;
    box-shadow: inset 0 0 0 .125em #717c91
}

.newsupportticket {
    float: left;
    width: 100%;
    border-radius: 10px
}

.newsupportticket .h6title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    color: #1d1b3a;
    font-weight: 700
}

.newsupportticket .listem input {
    float: left;
    width: 100%;
    border: 1px solid #d0d8e8;
    padding: 17px;
    border-radius: 5px
}

.newsupportticket .listem input::placeholder {
    color: #1d1b3a77
}

.newsupportticket .listem textarea {
    float: left;
    width: 100%;
    border: 1px solid #d0d8e8;
    padding: 17px;
    border-radius: 5px;
    height: 230px
}

.newsupportticket .listem textarea::placeholder {
    color: #1d1b3a77
}

.netticbtn {
    float: right;
    margin-top: 10px;
    background: var(--primary-color);
    color: var(--white-color);
    border: 0;
    border-radius: 10px;
    padding: 12px 30px;
    font-size: 17px;
    font-weight: 600;
    transition: .6s
}

.netticbtn:hover {
    background: #bd5308
}

.image-upload {
    position: relative;
    float: left;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer
}

.image-upload input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0
}

.upload-field {
    display: block;
    background: var(--white-color);
    border-radius: 5px;
    cursor: pointer
}

#apicode,
.dropdownmenu a::after,
.mobilmenbtn,
.productSocialServices .collapse,
.sticky-footer-menu {
    display: none
}

.upload-field .file-thumbnail {
    cursor: pointer;
    border: 1px solid #d0d8e8;
    border-radius: 11px;
    text-align: center;
    padding: 35px 20px
}

.upload-field .file-thumbnail img {
    width: 50px;
    margin-bottom: 20px
}

.upload-field .file-thumbnail .h3title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin-bottom: 4px
}

.upload-field .file-thumbnail p {
    font-size: 18px;
    color: #1d1b3a65;
    margin-bottom: 0
}

.profilebox,
.profilsidebar {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-radius: 10px
}

.apiokey,
.copybtn {
    color: #31e072;
    background: #31e07128
}

.profilsidebar .hsthed {
    float: left;
    width: 100%;
    padding: 25px 20px;
    border-bottom: 1px solid #ebebeb
}

.profilsidebar .hsthed .prophoto {
    float: left;
    width: 80px;
    height: 80px;
    position: relative
}

.profilsidebar .hsthed .prophoto img {
    width: 100%;
    height: 100%;
    border-radius: 15px
}

.profilsidebar .hsthed .prophoto button {
    position: absolute;
    background: var(--primary-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: var(--white-color);
    bottom: -15px;
    border: 0;
    left: calc(50% - 15px)
}

.profilsidebar .hsthed .profilname {
    float: left;
    width: calc(100% - 80px);
    padding-left: 20px;
    min-height: 80px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.profilsidebar .hsthed .profilname .h3title {
    color: #171b1e;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
    position: relative
}

.profilsidebar .hsthed .profilname .h3title::after {
    content: "";
    background: url(../img/icon/onayli.png) 0 0/contain no-repeat;
    width: 13px;
    height: 16px;
    position: absolute;
    margin-left: 10px;
    margin-top: 5px
}

.profilsidebar .hsthed .profilname span {
    color: #a9bcc9
}

.sidemenu .nav-link {
    text-align: left;
    padding: 10px 40px;
    color: var(--text-dark);
    font-weight: 400;
    font-size: 17px;
    border-left: 5px solid var(--white-color)
}

.sidemenu .nav-link.active {
    background: var(--white-color);
    color: var(--primary-color);
    font-weight: 600;
    border-left: 5px solid var(--primary-color)
}

.profilebox .title {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #171b1e;
    padding: 20px;
    border-bottom: 1px solid #e9e9e9
}

.profilebox .inptsitem {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 5px
}

.inptsitem label {
    float: left;
    width: 100%;
    margin-bottom: 8px;
    color: #a9bcc9
}

.inptsitem input {
    float: left;
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #d0d8e8;
    border-radius: 10px
}

.inptsitem select {
    float: left;
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #d0d8e8;
    border-radius: 10px;
    position: relative
}

.inptsitem .select::after {
    content: "";
    background: url(../img/icon/selectarrowicon.svg) 0 0/contain no-repeat;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 20px;
    top: 25px
}

.inptsitem input:disabled {
    background: #bdc0c763
}

.inptsitem button {
    float: left;
    width: 100%;
    border: 0;
    text-align: center;
    color: var(--white-color);
    background: var(--primary-color);
    border-radius: 10px;
    font-weight: 600;
    padding: 15px;
    margin-top: 24px;
    transition: .6s
}

.inptsitem button:hover {
    background: #d66413
}

.apiokey {
    float: left;
    width: 100%;
    border-radius: 10px;
    padding: 15px 30px;
    font-weight: 600
}

.copybtn {
    float: right;
    border: 0;
    padding: 13px 20px;
    border-radius: 10px;
    transition: .6s
}

.istatisticbar,
.newordersalan {
    background: var(--white-color);
    border-radius: 10px;
    float: left
}

.copybtn:hover {
    background: #31e071;
    color: var(--white-color)
}

.istatisticbar {
    width: 100%;
    margin-bottom: 30px
}

.istatisticbar .item {
    float: left;
    width: 100%;
    padding: 15px;
    position: relative
}

.istatisticbar .item .icon {
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--white-color);
    line-height: 60px;
    text-align: center
}

.istatisticbar .item .text {
    float: left;
    width: calc(100% - 60px);
    padding-left: 18px;
    min-height: 60px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.istatisticbar .item .text .h6title {
    margin-bottom: 0;
    color: #081839;
    font-size: 20px;
    font-weight: 600
}

.istatisticbar .item .text span {
    font-size: 14px;
    font-weight: 500;
    color: #a9bcc9
}

.istatisticbar .row .col-md-4:nth-child(2) .icon {
    color: #31e072;
    background: #31e0712c
}

.istatisticbar .row .col-md-4:nth-child(2) .h6title {
    color: #31e072
}

.istatisticbar .row .col-md-4:nth-child(3) .icon {
    color: #007efc;
    background: #007efc31
}

.istatisticbar .row .col-md-4:nth-child(3) .h6title {
    color: #007efc
}

.istatisticbar .row .col-md-4.ks .icon {
    color: #1d4ed8;
    background: #fa1c502c
}

.istatisticbar .row .col-md-4.ks .h6title,
.siparissonuc.basarisiz .h6title,
.siparissonuc.basarisiz i {
    color: var(--primary-color);
}

.istatisticbar a {
    background: #a9bcc946;
    border-radius: 20px;
    color: #717c91;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    position: absolute;
    right: 30px;
    top: 25px;
    padding: 10px 15px;
    transition: .6s
}

.istatisticbar a:hover {
    background: #a9bcc9;
    color: var(--white-color)
}

.istatisticbar a i {
    margin-left: 7px
}

.newordersalan {
    width: 100%;
    overflow: hidden
}

.newordersalan .title {
    float: left;
    width: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 18px 20px
}

.newordersalan .title .h5title,
.newordersdetail .title .h5title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0;
    float: left
}

.dropdownmenu ul li,
.newordersalan .neworderitem {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px
}

.newordersalan .alan {
    float: left;
    width: 100%;
    padding: 10px 15px
}

.newordersalan .neworderitem label {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px
}

.newordersalan .neworderitem .select::after {
    content: "";
    background: url(../img/icon/selectarrowicon.svg) 0 0/contain no-repeat;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 13px;
    top: 24px
}

.newordersalan .neworderitem select {
    float: left;
    width: 100%;
    border: 1px solid #bdc0c7;
    padding: 15px 15px 15px 60px;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    cursor: pointer
}

.newordersalan .neworderitem .icon {
    background: var(--primary-color);
    width: 34px;
    height: 34px;
    position: absolute;
    left: 10px;
    top: 10px;
    text-align: center;
    line-height: 34px;
    color: var(--white-color);
    border-radius: 50%
}

.neworderitem .priceout,
.neworderitem input {
    float: left;
    width: 100%;
    border: 1px solid #bdc0c7;
    padding: 15px;
    border-radius: 10px
}

.neworderitem .outputex {
    float: left;
    width: 100%;
    margin-top: 7px
}

.neworderitem .outputex span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    border-left: 3px solid var(--primary-color);
    padding-left: 5px;
    margin-right: 15px
}

.neworderitem .priceout .icon {
    float: left;
    width: 34px;
    height: 34px;
    background: #31e0713f;
    position: relative;
    top: auto;
    left: auto;
    color: #31e072
}

.newordersalan .btnlist .neworderbtn,
.newordersalan .btnlist .walletbtn {
    float: left;
    width: calc(50% - 10px);
    border-radius: 10px;
    padding: 18px 10px;
    transition: .6s;
    font-weight: 600
}

.neworderitem .priceout span {
    float: left;
    width: calc(100% - 34px);
    padding-left: 15px;
    min-height: 34px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    color: #31e072;
    font-size: 18px;
    font-weight: 600
}

.newordersalan .btnlist {
    float: left;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
}

.newordersalan .btnlist .neworderbtn {
    background: var(--primary-color);
    border: 0;
    color: var(--white-color)
}

.newordersalan .btnlist .neworderbtn:hover {
    background: #e06914
}

.newordersalan .btnlist .walletbtn {
    background: #31e072;
    border: 0;
    color: var(--white-color)
}

.newordersdetail,
.siparistable {
    background: var(--white-color);
    border-radius: 10px;
    float: left;
    width: 100%;
    overflow: hidden
}

.newordersalan .btnlist .walletbtn:hover {
    background: #15ac4c
}

.newordersdetail {
    height: 100%
}

.newordersdetail .title {
    float: left;
    width: 100%;
    background: #1d4ed8;
    color: var(--white-color);
    padding: 18px 20px
}

.newordersdetail .subtitle {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d0d8e8;
    padding: 15px 20px;
    color: #25273a;
    font-weight: 600
}

.siparistable .thad {
    float: left;
    width: 100%;
    background: #dfe8ee;
    padding: 15px
}

.siparistable .thad span {
    color: #8598a5;
    font-size: 14px;
    font-weight: 600
}

.siparistable .item .id,
.siparistable .item span {
    color: #50616d;
    font-weight: 500;
    font-size: 14px
}

.siparistable .item {
    float: left;
    width: 100%;
    padding: 16px 15px;
    border-bottom: 1px solid #dfe8ee
}

.siparistable .item .id {
    border-radius: 13px;
    background: #50616d2d;
    float: left;
    padding: 4px 10px
}

.siparistable .idspan {
    float: left;
    width: 80px
}

.selected-display,
.siparistable .item .date {
    margin-left: 20px
}

.siparistable .item .price {
    color: #31e072;
    font-weight: 600;
    font-size: 14px
}

.siparistable .item .status {
    float: left;
    background: #50616d;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 15px;
    border-radius: 5px;
    min-width: 140px;
    text-align: center
}

.siparistable .report {
    float: left;
    color: #1d4ed8;
    background: #fa1c504b;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    border: 0;
    margin-left: 8px
}

.siparistable .item .status.succes {
    background: #01c3b3;
    color: var(--white-color)
}

.siparistable .item .status.cancel {
    background: #dc3545
}

.siparistable .item .status.devam {
    background: #19a7ff
}

.siparistable .item .status.waiting {
    background: #0090b2
}

.input_bilgi,
.link_siparis,
.siparislerarea {
    float: left;
    width: 100%;
    margin-bottom: 25px
}

.orderfilter {
    float: left;
    width: 100%;
    border-radius: 8px;
    background: var(--white-color);
    padding: 20px
}

.orderfilter ul {
    float: left;
    width: 100%;
    list-style: none;
    margin-bottom: 0;
    border: 1px solid #c8d7e0;
    border-radius: 20px;
    padding: 5px
}

.orderfilter ul li {
    float: left;
    width: 14.25%
}

.orderfilter ul li button {
    float: left;
    width: 100%;
    color: #a9bcc9;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    background: 0 0;
    text-align: center;
    padding: 8px 5px
}

.orderfilter ul li button.active {
    background: #a9bcc97a;
    border-radius: 17px;
    color: #081839
}

.orderfilter .servissearch input {
    padding: 12px 12px 12px 25px
}

.orderfilter .servissearch {
    width: auto;
    float: right;
    min-width: 330px;
    border-color: #c8d7e0
}

.orderfilter .servissearch .icon {
    left: auto;
    right: 10px;
    position: absolute;
    top: -3px
}

.mobilmenbtn {
    float: left;
    margin-right: 20px;
    margin-top: 2px
}

.mobilmenbtn i {
    color: var(--primary-color);
    font-size: 30px;
    float: left
}

.mobilmenbtn span {
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 500;
    float: left;
    margin-top: 14px;
    margin-left: 5px
}

.offcanvas-start {
    width: 80%;
    border: none;
    background-color: #e2e8f0
}

.offcanvas-header {
    padding: 10px;
    background-color: var(--white-color);
    border-radius: 7px;
}

.offcanvaslogo {
    float: left;
    height: 50px
}

.offcanvaslogo img {
    width: 100%;
    height: 35px;
    object-fit: contain;
    margin-left: 10px;
    margin-top: 9px
}

.offcanvasarea ul {
    padding: 0;
    background-color: var(--white-color);
    border-radius: 7px;
    width: 100%;
    display: flex;
    flex-flow: column;
    float: left
}

.offcanvasarea .favorim {
    padding: 15px;
    background-color: var(--white-color);
    border-radius: 7px;
    margin: 0 20px 20px;
    display: flex;
    align-items: center
}

.offcanvasarea .favorim i {
    font-size: 23px;
    color: #920433;
    margin-right: 15px
}

.offcanvasarea .favorim .toptitle {
    font-size: 24px;
    font-weight: 500;
    color: #920433;
    margin-bottom: 0;
    margin-right: 15px
}

.offcanvasarea .favorim span {
    font-size: 18px;
    font-weight: 700;
    color: #920433;
    background-color: rgba(146, 4, 51, 20%);
    height: 24px;
    width: 24px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.offcanvas .ftsociallist i {
    color: var(--white-color);
}

.offcanvasarea ul li {
    list-style: none;
    position: relative;
    padding: 12px 10px;
    border-bottom: 1px solid var(--primary-color);
}

.offcanvasarea ul li:last-child {
    border: none
}

.offcanvasarea ul li .dropdown {
    border-radius: 12px;
    background-color: var(--white-color);
    display: none;
    position: relative;
    left: 0;
    width: 100%;
    height: 250px;
    overflow-y: auto;
}

.offcanvasarea ul li .dropdown li {
    float: none;
    margin-left: 0;
    padding: 5px
}

.offcanvasarea ul li a {
    color: var(--text-dark);
    font-weight: 700;

}

.offcanvasarea ul li ul li a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
}

.offcanvasarea ul li i {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 700
}

.offcanvasarea ul li a i.ri-focus-line {
    color: #ccc;
    font-weight: 400;
    margin-right: 5px
}

.offcanvasarea .tophead {
    float: none;
    width: auto;
    padding: 10px;
    background-color: #DDEBFD;
    display: flex;
    align-items: center;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    justify-content: flex-start;
    box-shadow: 1px 2px 3px var(--primary-color)
}

.offcanvasarea .tophead .container {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.offcanvasarea .tophead a {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    margin-right: 40px;
    height: 50px
}

.offcanvasarea .tophead a .h3title {
    font-size: 10px;
    font-weight: 400;
    color: #0d121f
}

.offcanvasarea .tophead a i {
    font-size: 20px;
    font-weight: 400;
    color: #0d121f
}

.offcanvasarea .tophead .basketa {
    position: absolute;
    top: -50%;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-flow: column
}

.offcanvasarea .tophead .basket {
    border-radius: 100%;
    height: 60px;
    width: 60px;
    padding: 10px 20px;
    background-color: var(--white-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column
}

.offcanvasarea .tophead .basket .sepet {
    background-color: var(--success-color);
    border-radius: 100%;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center
}

.offcanvasarea .tophead a:nth-child(3) .h3title {
    color: var(--success-color);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 2;
    bottom: 0;
    margin-top: -5px
}

.offcanvasarea .tophead .basket span {
    height: 17px;
    width: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--success-color);
    border-radius: 100%;
    font-size: 12px;
    font-weight: 400;
    color: var(--white-color);
    position: absolute;
    top: 5px;
    left: 5px
}

.iletisimsayfa .iletisimbilgi .title,
.iletisimsayfa .iletisimform .title {
    display: flex;
    align-items: center;
    justify-content: center;

}

.iletisimsayfa .iletisimbilgi,
.iletisimsayfa .iletisimform {
    border-radius: 10px;
    margin-bottom: 70px;
    height: 100%;
    background-color: #DDEBFD;
}

.iletisimsayfa .iletisimfor.m .title {
    padding: 15px;
    justify-content: center
}

.iletisimsayfa .iletisimbilgi .title .toptitle,
.iletisimsayfa .iletisimform .title .toptitle {
    font: normal normal bold 20px/24px Rubik;
    letter-spacing: 0px;
    color: #17305A;

}


.iletisimsayfa .iletisimform form {
    padding: 20px;
    display: flex;
    align-items: end;
    flex-flow: column
}

.iletisimsayfa .iletisimform form label {
    display: flex;
    flex-flow: column;
    font: normal normal medium 16px/19px Rubik;
    letter-spacing: 0px;
    color: #17305A;
    margin-bottom: 10px
}

.iletisimsayfa .iletisimform form input {
    width: 100%;
    border: 1px solid #17305A;
    border-radius: 6px;
    padding: 10px;
    background: transparent;
}

.iletisimsayfa .iletisimform form textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #17305A;
    border-radius: 5px;
    padding: 10px 10px 10px 30px;
    background: transparent;
}

.iletisimsayfa .iletisimbilgi .itemson .h6title,
.iletisimsayfa .iletisimform form .h4title {
    font-size: 18px;
    font-weight: 600;
    color: #5f6a73
}

.iletisimsayfa .iletisimform form input::placeholder {
    font: normal normal normal 16px/19px Rubik;
    letter-spacing: 0px;
    color: #17305A;
}


/*.iletisimsayfa .iletisimform form input[type=text] {*/
/*    background: url(../img/icon/user.svg) 10px 13px no-repeat;*/
/*    padding-left: 30px*/
/*}*/

/*.iletisimsayfa .iletisimform form input[type=email] {*/
/*    background: url(../img/icon/mail-open-line.svg) 10px 13px no-repeat;*/
/*    padding-left: 30px*/
/*}*/

/*.iletisimsayfa .iletisimform form input[type=tel] {*/
/*    background: url(../img/icon/phone-line.svg) 10px 13px no-repeat;*/
/*    padding-left: 30px*/
/*}*/

.iletisimsayfa .iletisimform form button {
    padding: 10px 20px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color)
}

.iletisimsayfa .iletisimform form button:hover {
    background-color: var(--primary-color)
}

.iletisimsayfa .iletisimbilgi .title {
    padding: 16px;
    justify-content: center
}

.iletisimsayfa .iletisimbilgi .item,
.iletisimsayfa .iletisimbilgi .itemson {
    align-items: center;
    padding: 20px 15px;
    display: flex
}


.iletisimsayfa .iletisimbilgi .item {
    border-bottom: 1px solid #f1f2f7
}

.iletisimsayfa .iletisimbilgi .item span {
    height: 60px;
    width: 60px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border: 1px solid var(--primary-color)
}

.iletisimsayfa .iletisimbilgi .item span i {
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color)
}

.iletisimsayfa .iletisimbilgi .item .h6title {
    font-size: 16px;
    font-weight: 400;
    color: #1b232f
}

.iletisimsayfa .iletisimbilgi .item .h2title {
    font-size: 22px;
    font-weight: 500;
    color: #1b232f;
    margin-bottom: 0
}

.iletisimsayfa .iletisimbilgi .itemson .h2title {
    font-size: 16px;
    font-weight: 400;
    color: #5f6a73
}

.kategorisayfa {
    margin-top: 1rem;
    border-radius: 17px;
    padding: 15px 3px;
}

.kategorisayfa-wtabs{
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 15px;
}


.kategorisayfa i {
    font-size: 36px;
    font-weight: 400;
}

.kategorisayfa.instagram i {
    color: var(--instagram-color);
}

.kategorisayfa.pinterest i {
    color: var(--pinterest-color);
}

.kategorisayfa.likee i {
    color: var(--likee-color);
}

.kategoriler.star .itemkategori .icon {
    background-color: var(--free-color);;
}

.kategoriler.star .itemkategori:hover {
    background-color: var(--free-color);;
}

.kategorisayfa.star i {
    color: var(--free-color);;
}

.kategorisayfa.soundcloud i {
    color: var(--soundcloud-color);
}


.kategorisayfa.tiktok i {
    color: #101626
}

.kategoriler.clubhouse .itemkategori .toptitle,
.kategorisayfa.clubhouse i {
    color: #6515dd
}

.kategorisayfa h1 {
    font-size: 26px;
    font-weight: 600;
    color: var(--white-color);
}


.kategorisayfa p {
    color: var(--white-color);
    width: 75%;
}


.kategorisayfa .icon-area {
    background-color: var(--white-color);
    border-radius: 17px;
    padding: 20px 30px;
    margin-left: 1.5%;
}

.kategoriler {
    width: 100%;
    float: left;
    margin: 50px 0 100px
}

.basketmenu ul li a i,
.loginbtn {
    margin-right: 15px
}

.kategoriler .container .row .col-md-6 {
    margin-top: 20px
}

.itemkategori {
    border-radius: 17px;
    background: var(--white-color);
    padding: 15px 15px 15px 0;
    float: left;
    width: 100%;
    box-shadow: 0 5px 12px 6px #00000010
}

.itemkategori .icon {
    float: left;
    width: 55px;
    height: 55px;
    border-radius: 0px 25px 25px 0px;
    line-height: 55px;
    text-align: center;
    color: var(--white-color)
}

.custom-dropdown.tiktok .service-info:hover::after,
.href-tiktok .service-info:hover::after,
.kategoriler.tiktok .itemkategori .icon {
    background-color: #000
}

.kategoriler.tiktok .itemkategori {
    border: 1px solid #000;
}

.kategoriler.instagram .itemkategori {
    border: 1px solid var(--instagram-color);
}

.kategoriler.pinterest .itemkategori {
    border: 1px solid var(--pinterest-color);
}

.kategoriler.likee .itemkategori {
    border: 1px solid var(--likee-color);
}

.kategoriler.tiktok .itemkategori {
    border: 1px solid var(--tiktok-color);
}

.kategoriler.youtube .itemkategori {
    border: 1px solid var(--youtube-color);
}

.kategoriler.twitch .itemkategori {
    border: 1px solid var(--twitch-color);
}

.kategoriler.facebook .itemkategori {
    border: 1px solid var(--facebook-color);
}

.kategoriler.twitter .itemkategori {
    border: 1px solid var(--twitter-color);
}

.kategoriler.threads .itemkategori {
    border: 1px solid var(--threads-color);
}

.kategoriler.spotify .itemkategori {
    border: 1px solid var(--spotify-color);
}

.kategoriler.telegram .itemkategori {
    border: 1px solid var(--telegram-color);
}

.kategoriler.linkedin .itemkategori {
    border: 1px solid var(--linkedin-color);
}

.kategoriler.google .itemkategori {
    border: 1px solid var(--google-color);
}

.kategoriler.snapchat .itemkategori {
    border: 1px solid var(--snapchat-color);
}

.kategoriler.kick .itemkategori {
    border: 1px solid var(--kick-color);
}

.kategoriler.soundcloud .itemkategori {
    border: 1px solid var(--soundcloud-color);
}

.kategoriler.instagram .itemkategori:hover {
    background-color: var(--instagram-color);
}

.kategoriler.pinterest .itemkategori:hover {
    background-color: var(--pinterest-color);
}

.kategoriler.likee .itemkategori:hover {
    background-color: var(--likee-color);
}

.kategoriler .itemkategori:hover .toptitle {
    color: white;
}

.kategoriler.instagram .itemkategori:hover {
    background-color: var(--instagram-color);
}

.kategoriler.tiktok .itemkategori:hover {
    background-color: var(--tiktok-color);
}

.kategoriler.youtube .itemkategori:hover {
    background-color: var(--youtube-color);
}

.kategoriler.twitch .itemkategori:hover {
    background-color: var(--twitch-color);
}

.kategoriler.facebook .itemkategori:hover {
    background-color: var(--facebook-color);
}

.kategoriler.twitter .itemkategori:hover {
    background-color: var(--twitter-color);
}

.kategoriler.threads .itemkategori:hover {
    background-color: var(--threads-color);
}

.kategoriler.spotify .itemkategori:hover {
    background-color: var(--spotify-color);
}

.kategoriler.telegram .itemkategori:hover {
    background-color: var(--telegram-color);
}

.kategoriler.linkedin .itemkategori:hover {
    background-color: var(--linkedin-color);
}

.kategoriler.google .itemkategori:hover {
    background-color: var(--google-color);
}

.kategoriler.snapchat .itemkategori:hover {
    background-color: var(--snapchat-color);
}

.kategoriler.kick .itemkategori:hover {
    background-color: var(--kick-color);
}

.kategoriler.soundcloud .itemkategori:hover {
    background-color: var(--soundcloud-color);
}


.digerhizmetler .row .col-md-3:nth-child(10) .item .icon,
.digerhizmetler .row .col-md-3:nth-child(11) .item .icon,
.kategoriler.twitch .itemkategori .incelebtn,
.sosyalkategoriler .item.twitch {
    background: #8d45f8
}

.kategoriler.discord .itemkategori .incelebtn,
.sosyalkategoriler .item.discord {
    background: #5865f2
}

.kategoriler.soundcloud .itemkategori .incelebtn,
.sosyalkategoriler .item.soundcloud {
    background: var(--soundcloud-color);
}

.kategoriler.kick .itemkategori .incelebtn,
.sosyalkategoriler .item.kick {
    background: var(--kick-color);
}


.digerhizmetler .row .col-md-3:nth-child(13) .item .icon,
.kategoriler.snapchat .itemkategori .incelebtn,
.sosyalkategoriler .item.snapchat {
    background: var(--snapchat-color)
}

.digerhizmetler .row .col-md-3:nth-child(15) .item .icon,
.kategoriler.netflix .itemkategori .incelebtn,
.sosyalkategoriler .item.netflix {
    background: #e50914
}

.digerhizmetler .row .col-md-3:nth-child(14) .item .icon,
.kategoriler.trovo .itemkategori .incelebtn,
.sosyalkategoriler .item.trovo {
    background: #00b662
}

.kategoriler.linkedin .itemkategori .incelebtn,
.sosyalkategoriler .item.linkedin {
    background: #026fac
}

.digerhizmetler .row .col-md-3:nth-child(12) .item .icon,
.kategoriler.spotify .itemkategori .incelebtn,
.sosyalkategoriler .item.spotify {
    background: #22974c
}

.kategoriler.telegram .itemkategori .incelebtn,
.sosyalkategoriler .item.telegram {
    background: #34a6d8
}

.kategoriler.google .itemkategori .incelebtn {
    background: var(--warning-color)
}

.kategoriler.threads .itemkategori .incelebtn,
.sosyalkategoriler .item.threads {
    background: #333
}

.kategoriler.facebook .itemkategori .incelebtn,
.sosyalkategoriler .item.facebook {
    background: #1873eb
}

.digerhizmetler .row .col-md-3:nth-child(7) .item .icon,
.digerhizmetler .row .col-md-3:nth-child(8) .item .icon,
.digerhizmetler .row .col-md-3:nth-child(9) .item .icon,
.kategoriler.youtube .itemkategori .incelebtn,
.sosyalkategoriler .item.youtube {
    background: red
}

.kategoriler.clubhouse .itemkategori .icon {
    background-color: #6515dd
}

.kategoriler.kick .itemkategori .icon {
    background-color: var(--kick-color)
}


.kategoriler.clubhouse .itemkategori .incelebtn,
.sosyalkategoriler .item.clubhouse {
    background: #6515dd
}

.itemkategori .text {
    float: left;
    width: calc(100% - 55px);
    padding-left: 15px;
    min-height: 55px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.itemkategori .ust {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center
}

.itemkategori .ust span {
    padding: 10px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 20%);
    display: flex;
    align-items: center;
    justify-content: center
}

.itemkategori .ust span.son {
    background-color: var(--white-color);
    height: 50px;
    width: 50px
}

.itemkategori .ust span svg {
    height: 24px;
    width: auto;
    object-fit: contain
}

.itemkategori .incelebtn {
    float: right;
    background: #000;
    color: var(--white-color);
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 6px
}

.itemkategori .toptitle {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    min-height: 55px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    float: left;
    margin-bottom: 0
}

.itemkategori p {
    font-size: 14px;
    font-weight: 400;
    color: var(--white-color);
    padding: 10px 20px;
    text-align: center;
    line-height: 20px
}

.itemkategori .alt {
    display: flex;
    justify-content: space-between;
    padding: 25px;
    border-top: 1px solid;
    width: 100%
}

.info-text .toptitle,
.itemkategori .alt b {
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color)
}

.itemkategori .alt i {
    font-size: 19px;
    font-weight: 400;
    color: var(--white-color)
}

.loginbtn {
    float: right;
    border: 1px solid var(--primary-color);
    border-radius: 25px;
    position: relative;
    padding: 5px;
    cursor: pointer
}

.loginbtn .icon {
    float: left;
    width: 40px;
    height: 40px;
    background: #ff832b36;
    text-align: center;
    line-height: 40px;
    color: var(--primary-color);
    border-radius: 50%
}

.loginbtn .texs {
    float: left;
    width: calc(100% - 40px);
    padding-left: 15px;
    min-height: 40px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-right: 37px
}

.loginbtn .ri-arrow-down-s-line {
    position: absolute;
    color: var(--primary-color);
    right: 10px;
    top: 12px
}

.loginbtn .texs .h4title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 15px
}

.loginbtn.lang {
    border-color: #aeb8cb
}

.basetcupon,
.basettotal {
    border-top: 1px solid #b3c1db82
}

.loginbtn.lang .icon {
    line-height: inherit;
    overflow: hidden
}

.loginbtn.lang i {
    color: #aeb8cb
}

.loginmenuarea {
    position: absolute;
    background: var(--white-color);
    width: 100%;
    left: 0;
    top: 55px;
    max-height: 0;
    overflow: hidden;
    transition: .3s;
    border-radius: 15px;
    z-index: 2
}

.loginmenuarea ul {
    margin-bottom: 0;
    list-style: none;
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid var(--primary-color)
}

.loginmenuarea ul li {
    margin: 5px 0
}

.loginmenuarea ul li a {
    color: #081839;
    font-weight: 500;
    transition: .6s
}

.loginbtn:hover .loginmenuarea {
    max-height: 100px
}

.title-bg {
    float: left;
    width: 100%;
    padding: 50px 15px 70px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #373a3f;
    background: #e0e5eb
}

.title-bg .h5title {
    font-size: 25px;
    margin: 5px 0 20px;
    font-weight: 200
}

.siparissorguitem {
    width: 100%;
    background: var(--white-color);
    max-width: 690px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
}

.sorgusonuc,
.sorgusonuc .area .list span {
    float: left;
    flex-flow: column;
    display: flex
}

.siparissorguitem input {
    float: left;
    background: 0 0;
    font-weight: 600;
    color: #081839;
    font-size: 18px;
    padding: 6px 20px
}

.siparissorguitem button {
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 17px;
    font-weight: 600;
    padding: 12px 25px;
    transition: .6s
}

.sipariscontainer {
    float: left;
    width: 100%;
    margin-top: -180px
}

.sorgusonuc {
    width: 100%;
    justify-content: center
}

.sorgusonuc .area {
    background: var(--white-color);
    border-radius: 2px;
    width: 100%;
    margin: 0 auto 15px;
    padding: 20px
}

.sorgusonuc .area .list .icon {
    float: left;
    width: 45px;
    height: 45px;
    background: var(--warning-color);
    border-radius: 2px;
    text-align: center;
    line-height: 45px;
    color: var(--white-color)
}

.sorgusonuc .area .list span {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 18px;
    padding-left: 10px;
    min-height: 45px;
    justify-content: center
}

.sorgusonuc .siparisno {
    float: right;
    font-size: 18px;
    font-weight: 600;
    min-height: 45px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.sorgusonuc .siparisdetay .siaprisdurum {
    float: right;
    background: #01c3b3;
    border-radius: 2px;
    color: var(--white-color);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 15px
}

.siparisbilgileri .item {
    float: left;
    width: 100%;
    border: 1px solid #d0d3e1;
    border-radius: 2px;
    padding: 13px;
    margin-bottom: 13px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
}

.basketmenu,
.siparissepetitem .platform {
    border-radius: 8px;
    background: var(--white-color);
    float: left
}

.siparisbilgileri .item span {
    color: #5f6a73;
    font-weight: 600
}

.siparisbilgileri .item .h6title {
    margin-bottom: 0;
    color: #4fd19c;
    font-weight: 600;
    font-size: 18px
}

.sorgusonuc .siparisdetay {
    float: left;
    width: 100%;
    margin-top: 15px
}

.sorgusonuc .siparisdetay .icon {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 2px;
    background: var(--primary-color);
    text-align: center;
    line-height: 35px;
    color: var(--white-color)
}

.sepetdtayi,
.siparissepetitem .platform .title {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
    float: left
}

.sorgusonuc .siparisdetay span {
    float: left;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 18px;
    padding-left: 10px;
    min-height: 35px;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.sitecotent {
    float: left;
    width: 100%;
    margin: 25px 0
}

.sitecotent.sepetozel {
    margin-top: -90px
}

.basketarea {
    float: left;
    width: 100%;
    padding: 35px 0
}

.basketmenu {
    width: 100%
}

.basketmenu ul {
    float: left;
    width: 100%;
    margin-bottom: 0;
    list-style: none
}

.basketmenu ul li {
    width: 33%;
    float: left;
    text-align: center;
    padding: 20px 5px;
    border-left: 1px solid #e8eff4
}

.basketmenu ul li:first-child {
    border-left: 0
}

.basketmenu ul li a {
    color: rgba(26, 29, 35, .5);
    font-size: 18px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-flow: wrap
}

.basketmenu ul li.active a {
    color: var(--warning-color);
    font-weight: 700
}

.basketcontent {
    float: left;
    width: 100%;
    margin-top: 20px
}

.siparissepetitem .platform {
    width: 100%;
    height: 100%
}

.siparissepetitem .platform .title {
    color: var(--white-color);
    display: flex;
    padding: 20px
}

.dropdownmenu.instagram .icon,
.siparissepetitem .platform.instagram .title {
    background: var(--instagram-color)
}

.siparissepetitem .platform .title i {
    font-size: 25px;
    line-height: 28px
}

.siparissepetitem .platform .title span {
    font-weight: 600;
    font-size: 18px;
    margin-left: 15px
}

.siparissepetitem .platform .area .h5title {
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px
}

.siparissepetitem .platform .area p {
    float: left;
    width: 100%;
    margin-bottom: 13px;
    font-size: 14px
}

.sepetdtayi {
    background: #e7e7ee;
    font-size: 17px;
    font-weight: 600;
    padding: 24px 25px;
    margin-bottom: 0
}

.basettotal {
    float: left;
    width: 100%;
    background: var(--white-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 25px 20px
}

.basettotal span {
    float: left;
    width: 60%;
    font-size: 18px
}

.basetcupon .accordion-item {
    overflow: hidden
}

.basetcupon input {
    float: left;
    width: 100%;
    text-align: left;
    border: 1px solid #b3c1db;
    border-radius: 2px;
    padding: 11px 8px
}

.basetcupon form button {
    color: #4fd19c;
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    right: 28px;
    top: 75px;
    background: #4fd19c2e;
    border: 0;
    border-radius: 5px;
    padding: 5px 10px
}

.accordion-button:not(.collapsed) {
    background: var(--white-color);
    color: #000
}

.buybtns {
    float: right;
    background: var(--primary-color);
    padding: 20px;
    border: 0;
    border-radius: 6px;
    color: var(--white-color);
    display: flex;
    font-weight: 600;
    margin-left: 30px;
    transition: .6s;
    width: 100%;
    margin-top: 15px
}

.siparissorguitem button {
    width: 100%;
    border-radius: 5px;
    margin-top: 10px
}

.siparissorguitem input {
    width: 100%;
    text-align: center;
    border: 1px solid var(--primary-color)
}

.buybtns i {
    font-weight: 400;
    margin-right: 10px;
    font-size: 20px;
    line-height: 25px
}

.input_bilgi input,
.link_siparis input {
    float: left;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid #ccc;
    border-radius: 5px
}

.sptbody .alan {
    float: left;
    width: 100%;
    background: var(--white-color);
    padding: 25px
}

.sptbody .alan ul {
    display: flex;
    border-bottom: 0 !important;
    margin-bottom: 0
}

.accordion-button::after {
    filter: brightness(0) saturate(100%) invert(60%) sepia(67%) saturate(2084%) hue-rotate(190deg) brightness(100%) contrast(101%)
}

.sptbody .alan ul li {
    width: 31%;
    float: left;
    background: #ff832a2a;
    font-weight: 600 !important;
    color: var(--warning-color);
    border-radius: 2px;
    text-align: left;
    padding-left: 20px;
    margin-right: 2%;
    position: relative;
    cursor: pointer;
    list-style: none
}

.sptbody .alan ul li label {
    padding: 15px;
    width: calc(100% - 33px);
    cursor: pointer
}

.siparissonuc {
    float: left;
    width: 100%;
    padding: 30px;
    text-align: center
}

.siparissonuc .h6title {
    font-size: 40px;
    font-weight: 700;
    color: #4fd19c
}

.siparissonuc p {
    font-size: 19px
}

.siparissonuc p a {
    color: var(--warning-color);
    font-weight: 600
}

.siparissonuc i {
    color: #4fd19c;
    font-size: 95px
}

section.comments {
    float: left;
    width: 100%;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}

section.comments .top {
    padding-top: 48px;
    padding-bottom: 48px
}

section.comments .top .stars i {
    font-size: 30px;
    color: var(--primary-color)
}

section.comments ul.comments::-webkit-scrollbar-track {
    border-radius: 5px;
    width: 100%;
    height: 100%
}

section.comments ul.comments::-webkit-scrollbar {
    width: 4px;
    border-radius: 5px;
    background-color: var(--white-color) 36
}

section.comments ul.comments::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: var(--white-color);
    height: 5px
}

section.comments .top p {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 400
}

section.comments .top a.btn-allcomments {
    border-radius: 15px;
    background-color: var(--white-color);
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    transition: .3s ease-in-out
}

section.comments .top a.btn-allcomments i {
    margin-right: 14px;
    font-weight: 400
}

section.comments ul.comments {
    max-height: 548px;
    overflow-y: scroll;
    margin: 0 0 55px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    gap: 10px;
    padding: 0 16px 0 0
}

section.comments ul.comments li {
    padding: 20px 30px;
    border-radius: 10px;
    background-color: var(--white-color);
    width: calc(50% - 5px)
}

section.comments ul.comments li .ctop .job {
    color: #1d3163;
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    display: block
}

.dropdownmenu {
    background: #f6fafb;
    border-radius: 2px;
    position: fixed;

    max-width: 1140px;
    -webkit-transition: max-height .4s;
    -moz-transition: max-height .4s;
    -ms-transition: max-height .4s;
    -o-transition: max-height .4s;
    transition: max-height .4s;
    overflow: hidden;
    max-height: 0;
    z-index: 3;
    min-width: 900px
}

.dropdownmenu .area {
    float: left;
    width: 100%;
    padding: 15px 30px
}

.dropdownmenu .item {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 10px;
}

.dropdownmenu .col-md-3 {
    padding: 0 3px
}

.dropdownmenu .item .icon {
    float: left;
    width: 100%;
    height: 155px;
    text-align: center;
    color: var(--white-color);
    border-radius: 2px;
    transition: .6s;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

.dropdownmenu .item .inftext {
    float: left;
    width: calc(100% - 45px);
    min-height: 45px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 12px
}

.dropdownmenu .item .inftext span {
    color: var(--white-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 15px
}

.dropdownmenu .item .inftext .h5title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--text-dark);
    transition: .6s
}

.dropdownmenu ul li a {
    color: var(--text-dark);
    font-weight: 400
}

.relative .dropdownmenu {
    right: -60px;
    top: 38px;
    border-radius: 8px;
    box-shadow: -4px 4px 24px rgba(13, 18, 31, .062);
    min-width: 190px
}

.relative .dropdownmenu .area {
    padding: 15px 20px
}

.relative .dropdownmenu .area li {
    margin-left: 0
}

.dropdownmenu.instagram .inftext span,
.dropdownmenu.instagram .item:hover .h5title {
    color: var(--instagram-color)
}


.submenu {
    position: relative;
}

.dropdownmenu {
    position: absolute; /* Ya da fixed, ihtiyacına göre */
    top: 58px;
    left: -10%;
    transform: translateX(-50%);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1000;
    min-width: 1352px;
}


.submenu:hover .dropdownmenu {
    max-height: 1140px;
}

.dropdownmenu .item .icon i {
    font-size: 55px;
    font-weight: 400;
    color: var(--white-color)
}

.digerhizmetler .row .col-md-3:nth-child(4) .item .icon,
.digerhizmetler .row .col-md-3:nth-child(5) .item .icon,
.digerhizmetler .row .col-md-3:nth-child(6) .item .icon,
.sosyalkategoriler .item.tiktok {
    background: #101626
}

.headmenu ul li.submenu a::after {
    content: "";
    width: 11px;
    height: 11px;
    background: url(../img/icon/altarrowicon.svg) 0 0/contain no-repeat;
    position: absolute;
    right: -19px;
    top: 8px;
    filter: brightness(0) saturate(100%) invert(7%) sepia(0%) saturate(1242%) hue-rotate(199deg) brightness(112%) contrast(70%);
    transition: .5s
}

.webkapat {
    display: none !important
}


.myDiv {
    font-weight: 700;
    font-size: 20px;
    color: #333;
    text-align: center;
    margin: 20px;
    padding: 15px;
    border: 1px solid #333
}

.arrow,
.last-step i,
.next-step i,
.pakettabs .nav-tabs .dropdown-item span {
    margin-left: 10px
}

.cagetogry-h1 {
    font-size: 26px;
    font-weight: 600;
    color: #373a3f
}

.mobilsiparis input {
    height: 56px;
    font-size: 16px;
    color: #333;
    background: var(--white-color);
    margin-top: 0;
    border: 0;
    float: left;
    width: calc(100% - 50px);
    padding-left: 15px
}

#mobilsiparisForm {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
    float: left;
    width: 100%
}

#mobilsiparisForm button {
    width: 50px;
    border: 0;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 21px
}

.mobilsiparis .h6text,
.mobilsiparis .h6title {
    float: left;
    width: 100%;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center
}

.sosyalkategoriler {
    margin-top: 50px;
    float: left;
    width: 100%;
    margin-bottom: 150px;
    background: #FDFDFD;
}

.sosyalkategoriler .anabaslik {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
    float: left;
    width: 100%;
    text-align: center
}

.sosyalkategoriler .h6title {
    font-size: 15px;
    font-weight: 400;
    color: #000;
    margin-bottom: 40px;
    float: left;
    width: 100%;
    text-align: center
}

.sosyalkategoriler .item {
    float: left;
    width: 100%;
    background: var(--warning-color);
    padding: 10px 14px;
    border-radius: 10px;
    justify-content: space-around;
    height: 170px;
    color: var(--white-color) !important;
}

.sosyalkategoriler .item .icon {
    float: left;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 50px
}

.sosyalkategoriler .item .text {
    float: left;
    width: calc(100% - 60px);
    padding: 7px 5px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    min-height: 60px;

}

.sosyalkategoriler .item .text .h5title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0
}


.sosyalkategoriler .item .text span {
    float: left;
    width: 100%;
    font-size: 16px;
    text-transform: uppercase
}

.sosyalkategoriler .item.soundcloud {
    background: #f97637
}

.sosyalkategoriler .item.pinterest {
    background: var(--pinterest-color);
}

.sosyalkategoriler .item.likee {
    background: var(--likee-color);
}

.sosyalkategoriler .item.tumblr {
    background: #1b3561
}

.sosyalkategoriler .item.pininterest {
    background: #c11f26
}

.sosyalkategoriler .item.vimeo {
    background: #00a9e9
}

.sosyalkategoriler .item.periscope {
    background: #3fa1c0
}

.sosyalkategoriler .item.reddit {
    background: #ff4500
}

.sosyalkategoriler .item.dailymotion {
    background: #2a62aa
}

.sosyalkategoriler .item.dlive {
    background: #d3af03
}

.sosyalkategoriler .item.dolap {
    background: #25d6a2
}

.blogpop a {
    color: #212529
}

.hidden-title {
    opacity: 0
}

:root {
    --swiper-navigation-size: 10px
}

.swiper-button-next-1::after,
.swiper-button-next-2::after,
.swiper-button-next::after,
.swiper-button-prev-1:after,
.swiper-button-prev-2:after,
.swiper-button-prev:after {
    font-weight: bolder
}

.swiper-button-next,
.swiper-button-next-1,
.swiper-button-next-2,
.swiper-button-prev,
.swiper-button-prev-1,
.swiper-button-prev-2 {
    color: var(--primary-color);
    background-color: var(--white-color);
    padding: 10px;
    border-radius: 90px;
    top: var(--swiper-navigation-top-offset, 38%)
}

.setting-description {
    background-color: #1c2028;
    border-radius: 15px 15px 0 0;
    min-width: 231.5px;
    width: 100% !important;
    max-width: 483px
}

h10 {
    font-size: 12px;
    margin-left: 5px !important;
    letter-spacing: .8px;
    font-family: Arial !important
}

.setting-description-text {
    padding-top: 18px !important;
    color: #81828b;
    font-family: Gilroy-Regular !important
}

.socialMediaServiceButtons .item a,
.wrapper-dropdown {
    background-color: var(--background-light);
    color: #191b2a;
    font-size: 13px;
    font-weight: 700;
    width: 100%
}

.wrapper-dropdown {
    border-radius: 10px;
    padding: 3px 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    text-align: left;
    cursor: pointer;
    -ms-user-select: none;
    user-select: none
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden
}

.arrow {
    margin-right: 10px;
    float: right;
    rotate: 180deg
}

svg {
    transition: .3s
}

#buyNowModal .modal-input-dialog {
    display: flex;
    border: 2px solid var(--primary-color);
    border-radius: 9px;
}

#buyNowModal .modal-input-dialog input {
    border-radius: 0px 7px 7px 0px;
}

#buyNowModal .modal-img-dialog {
    padding: 10px;
}

#buyNowModal .modal-img-dialog img {
    width: 25px !important;
    border-radius: 7px;
    height: auto !important;
    margin-top: 0;
}

.wrapper-dropdown::before {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -2px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--white-color) transparent
}

.rotated {
    transform: rotate(-180deg)
}

.wrapper-dropdown .dropdown {
    transition: .3s;
    position: absolute;
    top: 120%;
    right: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
    border-radius: 15px;
    box-shadow: inherit;
    background: inherit;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    visibility: hidden
}

.wrapper-dropdown .item {
    margin-right: 0 !important
}

.wrapper-dropdown .dropdown li {
    padding: 0 15px;
    line-height: 45px;
    overflow: hidden
}

.btn-orange-settings ul.settings-menu li:first-child,
.btn-orange-settings ul.settings-menu li:last-child,
.support-content-head tr,
.wrapper-dropdown .dropdown li:last-child {
    border-bottom: none
}

.dropdown {
    padding: .5rem !important
}

.pakettabs .nav-tabs .dropdown {
    padding: 0 !important
}

.pakettabs .nav-tabs .dropdown-menu {
    width: 100%;
    background: 0 0;
    border: none
}

.pakettabs .nav-tabs .dropdown-item:hover {
    color: #e2e8f0;
    background-color: var(--primary-color)
}

.pakettabs .nav-tabs .dropdown-item {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: .5rem 1rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #e2e8f0
}

.dropdown-item:active,
.pakettabs .nav-tabs .dropdown-item.active {
    color: var(--white-color);
    text-decoration: none;
    background-color: var(--primary-color)
}

.margin-fixer {
    margin-top: -220px
}

.wrapper-dropdown .dropdown li:hover {
    background-color: rgb(209 210 213);
    border-radius: 10px
}

.wrapper-dropdown.active .dropdown {
    opacity: 1;
    visibility: visible;
    border-radius: 15px
}

.hr {
    border: 2px solid var(--primary-color);
    width: 100%;
    margin-top: 20px
}

.socialMediaButtons,
.socialMediaServiceButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px
}

.socialMediaButtons .btn-orange {
    font-size: 16px;
    font-weight: 500;
    width: 100%
}

.socialMediaServiceButtons .item a {
    border-radius: 10px;
    padding: 0
}

.socialMediaServiceDetails {
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between
}

.socialMediaServiceDetails .item .card {
    border: 1px solid var(--primary-color);
    width: 100%;
    height: 100%;
    background-color: #eff1f8;
    border-radius: 20px;
    max-height: 360px;
    min-height: 360px
}

.socialMediaServiceDetails .item .card-header {
    background-color: #eff1f8;
    margin-top: 0;
    border: none;
    border-radius: 20px
}

.socialMediaServiceDetails .item .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: space-between
}

.socialMediaServiceDetails .item .card-body .count {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: -22px
}

.socialMediaServiceDetails .item .card-body p {
    width: max-content;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: -2px;
    max-width: fit-content;
    line-height: 1;
    margin-top: 11px
}

.socialMediaServiceDetails .item .card-body .badge-custom {
    background-color: #db3c72;
    font-size: 14px;
    font-weight: 400;
    color: var(--white-color);
    border-radius: 90px;
    padding: 5px 25px
}

.socialMediaServiceDetails .item .card-body .old-price {
    text-decoration: line-through;
    font-size: 13px;
    margin-bottom: -16px
}

.socialMediaServiceDetails .item .card-body .price {
    font-size: 35px;
    font-weight: 700;
    color: var(--primary-color)
}

.socialMediaServiceDetails .item .card-body .btn-green-basket {
    width: max-content;
    font-size: 14px;
    padding: 0 30px
}

.SocialMediaCardList {
    padding-top: 55px;
    background-color: #e0edfd;
    border-radius: 17px;
}

.SocialMediaCardList .input-group {
    height: 60px !important
}

.SocialMediaCardList .input-group-text {
    height: 60px;
    color: var(--primary-color);
    border: none;
    background: var(--background-light)
}

.SocialMediaCardList .form-control:focus {
    border-color: transparent;
    box-shadow: none;
    background-color: var(--background-light)
}

.payment-card,
.payment_methods .payment-item:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15)
}

.SocialMediaCardList .alert-box {
    height: 40px;
    background-color: var(--background-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -1px;
    margin-bottom: 1rem
}

.SocialMediaCardList .alert-box i {
    color: #707070;
    font-size: 18px
}

.SocialMediaCardList .alert-box p,
.SocialMediaCardList .info-box a,
.orderArea .reviewArea a {
    color: #212529;
    opacity: 50%;
    margin-bottom: 0
}

.alert-box {
    display: flex;
    align-items: center;
    cursor: pointer
}

.alert-box .icon {
    font-size: 24px;
    color: gray;
    transition: color .3s
}

.alert-box.selected .icon {
    color: green
}

.SocialMediaCardList .card {
    height: 100%;
    border: none;
    padding: 0;
    background-color: #eff1f8;
    width: 100%
}

.SocialMediaCardList .card .max-value {
    color: #707070;
    font-size: 25px;
    text-align: left;
    font-weight: 700;
    border-radius: 10px
}

.SocialMediaCardList .card-selected {
    border: 4px solid var(--primary-color)
}

.SocialMediaCardList .card .vr {
    height: 39px;
    width: 0;
    border-left: 2px solid #707070
}

.SocialMediaCardList .card .form-label {
    font-size: 11px;
    color: #707070;
    margin-bottom: 0;
    opacity: .53;
    margin-left: 5px
}

.SocialMediaCardList .card .card-footer {
    padding: 5px
}

.SocialMediaCardList .card .card-footer input {
    border: none;
    color: var(--primary-color);
    font-weight: 700;
    height: 60px;
    background: 0 0;
    font-size: 38px;
    margin-top: -11px
}

.SocialMediaCardList .card .card-footer input:focus {
    border: none;
    box-shadow: none
}

.SocialMediaCardList .info-box,
.calculateArea,
.orderArea button {
    border-radius: 10px;
    display: flex
}

.SocialMediaCardList .card .card-footer input::placeholder {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 28px
}

.SocialMediaCardList .info-box {
    align-items: center;
    padding-left: 15px;
    background-color: var(--background-light);
    opacity: .7;
    height: 52px;
    width: 100%;
    color: #212529;
    margin-left: -2px;
    margin-top: 1rem;
    justify-content: center
}

.calculateArea {
    align-items: center;
    justify-content: space-between;
    padding: 38px;
    gap: 10px;
    margin-top: 40px;
    background-color: var(--primary-color);
    color: var(--white-color);
    height: 135px
}

.info-box,
.orderArea .reviewArea {
    background-color: var(--background-light);
    border-radius: 10px;
    display: flex
}

.calculateArea .title {
    font-size: 20px;
    font-weight: 700
}

.calculateArea .calculated .small {
    text-align: right;
    font-size: 26px;
    font-weight: lighter;
    text-decoration: line-through
}

.calculateArea .calculated .large {
    font-size: 25px;
    font-weight: 700
}

.info-box {
    align-items: center;
    padding-left: 15px;
    opacity: .7;
    height: 52px;
    width: 100%;
    color: #212529;
    margin-left: -12px;
    margin-top: 1rem;
    justify-content: center
}

.info-box p {
    font-size: 18px;
    color: #212529;
    opacity: 50%;
    margin-bottom: 0
}

.orderArea .reviewArea {
    padding: 20px;
    gap: 20px;
    align-items: center;
    justify-content: space-between
}

.orderArea .reviewArea .review .stars i {
    color: var(--primary-color);
    font-size: 18px
}

.orderArea .reviewArea .review {
    display: flex;
    gap: 5px
}

.orderArea .reviewArea .totalReviews {
    font-size: 16px;
    color: #212529;
    opacity: .5
}

.orderArea .reviewArea .review .reviewText {
    font-size: 18px;
    color: #212529;
    opacity: .5
}

.orderArea .vr {
    height: 50px;
    width: 0;
    border-left: 2px solid #707070
}

.orderArea button {
    justify-content: center;
    font-size: 20px;
    gap: 5px
}

.orderArea button i {
    font-size: 35px
}

.SocialFeatures {
    padding-top: 100px;
    padding-bottom: 100px
}

.SocialFeatures h2 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 50px
}

.SocialFeatures .icon-container {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px
}

.SocialFeatures .icon {
    font-size: 50px;
    color: var(--primary-color)
}

.SocialFeatures .features {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap
}

.SocialFeatures .featureItem {
    width: 47%;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    gap: 2rem;
    flex-grow: 1
}

.SocialFeatures .text {
    flex-grow: 1
}

.SocialFeatures .featureItem p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5
}

.SocialFeatures .featureItem .text .subTitle {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: bolder
}

.myOrder {
    position: relative;
    margin-bottom: 50px
}

.myOrder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 330px;
    background-color: var(--primary-color);
    z-index: -1
}

.myOrder .card .card-header .header-icon i {
    color: var(--white-color);
    padding-left: 8px;
    padding-right: 8px;
    font-size: 30px
}

.btn-orange-check:hover,
.myOrder .card .card-header .header-icon {
    background-color: var(--primary-color);
    color: var(--white-color)
}

.myOrder .card {
    margin-top: 90px;
    width: 100%;
    height: 80%;
    border: none;
    border-radius: 0 !important
}

.myOrder .card .card-header {
    display: flex;
    align-items: center !important;
    justify-content: start;
    flex-direction: row;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    background: 0 0;
    margin-top: 0;
    border: none;
    align-items: start
}

.myOrder .pt-200px {
    padding-top: 200px
}

.myOrder .input-box,
.myOrder .input-box-order,
.myOrder .input-box-status-danger {
    padding: 4px;
    margin-bottom: 1rem;
    display: flex;
    gap: 10px
}

.myOrder .mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.myOrder .input-box-order {
    align-items: center;
    border: 1px solid var(--primary-color)
}

.myOrder .input-box {
    align-items: center;
    border: 1px solid #000
}

.myOrder .input-box-status-success,
.myOrder .input-box-status-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bolder;
    padding: 4px;
    margin-bottom: 1rem
}

.myOrder .input-box-status-danger {
    align-items: center;
    border: 1px solid #d34646;
    color: #d34646;
    font-weight: bolder
}

.myOrder .input-box .title,
.myOrder .input-box-order .title,
.myOrder .input-box-status-danger .title,
.myOrder .input-box-status-success .title,
.myOrder .input-box-status-warning .title {
    font-weight: bolder;
    font-size: 18px
}

.myOrder .orderbox {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    padding: 5px;
    color: var(--white-color);
    gap: 10px;
    width: 90%
}

.myOrder .orderbox .icon {
    font-size: 30px
}

.myOrder .orderbox .text {
    font-size: 17px;
    font-weight: 700
}

.myOrder .orderbox .price {
    font-size: 25px;
    font-weight: 700
}


.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: 50px
}

.slider-wrapper {
    display: flex;
    transition: transform .3s ease-in-out;
    will-change: transform
}

.slider-item {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center
}

.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%)
}

.slider-nav button {
    background-color: transparent;
    border: none;
    padding: 30px;
    cursor: pointer;
    height: 200px
}


.twitter {
    color: #1d9bf0 !important
}

.google {
    color: var(--warning-color) !important
}

.telegram {
    color: #34a6d8 !important
}

.trovo {
    color: #00b662 !important
}

.linkedin {
    color: #026fac !important
}

.spotify {
    color: #22974c !important
}

.snapchat {
    color: var(--snapchat-color) !important
}

.netflix {
    color: #e50914 !important
}

.discord {
    color: #5865f2 !important
}

.threads {
    color: #333 !important
}

.twitch {
    color: #8d45f8 !important
}

.tiktok {
    color: #0d121f !important
}

.youtube {
    color: red !important
}

.facebook {
    color: #1873eb !important
}

.background-twitter {
    background: #1d9bf0 !important
}

.background-google {
    background: var(--warning-color) !important
}

.background-telegram {
    background: #34a6d8 !important
}

.background-trovo {
    background: #00b662 !important
}

.background-linkedin {
    background: #026fac !important
}

.background-spotify {
    background: #22974c !important
}

.background-snapchat {
    background: var(--snapchat-color) !important
}

.background-netflix {
    background: #e50914 !important
}

.background-discord {
    background: #5865f2 !important
}

.background-threads {
    background: #333 !important
}

.background-twitch {
    background: #8d45f8 !important
}

.background-instagram {
    background: var(--instagram-color) !important
}

.background-tiktok {
    background: #0d121f !important
}

.background-youtube {
    background: red !important
}

.background-facebook {
    background: #1873eb !important
}

.order-sm-3 {
    order: 3 !important
}

.card-captions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
    background-color: rgb(60 60 60 / 50%);
    color: var(--white-color);
    font-size: 12px;
    text-align: center
}

h3 {
    font-size: 1.25rem
}

.payment_methods .payment-item .detail .description {
    font-weight: 500;
    font-size: 14px
}

.payment_methods .payment-item .detail .name {
    font-weight: 700;
    font-size: 18px
}

.payment_methods .payment-item .icon {
    color: var(--primary-color);
    font-size: 30px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color) 7a;
    width: 50px;
    height: 40px;
    border-radius: 10px
}

.payment_methods {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.payment_methods .payment-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    justify-content: space-between;
    width: 49%;
    padding: 10px
}

.payment_methods .checkbox input[type=checkbox] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.payment_methods .checkbox input[type=checkbox]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color)
}

.payment_methods .checkbox input[type=checkbox]:checked::after {
    content: '\2713';
    font-size: 14px;
    color: var(--white-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700
}

.basket-card,
.payment-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 785px;
    border-radius: 10px;
    margin-top: 20px
}

.payment-card-content {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 30px 10px
}

.basket-card-details-title,
.basket-card-title,
.coupons-container-title,
.market-container-title,
.orders-title,
.password-change-title,
.payment-card-title,
.personal-info-title,
.push-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 20px 14px;
    border-bottom: 1px solid var(--primary-color)
}

.coupons-container-title-icon,
.market-container-title-icon,
.orders-title-icon,
.password-change-title-icon,
.payment-card-title-icon,
.personal-info-title-icon,
.push-title-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color) 7a;
    width: 50px;
    height: 50px;
    border-radius: 10px
}

.basket-card-details-title .h2title,
.basket-card-title .h2title,
.basket-card-title h1,
.coupons-container-title .h2title,
.market-container-title .h2title,
.orders-title .h2title,
.password-change-title .h2title,
.payment-card-title .h2title,
.personal-info-title .h2title,
.push-title .h2title,
.settings-menu-text span {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color)
}

.coupon-title-icon i,
.coupons-container-title-icon i,
.market-container-title-icon i,
.orders-title-icon i,
.password-change-title-icon i,
.payment-card-title-icon i,
.personal-info-title-icon i,
.push-title-icon i {
    font-size: 20px;
    color: var(--primary-color)
}

.input-icon-container i,
.payment-card .input-icon-container i {
    position: absolute;
    left: 10px;
    color: var(--primary-color);
    font-size: 24px
}

.payment-card .payment-input {
    width: 49%
}

.payment-card .input-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--background-light);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    width: 100%
}

.next-step {
    width: 100% !important;
}

.last-step {
    width: 100%;
}

.custom-dropdown .custom-menu {
    background-color: var(--white-color);
    margin-top: 10px;
    box-shadow: 4px 6px 6px 1px rgba(0, 0, 0, .2);
    padding-top: 15px;
    padding-bottom: 10px
}

.custom-dropdown .service-info .title {
    font-size: larger;
    font-weight: 600;
    margin-bottom: 5px
}

.custom-dropdown .service-info {
    position: relative;
    padding-left: 20px;
    color: inherit;
    transition: color .3s
}

.custom-dropdown,
.custom-dropdown.open {
    transition: max-height .4s, transform .4s, opacity .4s
}

.custom-dropdown .service-info::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    border-radius: 2px;
    background-color: transparent;
    transition: background-color .3s, height .3s;
    transform-origin: center
}

.custom-dropdown .service-info:hover::after {
    height: 50%;
    background-color: #ccc
}

.custom-dropdown.facebook .service-info:hover::after,
.href-facebook .service-info:hover::after {
    background-color: #3b5998
}

.custom-dropdown.linkedin .service-info:hover::after,
.href-linkedin .service-info:hover::after {
    background-color: var(--linkedin-color)
}

.custom-dropdown.telegram .service-info:hover::after,
.href-telegram .service-info:hover::after {
    background-color: #08c
}

.custom-dropdown.twitch .service-info:hover::after,
.href-twitch .service-info:hover::after {
    background-color: var(--twitch-color)
}

.custom-dropdown.google .service-info:hover::after,
.href-google .service-info:hover::after {
    background-color: #f4b400
}

.custom-dropdown {
    width: 16%;
    display: block;
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    min-width: 316px;
    margin-top: 81px;
    border-radius: 5px;
    z-index: 99;
    background-color: var(--white-color)
}

.custom-dropdown.open {
    max-height: 500px;
    transform: scaleY(1);
    opacity: 1;
    background-color: transparent;
    box-shadow: 0 18px 6px 1px rgba(0, 0, 0, .2)
}

.custom-dropdown::before {
    content: "";
    background-color: var(--white-color);
    width: 2rem;
    height: 2rem;
    display: block;
    position: absolute;
    left: 50%;
    transform: rotate(-45deg) translateX(-50%);
    transform-origin: left;
    z-index: -1;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, .2);
    top: 6px
}


.platform .platform-info .title {
    font-weight: 700;
    font-size: 18px;
    text-align: center;

    text-transform: uppercase;
}

.platform .platform-info .subtitle {
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}

.platform {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

}

.platform:hover {
    transform: scale(1.1);
}


.productSocialServices {
    margin-top: 50px;
    width: 100%;
    display: flex
}

.productSocialServices .custom-dropdown {
    margin-top: 10px
}

.productSocialServices .platform {
    padding: 10px 20px;
    border-radius: 6px
}

.productSocialServices .platform.tiktok {
    background-color: #0d121f !important;
    color: var(--white-color) !important
}


.productSocialServices .platform.other,
.swal-toast-popup {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.instagram {
    background-color: var(--instagram-color) !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.facebook {
    background-color: #3b5998 !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.twitter {
    background-color: var(--twitter-color) !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.youtube {
    background-color: red !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.threads {
    background-color: #333 !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.twitch {
    background-color: var(--twitch-color) !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.google {
    background-color: #f4b400 !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.linkedin {
    background-color: var(--linkedin-color) !important;
    color: var(--white-color) !important
}

.productSocialServices .platform.telegram {
    background-color: #08c !important;
    color: var(--white-color) !important
}

.productSocialServices .custom-dropdown .service-info {
    position: relative;
    padding-left: 20px;
    color: inherit;
    transition: color .3s;
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: space-between
}

.dropbtn,
.iletisimsayfa .iletisimform form {
    align-items: center
}

.collapse-menu .service-info .icon,
.collapse-menu .service-info .title {
    font-weight: 600;
    font-size: 18px;
    color: #000
}

.collapse-item .threads .service-info:first-of-type {
    background-color: #333;
    color: var(--white-color) !important
}

.collapse-item .twitch .service-info:first-of-type {
    background-color: var(--twitch-color);
    color: var(--white-color)
}

.collapse-item .google .service-info:first-of-type {
    background-color: #f4b400;
    color: var(--white-color)
}

.collapse-item .linkedin .service-info:first-of-type {
    background-color: var(--linkedin-color);
    color: var(--white-color)
}

.collapse-item .telegram .service-info:first-of-type {
    background-color: #08c;
    color: var(--white-color)
}

.rating {
    display: inline-block;
    float: right;
    font-size: 23px;
    line-height: 40px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #17305A;
    height: 45px
}

.rating label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
    width: auto !important;
    float: left;
    display: block !important;
    margin: 0 0 0 10px !important
}

.rating label:last-child {
    position: static
}

.iletisimsayfa .iletisimform form button {
    margin-top: 15%;
}

.rating label:first-child {
    z-index: 5
}

.rating label:nth-child(2) {
    z-index: 4
}

.rating label:nth-child(3) {
    z-index: 3
}

.rating label:nth-child(4) {
    z-index: 2
}

.rating label:nth-child(5) {
    z-index: 1
}

.rating label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.rating label .icon {
    float: left;
    color: transparent;
    margin-left: 5px;
    cursor: pointer
}

.rating label:last-child .icon {
    color: #8EA0BD;
    cursor: pointer
}

.rating:hover label:hover input ~ .icon,
.rating:not(:hover) label input:checked ~ .icon {
    color: var(--primary-color);
    cursor: pointer
}

.accordion-button[aria-expanded=true] .title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset
}

.accordion-button[aria-expanded=false] .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: normal normal normal 16px/19px Rubik;
    letter-spacing: 0px;
    color: #17305A;
}

.row1 {
    display: flex;
    justify-content: space-between
}

.col1 {
    flex: 1;
    text-align: center;
    margin: 0 10px
}

.dropdown-content a .flag-icon,
.flag-icon {
    height: auto;
    margin-right: 5px;
    width: 20px
}

.box1 {
    border: 1px solid var(--primary-color);
    border-radius: 5px
}

.box1 img {
    width: 100%;
    height: auto
}

.box-text {
    padding-top: 15px
}

.stars223 {
    font-weight: 700
}

.pakettabs .nav-tabs {
    display: flex;
    justify-content: space-between;
    border: none
}

.pakettabs .nav-tabs .nav-item {
    flex-grow: 1;
    text-align: center
}

.pakettabs .nav-tabs .nav-link {
    font-size: 20px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 100%;
    border-radius: 0;
    text-align: center
}

.pakettabs .nav-tabs .nav-item.show .nav-link,
.pakettabs .nav-tabs .nav-link.active {
    color: var(--white-color);
    background: var(--primary-color)
}

#free_process .calculateArea .calculated .large {
    font-size: 33px;
    font-weight: 700
}

#free_process .calculateArea {
    padding: 0;
    height: auto
}

.dropdown {
    display: inline-block
}

.dropbtn {
    background-color: transparent;
    color: var(--white-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex
}

.flag-icon {
    border-radius: 100%
}

.dropdown-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: var(--white-color);
    min-width: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, .2);
    max-height: 300px;
    width: max-content;
    overflow: scroll;

}

.dropdown-content a {
    padding: 10px;
    display: flex;
    align-items: center
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown-content::-webkit-scrollbar-track {
    border-radius: 5px;
    width: 100%;
    height: 100%
}

.dropdown-content::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: #ff842c;
    height: 5px
}

.dropdown-content::-webkit-scrollbar {
    width: 4px;
    border-radius: 5px;
    background-color: var(--white-color) 36
}


#FreeSocialImg,
#SocialImg {
    border-radius: 20px;
    /*border: 2px solid var(--primary-color);*/
}

.btn-check:focus + .btn,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(213 42 69 / 23%)
}

.btn-green-basket {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-green-basket i,
.btn-green-upload a i {
    font-size: 1.2rem;
    font-weight: 300
}

#sayi-alanı {
    position: absolute;
    top: 16%;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.container-basket {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    max-width: 2000px;
    margin: 0 auto;
    width: 100%;
    column-gap: 20px
}

.basket-card,
.basket-card-details {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    margin-bottom: 50px
}

.balances-container-title-icon,
.basket-card-details-title-icon,
.basket-card-title-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 10px
}

.balances-container-title-icon i,
.basket-card-details-title-icon i,
.basket-card-title-icon i {
    font-size: 20px;
    color: var(--white-color)
}

.basket-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    padding: 30px 10px
}

.badge-delete,
.btn-green-check {
    color: var(--white-color);
    justify-content: center;
    cursor: pointer
}

.badge-delete,
.input-icon-container {
    position: relative;
    align-items: center;
    display: flex
}

.badge-delete {
    background-color: #f3484e;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    top: 18px
}

.basket-card-details,
.basket-card-details-content-coupons {
    border-radius: 10px;
    height: 100%;
    margin-top: 20px;
    display: flex
}

.badge-delete i {
    font-size: .8rem
}

.basket-card-details {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 479px
}

.basket-card-details-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
    padding: 30px
}

.basket-card-details-content-item,
.push-content-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #70707073;
    padding: 10px 0
}

.basket-card-details-content-item p,
.basket-card-details-content-item span {
    font-size: 18px;
    font-weight: 500;
    color: #191b2a
}

.transparent-select:focus {
    outline: 0;
    background-color: rgba(237, 240, 245, .6)
}

.transparent-select::-ms-expand {
    display: none
}

.transparent-select option {
    background-color: transparent;
    color: #000
}

.basket-card-details-content-coupons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
    padding: 30px;
    background-color: rgba(237, 240, 245, .6);
    width: 100%
}

.basket-card-details-content-coupons p {
    font-size: 18px;
    font-weight: 400;
    color: #191b2a;
    text-align: center
}

.basket-card-details-content-coupons-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 10px
}

.input-icon-container {
    background-color: var(--background-light);
    border: 2px solid var(--primary-color);
    border-radius: 10px
}

.input-icon-container input,
.input-icon-container select {
    width: 200px;
    height: 65px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    padding-left: 40px;
    font-size: 18px;
    font-weight: 300
}

.btn-green-check {
    height: 65px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 18px
}

.btn-orange-check {
    height: 65px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: var(--white-color);
}

.w-65px {
    width: 65px !important
}

.sub-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
    float: left;
    width: 100%;
    text-align: "center"
}

.swal-toast-popup .swal2-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px
}

.swal-toast-popup .swal2-html-container {
    font-size: 14px;
    font-weight: 400;
}

.swal-toast-popup .swal2-html-container {
    font-size: 14px !important;
    font-weight: 400 !important
}

.swal-toast-popup .swal2-html-container b {
    font-weight: 700 !important
}

.swal-toast-popup .swal2-icon {
    font-size: 24px !important;
    border: none !important;
    box-shadow: none !important;
    background: 0 0 !important
}

.swal2-popup.swal2-toast .swal2-html-container,
.swal2-popup.swal2-toast .swal2-title {
    margin: 0 !important;
}

/*.modal-wrapper {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: rgb(255 255 255 / .38);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 9999*/
/*}*/

/*.modal-content {*/
/*    border: 2px dashed var(--primary-color);*/
/*    position: relative;*/
/*    width: 400px;*/
/*    height: 700px;*/
/*    border-radius: 12px;*/
/*    overflow: hidden;*/
/*    background: rgb(0 0 0 / .21);*/
/*    box-shadow: 0 10px 20px rgb(255 255 255 / .5)*/
/*}*/

/*.modal-content video {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    z-index: -1*/
/*}*/

/*.modal-body {*/
/*    position: relative;*/
/*    z-index: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: flex-end;*/
/*    align-items: center;*/
/*    padding: 20px;*/
/*    height: 100%*/
/*}*/

/*.modal-coupon-container {*/
/*    background: var(--primary-color);*/
/*    border: 2px dashed var(--white-color);*/
/*    border-radius: 8px;*/
/*    padding: 10px 20px;*/
/*    margin-bottom: 10px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 90%;*/
/*    box-shadow: 0 4px 6px rgb(255 255 255 / .3)*/
/*}*/

.info-right,
.settings-menu-user {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15)
}

.modal-coupon-code {
    font-size: 20px;
    font-weight: 700;
    color: var(--white-color);
    text-align: center;
    transition: .3s
}

.modal-copy-icon {
    font-size: 20px;
    color: var(--white-color);
    cursor: pointer;
    margin-left: 10px;
    transition: transform .3s
}

.modal-copy-icon:hover {
    transform: scale(1.2)
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--white-color) 0;
    border: none;
    font-size: 22px;
    font-weight: 700;
    color: var(--white-color);
    cursor: pointer;
    z-index: 2
}

.btn-rank {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #3474f670;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px
}

.btn-rank-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    row-gap: 0
}

.btn-rank-text p {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0
}

.btn-rank-text span {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 700
}

.btn-rank i {
    color: var(--primary-color);
}

.btn-orange-settings {
    width: 160px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    position: relative
}

.btn-orange-settings i {
    font-size: 1rem;
    border: 2px solid transparent;
}

.btn-orange-settings:hover {
    background: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    transition: .3s ease-in-out
}

.btn-orange-settings ul.settings-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: var(--white-color);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1;
    width: 317px;
    border-radius: 10px
}

.btn-orange-settings ul.settings-menu li {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid #70707036
}

.btn-orange-settings ul.settings-menu li a {
    color: #191b2a;
    display: block;
    font-size: 18px;
    font-weight: 500
}

.settings-menu-user {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    column-gap: 30px;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px
}

.info,
.settings-menu-wallet {
    display: flex;
    flex-direction: row
}

.settings-menu-upload,
.settings-upload {
    padding: 10px 15px;
    background-color: var(--primary-color)
}

.settings-menu li a i {
    color: #707070;
    font-size: 1.2rem
}

.settings-menu-wallet {
    justify-content: start;
    align-items: center;
    column-gap: 10px
}

.settings-menu-icon {
    color: var(--primary-color);
    font-size: 2.5rem !important
}

.settings-menu-text p {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: -1px
}

.settings-menu-p {
    font-size: 9px;
    font-weight: 600;
    color: var(--white-color)
}

.settings-menu-upload {
    color: var(--white-color);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.settings-upload {
    color: var(--white-color) !important
}

.btn-green-upload a span,
.settings-upload span {
    font-size: 9px;
    font-weight: 600
}

.info-text p,
.info-user {
    font-size: 26px;
    font-weight: 600
}

.info {
    justify-content: space-around;
    align-items: center;
    background-color: var(--primary-color);
    height: 250px;
    width: 100%;
    margin: 0 auto
}

.info-right,
.info-user {
    background-color: var(--white-color);
    display: flex
}

.info-left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 14px
}

.info-user {
    border-radius: 50%;
    width: 88px;
    height: 88px;
    color: var(--primary-color);
    justify-content: center;
    align-items: center
}

.info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1px
}

.info-text p {
    color: var(--white-color)
}

.info-right {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 60px;
    border-radius: 10px;
    padding: 16px
}

.info-right-wallet {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: -20px;
    column-gap: 5px;
    color: var(--primary-color)
}

.info-right-wallet i {
    font-size: 40px
}

.info-right-text p {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: -1px
}

.btn-green-upload {
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    cursor: pointer;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-green-balance-2:hover,
.btn-green-balance:hover,
.btn-green-order:hover,
.btn-green-support:hover,
.btn-green-upload:hover {
    background-color: #2e9e73;
    transition: .3s ease-in-out
}

.btn-green-upload a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px
}

.tabs-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    height: 85px;
    margin-left: auto;
    padding-right: 120px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    overflow: hidden;
    transition: max-height .3s
}

.orders,
.password-change,
.personal-info,
.push {
    display: flex;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15)
}

.tabs-menu-item-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #191b2a;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding: 0 20px
}

.tabs-menu-item-link::before {
    content: '';
    position: absolute;
    left: 0;
    height: 53px;
    border-left: 1px solid #191b2a83
}

.tabs-menu-item-link:first-child::before {
    display: none
}

.orders {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 1300px;
    height: 457px;
    margin: 50px auto;
    border-radius: 10px
}

.connect-content,
.orders-content,
.support-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    row-gap: 20px
}

.orders-content p {
    font-size: 18px;
    font-weight: 500;
    color: #212529;
    opacity: .5
}

.orders-icon,
.push-icon {
    font-size: 40px;
    color: var(--primary-color)
}

.btn-green-order {
    width: 252px;
    height: 60px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center
}


.responsive-table {
    width: 100%;
    overflow-x: auto;
    padding: 0 20px
}

table {
    width: 100%;
    border-collapse: collapse
}

th {
    color: var(--primary-color);
    font-weight: 600;
    text-align: left;
    font-size: 18px
}

.push-content p,
td {
    font-size: 18px;
    font-weight: 500;
    color: #191b2a
}

tr {
    border-bottom: 1px solid #70707071
}

td {
    text-align: left
}


.basket-card-content .order {
    font-size: 17px;
    margin-top: -25px
}

.circle-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin-top: 20px
}

.circle-pagination-item {
    background-color: #70707094;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer
}

.push,
.toggle-on,
.toggle-switch {
    background-color: var(--white-color)
}


.push {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
    margin: 50px auto;
    border-radius: 10px
}

.password-change-content,
.personal-info-content,
.push-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    padding: 30px 80px
}

.push-content p {
    opacity: .5
}

.toggle-switch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    width: 118px;
    height: 38px;
    border: 2px solid #eaeaeb;
    padding: 10px;
    cursor: pointer
}

.toggle-off,
.toggle-on {
    width: 50px;
    height: 24px;
    color: var(--white-color);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center
}

.toggle-on {
    color: #707070
}

.toggle-off {
    background-color: #d34646
}

.container-personal-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 2000px;
    margin: 50px auto 0;
    width: 100%;
    column-gap: 100px
}

.password-change,
.personal-info {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 600px;
    height: 566px;
    border-radius: 10px
}

.input-group {
    position: relative;
    width: 80%;
    height: 90px;
}

.input-group-2 {
    position: relative;
    width: 400px;
    height: 90px
}

.input-group-2 img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    filter: hue-rotate(200deg);
}

.input-group-2 input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    background-color: var(--background-light);
    padding: 0 60px;
    font-size: 18px;
    font-weight: 300
}

.btn-green-login {
    width: 252px;
    height: 60px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.coupon-title,
.coupon-usage {
    display: flex;
    border-bottom: 1px solid #707070
}

.coupon-info,
.coupon-input input,
.coupon-title .h2title,
.coupon-usage p {
    color: #191b2a;
    font-size: 16px
}

.btn-green-balance-2 i,
.btn-green-login i {
    font-size: 1.5rem
}

.btn-green-login:hover {
    background-color: var(--primary-color);
    transition: .3s ease-in-out
}

.coupons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 50px 0
}

.coupon {
    width: 380px;
    height: 441px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #e9f3f7;
    border-radius: 10px
}

.coupon-title {
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 20px 14px
}

.coupon-title .h2title {
    font-weight: 600
}

.coupon-title-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color) 7a;
    padding: 12px;
    border-radius: 10px
}

.coupon-info {
    text-align: center;
    font-weight: 400
}

.coupon-content {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 40px;
    margin-bottom: 35px
}

.coupon-usage {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0
}

.coupon-usage p {
    font-weight: 400
}

.coupon-input {
    position: relative;
    width: 100%
}

.coupon-input input {
    width: 100%;
    height: 50px;
    border: 2px dashed var(--primary-color);
    border-radius: 10px;
    background-color: #46d3a918;
    padding: 0 50px 0 20px;
    font-weight: 600
}

.coupon-input input::placeholder {
    font-size: 16px;
    font-weight: 600;
    color: #191b2a72
}

.btn-green-copy {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: 400;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center
}

.coupons-container,
.supports {
    background-color: var(--white-color);
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    display: flex
}

.coupons-container {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 1300px;
    height: 1162px
}

.text-muted {
    color: #707070
}

.supports {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 1300px
}

.btn-green-support {
    width: 494px;
    height: 92px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 27px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    margin: 0 auto 50px
}

.btn-green-support i {
    font-size: 2rem;
    font-weight: 500
}

.balances-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 1300px;
    height: 940px;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15)
}

.balances-container-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 20px 14px;
    border-bottom: 2px solid var(--primary-color)
}

.balance,
.balance-price {
    padding: 20px;
    border-radius: 10px
}

.balances-container-title .h2title {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 700
}

.balance-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    column-gap: 40px;
    margin-top: 30px
}

.balance {
    background-color: #e9f3f7;
    width: 580px;
    height: 150px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.balance-left {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 20px
}

.balance-price {
    font-size: 35px;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--white-color)
}

.balance-text {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start
}

.btn-green-balance,
.btn-green-balance-2 {
    color: var(--white-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    font-weight: 600
}

.balance-text p {
    color: #191b2a
}

.btn-green-balance {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    justify-content: center;
    align-items: center
}

.balance-row-add {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 167px;
    column-gap: 40px;
    margin-top: 30px;
    padding: 0 20px;
    background-color: #e9f3f7;
    border-radius: 10px
}

.balance-input {
    position: relative;
    width: 405px
}

.balance-input input {
    width: 405px;
    height: 100px;
    border: none;
    border-radius: 10px;
    background-color: var(--white-color);
    padding: 0 50px 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #70707076
}

.balance-input input::placeholder {
    font-size: 16px;
    font-weight: 600;
    color: #70707076
}

.balance-input span {
    position: absolute;
    font-size: 72px;
    color: #707070;
    opacity: .5;
    right: 20px;
    top: 5px
}

.btn-green-balance-2 {
    width: 252px;
    height: 60px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    justify-content: center;
    align-items: center;
    column-gap: 10px
}

.connect,
.market-container {
    margin: 50px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15)
}

.market-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 1300px;
    height: 416px;
    border-radius: 10px
}

.market-container-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    padding: 30px
}

.market-container-content-link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: var(--primary-color);
    border-radius: 10px
}

.market-container-content-link-icon {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 20px 14px
}

.market-container-content-link-icon i {
    font-size: 20px;
    color: var(--primary-color);
    background-color: var(--white-color);
    padding: 12px;
    border-radius: 10px
}

.market-container-content-link-icon p {
    font-size: 18px;
    font-weight: 600;
    color: var(--white-color)
}

.market-container-content-link-input {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 20px 14px;
    position: relative
}

.btn-green-copy-2,
.chat-input button {
    position: absolute;
    display: flex;
    cursor: pointer
}

.market-container-content-link-input input {
    width: 636px;
    height: 62px;
    border: none;
    border-radius: 10px;
    background-color: var(--white-color);
    padding: 0 50px 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #707070
}

.btn-green-copy-2 {
    width: 156px;
    height: 46px;
    border: none;
    border-radius: 10px;
    background-color: #46d3a92c;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    right: 30px
}

.connect,
.market-cart,
.market-cart i {
    border-radius: 10px
}

.market-carts {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%
}

.market-cart {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    width: 600px;
    height: 108px;
    padding: 20px 14px;
    background-color: #e9f3f7
}

.market-cart i {
    font-size: 32px;
    color: var(--primary-color);
    background-color: var(--white-color);
    padding: 14px
}

.market-cart span {
    font-size: 34px;
    font-weight: 600;
    color: var(--primary-color)
}

.market-cart-text p {
    font-size: 19px;
    font-weight: 500;
    color: #707070
}

.connect {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: var(--white-color);
    width: 1300px;
    height: 400px
}

.right-align {
    text-align: right
}

.chat-input {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    margin-bottom: 80px
}

.chat-input input {
    flex: 1;
    padding: 50px;
    color: #000;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    background-color: #e9f3f7;
    border: 1px solid #e9f3f7;
    border-radius: 5px;
    outline: 0
}

.chat-input button {
    padding: 15px;
    background-color: var(--primary-color);
    border: none;
    color: var(--white-color);
    right: 20px;
    border-radius: 5px;
    top: 50px;
    font-weight: 600;
    gap: 20px;
    justify-content: space-between;
    align-items: center
}

.chat-input button:hover {
    background-color: #2e9e73
}

.support-div {
    padding: 100px 100px 200px
}

.support-request-container {
    background-color: var(--white-color);
    margin: 0 auto;
    max-width: 1300px;
    border-radius: 10px
}

.support-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--primary-color);
    padding: 20px 10px
}

.support-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color) 7a;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    color: var(--white-color)
}

.come,
.support-contact {
    flex-direction: column;
    display: flex
}

.support-header-title {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: semibold;
    line-height: 24px
}

.support-contact {
    padding: 40px;
    overflow-x: hidden
}

.support-message {
    margin-bottom: 20px;
    padding: 30px;
    border: 1px solid rgba(233, 243, 247, .31);
    border-radius: 5px;
    background-color: rgba(233, 243, 247, .31);
    width: 900px;
    color: #707070
}

.come {
    align-items: start;
    float: left
}

.go {
    display: flex;
    flex-direction: column;
    align-items: start;
    float: right;
    margin-left: 350px
}

.message-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 600px;
    margin-bottom: 10px
}

.support-message-author {
    font-weight: 600;
    color: var(--primary-color)
}

.support-message-date {
    font-size: .9em;
    color: #000
}

.support-reason,
.support-select {
    font-size: 18px;
    line-height: 24px
}

.support-reason {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 5px
}

.support-select {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e9f3f7;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
    background-color: #e9f3f7;
    outline: 0
}

.support-button {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 10px;
    cursor: pointer
}

.support-button:hover {
    background-color: #218838
}

.messages-supports {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden
}

.messages-supports::-webkit-scrollbar {
    width: 5px
}

.messages-supports::-webkit-scrollbar-thumb {
    background-color: var(--white-color);
    border-radius: 10px
}

.messages-supports::-webkit-scrollbar-track {
    background-color: #e2e2e2;
    border-radius: 10px
}


.float-items {
    position: fixed;
    bottom: 95px;
    right: 11px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-flow: column
}

.float-items a {
    color: var(--white-color);
    width: 60px;
    height: 60px;
    box-shadow: 2px 2px 3px #999;
    text-align: center;
    border-radius: 50%;
    transition: .5s;
    font-size: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.whatsapp {
    background-color: #25d366 !important
}

#hj-survey-toggle-1 {
    margin-bottom: 70px !important;
    margin-right: 54px !important;
}


.comments-area .comment {
    padding: 14px 30px;
    border-radius: 10px;
    background-color: #DDEBFD;
    width: calc(50% - 5px);
    margin-bottom: 1.9rem
}

.comments-area .comment .comment-meta .stars i {
    color: var(--primary-color);
}

.comment-meta .user-name {
    font: normal normal bold 20px/24px Rubik;
    letter-spacing: 0px;
    color: #17305A;

}

.comments-area .slick-dots li button:before {
    opacity: .25;
    color: var(--white-color)
}

.slick-dots li.slick-active button:before {
    opacity: .75 !important;
    color: var(--white-color) !important
}


.headersiparis {
    background-color: var(--primary-color);
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid white;
}


.headersiparis .h6text {
    font-size: 20px;
    font-weight: 600;
    color: var(--white-color);
    padding: 20px 50px;
}

#headersiparisForm {
    gap: 10px;
    width: auto
}

#headersiparisForm input[type=text] {
    flex-grow: 1;
    min-width: 200px;
    border: 2px solid var(--white-color);
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: #333
}

#headersiparisForm .btn {
    padding: 10px 20px;
    border-radius: 20px;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    transition: background-color .3s, color .3s
}

#headersiparisForm .btn-cancel,
#headersiparisForm .btn-white {
    background-color: var(--white-color);
    color: #000
}

#headersiparisForm .btn-white:hover {
    background-color: #e2e6ea
}

#headersiparisForm .btn-cancel:hover {

    background-color: var(--primary-color);
    border: 1px solid #f0f0f0;
    color: var(--white-color);

}

#headersiparisForm i {
    margin-right: 5px
}

#headersiparisForm,
.headersiparis {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ordercheckstatus {
    display: flex;
    justify-content: center;

}

.ordercheckstatus a {
    font-size: 14px;
    font-weight: 600;
    color: #17305A;
    cursor: pointer;
}

.ordercheckstatus i,
.tophead span i {
    font-size: 20px;
    color: #17305A;
    margin-right: 10px;

}


.panel {
    position: fixed;
    left: -260px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    height: 250px;
    background: linear-gradient(135deg, var(--primary-color), #ff3b5c);
    color: white;
    padding: 10px;
    border-radius: 0 25px 25px 0;
    transition: left 0.3s ease-in-out;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}

.panel.open {
    left: 0;
}

.toggle-btn {
    z-index: 999;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary-color), #ff3b5c);
    color: white;
    border: none;
    padding: 12px 15px;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease-in-out;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.toggle-btn:hover {
    background: #ff5c73;
}

.panel.open + .toggle-btn {
    left: 260px;
}

.panel .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    transition: background 0.3s;
    text-decoration: none;
    cursor: pointer;
}

.panel .contact-item span {
    color: white;
}

.panel .contact-item i {
    color: white;
    font-size: 24px;
}

.panel .contact-item:hover {
    background: rgba(255, 255, 255, 0.4);
}


.new-popuper-packages .socialMediaServiceDetails {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.new-popuper-packages .socialMediaServiceDetails .item .card {
    min-width: 150px;
    max-width: 150px;
    min-height: 150px !important;
    max-height: 150px !important;
    cursor: pointer;

}

.new-popuper-packages .socialMediaServiceDetails .item .card-body {
    justify-content: center;
}

.new-popuper-packages .socialMediaServiceDetails .item .card-body .price {
    font-size: 22px;
}

.new-popuper-packages .socialMediaServiceDetails .item .card-body p {
    font-size: 15px;
}

#free_count_of_unit {
    background: var(--background-light);
}

.new-popuper-packages .socialMediaServiceDetails .item .card-body .old-price {
    background: var(--primary-color);
    color: white;
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
}


.new-popuper-packages .sepetInsert .slctd {
    border: 2px solid green !important;
    border-radius: 20px !important;
}

.new-popuper-packages .calculateArea {
    margin-top: 10px;
    height: 75px;
    padding: 20px;
}

.new-popuper-packages .SocialMediaCardList {
    padding-top: 15px;
}

.new-popuper-packages .SocialMediaCardList .input-group-text {
    padding: 1.5rem !important;
}

.new-popuper-packages .SocialMediaCardList .input-group img {
    position: absolute;
    left: 7px;
}

.new-popuper-packages #FreeSocialImg,
#SocialImg {
    width: 25px !important;
    height: 25px !important;
    margin-top: 24px;
}

.new-popuper-packages .calculateArea .calculated .small {
    position: relative;
    top: 10px;
    font-size: 16px;
}

.new-popuper-packages .SocialMediaCardList .info-box {
    opacity: 1;
    height: 25px;
    margin-top: .5rem;
}

.new-popuper-packages .info-box p {
    font-size: 13px;
    opacity: 1;

}

.new-popuper-packages #paid_process {
    margin-top: 10px;
}


.new-popuper-packages .input-group i:first-child,
.input-group-2 i:first-child {
    left: 7px;
    font-size: 26px;
}

.new-popuper-packages .input-group i {
    position: absolute;
    top: 19%;
    color: var(--primary-color);
}


.show-mobile {
    display: none !important;
}


.item.instagram {
    background-color: var(--instagram-color);
}

.item.tiktok {
    background-color: #000000;
}

.item.youtube {
    background-color: var(--youtube-color);
}

.item.twitch {
    background-color: var(--twitch-color);;
}

.item.facebook {
    background-color: var(--facebook-color);
}

.item.twitter {
    background-color: var(--twitter-color);
}

.item.threads {
    background-color: #000000;
}

.item.spotify {
    background-color: var(--spotify-color);
}

.item.telegram {
    background-color: var(--telegram-color);
}

.item.linkedin {
    background-color: #0A66C2;
}

.item.google {
    background-color: var(--google-color);
}

.item.snapchat {
    background-color: var(--snapchat-color);
}

.item.kick {
    background-color: #52C41A;
}

.item.soundcloud {
    background-color: #FF8800;
}

.item.star {
    background-color: var(--free-color);;
}

.info__area {
    background-color: #061a3b;
}

.info__area .col-lg-3 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.info__area .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #17305a;
    border-radius: 8px;
    margin-right: 15px;
}

.info__area .icon i {
    font-size: 1.8rem;
    color: var(--white-color);
}

.info__area .r {
    flex: 1;
}

.info__area .number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-color);
}

.info__area .text {
    font-size: 0.9rem;
    color: var(--white-color);
}

@media (max-width: 767px) {
    .info__area {
        display: none;
    }
}

/* Plyr kontrolleri için koyu tema (isteğe bağlı) */
.plyr--video {
    background: #000;
}

.plyr__control--overlaid {
    background: rgba(0, 0, 0, 0.8);
}

.plyr--video .plyr__controls {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.profile-image-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    position: relative; /* İkonun konumlandırması için */
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-link-icon {
    position: absolute;
    bottom: 0px;
    right: 2px;
    color: var(--white-color);
    background-color: rgb(44 223 170);
    border-radius: 50%;
    padding: 6px 9px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.profile-link-icon:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Hover'da daha koyu arka plan */
}

/* Gönderi Kartları */
.post-card {
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.post-thumbnail {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.post-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

.post-type-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.post-caption {
    padding: 10px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#profile-info .card {
    height: auto;
    width: 100%;
}

/* Modal Stiller */
#profile-info .modal-body {
    padding: 0;
}

#profile-info .modal-image, .modal-video {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
}

/* Swiper Stiller */
#profile-info.modal .swiper {
    width: 100%;
    height: 500px;
}

#profile-info .modal .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

#profile-info .modal .swiper-slide img, .modal .swiper-slide video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

#profile-info .modal .swiper-button-next, .modal .swiper-button-prev {
    color: var(--white-color);
    background-color: rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profile-info .modal .swiper-button-next:after, .modal .swiper-button-prev:after {
    font-size: 20px;
}

#profile-info .modal .swiper-pagination-bullet {
    background-color: var(--white-color);
}

/* Infinity Scroll */
#load-more-indicator {
    margin-top: 20px;
}

/* Arama Kutusu Stili */
.search-container {
    margin-bottom: 20px;
    background: var(--primary-color);
    padding: 50px 10px;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.search-container input {
    height: 50px;
    border-radius: 8px 0px 0px 8px;
    border: none;
}

.search-container .btn {
    background: #DDEBFD 0% 0% no-repeat padding-box;
    height: 52px;
    border-radius: 0px 8px 8px 0px;
    font: normal normal bold 18px/22px Rubik;
    margin-right: -1px;
    color: var(--primary-color);
}


.search-container .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

.search-container .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.search-container .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Sekmeler Stili */
.nav-tabs {
    border-bottom: none;
    justify-content: center;
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    color: #888;
    font: 14px;
    text-transform: uppercase;
    border: none;
    padding: 10px 20px;
}

.nav-tabs .nav-link.active {
    color: #096ef2;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #096ef2;
}


.highlights-container {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 0;
    margin-bottom: 20px;
}

.highlights-container::-webkit-scrollbar {
    height: 8px;
}

.highlights-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.highlight-item {
    text-align: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.highlight-item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--white-color);
    object-fit: cover;
}

.highlight-item p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #333;
}

.highlight-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.highlight-media-item {
    flex: 0 0 200px;
}

.highlight-media-item video,
.highlight-media-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.verified-badge i {
    font-size: 1.75rem;
}

.btn-blue {
    background: #096EF2;
    height: 50px !important;
    color: white;
    font: normal normal 600 20px / 30px Poppins;
}

.btn-blue:hover {
    background-color: transparent;
    border: 3px solid #096EF2;
    color: #096EF2;
}

.service-title {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}


.service-title .title {
    min-width: max-content;
    font: normal normal 600 24px / 35px Poppins;
}

.service-title .logo {
    padding: 0px 7px;
    margin-right: 10px;
    border-radius: 20%;
}

.service-title .logo i {
    font-size: 30px;
    color: var(--white-color);
    padding: 0px;
}

.instagram .logo {
    background-color: #F4068E !important;
}

.tiktok .logo {
    background-color: #000000 !important;
}


.tiktok .logo {
    background-color: #000000 !important;
}

.service-title .line {
    height: 2px;
    width: 100%;
    margin-left: 20px;
}

.tiktok .line {
    background-color: #000000;
}

.instagram .line {
    background-color: #F4068E;
}

.slogan__component {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    gap: 1rem;

}

.slogan__component .slogan_text h1 {
    margin-bottom: 20px;
    font: normal normal bold 48px/57px Rubik;
}

.slogan__component .slogan_text h1 b {
    color: var(--primary-color)
}

.slogan__component .slogan_text p {
    margin-bottom: 30px;
    font: normal normal normal 18px/22px Rubik;
}

.slogan__component .slogan_img img {
    max-width: 100%;
    height: auto;
}

.slogan__component .slogan_text {
    max-width: 30%;
    padding-right: 20px;
}

.slogan__component .slogan_img {
    max-width: 60%;
}

.header__component {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white-color);
    background-color: #3473f4;
    border-radius: 10px;
    padding-left: 70px !important;
    padding-right: 70px !important;
    margin-top: 1rem;
}

.header__component h1 {
    font: normal normal bold 64px/76px Rubik;
    margin-bottom: 20px;
}

.header__component p {
    font: normal normal normal 18px/22px Rubik;
    margin-bottom: 30px;
    max-width: 75%;
}

.header__component a {
    background: #DDEBFD 0% 0% no-repeat padding-box;
    border-radius: 8px;
    color: var(--primary-color);
    padding: 10px 20px;
    text-decoration: none;
    font: normal normal bold 18px/22px Rubik;
}

.header__component a:hover {
    background: var(--white-color);
    color: var(--primary-color);
}

.header__component img {
    max-width: 50%;
    height: auto;
}


@media (max-width: 767.98px) {
    .header__component img {
        display: none;
    }

    .header__component {
        margin-top: 200px;
        padding: 20px;
        width: 95%;

    }

    .header__component h1 {
        font: normal normal bold 32px/38px Rubik;
        margin-bottom: 10px;
        max-width: 100%;
    }

    .header__component p {
        font: normal normal normal 16px/20px Rubik;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .header__component a {
        background: #DDEBFD 0% 0% no-repeat padding-box;
        border-radius: 8px;
        color: var(--primary-color);
        padding: 10px 20px;
        text-decoration: none;
        font: normal normal bold 16px/20px Rubik;
    }
}

.popular_packages_component {
    color: var(--white-color);
    background-color: #3473f4;
    background-image: url('/uploads/populer-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 20px 70px;
    margin-top: 60px;
}

.popular_packages_component i.instagram{
    color: var(--instagram-color) !important;
}

.popular_packages_component i.tiktok {
    color: var(--tiktok-color) !important;
}
.popular_packages_component i.youtube {
    color: var(--youtube-color) !important;
}

.popular_packages_component i.twitch {
    color: var(--twitch-color) !important;
}

.popular_packages_component i.facebook {
    color: var(--facebook-color) !important;
}
.popular_packages_component i.twitter {
    color: var(--twitter-color) !important;
}
.popular_packages_component i.threads {
    color: var(--threads-color) !important;
}

.popular_packages_component i.spotify {
    color: var(--spotify-color) !important;
}
.popular_packages_component i.telegram {
    color: var(--telegram-color) !important;
}
.popular_packages_component i.linkedin {
    color: var(--linkedin-color) !important;
}
.popular_packages_component i.google {
    color: var(--google-color) !important;
}
.popular_packages_component i.snapchat {
    color: var(--snapchat-color) !important;
}
.popular_packages_component i.kick {
    color: var(--kick-color) !important;
}



.popular_packages_component h1 {
    font: normal normal bold 48px/57px Rubik;
    margin-bottom: 20px;
    max-width: 50%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* max 2 satır göster */
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    text-align: center;
}

.popular_packages_component p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.popular_packages_component .nav-tabs .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;

}

.popular_packages_component .nav-tabs .nav-link {
    background-color: #8EA0BD;
    border-radius: 8px;
    color: var(--white-color) !important;
    font-family: Rubik;
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
}

.popular_packages_component .nav-tabs .nav-link i {
    color: var(--white-color) !important;
    font-family: Rubik;
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
}

.popular_packages_component .nav-tabs .nav-link.active {
    border-bottom: none;
}

.popular_packages_component .nav-tabs .nav-link.active.instagram {
    background-color: #F4068E;
}

.popular_packages_component .nav-tabs .nav-link.active.tiktok {
    background-color: #000000;
}

.popular_packages_component .nav-tabs .nav-link.active.youtube {
    background-color: var(--youtube-color);
}

.popular_packages_component .nav-tabs .nav-link.active.twitch {
    background-color: var(--twitch-color);;
}

.popular_packages_component .nav-tabs .nav-link.active.facebook {
    background-color: var(--facebook-color);
}

.popular_packages_component .nav-tabs .nav-link.active.twitter {
    background-color: var(--twitter-color);
}

.popular_packages_component .nav-tabs .nav-link.active.threads {
    background-color: #000000;
}

.popular_packages_component .nav-tabs .nav-link.active.spotify {
    background-color: var(--spotify-color);
}

.popular_packages_component .nav-tabs .nav-link.active.telegram {
    background-color: var(--telegram-color);
}

.popular_packages_component .nav-tabs .nav-link.active.linkedin {
    background-color: #0A66C2;
}


.popular_packages_component .package-item {
    background-color: var(--white-color);
    border-radius: 17px;
    color: #17305A;
    height: 100%;
}

.popular_packages_component .package-item .title {
    font: normal normal 900 18px/22px Rubik;
    color: #17305A;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;

}

.popular_packages_component .package-item .subtitle {
    font: normal normal 400 16px/19px Rubik;
    color: #17305A;
    padding-left: 15px;
    padding-right: 15px;

}

.popular_packages_component .package-item ul li {
    border-bottom: 1px solid #D3E3EC;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 2px;
    font: normal normal normal 16px/17px Rubik;
    color: #17305A;

}

.popular_packages_component .package-item .promote {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    background: #18D3A61A 0% 0% no-repeat padding-box;
    font: normal normal bold 16px/14px Rubik;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
}

.popular_packages_component .package-item .promote i {
    font: normal normal bold 12px/14px Rubik;
    color: #18D3A6;
}

.popular_packages_component .package-item .promote span {
    font: normal normal bold 12px/14px Rubik;
    color: #18D3A6;
}


.popular_packages_component .package-item .subtitle::after {
    content: "";
    display: flex;
    align-items: center;
    margin-top: 10px; /* çizgiyi yazının altına almak için */
    gap: 5px;
    left: 7%;
}

.popular_packages_component .package-item .price-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}


.popular_packages_component .package-item.instagram .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #E12F6D;
}

.popular_packages_component .package-item.instagram .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #E12F6D;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.tiktok .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #000000;
}

.popular_packages_component .package-item.tiktok .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.youtube .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--youtube-color);
}

.popular_packages_component .package-item.youtube .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--youtube-color);
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.twitch .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--twitch-color);;
}

.popular_packages_component .package-item.twitch .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--twitch-color);;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.facebook .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #3b5998;
}

.popular_packages_component .package-item.facebook .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #3b5998;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.twitter .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--twitter-color);
}

.popular_packages_component .package-item.twitter .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--twitter-color);
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.threads .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #000000;
}

.popular_packages_component .package-item.threads .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #000000;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.spotify .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--spotify-color);
}

.popular_packages_component .package-item.spotify .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--spotify-color);
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.telegram .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #0088cc;
}

.popular_packages_component .package-item.telegram .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #0088cc;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.linkedin .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #0077B5;
}

.popular_packages_component .package-item.linkedin .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #0077B5;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.google .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #4285F4;
}

.popular_packages_component .package-item.google .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #4285F4;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.snapchat .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--white-color) C00;
}

.popular_packages_component .package-item.snapchat .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--white-color) C00;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.kick .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #52C41A;
}

.popular_packages_component .package-item.kick .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #52C41A;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.soundcloud .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid #FF8800;
}

.popular_packages_component .package-item.soundcloud .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid #FF8800;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item.star .subtitle::after {
    content: "";
    display: block;
    margin-left: 5px; /* soldan 5px boşluk */
    position: relative;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--free-color);;
}

.popular_packages_component .package-item.star .subtitle::before {
    content: "";
    position: absolute;
    left: 10%;
    top: 63px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--free-color);;
    border-radius: 50%;
    background-color: transparent;
}

.popular_packages_component .package-item .price-area {
    padding-top: 10px;
    padding-bottom: 10px;
}

.popular_packages_component .package-item .price-area .old-price {
    text-decoration: line-through;
    font: normal normal normal 12px/14px Rubik;
    color: #8187A0;

}

.popular_packages_component .package-item.instagram .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #E12F6D;
}

.popular_packages_component .package-item.tiktok .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #000000;
}

.popular_packages_component .package-item.youtube .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--youtube-color);
}

.popular_packages_component .package-item.twitch .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--twitch-color);;
}

.popular_packages_component .package-item.facebook .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #3b5998;
}

.popular_packages_component .package-item.twitter .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--twitter-color);
}

.popular_packages_component .package-item.threads .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #000000;
}

.popular_packages_component .package-item.spotify .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--spotify-color);
}

.popular_packages_component .package-item.telegram .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #0088cc;
}

.popular_packages_component .package-item.linkedin .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #0077B5;
}

.popular_packages_component .package-item.google .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #4285F4;
}

.popular_packages_component .package-item.snapchat .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--white-color) C00;
}

.popular_packages_component .package-item.kick .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #52C41A;
}

.popular_packages_component .package-item.soundcloud .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: #FF8800;
}

.popular_packages_component .package-item.star .price-area .price {
    font: normal normal bold 16px/19px Rubik;
    color: var(--free-color);;
}


.popular_packages_component .package-item.instagram .price-area .buy-button a {
    background: #E12F6D 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.tiktok .price-area .buy-button a {
    background: #000000 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.youtube .price-area .buy-button a {
    background: var(--youtube-color) 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.twitch .price-area .buy-button a {
    background: var(--twitch-color) 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.facebook .price-area .buy-button a {
    background: #3b5998 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.twitter .price-area .buy-button a {
    background: var(--twitter-color) 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.threads .price-area .buy-button a {
    background: #000000 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.spotify .price-area .buy-button a {
    background: var(--spotify-color) 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.telegram .price-area .buy-button a {
    background: #0088cc 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.linkedin .price-area .buy-button a {
    background: #0077B5 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.google .price-area .buy-button a {
    background: #4285F4 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.snapchat .price-area .buy-button a {
    background: var(--white-color) C00 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.kick .price-area .buy-button a {
    background: #52C41A 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.soundcloud .price-area .buy-button a {
    background: #FF8800 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}

.popular_packages_component .package-item.star .price-area .buy-button a {
    background: var(--free-color) 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal bold 14px/14px Rubik;
    color: var(--white-color);
    padding: 10px 20px;
}


.popular_packages_component .swiper {
    padding-bottom: 20px;
}

.popular_packages_component .swiper-slide {
    height: auto;
}

@media (max-width: 767.98px) {
    .popular_packages_component {
        padding: 20px 20px;
    }
}

.bg-shape-1,
.bg-shape-2,
.bg-shape-3 {
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

.bg-shape-1 {
    left: 0;
    top: 35vh;
    width: 500px;
    height: 820px;
    transform: rotate(180deg);
    background-image: url('/uploads/bg-2.svg');
}

.bg-shape-2 {
    right: 0px;
    top: 90vh;
    width: 760px;
    height: 1010px;
    background-image: url('/uploads/bg-1.svg');
}

.bg-shape-3 {
    left: -413px;
    top: 305vh;
    width: 820px;
    height: 820px;
    background-image: url('/uploads/bg-3.svg'); /* Kendi görsel yolunuzu ekleyin */
}

.social-media-item {
    display: flex;
    padding: 5px 0px;
    flex-direction: column;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 17px;

}


#navbarMenu .dropdown-menu .free-tools-bar {
    background-color: #0d6efd;
    padding: 10px;
    color: var(--white-color);
    border-radius: 17px;
}

#navbarMenu .dropdown-menu .icon {
    background-color: var(--white-color);
    padding: 5px 10px;
    border-radius: 17px;
    margin-right: 10px;
    color: #0d6efd;
    font-size: 24px;
}

#navbarMenu .dropdown-menu .text {
    font-size: 22px;
}


#navbarMenu .dropdown-menu .btn-free-tools-bar {
    box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    background-color: var(--white-color);
    color: #0052a0;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 22px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    text-decoration: none;
}

#navbarMenu .dropdown-menu .btn-free-tools-bar:hover {
    background-color: #00386d;
    color: var(--white-color);
}

/* Responsive (ekran genişliği 1199px ve altı) */
@media (max-width: 1199px) {
    #navbarMenu .dropdown-menu .btn-free-tools-bar {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* İkon için (remixicon sınıfı hariç) */
#navbarMenu .dropdown-menu .btn-free-tools-bar i {
    margin-left: 50px;
}


#navbarMenu .dropdown-menu .dropdown-item {
    max-width: 15%;
}

#navbarMenu .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
}

#navbarMenu .dropdown-menu .dropdown-item {
    border-radius: 17px;
}

#navbarMenu .dropdown-menu .dropdown-item i {
    font-size: 2.5rem
}

#navbarMenu .dropdown-menu .dropdown-item .media-name:nth-of-type(1) {
    font-size: 1.2rem;
    font-weight: bold;
}

#navbarMenu .dropdown-menu .dropdown-item .media-name:nth-of-type(2) {
    font-weight: lighter;
}


#navbarMenu .dropdown-menu .dropdown-item:hover .media-name,
#navbarMenu .dropdown-menu .dropdown-item:hover i {
    color: var(--white-color);
}

#navbarMenu .dropdown-menu .dropdown-item.tiktok {
    border: 1px solid #000000;
    color: #000000 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.tiktok:hover {
    background-color: #000000;
    border: 1px solid #000000;
}

#navbarMenu .dropdown-menu .dropdown-item.instagram {
    border: 1px solid #E12F6D;
    color: #E12F6D !important;
}

#navbarMenu .dropdown-menu .dropdown-item.instagram:hover {
    background-color: #E12F6D;
    border: 1px solid #E12F6D;
}

#navbarMenu .dropdown-menu .dropdown-item.youtube {
    border: 1px solid var(--youtube-color);
    color: var(--youtube-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.youtube:hover {
    background-color: var(--youtube-color);
    border: 1px solid var(--youtube-color);
}

#navbarMenu .dropdown-menu .dropdown-item.twitch {
    border: 1px solid var(--twitch-color);;
    color: var(--twitch-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.twitch:hover {
    background-color: var(--twitch-color);;
    border: 1px solid var(--twitch-color);;
}

#navbarMenu .dropdown-menu .dropdown-item.facebook {
    border: 1px solid #3b5998;
    color: #3b5998 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.facebook:hover {
    background-color: #3b5998;
    border: 1px solid #3b5998;
}

#navbarMenu .dropdown-menu .dropdown-item.twitter {
    border: 1px solid var(--twitter-color);
    color: var(--twitter-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.twitter:hover {
    background-color: var(--twitter-color);
    border: 1px solid var(--twitter-color);
}

#navbarMenu .dropdown-menu .dropdown-item.spotify {
    border: 1px solid var(--spotify-color);
    color: var(--spotify-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.spotify:hover {
    background-color: var(--spotify-color);
    border: 1px solid var(--spotify-color);
}

#navbarMenu .dropdown-menu .dropdown-item.telegram {
    border: 1px solid #0088CC;
    color: #0088CC !important;
}

#navbarMenu .dropdown-menu .dropdown-item.telegram:hover {
    background-color: #0088CC;
    border: 1px solid #0088CC;
}

#navbarMenu .dropdown-menu .dropdown-item.linkedin {
    border: 1px solid #0077B5;
    color: #0077B5 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.linkedin:hover {
    background-color: #0077B5;
    border: 1px solid #0077B5;
}

#navbarMenu .dropdown-menu .dropdown-item.kick {
    border: 1px solid #00FF00;
    color: #00FF00 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.kick:hover {
    background-color: #00FF00;
    border: 1px solid #00FF00;
}

#navbarMenu .dropdown-menu .dropdown-item.trovo {
    border: 1px solid #00D4B6;
    color: #00D4B6 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.trovo:hover {
    background-color: #00D4B6;
    border: 1px solid #00D4B6;
}

#navbarMenu .dropdown-menu .dropdown-item.tumblr {
    border: 1px solid #35465C;
    color: #35465C !important;
}

#navbarMenu .dropdown-menu .dropdown-item.tumblr:hover {
    background-color: #35465C;
    border: 1px solid #35465C;
}

#navbarMenu .dropdown-menu .dropdown-item.google {
    border: 1px solid #4285F4;
    color: #4285F4 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.google:hover {
    background-color: #4285F4;
    border: 1px solid #4285F4;
}

#navbarMenu .dropdown-menu .dropdown-item.appstore {
    border: 1px solid #007AFF;
    color: #007AFF !important;
}

#navbarMenu .dropdown-menu .dropdown-item.appstore:hover {
    background-color: #007AFF;
    border: 1px solid #007AFF;
}

#navbarMenu .dropdown-menu .dropdown-item.seo {
    border: 1px solid #4B5EAA;
    color: #4B5EAA !important;
}

#navbarMenu .dropdown-menu .dropdown-item.seo:hover {
    background-color: #4B5EAA;
    border: 1px solid #4B5EAA;
}

#navbarMenu .dropdown-menu .dropdown-item.pinterest {
    border: 1px solid #BD081C;
    color: #BD081C !important;
}

#navbarMenu .dropdown-menu .dropdown-item.pinterest:hover {
    background-color: #BD081C;
    border: 1px solid #BD081C;
}

#navbarMenu .dropdown-menu .dropdown-item.likee {
    border: 1px solid #FF4B4B;
    color: #FF4B4B !important;
}

#navbarMenu .dropdown-menu .dropdown-item.likee:hover {
    background-color: #FF4B4B;
    border: 1px solid #FF4B4B;
}

#navbarMenu .dropdown-menu .dropdown-item.clubhouse {
    border: 1px solid #F1C40F;
    color: #F1C40F !important;
}

#navbarMenu .dropdown-menu .dropdown-item.clubhouse:hover {
    background-color: #F1C40F;
    border: 1px solid #F1C40F;
}

#navbarMenu .dropdown-menu .dropdown-item.opensea {
    border: 1px solid #2081E2;
    color: #2081E2 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.opensea:hover {
    background-color: #2081E2;
    border: 1px solid #2081E2;
}

#navbarMenu .dropdown-menu .dropdown-item.vimeo {
    border: 1px solid #1AB7EA;
    color: #1AB7EA !important;
}

#navbarMenu .dropdown-menu .dropdown-item.vimeo:hover {
    background-color: #1AB7EA;
    border: 1px solid #1AB7EA;
}

#navbarMenu .dropdown-menu .dropdown-item.reddit {
    border: 1px solid #FF4500;
    color: #FF4500 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.reddit:hover {
    background-color: #FF4500;
    border: 1px solid #FF4500;
}

#navbarMenu .dropdown-menu .dropdown-item.dailymotion {
    border: 1px solid #0066DC;
    color: #0066DC !important;
}

#navbarMenu .dropdown-menu .dropdown-item.dailymotion:hover {
    background-color: #0066DC;
    border: 1px solid #0066DC;
}

#navbarMenu .dropdown-menu .dropdown-item.quora {
    border: 1px solid #AA2200;
    color: #AA2200 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.quora:hover {
    background-color: #AA2200;
    border: 1px solid #AA2200;
}

#navbarMenu .dropdown-menu .dropdown-item.reverbnation {
    border: 1px solid #E43526;
    color: #E43526 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.reverbnation:hover {
    background-color: #E43526;
    border: 1px solid #E43526;
}

#navbarMenu .dropdown-menu .dropdown-item.mixcloud {
    border: 1px solid #5000F9;
    color: #5000F9 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.mixcloud:hover {
    background-color: #5000F9;
    border: 1px solid #5000F9;
}

#navbarMenu .dropdown-menu .dropdown-item.vkontakte {
    border: 1px solid #4C75A3;
    color: #4C75A3 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.vkontakte:hover {
    background-color: #4C75A3;
    border: 1px solid #4C75A3;
}

#navbarMenu .dropdown-menu .dropdown-item.coub {
    border: 1px solid #06C;
    color: #06C !important;
}

#navbarMenu .dropdown-menu .dropdown-item.coub:hover {
    background-color: #06C;
    border: 1px solid #06C;
}

#navbarMenu .dropdown-menu .dropdown-item.discord {
    border: 1px solid #5865F2;
    color: #5865F2 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.discord:hover {
    background-color: #5865F2;
    border: 1px solid #5865F2;
}

#navbarMenu .dropdown-menu .dropdown-item.snapchat {
    border: 1px solid var(--snapchat-color);
    color: var(--snapchat-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.snapchat:hover {
    background-color: var(--snapchat-color);
    border: 1px solid var(--snapchat-color);

}

#navbarMenu .dropdown-menu .dropdown-item.kwai {
    border: 1px solid #FF7700;
    color: #FF7700 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.kwai:hover {
    background-color: #FF7700;
    border: 1px solid #FF7700;
}

#navbarMenu .dropdown-menu .dropdown-item.shazam {
    border: 1px solid #0088FF;
    color: #0088FF !important;
}

#navbarMenu .dropdown-menu .dropdown-item.shazam:hover {
    background-color: #0088FF;
    border: 1px solid #0088FF;
}

#navbarMenu .dropdown-menu .dropdown-item.threads {
    border: 1px solid #000000;
    color: #000000 !important;
}

#navbarMenu .dropdown-menu .dropdown-item.threads:hover {
    background-color: #000000;
    border: 1px solid #000000;
}

#navbarMenu .dropdown-menu .dropdown-item.free-services {
    border: 1px solid var(--free-color);
    color: var(--free-color) !important;
}

#navbarMenu .dropdown-menu .dropdown-item.free-services:hover {
    background-color: var(--free-color);
    border: 1px solid var(--free-color);
}

.g-7 {
    gap: .7rem;
}

@media (max-width: 639px) {
    .bg-shape-1,
    .bg-shape-2 {
        display: none;
    }

    .header__component {
        margin-top: 20px;

    }
}

#mobileMenu .navbar-nav .collapse .nav-item .nav-link {
    border-top: 1px solid #8EA0BD;

}

/*instagram, tiktok, twitter, youtube, facebook, spotify, telegram, linkedin, kick, twitch, trovo, tumblr, google, app-store, seo, pinterest, likee, clubhouse, opensea, vimeo, reddit, dailymotion, quora, reverbNation, mixcloud, vkontakte, coub, discord, snapchat, kwai, shazam, threads*/

#mobileMenu .navbar-nav .nav-item.instagram a i {

    color: var(--instagram-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.instagram a {
    text-decoration: none;
    color: var(--instagram-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.tiktok a i {

    color: #000;

    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.tiktok a {
    text-decoration: none;
    color: #000;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.youtube a i {

    color: var(--youtube-color);
    font-weight: lighter;

}

#mobileMenu .navbar-nav .nav-item.youtube a {
    text-decoration: none;
    color: var(--youtube-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.twitch a i {

    color: var(--twitch-color);;

    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.facebook a i {
    color: #3b5998;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.facebook a {
    color: #3b5998;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.twitter a i {
    color: var(--twitter-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.twitter a {
    color: var(--twitter-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.spotify a i {
    color: var(--spotify-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.spotify a {
    color: var(--spotify-color);
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.telegram a i {
    color: #0088cc;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.telegram a {
    color: #0088cc;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.linkedin a i {
    color: #0077B5;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.linkedin a {
    color: #0077B5;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.google a i {
    color: #4285F4;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.google a {
    color: #4285F4;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.snapchat a i {
    color: var(--white-color) C00;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.snapchat a {
    color: var(--white-color) C00;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.kick a i {
    color: #52C41A;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.kick a {
    color: #52C41A;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.soundcloud a i {
    color: #FF8800;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.soundcloud a {
    color: #FF8800;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.trovo a i {
    color: #1CBF64;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.trovo a {
    color: #1CBF64;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.tumblr a i {
    color: #35465C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.tumblr a {
    color: #35465C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.app-store a i {
    color: #0D96F6;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.app-store a {
    color: #0D96F6;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.seo a i {
    color: #00A7E1;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.seo a {
    color: #00A7E1;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.pinterest a i {
    color: #BD081C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.pinterest a {
    color: #BD081C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.likee a i {
    color: #FC44A6;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.likee a {
    color: #FC44A6;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.clubhouse a i {
    color: #F3DE2C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.clubhouse a {
    color: #F3DE2C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.opensea a i {
    color: #2081E2;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.opensea a {
    color: #2081E2;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.vimeo a i {
    color: #1AB7EA;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.vimeo a {
    color: #1AB7EA;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.reddit a i {
    color: #FF4500;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.reddit a {
    color: #FF4500;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.discord a i {
    color: #5865F2;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.discord a {
    color: #5865F2;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.dailymotion a i {
    color: #0066DC;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.dailymotion a {
    color: #0066DC;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.quora a i {
    color: #AA2200;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.quora a {
    color: #AA2200;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.reverbnation a i {
    color: #E43526;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.reverbnation a {
    color: #E43526;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.mixcloud a i {
    color: #5000F9;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.mixcloud a {
    color: #5000F9;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.vkontakte a i {
    color: #4C75A3;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.vkontakte a {
    color: #4C75A3;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.coub a i {
    color: #06C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.coub a {
    color: #06C;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.kwai a i {
    color: #FF7700;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.kwai a {
    color: #FF7700;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.shazam a i {
    color: #0088FF;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.shazam a {
    color: #0088FF;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.threads a i {
    color: #000000;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.threads a {
    color: #000000;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-item.twitch a {
    text-decoration: none;
    color: var(--twitch-color);;
    font-weight: lighter;
}

#mobileMenu .navbar-nav .nav-link {
    letter-spacing: 0px;
    color: #0d6efd;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    font-family: Rubik;
}

#mobileMenu .navbar-nav {
    padding: 20px;
}

#socialMediaMenu {
    max-height: 500px;
    overflow: scroll;
}

#mobileMenu .offcanvas-header {
    border-bottom: 2px solid #0d6efd;
}

#mobileMenu .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231371fd'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") no-repeat center center / 1em auto;
    opacity: 1;
}

.logo {

}

.logo-img {
    width: 200px;
}


#mobileMenu .contact {
    padding: 20px;
}

#mobileMenu .contact a {
    color: #0d6efd;
    font-size: 18px;
}

#mobileMenu .contact i {
    width: 40px;
    height: 40px;
}

.animate-fade {
    opacity: 0;
    transform: translateY(10px);
}

.animate-fade.show {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
}

.free_tools__component{
    margin-top: 2rem;
}

.free_tools__component .free_tools_item {
    width: 100%;
}

.free_tools__component .card {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    box-shadow: -6px 6px 18px rgba(48, 55, 84, .07);
    border-radius: 8px;
    background-color: var(--white-color);
    position: relative;
    overflow: visible;

}

.free_tools__component .card-header.head {
    background: transparent;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgb(52 115 244 / 38%);
    position: relative;
}

.free_tools__component .free_tools_item .card-header.head .icon {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-weight: 300;
    margin-top: -70px;
    margin-right: 28px;
}


.free_tools__component .card-header.head .title {
    color: #19203f;
    font-size: 22px;
    font-weight: 600;
}

.free_tools__component .free_tools_item {
    margin-bottom: 3rem;
}

.free_tools__component .free_tools_item a {
    color: #0a0e14;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    text-decoration: none;
    transition: background 0.3s ease;
    border-radius: 30px;
}

.free_tools__component .free_tools_item a i.ri-arrow-right-s-line {
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-left: 10px;
    color: var(--white-color);
}

.free_tools__component .free_tools_item a .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--white-color);
    width: 40px;
    height: 40px;
    border-radius: 26px;
    margin-right: 14px;
}


.free_tools__component .free_tools_item a .platform-title {
    color: #8b90a8;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0 !important;
}

.free_tools__component .free_tools_item a .name {
    display: block;
    color: #19203f;
    font-size: 16px;
    font-weight: 600;
}

/* Normalde görünmez */
.free_tools__component .free_tools_item.instagram a i.ri-arrow-right-s-line {
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* Hover olunca görünür ve renk değişir */
.free_tools__component .free_tools_item.instagram a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--instagram-color);
}

/* YouTube */
.free_tools__component .free_tools_item.youtube a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--youtube-color);
}

/* Twitch */
.free_tools__component .free_tools_item.twitch a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--twitch-color);
}

/* Facebook */
.free_tools__component .free_tools_item.facebook a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--facebook-color);
}

/* Twitter */
.free_tools__component .free_tools_item.twitter a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--twitter-color);
}

/* Threads */
.free_tools__component .free_tools_item.threads a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--threads-color);
}

/* Spotify */
.free_tools__component .free_tools_item.spotify a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--spotify-color);
}

/* Telegram */
.free_tools__component .free_tools_item.telegram a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--telegram-color);
}

/* Linkedin */
.free_tools__component .free_tools_item.linkedin a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--linkedin-color);
}

/* Google */
.free_tools__component .free_tools_item.google a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--google-color);
}

/* Snapchat */
.free_tools__component .free_tools_item.snapchat a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--snapchat-color);
}

/* Kick */
.free_tools__component .free_tools_item.kick a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--kick-color);
}

/* SoundCloud */
.free_tools__component .free_tools_item.soundcloud a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--soundcloud-color);
}

/* TikTok */
.free_tools__component .free_tools_item.tiktok a:hover i.ri-arrow-right-s-line {
    opacity: 1;
    color: var(--tiktok-color);
}

.free_tools__component .free_tools_item.instagram .card-header.head .icon {
    background: var(--instagram-color);

}

.free_tools__component .free_tools_item.instagram a .icon {
    background-color: var(--instagram-color);
}

.free_tools__component .free_tools_item.instagram a:hover {
    background: rgba(225, 48, 108, 0.1);
}



/* Örnek: Instagram */
.free_tools__component .free_tools_item.instagram .card-header.head .icon {
    background: var(--instagram-color);
}

.free_tools__component .free_tools_item.instagram a .icon {
    background-color: var(--instagram-color);
}

.free_tools__component .free_tools_item.instagram a:hover {
    background: rgba(225, 48, 108, 0.1);
}

.free_tools__component .free_tools_item.instagram a:hover .name {
    color: var(--instagram-color);
}

/* Youtube */
.free_tools__component .free_tools_item.youtube .card-header.head .icon {
    background: var(--youtube-color);
}

.free_tools__component .free_tools_item.youtube a .icon {
    background-color: var(--youtube-color);
}

.free_tools__component .free_tools_item.youtube a:hover {
    background: rgba(255, 0, 0, 0.1);
}

.free_tools__component .free_tools_item.youtube a:hover .name {
    color: var(--youtube-color);
}

/* Twitch */
.free_tools__component .free_tools_item.twitch .card-header.head .icon {
    background: var(--twitch-color);
}

.free_tools__component .free_tools_item.twitch a .icon {
    background-color: var(--twitch-color);
}

.free_tools__component .free_tools_item.twitch a:hover {
    background: rgba(145, 70, 255, 0.1);
}

.free_tools__component .free_tools_item.twitch a:hover .name {
    color: var(--twitch-color);
}

/* Facebook */
.free_tools__component .free_tools_item.facebook .card-header.head .icon {
    background: var(--facebook-color);
}

.free_tools__component .free_tools_item.facebook a .icon {
    background-color: var(--facebook-color);
}

.free_tools__component .free_tools_item.facebook a:hover {
    background: rgba(24, 119, 242, 0.1);
}

.free_tools__component .free_tools_item.facebook a:hover .name {
    color: var(--facebook-color);
}

/* Twitter */
.free_tools__component .free_tools_item.twitter .card-header.head .icon {
    background: var(--twitter-color);
}

.free_tools__component .free_tools_item.twitter a .icon {
    background-color: var(--twitter-color);
}

.free_tools__component .free_tools_item.twitter a:hover {
    background: rgba(29, 161, 242, 0.1);
}

.free_tools__component .free_tools_item.twitter a:hover .name {
    color: var(--twitter-color);
}

/* Threads */
.free_tools__component .free_tools_item.threads .card-header.head .icon {
    background: var(--threads-color);
}

.free_tools__component .free_tools_item.threads a .icon {
    background-color: var(--threads-color);
}

.free_tools__component .free_tools_item.threads a:hover {
    background: rgba(38, 38, 38, 0.1);
}

.free_tools__component .free_tools_item.threads a:hover .name {
    color: var(--threads-color);
}

/* Spotify */
.free_tools__component .free_tools_item.spotify .card-header.head .icon {
    background: var(--spotify-color);
}

.free_tools__component .free_tools_item.spotify a .icon {
    background-color: var(--spotify-color);
}

.free_tools__component .free_tools_item.spotify a:hover {
    background: rgba(29, 185, 84, 0.1);
}

.free_tools__component .free_tools_item.spotify a:hover .name {
    color: var(--spotify-color);
}

/* Telegram */
.free_tools__component .free_tools_item.telegram .card-header.head .icon {
    background: var(--telegram-color);
}

.free_tools__component .free_tools_item.telegram a .icon {
    background-color: var(--telegram-color);
}

.free_tools__component .free_tools_item.telegram a:hover {
    background: rgba(0, 136, 204, 0.1);
}

.free_tools__component .free_tools_item.telegram a:hover .name {
    color: var(--telegram-color);
}

/* Linkedin */
.free_tools__component .free_tools_item.linkedin .card-header.head .icon {
    background: var(--linkedin-color);
}

.free_tools__component .free_tools_item.linkedin a .icon {
    background-color: var(--linkedin-color);
}

.free_tools__component .free_tools_item.linkedin a:hover {
    background: rgba(0, 119, 181, 0.1);
}

.free_tools__component .free_tools_item.linkedin a:hover .name {
    color: var(--linkedin-color);
}

/* Google */
.free_tools__component .free_tools_item.google .card-header.head .icon {
    background: var(--google-color);
}

.free_tools__component .free_tools_item.google a .icon {
    background-color: var(--google-color);
}

.free_tools__component .free_tools_item.google a:hover {
    background: rgba(66, 133, 244, 0.1);
}

.free_tools__component .free_tools_item.google a:hover .name {
    color: var(--google-color);
}

/* Snapchat */
.free_tools__component .free_tools_item.snapchat .card-header.head .icon {
    background: var(--snapchat-color);
}

.free_tools__component .free_tools_item.snapchat a .icon {
    background-color: var(--snapchat-color);
}

.free_tools__component .free_tools_item.snapchat a:hover {
    background: rgba(255, 252, 0, 0.1);
}

.free_tools__component .free_tools_item.snapchat a:hover .name {
    color: var(--snapchat-color);
}

/* Kick */
.free_tools__component .free_tools_item.kick .card-header.head .icon {
    background: var(--kick-color);
}

.free_tools__component .free_tools_item.kick a .icon {
    background-color: var(--kick-color);
}

.free_tools__component .free_tools_item.kick a:hover {
    background: rgba(82, 255, 0, 0.1);
}

.free_tools__component .free_tools_item.kick a:hover .name {
    color: var(--kick-color);
}

/* Soundcloud */
.free_tools__component .free_tools_item.soundcloud .card-header.head .icon {
    background: var(--soundcloud-color);
}

.free_tools__component .free_tools_item.soundcloud a .icon {
    background-color: var(--soundcloud-color);
}

.free_tools__component .free_tools_item.soundcloud a:hover {
    background: rgba(255, 85, 0, 0.1);
}

.free_tools__component .free_tools_item.soundcloud a:hover .name {
    color: var(--soundcloud-color);
}

.free_tools__component .free_tools_item.tiktok .card-header.head .icon {
    background: var(--tiktok-color);
}

.free_tools__component .free_tools_item.tiktok a .icon {
    background-color: var(--tiktok-color);
}

.free_tools__component .free_tools_item.tiktok a:hover {
    background: rgba(1, 1, 1, 0.1);
}

.free_tools__component .free_tools_item.tiktok a:hover .name {
    color: var(--tiktok-color);
}

.kategoriler.spotify .itemkategori:hover .incelebtn,
.kategoriler.spotify .itemkategori:hover .icon {
    background: #179443;
}

.kategoriler.instagram .itemkategori:hover .incelebtn,
.kategoriler.instagram .itemkategori:hover .icon {
    background: #A12350;
}

.kategoriler.pinterest .itemkategori:hover .incelebtn,
.kategoriler.pinterest .itemkategori:hover .icon {
    background: #BD081C;
}

.kategoriler.likee .itemkategori:hover .incelebtn,
.kategoriler.likee .itemkategori:hover .icon {
    background: #c3592c;
}

.kategoriler.tiktok .itemkategori:hover .incelebtn,
.kategoriler.tiktok .itemkategori:hover .icon {
    background: #2A3B5C;
}

.kategoriler.youtube .itemkategori:hover .incelebtn,
.kategoriler.youtube .itemkategori:hover .icon {
    background: #CC0000;
}

.kategoriler.twitch .itemkategori:hover .incelebtn,
.kategoriler.twitch .itemkategori:hover .icon {
    background: #6E33CC;
}

.kategoriler.facebook .itemkategori:hover .incelebtn,
.kategoriler.facebook .itemkategori:hover .icon {
    background: #135ABF;
}

.kategoriler.twitter .itemkategori:hover .incelebtn,
.kategoriler.twitter .itemkategori:hover .icon {
    background: #167ABF;
}

.kategoriler.threads .itemkategori:hover .incelebtn,
.kategoriler.threads .itemkategori:hover .icon {
    background: #333333;
}

.kategoriler.spotify .itemkategori:hover .incelebtn,
.kategoriler.spotify .itemkategori:hover .icon {
    background: #179443;
}

.kategoriler.telegram .itemkategori:hover .incelebtn,
.kategoriler.telegram .itemkategori:hover .icon {
    background: #006699;
}

.kategoriler.linkedin .itemkategori:hover .incelebtn,
.kategoriler.linkedin .itemkategori:hover .icon {
    background: #074D8F;
}

.kategoriler.google .itemkategori:hover .incelebtn,
.kategoriler.google .itemkategori:hover .icon {
    background: #3267C1;
}

.kategoriler.snapchat .itemkategori:hover .incelebtn,
.kategoriler.snapchat .itemkategori:hover .icon {
    background: #CCCA00;
}

.kategoriler.kick .itemkategori:hover .incelebtn,
.kategoriler.kick .itemkategori:hover .icon {
    background: #3FC712;
}

.kategoriler.soundcloud .itemkategori:hover .incelebtn,
.kategoriler.soundcloud .itemkategori:hover .icon {
    background: #CC4400;
}

.kategoriler.star .itemkategori:hover .incelebtn,
.kategoriler.star .itemkategori:hover .icon {
    background: #FFE066;
}

.orderid {
    font-weight: 500;
    color: var(--primary-color);
}

.basket .card .total-amount, .basket .card .price, .basket .card .discount, .basket .card .coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.iframe-area {
    position: relative;
    width: 100%;
    min-height: 800px;
}

.iframe-area iframe {
    width: 100%;
    height: 800px;
    border: none;
}

.payment-card .total-amount,
.payment-card .discount,
.payment-card .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid var(--primary-color);
    margin-bottom: 1rem;
}

.payment-card .input-group-text {
    padding: .375rem 1.5rem;
    background: transparent;
    border-radius: 17px;
}

.payment-card .input-group {
    width: 100%;
    background: white;
    border: 1px solid #3474f6;
    border-radius: 17px;
}


@media (max-width: 768px) {
    .popular_packages_component .nav-tabs .nav-link i {
        font-size: 25px;
    }

    .container {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    #packageTab .nav-link span {
        display: none;
    }

    .popular_packages_component h1 {
        font: normal normal bold 28px / 37px Rubik;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .social-list {
        padding-left: 10px;
        padding-right: 10px;
    }

    .slogan__component {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .slogan__component .slogan_text {
        max-width: 100%;
        padding-right: 20px;
    }

    section.comments .top {
        padding-bottom: 0;
        padding-top: 10px;
    }

    .sosyalkategoriler .sub-title,
    .sosyalkategoriler .sub-title b {
        font: normal normal bold 32px / 57px Rubik;
    }

    .faqsection .h3title,
    .faqsection .h3title b {
        font: normal normal bold 33px / 40px Rubik;

    }

    .faqsection .accordion {
        padding: 50px 10px;
    }

    .bg-shape-1,
    .bg-shape-2,
    .bg-shape-3 {
        display: none !important;
    }

}

@media (max-width: 768px) {
    .payment-card-content {
        flex-wrap: wrap
    }

    .btn-orange-settings {
        position: absolute;
        right: 20px
    }

    .btn-orange-settings-mobile,
    .desktop-only,
    .productSocialServices .platform-info {
        display: none
    }

    .productSocialServices .custom-dropdown.open {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999
    }

    .productSocialServices .platform {
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .productSocialServices .col-3 {
        padding: 0 .2rem !important
    }

    .slider-mobile {
        display: inline-block
    }
}

@media (max-width: 480px) {
    .login-main-cards {
        flex-direction: column;
        row-gap: 20px
    }

    .login-main-card {
        width: 90%;
        height: auto;
        padding: 15px
    }

    .login-main-card-icon {
        width: 60px;
        height: 60px;
        font-size: 30px
    }
}

@media (max-width: 850px) {

    .login-card,
    .register-card {
        background-color: var(--white-color);
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1
    }

    .sptbody .alan ul li,
    footer .fthead ul li a i {
        margin-bottom: 5px;
        margin-right: 0
    }

    .pakettabs {
        padding: 10px 20px
    }

    .register-card {
        width: 90%;
        height: 700px;
        margin: 95px auto 0
    }

    .btn-green-register {
        width: 128px;
        height: 40px;
        font-size: 13px;
        padding: 5px
    }

    .input-group {
        position: relative;
        width: 80%;
        height: 70px
    }

    .login-card-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 2px;
        border-bottom: 3px solid var(--primary-color)
    }

    .login-main-card {
        height: 200px
    }

    .login-card {
        width: 90%;
        height: 550px;
        margin: 150px auto 0
    }

    .servisliste .accordion-body,
    .servisliste .accordion-item,
    .siparistable {
        background: 0 0
    }

    .login-main-cards {
        flex-direction: column;
        row-gap: 20px;
        width: 80%
    }

    .hmslider .slidertext .h6title,
    .kategorisayfa .toptitle {
        text-align: center
    }

    .mobilkapat {
        display: none !important
    }

    .abonebar::after,
    .abonebar::before,
    .headmenu .menu,
    .hmloginbox .form-group,
    .hmslider .sliderimg,
    .hmslider .sliderimg img,
    .hmslider .slidertext .search,
    .loginarea .img,
    .loginbtnbs,
    .loginbtnbs .ri-arrow-down-s-line,
    .offcanvasarea .tophead,
    .pakettabs .nav li:first-child button.active.instagram::before,
    .pakettabs .nav li:last-child button.active.twitter::before,
    .pakettabs .nav li:last-child button.active.youtube::before,
    .panelaccount .username,
    .panelheader .bakiyeekle,
    .parabirimi,
    .servisliste .bs1,
    .servisliste .bs2,
    .siparistable .thad,
    .tophead {
        display: none
    }

    .pakettabs .nav button {
        text-align: center !important;
        padding: 5px !important
    }

    .pakettabs .nav-tabs .dropdown-item {
        text-align: start !important
    }

    .pakettabs .nav button i {
        margin-right: 0 !important
    }

    .iletisimsayfa .iletisimbilgi {
        margin-top: 0;
        height: auto
    }

    .abonebar .formarea,
    .hmloginbox .lsitemt,
    .panelcontent.active .panelarea,
    footer .fthead ul,
    footer .fthead ul li,
    section.comments .top a.btn-allcomments,
    section.comments ul.comments li {
        width: 100%
    }

    footer .fthead ul li a,
    section.comments .top {
        flex-flow: column;
        justify-content: center
    }

    .loginbtn {
        margin-right: 0
    }

    .itemkategori .toptitle {
        font-size: 16px;
        max-width: calc(100% - 125px)
    }

    .itemkategori .text {
        padding-left: 10px
    }

    .guvenbox .container,
    .hmloginbox .area .list,
    .inbox form,
    .sptbody .alan ul {
        flex-flow: column
    }

    .sosyalservices .mySwipersosyalservice {
        padding: 0 65px
    }

    .mobilmenbtn,
    .panelaccountarea .username,
    .panelcontent.active .burgermenu,
    .servisliste .hizala {
        display: block
    }

    .offcanvasarea .favorim i,
    .title-bg .h5title {
        font-size: 18px
    }

    .basketmenu ul li a {
        display: flex;
        flex-flow: column;
        justify-content: center;
        text-align: center
    }

    .loginbtn .texs {
        padding-right: 25px;
        padding-left: 5px
    }

    .dashboardbox .bsbttitle,
    .hmslider .slidertext .search input,
    .offcanvasarea .favorim .toptitle {
        font-size: 16px
    }

    .offcanvasarea .favorim span {
        font-size: 15px;
        width: 22px;
        height: 22px;
        line-height: 22px
    }

    .basketmenu ul li i {
        margin: 0 0 5px;
        margin-right: 0 !important
    }

    .basketmenu ul li span {
        font-size: 14px
    }

    .headright {
        width: 40%
    }

    .aboutpagehwo .text .h5title,
    .hmcommentsection .text .h3title,
    .platformslider .h4title,
    .siparissonuc .h6title {
        font-size: 30px
    }

    .siparissonuc {
        padding: 0
    }

    .siparissonuc p {
        font-size: 17px
    }

    .basketmenu ul li.active a {
        font-weight: 400
    }

    .hmslider .slidertext .search > i {
        margin-left: 5px
    }

    .hmslider .slidertext .search button {
        height: 50px
    }

    .blogtext,
    .profilsidebar,
    .sptbody .alan {
        margin-bottom: 20px
    }

    .sptbody .alan ul li {
        width: 100%;
        margin-top: 5px
    }

    .loginbtnbs .texs {
        padding-right: 10px;
        padding-left: 10px
    }

    .headmenu .logo {
        width: 78%;
        height: 40px
    }


    .duyurulist .item .tksite span,
    .loginbtnbs .texs .h4title,
    .servisliste .accordion-item .pktitle {
        font-size: 15px
    }

    .hmslider .slidertext .h2title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 25px;
        text-align: center
    }

    .hmslider .slidertext {
        padding: 20px 20px 0;
        margin-bottom: 50px
    }

    .ftlogo,
    .ftpmenubody .footermenuitem,
    .loginlogo,
    .orderfilter ul {
        margin-bottom: 15px
    }

    .turkishguven .baslik .toptitle {
        font-size: 29px
    }

    footer .fthead {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    .sosyalservices .baslik p {
        font-size: 17px;
        line-height: 22px;
        margin-top: 10px
    }

    .abonebar .h5title,
    .sosyalservices .baslik .toptitle {
        font-size: 20px
    }

    .hmslider .slidertext p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        margin-bottom: 0
    }

    .hmloginbox .lsitem {
        width: 100%;
        margin-bottom: 15px
    }

    .aboutpagehwo .text {
        padding: 35px 25px
    }

    .hmstepsection .h2title {
        font-size: 28px
    }

    .stepswSwiper .swiper-slide-active {
        width: 75% !important
    }

    .hmcommentsection {
        padding: 0 15px
    }

    .hmcommentsection .img {
        height: 400px
    }

    .abonebar .icon {
        width: 140px
    }

    .abonebar .formarea .input {
        width: calc(100% - 90px)
    }

    .ftlogo {
        width: 100%;
        text-align: center
    }

    footer .fthead ul {
        display: flex;
        justify-content: center
    }

    .ftpmenubody {
        padding: 25px 40px
    }

    .footerdesc span {
        width: 100%;
        text-align: center;
        font-size: 15px;
        margin-top: 20px
    }

    .footerdesc .container {
        display: flex;
        flex-flow: column-reverse
    }

    .apititle .tks p {
        font-size: 15px;
        line-height: 15px
    }

    .pagetitle .toptitle {
        font-size: 27px
    }

    .blogtext .img {
        height: 250px
    }

    .panelheader .burger {
        width: 60px;
        height: 60px;
        line-height: 60px
    }

    .panellogo {
        width: 30%;
        padding: 0 0 0 15px;
        height: 60px
    }

    .panelarea {
        width: 100%;
        padding: 15px;
        margin-top: 70px
    }

    .panelrighrt {
        float: right;
        width: 50%;
        padding-right: 0
    }

    .panelaccount .usericon {
        width: 40px;
        height: 40px
    }

    .panelaccount {
        padding-right: 50px;
        padding-left: 15px;
        border-right: 0;
        min-height: 60px
    }

    .burgermenu,
    .burgermenu ul,
    .burgermenu ul::after {
        min-height: calc(100vh - 60px)
    }

    .panelaccount .arrowicon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        top: 15px
    }

    .panelaccountarea {
        min-width: 200px;
        right: 15px;
        left: auto
    }

    .newsupportticket {
        padding: 20px
    }

    .burgermenu {
        width: 100%;
        position: fixed;
        z-index: 2;
        top: 60px;
        max-width: 100%;
        display: none
    }

    .burgermenu ul li i {
        width: 60px
    }

    .panelcontent .burgermenu ul li span {
        width: calc(100% - 60px);
        min-width: 270px
    }

    .burgermenu ul::after {
        width: calc(100% - 60px);
        left: 60px
    }

    .burgermenu ul li:last-child {
        margin-top: 0
    }

    .desteklerlist .col-md-1 {
        border: 0;
        padding-left: calc(var(--bs-gutter-x) * .5)
    }

    .desteklerlist .item .btnlist {
        margin-top: 15px;
        width: 100%
    }

    .desteklerlist .item .btnlist .status {
        min-width: 150px;
        font-size: 15px;
        max-width: 50%;
        text-align: center;
        padding: 10px 5px
    }

    .destekhead a {
        padding: 13px 20px;
        font-size: 15px
    }

    .destektalebikonusma .scrool {
        padding: 0 15px 0 0
    }

    .dashboardbox .alan {
        padding-right: 0;
        padding-left: 15px
    }

    .replysupport {
        padding: 15px 15px 15px 0
    }

    .duyurulist .item {
        padding: 15px
    }

    .loginarea {
        padding: 0 15px;
        height: auto
    }

    .servishead .col-md-4 {
        margin-bottom: 5px;
        margin-top: 5px
    }

    .copybtn {
        margin-top: 15px;
        float: left
    }

    .loginlogo {
        margin-top: 50px
    }

    .newordersalan {
        margin-bottom: 30px
    }

    .servisliste .bs3 {
        width: calc(100% - 40px)
    }

    .guvenbox .itemguven {
        padding: 15px !important;
        border: none
    }

    .servisliste .accordion-body .hizala,
    .siparistable .item {
        margin-bottom: 15px;
        background: var(--white-color);
        border-radius: 10px;
        overflow: hidden
    }

    .aboutpagehwo {
        padding-bottom: 120px
    }

    .aboutpagehwo hr {
        top: 180px
    }

    .populerpakets .poppakitem {
        margin-top: 20px;
        height: auto
    }

    .abstitle .id {
        padding: 15px 10px;
        border-right: 0
    }

    .abstitle .pttitle {
        font-size: 15px;
        min-height: 59px;
        max-width: calc(100% - 100px)
    }

    .servisliste .accordion-body .bs3 {
        border-right: 0;
        float: left;
        width: 100%
    }

    .servisliste .accordion-body .bs1 {
        width: 50%;
        display: block;
        border-right: 0;
        float: left;
        border-bottom: 1px solid #a9bcc94b
    }

    .servisliste .accordion-body .pns {
        padding: 10px 0
    }

    .servisliste .accordion-body .bs2.none {
        display: block;
        float: left;
        width: 50%
    }

    .servisliste .accordion-body button {
        font-size: 15px;
        margin-top: 16px
    }

    .orderfilter ul li {
        width: 50%
    }

    .servisliste .accordion-body .hizala {
        float: left;
        width: 100%;
        border-bottom: 0
    }

    .siparistable .item .col-md-1 {
        width: 50%;
        text-align: center;
        padding: 10px 0
    }

    .siparistable .item .col-md-2 {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 5px
    }

    .siparistable .item {
        box-shadow: 0 0 5px rgba(13, 18, 31, .048)
    }

    .siparistable {
        box-shadow: none
    }

    .siparistable .item span {
        margin-top: 4px
    }

    .siparistable .item .col-md-4 {
        margin-bottom: 10px;
        margin-top: 10px;
        text-align: center
    }

    .inbox .price {
        color: var(--white-color) !important;
        margin-top: 22px !important
    }
}

@media only screen and (max-width: 600px) {

    .popular_packages_component .nav-tabs {
        justify-content: center;
    }

    .nav-tabs {
        border-bottom: none;
        justify-content: start;
        margin-bottom: 20px;
    }

    .SocialFeatures .featureItem,
    .SocialMediaCardList .input-group,
    .btn-orange,
    .myOrder .orderbox,
    .pakettabs .nav-tabs .dropdown {
        width: 100%
    }

    .margin-fixer {
        margin-top: -10px
    }

    .SocialFeatures {
        padding-top: 100px
    }

    .order-sm-2 {
        order: 2 !important
    }

    .order-sm-3 {
        order: 3 !important
    }

    .SocialFeatures .icon-container {
        width: 500px
    }

    .SocialFeatures img {
        width: 60px
    }

    .SocialFeatures .featureItem p {
        font-size: 16px
    }

    .SocialFeatures .featureItem .text .subTitle {
        font-size: 20px
    }

    .orderArea .reviewArea .review .stars i {
        font-size: 15px
    }

    .SocialMediaCardList .card .card-footer input::placeholder {
        font-size: 12px
    }

    .SocialMediaCardList .card .max-value {
        font-size: 12px
    }

    .SocialMediaCardList .card .form-label {
        font-size: 9px;
        margin-left: 0
    }

    .SocialMediaCardList .card .card-footer input {
        height: 20px;
        font-size: 18px
    }

    .calculateArea .calculated .large {
        font-size: 33px;
        font-weight: 700
    }

    .calculateArea .title {
        font-size: 20px;
        font-weight: 700
    }

    .myOrder .card {
        margin-top: 0;
        height: 100%
    }
}

@media only screen and (min-width: 768px) {
    .myOrder .card {
        margin-top: 0;
        height: 100%
    }

    .myOrder .orderbox {
        width: 100%
    }
}

@media (min-width: 768px) {
    .slider-item {
        min-width: 25%
    }

    .poppakitem {
        margin-right: 15px;
        margin-left: 15px
    }

    .slider-nav-button {
        font-size: 20px;
        margin-right: -30px;
        margin-left: -30px
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .custom-dropdown .custom-menu {
        margin-top: 0
    }

    .custom-dropdown::before {
        display: none
    }

    .payment-card .payment-input {
        width: 100%
    }

    .last-step {
        width: 250px
    }

    .next-step,
    .payment_methods .payment-item {
        width: 100% !important
    }

    .btn-orange-check {
        font-size: 14px
    }

    .custom-dropdown.open {
        background-color: var(--white-color);
        box-shadow: none
    }

    .custom-dropdown {
        position: relative;
        width: 100%
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .productSocialServices .platform {

        padding: 10px 20px;
        border-radius: 6px;
    }
}

@media screen and (max-width: 990px) {
    .productSocialServices .platform {

        padding: 10px 20px;
        border-radius: 6px;
    }
}


@media (min-width: 768px) and (max-width: 1023px) {

    .payment-card,
    .payment-card .input-icon-container,
    .payment-card .payment-input,
    .payment_methods .payment-item {
        width: 100%
    }

    .btn-orange-check {
        font-size: 14px
    }

    .payment-card .input-icon-container i {
        left: 5px
    }

    .payment-card .input-icon-container input {
        padding-left: 40px
    }

    .next-step {
        width: 88% !important
    }

    .payment-card-content {
        flex-direction: column
    }
}

@media screen and (min-width: 2560px) {
    .dropdownmenu {
        right: 580px
    }

    .custom-dropdown {
        width: 10%
    }

    .hmslider .sliderimg img {
        width: 100%;
        height: 491px
    }
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1352px
    }

}

@media (max-width: 768px) {
    .poppakitem {
        width: 85%
    }

    .pakettabs .nav-tabs .dropdown {
        padding: 0 !important;
        width: 100%
    }

    .margin-fixer {
        margin-top: -10px
    }

    .slider-nav-button {
        margin-right: -30px;
        margin-left: -30px
    }

    .pakettabs .nav-tabs {
        margin: -7px;
        display: block
    }

    #FreeTotalDiv .calculateArea .calculated .large {
        font-size: 26px;
        font-weight: 700
    }

    .image-container {
        flex-direction: column;
        align-items: center
    }

    .image-container img {
        width: 100%;
        max-width: 300px
    }

    .sticky-footer-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: var(--white-color);
        box-shadow: 0 -8px 16px rgba(0, 0, 0, .056);
        z-index: 1000
    }

    .sticky-footer-menu a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 2px;
        color: var(--primary-color);
    }

    .sticky-footer-menu a i {
        font-size: 1.5rem;
        font-weight: 400
    }

    .sticky-footer-menu a span {
        font-size: 12px;
        font-weight: 600
    }

    .sticky-active-menu {
        color: var(--primary-color)
    }

    .container-basket {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 5px
    }

    .basket-card {
        margin: 50px auto 0;
        width: 100%;
        height: 100%
    }

    .basket-card-content,
    .basket-card-details-content,
    .basket-card-details-title,
    .basket-card-title,
    .orders-title {
        padding: 20px 10px
    }

    .basket-card-details-title .h2title,
    .basket-card-title .h2title,
    .orders-title .h2title {
        font-size: 16px
    }

    .basket-card-details-title-icon,
    .basket-card-title-icon,
    .orders-title-icon {
        width: 40px;
        height: 40px
    }

    .basket-card-details-title-icon i,
    .basket-card-title-icon i,
    .orders-title-icon i {
        font-size: 18px
    }

    .basket-card-details {
        width: 100%;
        height: 100%
    }

    .basket-card-details-content-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        column-gap: 10px;
        padding: 10px 0
    }

    .basket-card-details-content-coupons p,
    .basket-card-details-content-item p,
    .basket-card-details-content-item span,
    table,
    td,
    th {
        font-size: 14px
    }

    .basket-card-details-content-coupons {
        height: 100%
    }

    .basket-card-details-content-coupons-input {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        padding: 10px 0
    }

    .btn-green-upload,
    .input-icon-container {
        width: 100%
    }

    .input-icon-container input {
        width: 100%;
        font-size: 14px
    }

    .btn-green-check,
    .btn-orange-check {
        width: 100%;
        height: 65px;
        font-size: 14px
    }

    .basket-card-details-content-buttons,
    .info-right {
        margin-top: 20px
    }

    .badge-delete {
        position: relative
    }

    .orders-2 {
        height: 100%;
        padding: 20px 10px
    }

    .basket-card-content .order {
        font-size: 10px;
        margin-top: -10px
    }

    .responsive-table td {
        padding: 5px;
        font-size: 12px;
        word-break: break-word
    }

    .info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px
    }

    .info-left {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 10px
    }

    .info-user {
        width: 60px;
        height: 60px;
        font-size: 20px
    }

    .info-right-text,
    .info-text {
        text-align: center
    }

    .info-right-wallet {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 0
    }

    .info-right-wallet i,
    .orders-icon {
        font-size: 30px
    }

    .tabs-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: auto
    }

    .tabs-menu-item-link {
        padding: 8px 25px
    }

    .tabs-menu-item-link::before {
        display: none
    }

    .orders {
        width: 90%
    }

    .orders-content p {
        font-size: 12px
    }

    .btn-green-order {
        width: 160px;
        height: 40px;
        font-size: 14px
    }
}

@media (max-width: 768px) {
    .orders-2 {
        height: 100%;
        padding: 20px 10px
    }

    table,
    td,
    th {
        font-size: 14px
    }

    .basket-card-content .order {
        font-size: 10px;
        margin-top: -10px
    }

    .push {
        width: 600px
    }
}

@media (min-width: 769px) {
    .desktop-only {
        display: block
    }

    .slider-mobile {
        display: none
    }

    .push {
        width: 100%
    }
}

@media (max-width: 768px) {

    .coupon,
    .password-change,
    .personal-info,
    .push {
        width: 90%
    }

    .balances-container-title,
    .connect-content,
    .coupon-title,
    .coupons-container-title,
    .market-container-content,
    .market-container-content-link-icon,
    .market-container-title,
    .password-change-content,
    .password-change-title,
    .personal-info-content,
    .personal-info-title,
    .push-content,
    .push-title {
        padding: 20px 10px
    }

    .balance-text,
    .balances-container-title .h2title,
    .coupon-title .h2title,
    .coupons-container-title .h2title,
    .market-container-content-link-icon p,
    .market-container-title .h2title,
    .password-change-title .h2title,
    .personal-info-title .h2title,
    .push-title .h2title {
        font-size: 16px
    }

    .balances-container-title-icon,
    .coupon-title-icon,
    .coupons-container-title-icon,
    .market-container-title-icon,
    .password-change-title-icon,
    .personal-info-title-icon,
    .push-title-icon {
        width: 40px;
        height: 40px
    }

    .balances-container-title-icon i,
    .coupon-title-icon i,
    .coupons-container-title-icon i,
    .market-container-content-link-icon i,
    .market-container-title-icon i,
    .password-change-title-icon i,
    .personal-info-title-icon i,
    .push-title-icon i {
        font-size: 18px
    }

    .push-content p {
        font-size: 12px
    }

    .push-icon {
        font-size: 30px
    }

    .push-content-item {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        padding: 10px 0
    }

    .coupon-info,
    .coupon-usage p,
    .push-content-item p,
    .push-content-item span {
        font-size: 14px
    }

    .container-personal-info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 50px
    }

    .balance-input,
    .input-group-2 {
        width: 100%
    }

    .btn-green-login,
    .input-group-2 input {
        width: 100%;
        font-size: 14px
    }

    .balances-container,
    .connect,
    .coupons-container,
    .market-container,
    .supports {
        width: 90%;
        height: 100%
    }

    .coupon-content {
        padding: 0 10px
    }

    .coupon-usage {
        padding: 10px 0
    }

    .coupon-input input {
        height: 40px;
        font-size: 14px
    }

    .coupon-input input::placeholder {
        font-size: 14px
    }

    .btn-green-copy {
        width: 30px;
        height: 30px;
        font-size: 14px
    }

    .support-content {
        padding: 20px 0
    }

    .support-content-head tr {
        border-bottom: none
    }

    .support-content-body i {
        font-size: 20px
    }

    .btn-green-support {
        width: 80%;
        height: 60px;
        font-size: 18px
    }

    .btn-green-balance-2 i,
    .btn-green-support i {
        font-size: 1.5rem
    }

    .balance-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        column-gap: 0;
        row-gap: 20px
    }

    .balance {
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        column-gap: 20px
    }

    .balance-left {
        flex-direction: row;
        justify-content: start;
        align-items: center;
        column-gap: 10px
    }

    .balance-price {
        font-size: 24px;
        padding: 20px 10px
    }

    .balance-input input,
    .btn-green-balance-2 {
        font-size: 14px;
        width: 100%
    }

    .balance-text p,
    .balance-text span {
        font-size: 14px
    }

    .btn-green-balance {
        width: 60px;
        height: 60px
    }

    .balance-row-add {
        height: 100%;
        padding: 40px 20px;
        column-gap: 0;
        row-gap: 20px;
        margin-bottom: 50px
    }

    .balance-input input {
        height: 50px
    }

    .balance-input input::placeholder {
        font-size: 14px
    }

    .balance-input span {
        font-size: 24px;
        right: 20px;
        top: 10px
    }

    .market-container-content-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 0;
        column-gap: 0;
        height: 100%;
        padding: 20px 10px
    }

    .market-container-content-link-input {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px;
        padding: 20px 10px
    }

    .market-container-content-link-input input {
        width: 100%;
        height: 50px;
        font-size: 14px
    }

    .market-cart i,
    .market-cart span {
        font-size: 24px
    }

    .market-container-content-link-input input::placeholder {
        font-size: 10px
    }

    .btn-green-copy-2 {
        width: 60px;
        height: 40px;
        font-size: 12px
    }

    .market-carts {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 20px
    }

    .market-cart {
        width: 90%;
        height: 100px;
        padding: 20px 10px
    }

    .market-cart i,
    .support-contact {
        padding: 10px
    }

    .market-cart-text p {
        font-size: 14px
    }

    .messages-supports,
    .support-contact {
        overflow-x: hidden
    }

    .support-div {
        padding: 20px 20px 100px
    }

    .support-button {
        padding: 10px;
        right: 0
    }

    .support-message {
        width: 350px;
        height: 450px
    }

    .go {
        margin-left: 0;
        padding: auto
    }

    .message-top {
        gap: 50px
    }
}


@media only screen and (max-width: 600px) {
    .new-popuper-packages .calculateArea .calculated .large {
        font-size: 30px;
        font-weight: 700;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .new-popuper-packages .socialMediaServiceDetails .item .card {
        min-width: 120px;
        max-width: 120px;
        min-height: 120px !important;
        max-height: 120px !important;
        cursor: pointer;
    }

    .new-popuper-packages .socialMediaServiceDetails .item .card .card-body {

        padding: 0;
    }

}

@media (min-width: 1025px) and (max-width: 1440px) {
    .header__component h1 {
        font: normal normal bold 54px / 46px Rubik;
        margin-bottom: 20px;
        max-width: 100%;
    }
}


@media screen and (max-width: 768px) {
    .slick-arrow {
        display: none !important
    }

    .sosyalkategoriler .item {
        height: auto;
    }

    .sosyalkategoriler .item .icon {
        font-size: 35px;
    }

    .sosyalkategoriler .item {
        padding: 10px 7px;
    }

    .platform .platform-info .title {
        font-size: 15px;
    }

    .iletisimsayfa .container {
        padding: 0;
    }

    .slogan__component .slogan_text h1 {
        text-align: center;
    }

    .slogan__component .slogan_text p {
        text-align: center;
    }

    .contact i {
        width: 30px;
        height: 30px;
        font-size: 19px;
        margin-right: 10px;
    }

    .contact a {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .show-mobile {
        display: flex !important;
    }

}

/* Responsive Ayarlar */
@media (max-width: 768px) {
    .profile-image-container {
        width: 80px;
        height: 80px;
    }

    .post-thumbnail {
        height: 250px;
    }

    #profile-info .modal .swiper {
        height: 400px;
    }
}

.kategorisayfa .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: max-content;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0.5rem;
    scrollbar-color: #3474F6 transparent;
    margin-left: 1rem;
}

.kategorisayfa .nav-tabs .nav-item {
    white-space: nowrap;
    margin-bottom: 1px;
}

.kategorisayfa::-webkit-scrollbar {
    height: 6px; /* yatay scroll için */
}


@media (max-width: 576px) {
    .profile-image-container {
        width: 60px;
        height: 60px;
    }


    .post-thumbnail {
        height: 200px;

    }

    #profile-info .modal .swiper {
        height: 300px;
    }

    .platform .platform-info .title {
        font-size: 13px;
    }

    .iletisimbilgi {
        margin-top: 1rem;

    }

    .kategoriler {

        margin: 0;
    }

    .payment-card-content .order {
        overflow-x: scroll;
        width: 200px;
        white-space: nowrap;
    }

    .payment-card-content {
        overflow-x: auto;
        width: 100%;
    }

    .payment_methods {
        white-space: nowrap;
        display: flex;
    }

    .comments-area .comment {
        margin-bottom: 1rem;
    }

    .iletisimform .title {
        padding-top: 1rem;
    }

    .slogan__component .slogan_text h1 {
        margin-bottom: 20px;
        font: normal normal bold 44px / 45px Rubik;
    }

    .payment_methods .payment-item .detail .description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5em;
        max-height: 5em;
        width: 100%;
        white-space: normal;
    }


}
.footer-desc {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 600px;

}

.footer-desc b {
    color: #4D8DFB;
    font-weight: 600; 
}