/* Mobile */
@media (max-width: 600px) {
    .knopf {
        font-size: 14px;
        padding: 8px 16px;
    }
}

.button-70 {
  background-image: linear-gradient(#0dccea, #0d70ea);
  border: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: Montserrat,sans-serif;
  font-size: .9em;
  margin: 5px;
  padding: 10px 15px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/*--------*/
#popupContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#popupContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: 80%;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
}

#popupContent iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#closePopup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: red;
    font-weight: bold;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown button {
    background-color: #4CAF50;
    color: white;
    padding: 9px 19px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.dropdown button:hover {
    background-color: #45a049;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover button {
  background-color: #3e8e41;
}
/*-----------------------*/
.message {
    margin: auto;
    text-align: center;
    padding: 25px;
    background-color: #f4f4f4;
    border-left: 8px solid #2C3E50;
    border-radius: 5px;
    max-width: 600px;
    font-family: 'Arial', sans-serif;
    margin-top: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.message p {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    line-height: 1.5;
    margin: 0;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #BDC3C7;
    border-radius: 3px;
    text-align: left;
    word-wrap: break-word;
}

.message p:hover {
    border-color: #3498db;
    background-color: #ecf0f1;
}

.swiper {
    width: 600px;
    height: 300px;
    border-style:solid;
    border-width: 0.5px;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
.swiper-slide {
    background-color: rgb(227, 248, 207);
    text-align: center;
}
.negative {
    --knopf-hue: 650;
    --knopf-saturation: 57%;
    --knopf-luminosity: 51%;
}

.posting {
    background-color: #85c1e9;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    max-width: 17rem;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
}

.posting h4 {
    // Başlık
    font-family:Thomas;
}
.posting .content {
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
}

.posting .footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 1rem;
}

.posting img {
    margin-right: 10px;
}

.posting .username {
    font-weight: bold;
}

.center_container {
    display:flex;
    justify-content: center;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.post_container {
    display: flex; /* Flexbox düzenini aktif hale getirir */
    justify-content: space-between; /* Elemanlar arasında eşit boşluk bırakır */
    gap: 20px; /* Elemanlar arasındaki boşluk */
}

.post_view_content {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    width: 70%;
    height: auto;
    background-color: #f9f9f9;
    padding: 20px;
    margin:20px;
    box-sizing: border-box;
    display: inline-block;
}

.post_view_info {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    width: 30%;
    height: 700px;
    background-color: #f9f9f9;
    padding: 10px;
    margin:  20px;
    box-sizing: border-box;
    display: inline-block;
}

.page_navigation {
    margin:40px;
}

.page_navigation a{
    text-decoration: none;
}

.pagination {
    margin: 20px;
}
.pagination a{
    font-family: 'built_font';
    text-decoration:none;
}

/* Bildirimler */
.notification {
    border: 1px solid #ddd;
    border-radius: 8px; /* Kenarları yuvarlama */
    width: 100%;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s; /* Hover için animasyon */

    margin-bottom: 20px;
}
.notification .title {
    font-family: Roboto;
    font-size:25px;
}
.notification .content {
    font-family: Thomas;
}

.box_content {
    border: 1px solid #ddd;
    border-radius: 8px; /* Kenarları yuvarlama */
    width: 100%;
    max-width: 600px; /* Maksimum genişlik */
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s; /* Hover için animasyon */
}

/*
Mesajlar için
*/
.user_message {
    border: 1px solid #ddd;
    border-radius: 8px; /* Kenarları yuvarlama */
    width: 100%;
    max-width: 600px; /* Maksimum genişlik */
    margin: 20px auto; /* Ortalamak için */
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s; /* Hover için animasyon */
}

.user_message:hover {
    transform: scale(1.02); /* Hoverda hafif büyüme efekti */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.user_message .author {
    display: flex;
    align-items: center;
    margin-top: 15px;
    font-family: "Arial Black", sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05rem;
    color: #333; /* Metin rengi */
}

.user_message .author img {
    border-radius: 50%; /* Yuvarlak profil resmi */
    margin-right: 15px;
    border: 2px solid #ddd;
    transition: border-color 0.3s;
}

.user_message .author img:hover {
    border-color: #007bff; /* Hoverda renk değişimi */
}

.user_message .content {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #555; /* Metin rengi */
    margin-bottom: 10px;
    white-space: pre-wrap; /* Yeni satırları korumak için */
}

.user_message small {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 10px;
}

.user_message img[src*="like.svg"] {
    cursor: pointer;
    margin-top: 10px;
    transition: opacity 0.3s;
}

.user_message img[src*="like.svg"]:hover {
    opacity: 0.8; /* Hoverda şeffaflık efekti */
}

.user_message .like_count {
    font-size: 14px;
    color: #007bff; /* Beğeni sayısı rengi */
    font-weight: bold;
    margin-left: 10px;
}


#post_title {
    font-family: Oswald;
    font-size:45px;
    color: red;
    font-weight: 900;
}

#user_profile_card {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: fit-content;
    padding: 0.8rem;
}
#seller_info {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#date_text {
    font-family: 'AlteHaasGroteskBold';
}

/* Fonts */
@font-face {
    font-family:"built_font";
    src: url("/resources/fonts/built_font.otf") format("opentype");
}

.no-flicker * {
    visibility: hidden;
}
.key_style {
    border: 1px solid #20B2AA;
    border-radius: 4px;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: white;
    text-decoration: none;
    text-align: center;


    background-color: #20B2AA;
    padding: 8px 12px;
    display: inline-block;
}

.value_style {
    border: 1px solid #9db9a8;
    border-radius: 4px;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: white;
    text-decoration: none;
    text-align: center;


    background-color: #9db9a8;
    padding: 8px 12px;
    display: inline-block;
}

.link_style {
    border: 1px solid rgb(96, 147, 178);
    border-radius: 4px;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: white;
    text-decoration: none;
    text-align: center;


    background-color: rgb(96, 147, 178);
    padding: 8px 12px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.link_style:hover {
    background-color: rgb(78, 120, 145); /* Slightly darker shade on hover */
    color: #f0f0f0; /* Slightly lighter text color on hover */
}

.profile_menu_class .content {
    border-style: solid;
    background-color: #17a589;
    border-width: 1px;
    border-radius: .5rem;
}

#navigation_notifications_status {
    font-family: Lato;
}

#profile_image {
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #ddd;
    transition: border-color 0.2s, transform 0.2s;
}

#profile_image:hover {
    transition: width 1s, height 1s, transform 0.5s;
    transform: scale(1.05);
    border-color: #4CAF50;
    cursor: pointer;
}


@font-face {
    font-family: "AlteHaasGroteskBold";
    src: url("/resources/fonts/AlteHaasGroteskBold.ttf") format("truetype");
}

/* CSS */
.button-41 {
  padding: 12px 26px;
  border: 0;
  font-size: 16px;
  transition: all 150ms ease-in-out;

  border-radius: 14px;
  font-weight: 600;

  color: #fff;
  background-color: rgba(216, 216, 82, 1);
  background-image: radial-gradient(50% 115% at 50% -5%, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
  box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.14), inset 0px 5px 10px 0px rgba(255, 255, 255, 0.11), inset 0px 2px 5px 0px rgba(255, 255, 255, 0.4), inset 0px 3px 20px 0px rgba(0, 0, 0, 0.25);
}

.button-41:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.button-41:active {
  transform: scale(.95);
}

.hr_50 {
    width:50%;
    margin:20px auto
}
.hr_m4 {
    width:95%;
    margin:20px auto
}
.hr_size_50 {
    width:50%;
}

.hr_size_60 {
    width:60%;
}

.scroll_div {
    margin-top: 10%;
}

#faq_inner .card {
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}