.story-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: rgb(0 0 0 / 71%);

  display: none;

  align-items: center;

  justify-content: center;

}



.story-modal-content {

  width: 100%;

  max-width: 490px;

  height: 100%;

  aspect-ratio: 9/16;

  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);

  position: relative;


}



.story-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 16px 24px;

  background: #fff;

  z-index: 2;

  margin-top: 0; /* 👈 eklendi */

}

.story-modal.fullscreen .story-top{display: none;}

.story-top{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 24px;
}
.story-top-left{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  color: #fcfcfc;
}
.story-top-left .liner{
  display: block;
  background-color: #fcfcfc;
  width: 1px;
  height: 16px;  
}
.story-top-left #storyLabel{font-size: 16px;font-weight: 700;}
.story-top-left #storyUserTime{font-size: 14px;color: #fcfcfc !important;}

.story-close{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  padding: 10px;
  background-color: #fcfcfc;
  border: none;
  outline: none;
}
.story-close img{
  width: 24px;
  margin: 0 !important;
}
.story-user {

  display: flex;

  align-items: center;

}


.story-user-image {

  width: 48px;

  height: 48px;

  border-radius: 8px;

  object-fit: cover;

  margin-right: 10px;

  /* border: 2px solid #ddd; */

}
#storyUserName{
  font-size: 16px;
  font-weight: 700;
}


.story-user-info div:first-child {

  /* font-weight: 600; */

  font-size: 13px;

}

.story-company {

  font-size: 13px;

  color: #999;

}

.story-company,

.story-time-header {

  font-size: 13px;

  color: #888;

  line-height: 1;

}

.story-slider-wrapper {

  position: relative;

  flex: 1;

  display: flex;

  flex-direction: column;

  /* justify-content: center; */

  padding: 0 24px 16px;

  background: #fafafa;

  /* text-align: center; */

  /* top: -82px; */

}
.story-modal.fullscreen .story-header{display: none;}
.story-modal.fullscreen .story-slider-wrapper{padding: 0;}

.story-slider{
  overflow-y: scroll;
}
.story-slider p {

  margin-bottom: 12px;

  font-size: 15px;

  color: #333;

}



.progress-container {

  display: flex;

  gap: 4px;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  padding: 10px;

  z-index: 3;

}

.progress-segment {

  flex: 1;

  height: 3px;

  background: #ccc;

  border-radius: 2px;

}

.progress-segment.active {

  background: #5E5691;

}

.progress-segment.seen {

  background: #aaa;

}



.story-buttons .story-btn {

  background: none;

  border: none;

  font-size: 20px;

  cursor: pointer;

}

.story-bar {

  display: flex;

  gap: 24px;

  overflow-x: auto;

  padding: 24px 24px 0;

  scrollbar-width: none;

}

.story-bar::-webkit-scrollbar {

  display: none;

}

.story-circle {

  width: 88px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  cursor: pointer;

  position: relative;

}

.story-circle img {

  width: 78px;

  height: 78px;

  border-radius: 50%;

  object-fit: cover;

  /* padding: 4px; */

  /* background: linear-gradient(135deg, #6a00f4, #00e676); */
  position: relative;
  z-index: 1;
  border: 4px solid #ebeaf1;

  box-shadow: 0 0 0 2px transparent;

  transition: filter 0.2s ease;

}

