/* Reset & Base */ 
    * { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      overflow-x: hidden;
      font-family: 'Source Sans 3', sans-serif;
      font-size: clamp(14px, 2vw, 18px);
      background: #FFF;
      height: 100svh;
    }
	
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
}
a {
  text-decoration: none !important;
}
button{
	    font-family: 'Source Sans 3', sans-serif;
}

    img, video, iframe { max-width: 100%; height: auto; }
    i { font-size: 1.5rem; color: #333; display: inline-block; vertical-align: middle; }

    /* Map */
    #map {
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      z-index: 1;
    }

    /* Profile markers */
    .profile-wrapper {
      width:45px; height: 45px;
      border-radius: 50%;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
    }
	
	.profile-wrapper.hide {
  opacity: 0;
  pointer-events: none;
}



	/*
.profile-wrapper::after {
content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: #00c853;
    transform: rotate(45deg);
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}	
	*/
	
	
	
	
	
	
	
	

/* Beyaz yanıp sönen tüm profile-wrapper'lar için */
.profile-wrapper {
  animation: selected2Pulse 1.2s ease-in-out infinite;
}

@keyframes selected2Pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

	
	
    .profile-wrapper.recent {
      overflow: visible;
      background: #fff;
	  width:50px;
	  height:85px;
	  border-radius:6px;
    }
	    .profile-wrapper.recent > img{
	  border-radius:6px;
	  width:100%;
    }
	
.profile-wrapper.recent.online {
  animation: recentPurplePulse 1.2s ease-in-out infinite !important;
}

@keyframes recentPurplePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.5); /* Mapsy moru: #6c5ce7 */
  }
  70% {
    box-shadow: 0 0 0 12px rgba(108, 92, 231, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
  }
}

    .profile-img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .profile-wrapper.recent .profile-inner img { 
	border-radius:50%;
	}

    /* Search Bar */
    .top-search-bar {
      position: fixed; top: 1.4rem; left: 1rem; right: 1rem;
      display: flex; align-items: center;
      background: #fff;
      border-radius: 999px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      padding: 0.7rem;
      z-index: 1000;
    }


.top-search-bar,
.kategori-tabs {
  transition: opacity 0.08s ease-out; /* ❗ hızlı kapanış varsayılan */
}

.opacity-slow {
  transition: opacity 0.4s ease-in !important; /* ❗ yavaş açılış */
}

.hidden-opacity {
  opacity: 0;
  pointer-events: none;
}
    .search-icon-wrapper { margin-right: 0.3rem; }
    .logo-circle {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .logo-circle svg { width: 55%; height: auto; }
    .search-input {
      flex: 1; border: none; outline: none;
      font-size: 1.2rem; background: transparent;
    }
	
/* === Mor çerçeve sinyali (selected-profile) === */
.selected-profile {
  border: 1px solid #fff !important;
}


.selected-profile .speech-bubble {
  display: none !important;
}
.selected-profile .speech-bubble:before {
  display: none !important;
}
.selected-profile .speech-bubble:after {
  display: none !important;
}


@keyframes selectedPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(108, 92, 231, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
  }
}


 
 
 
 
/* Info Panel */
#infoPanel {
	display: flex;
	flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 60vh;
    height: auto;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius:15px; 
}
#infoPanel.show {
  display: block;
  transform: translateY(0);
}

#infoPanel img.profile-big {
	width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
}

/* Geri Buton */
.panel-close-btn {
	background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20;
}

.profile-header .back-icon {
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
}

.profile-header .username {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 1.2rem;
  color: #000;
}

.profile-header .menu-icon {
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
}



.pUser{
	display: flex;
    flex-wrap: wrap;
    padding-left: 12px;
    position: relative;
    z-index: 999;
    line-height: 20px;
}
#profileName { 
	font-size: 1.3rem;
    font-weight: 600;
    color: #111;
    margin: 0px;
    width: 100%;
}
#profileNickname {
    color: #444;
    font-size: 1.1rem;
}
#profileStaturColor{
    color: #ccc;
    font-size: 1rem;
    width: 100%;
} 