.story-circle::before{
  content: '';
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  z-index: 0;
}
.story-circle.only-talep::before{background: linear-gradient(315deg,#EC755D 0%, #7872A3 52%);}
.story-circle.only-portfoy::before{background: linear-gradient(315deg,#00BAF2 0%, #7872A3 100%);}
.story-circle.both-tips::before{background: linear-gradient(315deg,#00BAF2 0%, #EC755D 100%);}
.story-circle:hover img {

  filter: opacity(0.8);
  /* transform: scale(1.05); */

}

.story-circle.seen img {
  filter: grayscale(100%);
  opacity: 0.6;
}

.story-circle.seen::before {
  opacity: 0.5;
  filter: grayscale(100%);
}


.story-count-badge {
  position: absolute;
  top: 0px;
  right: 3px;
  background-color: #5E5691;
  color: #EBEAF1;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #EBEAF1;
  z-index:2;
}
.story-ekle::before{
  border: 2px dashed #5E5691;
  background: transparent;
  transition: all 500ms ease;
}
.story-ekle img{
  padding: 24px;
  border: none;
  filter: none;
  transition: all 500ms ease;
}
.story-ekle:hover::before{
  background: #5E5691;
  border: 2px solid #5E5691;
}
.story-ekle:hover img{filter: brightness(0) invert(1);}
.story-ekle .story-name{color: #262626;}
.story-ekle:hover .story-name{color: #262626;}
.story-name {

  margin-top: 10px;

  font-size: 13px;

  max-width: 70px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.story-plus {

  position: absolute;

  bottom: 16px;

  right: 6px;

  background: #007bff;

  color: #fff;

  font-size: 14px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}

.story-actions-wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px;
  background-color: #fff;
  gap: 16px;
}
.story-actions {

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  width: 100%;

}
.story-ara{
  background-color: #5E5691;
  color: #fff;
  transition: all 500ms ease;
}
.story-ara:hover{background-color: #362C75;color: #fff;}
.story-whatsap{
  background-color: #1EB173;
  color: #fff;
  transition: all 500ms ease;
}
.story-whatsap:hover{background-color: #1BA169;color: #fff;}
.story-user-liner{
  display: block;
  height: 8px;
  width: 1px;
  background-color: #D9D9D9;
}
.story-content .divider{
  width: 100%;
  height: 1px;
  background-color: #EBEAF1;
  margin: 16px 0;
}
.story-field-label{
  color: #8c8c8c;
  font-size: 14px;
  white-space: nowrap;
  margin-bottom: 2px;
}
.story-field-data{
  color: #262626;
  font-size: 16px;
  margin-bottom: 0 !important;
}
.story-big-img{
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #EBEAF1;
  margin: 0 0 16px;
}
.story-img-box {
  margin-bottom: 16px;
}
.story-big-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #EBEAF1;
}

.story-content{
  padding: 0 24px 16px;
  /* max-height: 600px; */
  overflow-y: auto;
  flex-grow: 1;
}
.story-actions .btn {

  /* min-width: 100px; */

  font-weight: 500;
  font-family: "Kumbh Sans", serif !important;
  font-size: 16px;
  border-radius: 16px;
  padding: 16px 24px;
  width: calc((100% - 16px) / 2);

}
.story-actions-wrap .btn.story-ilan-link{
  color: #5E5691;
  border: 1px solid #D9D9D9;
  font-weight: 500;
  font-family: "Kumbh Sans", serif !important;
  font-size: 16px;
  border-radius: 16px;
  padding: 16px 24px;
  width: 100%;
  transition: all 500ms ease;
}
.story-ilan-link:hover{
  background-color: #D9D9D9;
}
.story-image {

  width: 100%;

  max-height: 27vh;

  object-fit: cover;

  border-radius: 16px;

  display: block;

  margin: 0 auto 10px auto;

}
.story-modal.fullscreen .story-content{display: none;}
.story-modal.fullscreen .story-actions{display: none;}
.talep-filtre-wrap .form-select{max-width: 170px;width: 100%;}
.talep-ekle-btn{width: 250px !important;}
.purple-btn.talep-olustur-btn{
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 16px;
  width: 100%;
}
@media (max-width: 768px) {

  .story-image {

    max-height: 27vh;

	margin: 70px 0 0 0px;

  }.story-content{
  max-height: 415px;
}
.talep-filtre-wrap .form-select{max-width: unset;width: calc(50% - 0.5rem);}
.talep-ekle-btn{width: 100% !important;}
.story-actions .btn {
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 12px;

}
.story-actions-wrap .btn.story-ilan-link{
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 12px;
}
.story-close{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  padding: 0px;
}
.story-close img{
  width: 16px;
}
}



@media (min-width: 769px) {

  .story-image {

    max-height: 27vh;

	margin: 70px 0 0 0px;

  }

}

.story-modal.fullscreen {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.75);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

}



.story-modal.fullscreen .story-modal-content {

  width: 100%;

  max-width: 420px;

  aspect-ratio: 9 / 16;

  background: transparent;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

  max-height: 100%;

}



.ayricalik-story-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

}



.ayricalik-story-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 20px;

}



/* Üst bar */

.story-header-overlay {

  position: absolute;

  top: 12px;

  left: 12px;

  right: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 10;

  padding: 6px 12px;

  background: rgba(255, 255, 255, 0.85);

  border-radius: 32px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}



.story-header-overlay .story-user {

  display: flex;

  align-items: center;

  gap: 8px;

}



.story-header-overlay .story-user-image {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  object-fit: contain;

  background: #fff;

}



.story-header-overlay .story-user-name {

  font-size: 13px;

  font-weight: 600;

  color: #000;

}



.story-header-overlay .close-btn {

  background: none;

  border: none;

  font-size: 20px;

  color: #000;

  cursor: pointer;

  line-height: 1;

}

.white-text {

  color: #1c1c1c !important

}

.story-time-header {

  font-size: 11px;

    color: #aaa;

    margin-top: 1px;

}
.story-big-img.story-leader-img {
  max-height: calc(100vh - 200px);
  width: auto;
  object-fit: contain;
  border-radius: 12px;
}


.story-delete {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    padding: 10px;
    background-color: #fcfcfc;
    border: none;
    outline: none;
	margin: 0 0 0 185px;
}
@media (max-width: 768px) {
    .story-delete {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        padding: 0px;
		margin: 0 0 0 133px;        
    }
}
/* === İŞLEM balonları: ₺ rozeti (ring’e dokunmadan) === */
/* .only-islem sınıfı sizde zaten var; data-kind="satilik|kiralik" da eklendi. */
/* İŞLEM rozetini (₺/$) ring'in SAĞ-ALT iç köşesine sabitle */
.story-circle.only-islem { position: relative; }

/* Dairenin ölçüleri: ring ::before için sizde 86px ve top:-4px.


/* Satılık/Kiralık rengi */
.story-circle.only-islem[data-kind="satilik"]::after{ background: #F59E0B; } /* amber */
.story-circle.only-islem[data-kind="kiralik"]::after{ background: #10B981; } /* teal */

/* sayı rozeti hep üstte kalsın */
.story-circle.only-islem .story-count-badge{ z-index: 4; }

/* (opsiyonel) işlem için ring gradyanı – ring'i kaldırmaz, sadece rengini değiştirir */
.story-circle.only-islem::before{
  background: linear-gradient(315deg, #a78bfa 0%, #60a5fa 100%);
}
@media (max-height: 830px) {
    .story-modal{align-items: end;}
    .story-modal-content{max-height: calc(100svh - 54px);}
}

/* Genel kutu */
.bilgi { line-height: 1.25; }

/* Üst satır: breadcrumb */
.bilgi .yer{
  color:#8c8c8c;
  font-size:14px;
  white-space:nowrap;
  margin-bottom:2px;
  display:block;
}

/* Alt satır: başlık */
.bilgi .baslik{
  color:#262626;
  font-size:16px;
  margin-bottom:0 !important;
  display:block;
}

/* >>> KILIT KURAL: .bilgi içinde .story-field-data'ya gelen tüm dış stilleri iptal et */
.bilgi :is(.yer, .baslik) .story-field-data{
  all: unset !important;   /* dış stilleri temizle */
  display: inline;         /* <p> boşlukları olmasın */
  color: inherit;          /* sarmalayıcıdan renk alsın */
  font: inherit;           /* sarmalayıcıdan font/size alsın */
}

/* Ayraçları otomatik eklemek istersen: */
.bilgi .yer .story-field-data::after{ content:" / "; }
.bilgi .yer .story-field-data:last-of-type::after{ content:""; }

.bilgi .baslik .story-field-data:nth-of-type(2)::after{ content:" - "; }
/* Sağ taraftaki buton grubu boşlukları */


/* Konum butonu */
.story-loc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

}
.story-loc-btn img{ display:block; width:30px; height:30px; }

.story-loc-btn[hidden]{ display:none !important; }          /* JS ile gizlemek istersen */