#infoPanelStatus::before { 
	content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 11px;
    margin-left: -24px;
    vertical-align: middle;
    border: 1px solid #FFF;
}





#infoPanelStatus.online::before {
  background: #34c759; /* güzel bir yeşil */
}
#infoPanelStatus.offline::before {
  background: #757575; /* güzel bir yeşil */
}
#infoPanelStatus.spoofed::before {
  background: #6c5ce7; /* güzel bir yeşil */
}
.status-bubble {
	width: auto !important;
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    margin-top: 1px;
}
.profile-stats span {
  white-space: nowrap;
}







.profile-stats .label::after{
    content: ".";
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -12px;
    font-size: 30px;
    line-height: 1px;
    vertical-align: middle;
    color: #ccc;
}
.profile-stats > div:last-child .label::after {
  display: none !important;
  /* Eğer content varsa, bunu da sıfırlayabilirsin: */
  content: none !important;
}









.profile-actions {
    display: flex;
    width: 100%;
    font-size: 0.9rem;
    cursor: pointer;
    gap: 1rem;
    padding: 1rem;
    padding-top: 0px;
}


.profile-actions button {
    flex: 1;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: none;
    background: none;
    border: 1px solid #eee;
    font-weight: 400;
    align-items: center;
    justify-content: center;
    position: relative;
}
.profile-actions button::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
}

#follow-btn::before {
  content: "\f234"; 
}

.message-btn::before {
  content: "\f1d8"; 
}


.profile-menu {
    position: fixed;
    display: inline-block;
    right: 4rem;
    top: 0.8rem;
}

.profile-menu button {
	background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
}

.profile-menu-content {
  display: none;
  position: absolute;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  z-index: 10;
}

.profile-menu-content a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
white-space: nowrap;
}

.profile-menu-content a:hover {
  background: #f2f2f2;
}

.profile-menu:hover .profile-menu-content {
  display: block;
}


 
 
.kategori-tabs a{
	padding: 0.5rem 1rem;
    border: none;
    border-radius: 999px;
    font-size: 1.1rem;
    background: #fff;
    color: #000;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    flex-shrink: 0;
    text-decoration: none;
    color: #6c5ce7;
}
.kategori-tabs a span{
    color: #000;
}
 
 
    /* Tabs */
	
	    .kategori-tabs::-webkit-scrollbar { display: none; }
		
  .kategori-tabs {
  position: fixed;
  top: 5rem;
  left: 0; 
  right: 0;
  display: flex;
  padding: 1rem;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 1000;
}
.kategori-tabs .tab-button {
  position: relative;
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  background: #fff;
  color: #000;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  font-weight: 600;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.kategori-tabs button::before {
  font-family: "Font Awesome 6 Free";	
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.18rem;
  color: #000;
  transition: color .14s, font-weight .14s;
}
.kategori-tabs button.active {
  background: #000;
  color: #fff;
}
.kategori-tabs button.active::before {
  color: #fff;
  font-weight: 900;
}
.kategori-tabs button::before {
  font-weight: 400;
}
/* Sadece ikonu farklılaştır */
#tab-5::before { content: "\f086"; }   /* Gruplar */
#tab-1::before { content: "\f007"; }   /* Kişiler */
#tab-2::before { content: "\f302"; }   /* Anlıklar */  
#tab-3::before { content: "\f14e"; }   /* Takipler */ 



    /* Bottom Nav */
    .bottom-nav {
      position: fixed; bottom: 0; left: 0;
      width: 100%; height: 5rem;
      background: #fff;
      display: flex; justify-content: space-around; align-items: center;
      border-top: 1px solid #ccc;
      z-index: 10;
	  display:none;
    }
    .nav-item {
      flex: 1; text-align: center;
      color: #888; cursor: pointer;
      padding: 0.5rem 0;
      display: flex; flex-direction: column; align-items: center;
      transition: color 0.3s, font-weight 0.3s;
    }
    .nav-item i { font-size: 1.6rem; margin-bottom: 0.25rem; }
    .nav-item .label { font-size: 0.85rem; }
    .nav-item.active, .nav-item.active i, .nav-item.active .label {
      color: #222; font-weight: 600;
    }
    .nav-item.active .profile-icon { filter: none; }

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

    #konum-btn {
    position: fixed;
    bottom: 6rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    background: #FFF;
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    color: #000;
    }
	
	
	#konum-btn i, #konum-btn i:before{
	color:#000;
	  font-size: 1.5rem;
	}
	
    #konum-nokta {
      position: absolute; width: 20px; height: 20px;
      background: #6c5ce7; border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: pulse 2s infinite;
      pointer-events: none;
      display: none;
      z-index: 500;
    }
    @keyframes pulse {
      0% { transform: translate(-50%,-50%) scale(1); opacity: 0.9; }
      50% { transform: translate(-50%,-50%) scale(2); opacity: 0.6; }
      100%{ transform: translate(-50%,-50%) scale(1); opacity: 0.9; }
    }
    .bolge-katil-btn {
      position: fixed; bottom: 6rem; right: 1rem;
      display: flex; align-items: center; gap: 0.5rem;
      background: #fff; padding: 1.1rem 1.4rem;
      border: none; border-radius: 999px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
      cursor: pointer; z-index: 20;
      font-size: 1.1rem; font-weight: 400; color: #333;
    }
    .bolge-katil-btn b { color: #6c5ce7; margin: 0 0.2rem; }

.leaflet-marker-icon.fade-out {
  opacity: 0 !important;
  transition: opacity 0.0s ease;
}

.leaflet-marker-icon.fade-in {
  opacity: 1 !important;
  transition: opacity 0.0s ease;
}


/* Tüm marker'ların z-index'ini sabitle */
.leaflet-marker-icon {
  z-index: 100 !important;
}

/* Kullanıcının kendi profil marker'ı üstte dursun */
.profile-wrapper.self {
  z-index: 110 !important;
}

/* Tıklanarak seçilen profil en üste çıksın */
.profile-wrapper.selected-profile {
  z-index: 120 !important;
}

/* 'recent' (yeni) olarak işaretlenmiş profiller bir kademe önde */
.profile-wrapper.recent {
  z-index: 105 !important;
}
.profile-inner {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  background: #fff;
}
.profile-inner .profile-mini {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.bio{
	padding:1rem;
	
}
.profile-header {
	display: flex;
    align-items: center;
    margin-top: 20px;
    padding-left: 20px;
}

.pImage {
  display: flex;
  align-items: center; /* Resmi dikey ortalamak için */
  position:relative;
}









.pImage img.profile-big {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.BadgeStyle{
	position:relative;
}
.BadgeStyle strong::before{
	content: "\f0a3";
    font-family: "Font Awesome 6 Free";
    font-size: 21px;
    color: #ffa300;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 3;
}
.BadgeStyle strong::after{
    content: "3";
    color: #FFF;
    position: absolute;
    top: 0px;
    left: 6px;
    z-index: 4;
}
.BadgeStyle .label{
	margin-left: 22px;
}
.profile-stats {
    display: flex;
    margin-top: 10px;
    padding-left: 20px;
}
.profile-stats strong {
	font-size: 1.1rem;
    font-weight: 600;
    color: #111;
    display: inline-block;
	
}













.profile-stats .label { 
    font-size: 0.9rem;
    color: #333;
    display: inline-block;
    margin-right: 18px;
    position: relative;
}





.follow {

}

.following {
   
}
.following::before {
   display:none;
}













.video-modal {
  position: fixed;
  inset: 0;
  background: black;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

.video-modal video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  border: none;
  outline: none;
  z-index: 2;
}





.video-modal.active {
  display: block;
}

.video-profile {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-pic {
	width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.follow-btn {
    background: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}




.video-reply {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  background: white;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  align-items: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 10;
}

.reply-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 999px;
}

.reply-send {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6C5CE7;
  cursor: pointer;
  margin-left: 0.5rem;
}

.emoji-wrapper {
    position: fixed;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 9999;
    bottom: 3.3rem;
}

.emoji-button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-button i {
    font-size: 38px;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.emoji-plus {
	position: absolute;
    bottom: -6px;
    right: -3px;
    font-size: 19px;
    color: #ffffff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.emoji-bubble {
	display: none;
    position: absolute;
    bottom: 49px;
    right: -2px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: 50px;
    opacity: 0.9;
}

.emoji-list {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  gap: 8px;
  align-items: center;
}















.video-options {
	position: absolute;
    top: 1rem;
    right: 1.1rem;
}

.options-toggle {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #FFF;
}

.options-menu {
    display: none;
    position: absolute;
    top: 2.2rem;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 9999;
}

.options-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
}

.options-menu button:hover {
  background: #f1f1f1;
}





.speech-wrapper i{
	font-size: 1rem;
    color: #FFF;
}

.speech-wrapper {
  position: absolute;
  top: -2.6rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.speech-bubble {
    background: white;
    border-radius: 1rem;
    padding: 0.3rem 0.7rem;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
	color:#444;
	z-index: 999;
}

.speech-dot {
    background: white;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	    z-index: 10209;
}

.speech-dot.dot1 {
    width: 8px;
    height: 8px;
    top: 100%;
    left: 71%;
    margin-top: 2px;
}

.speech-dot.dot2 {
width: 5px;
    height: 5px;
    top: 100%;
    left: 67%;
    margin-top: 10px;
}





.IfBubble {
    display: block;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    position: relative;
    background: #fff;
    border-radius: 1rem;
}






#bubbleMessage.bubble-detail {
	position: relative;
    background: #444;
    border-radius: 999px;
    display: none;
    align-items: center;
    color: #ffffff;
    margin-top: 1.1rem;
    margin-bottom: 0rem;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
}



#bubbleMessage.bubble-detail::before {
    content: "\f3e5"; /* fa-arrow-turn-up */
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* SOLID versiyonu */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #fff;
    pointer-events: none;
}





.recent .status-indicator::before {
  display: none;
}


.status-indicator::after { 
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    bottom: -5px;
    left: 50%;
    z-index: -1;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.20);
}
.status-indicator::before {
content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: #999;
    border-radius: 9px;
    width: 7px;
    height: 7px;
    z-index: 0;
    border: 1px solid #FFF;
}
.status-indicator.online::before {
  background-color: #34c759;
}
.status-indicator.spoofed::before {
  background-color: #6c5ce7;
}
/*
    content: "";
    position: absolute;
    bottom: 2px;
    left: -12px;
    background: #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
	
	
pastel yeşil #34c759,
#757575 (orta gri)
#42a5f5 mavi
display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #FFF;
    background: #777;
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
	
		display: block; 
    width: 16px;
    height: 16px;
    background: #777;
    transform: rotate(45deg);
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
	
	
*/

	
/*
.status-indicator.online::before {
  content: "\f04b";
}
*/




.guncel-switch {
    position: fixed;
    left: 1.3rem;
    bottom: 6.3rem;
    z-index: 1100;
    padding: 0.7rem 0.8rem;
    border: none;
    border-radius: 999px;
    font-size: 1.1rem;
    background: #fff;
    color: #000;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    flex-shrink: 0;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* iPhone-style switch */
.switch-label input {
  display: none;
}

.slider {
	position: relative;
    width: 36px;
    height: 20px;
    background-color: #ccc;
    border-radius: 999px;
    transition: background-color 0.2s;
}

.slider::before {
	content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 999px;
    transition: transform 0.2s;
}

/* Toggle ON */
.switch-label input:checked + .slider {
  background-color: #000; /* iOS yeşili */
}

.switch-label input:checked + .slider::before {
  transform: translateX(16px);
}












.leaflet-control-zoom {
  display: none !important;
}

  
    .leaflet-control-zoom { display: none !important; }
    .leaflet-interactive:focus,
    .leaflet-interactive:active,
    svg:focus,
    svg:active {
      outline: none !important;
      box-shadow: none !important;
    }
    #alt-panel {
		position: fixed;
		left: 1rem;
		bottom: 6.1rem;
		right: 1rem;
		background: #fff;
		box-shadow: 0 2px 13px -3px #999999bf;
		z-index: 10;
		height: 35vh;
		border-radius: 20px;
		opacity: 1;
		transform: translateY(100%);
		transition: transform 0.38s cubic-bezier(.43,1.47,.5,1), opacity 0.18s;
		overflow: scroll !important;
		display: block;
		will-change: transform;
    }

    #alt-panel.acik {
      transform: translateY(0);
      opacity: 1;
    }
    #alt-panel.kapali {
      transform: translateY(110%);
      opacity: 0;
    }
	
	#alt-panel::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}
	
	
    #alt-panel .panel-icerik {
		height: calc(100% + 24px);
		overflow-y: auto;
		padding-bottom: 14px;
    }



#alt-panel-dragbar{
	position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 9px;
    cursor: grab;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: center;
    height: 60px;
}


#tab-5 {
  position: relative;
  background: #fff !important;
  color: #222 !important;
  padding-left: 2.9rem;
}
#tab-5::before {
  content: "\f086";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.18rem;
  color: #000;
  transition: color .14s, font-weight .14s;
}
#tab-5.active {
  background: #000 !important;
  color: #fff !important;
}
#tab-5.active::before {
  color: #fff;
  font-weight: 900;
}




    #panel-drag-handle {
      width: 56px;
      height: 7px;
      background: #d6d6e0;
      border-radius: 6px;
      margin: 12px auto 2px auto;
      cursor: pointer;
      transition: background .2s;
    }
    .ilce-panel-baslik {
		font-size: 1.5rem;
		color: #444;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20px;
		padding-top: 22px;
		padding-bottom: 18px;
    }
    .ilce-panel-baslik span {
		font-weight: 600;
		color: #6c5ce7;
    }
    .ilce-panel-gruplar {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
		padding-bottom: .7em;
    }
    .ilce-panel-kart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    padding-top: 0em;
    font-size: 1.08rem;
    }
    .ilce-panel-grupbaslik {
		font-size: 1.1em;
		font-weight: 700;
		display: block;
		color: #000;
    }
    .ilce-panel-grupdesc {
		display: flex;
		font-size: 1em;
		color: #444;
		opacity: .85;
		font-weight: 400;
		margin-top: .2em;
    }
    .ilce-panel-emoji {
		font-size: 1em;
		margin-right: .2em;
    }
    .ilce-panel-btn {
		background: #ffffff;
		color: #000;
		border: none;
		border-radius: 6px;
		font-weight: 600;
		padding: .5em 1.5em;
		font-size: 1em;
		cursor: pointer;
		transition: background 0.16s;
		border: 1px solid #CCC;
    }
    .ilce-panel-btn.giris {
		background: #ccc;
		color: #222;
		cursor: pointer;
    }

.domates{
	left:10px;
}



.phone{
	
	    width: 100%;
    height: 100%;
    overflow: hidden;
}


.messages-container {
	margin-top: 5.5rem;
    border-radius: 1.5rem;
    padding: 0;
    overflow: hidden;
}
.notification-container {
	margin-top: 0.5rem;
    border-radius: 1.5rem;
    padding: 0;
    overflow: hidden;
}
/* Tabs */
.chat-tabs {
  display: flex;
  gap: 0.3rem;
  padding: 1.1rem 1rem 0.4rem 1rem;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  background: #f1f1f1;
  color: #000;
  font-size: 1.04rem;
  font-weight: 600;
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 0.52rem 1.4rem;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background 0.12s, color 0.18s;
}
.tab.active {
  background: #111;
  color: #fff;
}

/* Chat List */
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.chat-list::-webkit-scrollbar { display: none; }

.chat-item {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 1.5rem 1.1rem 0rem 1.2rem;
    background: #fff;
    cursor: pointer;
    transition: background 0.16s;
}
.chat-item:last-child {
  border-bottom: none;
}
.chat-item:hover {
  background: #f7f7fa;
}

/* Profil foto + status */
.profile-pic2-status {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.profile-pic2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.status-dot {
  position: absolute;
  bottom: 4px;
  right: 3.5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #d4d4d4;
  box-shadow: 0 1px 3px #0002;
  z-index: 2;
  transition: background 0.15s;
}
.status-dot.online {
  background: #1dc100;
}
.profile-pic2-status.offline .status-dot { background: #d4d4d4; }

/* Chat Info */
.chat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.chat-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.9rem;
}
.chat-title {
  font-weight: 700;
  font-size: 1.07rem;
  color: #181818;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 185px;
  letter-spacing: 0.01em;
}

.chat-time-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chat-time {
  font-size: 0.93rem;
  color: #888;
  font-weight: 600;
  margin-right: 0.08rem;
  white-space: nowrap;
}
.unread-badge {
  background: #111;
  color: #fff;
  font-size: 0.95rem;
  min-width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-left: 1px;
  font-weight: 700;
  box-shadow: 0 1px 4px #1111;
}

.chat-sub {
  font-size: 1rem;
  color: #5e5e5e;
  opacity: .95;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 1px;
  max-width: 270px;
}










    .notif-list {
		display: flex;
		flex-direction: column;
    }
    .notif-item {
		display: flex;
		align-items: center;
		gap: 0.9rem;
		padding: 0.8rem 1.1rem;
		padding-bottom: 0rem;
		border-radius: 1.2rem;
		background: #fff;
		font-size: 1.05rem;
		position: relative;
    }
    .notif-avatar {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      overflow: hidden;
      border: 2.5px solid #eee;
      cursor: pointer;
      flex-shrink: 0;
      background: #fff;
    }
    .notif-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .notif-avatar.notif-online:after {
      content: "";
      position: absolute;
      right: 2px; bottom: 2px;
      width: 12px; height: 12px;
      background: #13cc41;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 3px #11c846; 
    }
    .notif-avatar.notif-offline:after {
      content: "";
      position: absolute;
      right: 2px; bottom: 2px;
      width: 12px; height: 12px;
      background: #bdbdbd;
      border: 2px solid #fff;
      border-radius: 50%;
    }
    .notif-username {
      cursor: pointer;
      font-weight: 600;
      color: #1876f2;
      text-decoration: none;
    }
    .notif-follow-request .notif-btn {
		margin-right: 0.5rem;
		margin-top: 0.7rem;
		border: none;
		padding: 0.4rem 1.1rem;
		border-radius: 999px;
		font-size: 1em;
		font-weight: 600;
		cursor: pointer;
    }
    .notif-btn-accept { background: #13cc41; color: #fff; }
    .notif-btn-reject { background: #e84545; color: #fff; }
    .notif-btn-accept:hover { background: #14b438; }
    .notif-btn-reject:hover { background: #d32626; }
    .notif-memory-thumb-vert {
		margin-left: auto;
		cursor: pointer;
		width: 40px;
		height: 54px;
		border-radius: 0.2rem;
		overflow: hidden;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
    }
    .notif-memory-thumb-vert img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
























.menu-hide {
  display: none !important;
}

.iframe-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0px;
  z-index: 1;
  background: #fff;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: none;
  background: #fff;
}
.iframe-container iframe.active {
  display: block;
}










.bottom-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5rem;
    background: #fff;
    border-top: 0.5px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 99;
	padding:10px;
}

.bottom-menu button {
	background: #FFF;
    border: none;
    font-size: 1.3rem;
    color: #888;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*
.bottom-menu .active{
    font-weight: 800;
}
*/
.bottom-menu i {
	font-size: 1.6rem;
    margin-bottom: 0.35rem;
}	
.menu-center-btn i{
	 font-size: 1.3rem;
	 margin-bottom:0rem; 
}
	
.menu-center-btn {
	background: #ffffff !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    justify-content: center;
    z-index: 100;
    border: 2px solid #444 !important;
    position: relative;
	margin-top:-4px;
}
.bottom-menu button span {
  font-size: 0.87rem;
}

/* Profil ikonu (örn: sağdaki butonda profil resmi) */
.profile-icon {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.15rem;
}




#camera-container {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: black;
  display: none; /* Başta gizli */
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
}

#camera-container.active {
  display: flex;
}

#camera {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#plus-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  color: black;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  z-index: 100;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
/* Sol üstte çarpı kapatma butonu */
#close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  z-index: 100;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}


#UserOne{
	
	
	
}