/* ============================================================
   components.css — index.html VE profil.html ORTAK PARÇALARI:
   üst menü (topbar), mobil hamburger menüsü, gönderi kartı.
   base.css'ten SONRA yüklenir.
   ============================================================ */

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:10px 20px;
}
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.2rem; flex-shrink:0; }
.logo-mark{
  width:34px; height:34px; border-radius:10px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex-shrink:0;
}
.topbar-search{
  flex:1; max-width:360px; display:flex; align-items:center; gap:9px;
  background:var(--surface-alt); border-radius:999px; padding:9px 16px; color:var(--text-dim); font-size:0.85rem;
}
.topbar-search .icon{ width:16px; height:16px; }
.topbar-nav-icons{ display:flex; align-items:center; gap:0px; order:3; margin-left:auto; }
.topbar-arama-wrap{ order:4; }
.icon-btn{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.icon-btn .icon{ width:24px; height:24px; }
.icon-btn:hover{ background:var(--surface-alt); }
.icon-btn.active{ color:var(--accent-text); }
.topbar-actions{ display:flex; align-items:center; gap:10px; order:5; margin-left:0; }
.hamburger-btn{ display:none; }

@media (max-width:800px){
  .topbar-search{ display:none; }
  .btn-outline.hide-mobile{ display:none; }
  .topbar-actions #topbarUyeOlBtn,
  .topbar-actions #cikisBtn{ display:none; }
  .topbar-inner{ padding:8px 10px; gap:2px; }
  .logo{ font-size:0.98rem; gap:6px; }
  .logo-mark{ width:28px; height:28px; }
  .topbar-nav-icons{ gap:0px; }
  .icon-btn{ width:36px; height:36px; }
  .icon-btn .icon{ width:26px; height:26px; }
  .topbar-nav-icons a[title="Anasayfa"],
  .topbar-nav-icons a[title="Arkadaşlar"],
  .topbar-nav-icons a[title="Canlı Odalar"],
  #mesajlarIconBtn,
  .topbar-actions > .theme-switch{ display:none; }
  .theme-switch{ width:52px; height:28px; }
  .theme-thumb{ width:22px; height:22px; }
  [data-theme="dark"] .theme-thumb{ transform:translateX(24px); }
  .hamburger-btn{
    display:flex; width:34px; height:34px; border-radius:9px;
    background:var(--surface-alt); align-items:center; justify-content:center; flex-shrink:0;
  }
  .hamburger-btn .icon{ width:17px; height:17px; }
}

/* ============ MOBİL TAM EKRAN MENÜ ============ */
.mobile-overlay{
  position:fixed; inset:0; z-index:300; background:var(--bg);
  padding:16px 20px 30px; transform:translateY(-100%);
  transition: transform .3s cubic-bezier(.32,.9,.35,1); overflow-y:auto;
}
.mobile-overlay.open{ transform:translateY(0); }
.overlay-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.overlay-close{ width:40px; height:40px; border-radius:10px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; }
.overlay-nav a{ display:flex; align-items:center; gap:14px; font-size:1.08rem; font-weight:600; padding:13px 4px; border-bottom:1px solid var(--border); }
.overlay-nav a .icon{ color:var(--accent); }
.overlay-actions{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* ============ GÖNDERİ KARTI (feed + profil ortak) ============ */
.avatar{ border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; object-fit:cover; }

.post-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; margin-bottom:16px; box-shadow:var(--shadow-card);
}
.post-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.post-head img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.post-name-col{ display:flex; flex-direction:column; }
.post-name{ font-weight:700; font-size:0.9rem; }
.post-meta{ font-size:0.76rem; color:var(--text-dim); }
.post-more{ margin-left:auto; color:var(--text-dim); padding:6px; border-radius:8px; display:flex; }
.post-more:hover{ background:var(--surface-alt); }

.post-text{ font-size:0.9rem; color:var(--text); line-height:1.55; margin-bottom:10px; white-space:pre-wrap; word-break:break-word; }

.post-media{ position:relative; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:10px; background:var(--surface-alt); }
.post-media{ background:#000; display:flex; align-items:center; justify-content:center; }
.post-media img{ width:100%; max-height:480px; object-fit:contain; display:block; }
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,0.6);
}
.play-btn svg{ width:22px; height:22px; margin-left:2px; }
.duration-chip{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); color:#fff; font-size:0.7rem; font-weight:600; padding:3px 8px; border-radius:6px; }

.post-stats{ display:flex; align-items:center; justify-content:space-between; font-size:0.78rem; color:var(--text-dim); padding:2px 2px 10px; }
.reaction-icons{ display:flex; align-items:center; }
.reaction-icons .rmini{ width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); margin-left:-6px; color:#fff; font-size:0.7rem; }
.reaction-icons .rmini:first-child{ margin-left:0; }
.r-like{ background:var(--accent); }
.r-love{ background:#F3425F; }

.post-foot{ display:flex; align-items:center; gap:4px; padding-top:8px; border-top:1px solid var(--border); }
.post-foot button{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-size:0.82rem; font-weight:600; color:var(--text-muted); padding:8px; border-radius:8px; }
.post-foot button .icon{ width:18px; height:18px; }
.post-foot button:hover{ background:var(--surface-alt); }
.post-foot button.liked{ color:var(--accent); }
@media (max-width:480px){
  .post-foot button{ gap:4px; font-size:0.74rem; padding:8px 2px; }
  .post-foot button .icon{ width:16px; height:16px; }
}

.live-dot{ width:6px; height:6px; border-radius:50%; background:#F3425F; animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(243,66,95,.4);} 50%{ box-shadow:0 0 0 5px rgba(243,66,95,0);} }

/* ---- onay/başarı modalı (index + profil ortak) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open{ display:flex; }
#begenenlerModal.modal-overlay{ z-index:10002; }
.modal-box{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:32px; max-width:360px; width:100%; text-align:center;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.5);
}
.modal-icon{
  width:56px; height:56px; border-radius:50%; background:var(--grad);
  color:#fff; font-size:1.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.modal-icon-warn{ background:#F3425F; }
.modal-box h3{ font-size:1.25rem; font-weight:800; margin-bottom:8px; }
.modal-box p{ font-size:0.85rem; color:var(--text-muted); margin-bottom:20px; }
.modal-actions{ display:flex; gap:10px; }
.modal-info{
  background:var(--surface-alt); border-radius:10px; padding:14px 16px;
  margin-bottom:20px; text-align:left;
}
.modal-info-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:0.86rem; }
.modal-info-row span{ color:var(--text-muted); }
.modal-info-row b{ font-weight:700; }
/* ---- yükleniyor animasyonu (index + profil ortak) ---- */
.yukleniyor-kutu{
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; grid-column:1/-1;
}
.yukleniyor-spinner{
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--border-strong);
  border-top-color:var(--accent);
  animation:donSpin 0.7s linear infinite;
}
@keyframes donSpin{ to{ transform:rotate(360deg); } }


/* ---- Gönderi detay modalı (index + profil ortak) ---- */
#gonderiDetayModal .modal-box{ display:none; } /* bu modal kendi kutusunu kullanıyor, .modal-box'a ihtiyacı yok */

.gonderi-detay-box{
  background:var(--surface); border-radius:var(--radius-lg);
  display:flex; width:min(1040px, 94vw); max-height:88vh; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
  position:relative;
}
.gonderi-detay-kapat{
  position:absolute; top:12px; right:12px; z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.gonderi-detay-medya{
  flex:1.3; background:#000; display:flex; align-items:center; justify-content:center;
  min-width:0;
}
.gonderi-detay-medya img{ width:100%; height:100%; max-height:88vh; object-fit:contain; }
.gonderi-detay-medya:empty{ display:none; }
.gonderi-detay-medya.metin-modu{
  display:flex; align-items:center; padding:48px 44px; overflow-y:auto;
  background:linear-gradient(160deg, #F7F8FA 0%, #EEF1F7 100%);
  position:relative;
}
[data-theme="dark"] .gonderi-detay-medya.metin-modu{
  background:linear-gradient(160deg, #1A1E2B 0%, #12151F 100%);
}
.gonderi-detay-medya.metin-modu::before{
  content:'"'; position:absolute; top:20px; left:28px; font-family:Georgia, serif; font-size:5rem; font-weight:800;
  color:var(--accent); opacity:0.12; line-height:1; pointer-events:none;
}
.gonderi-detay-medya.metin-modu p{
  font-size:1.28rem; font-weight:500; line-height:1.65; color:var(--text); white-space:pre-line;
  position:relative; z-index:1; max-width:100%;
}
.gd-metin-sarmal{ width:100%; position:relative; z-index:1; }
.gonderi-detay-medya.metin-modu.gd-metin-daraltilmis .gd-metin-sarmal p{
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.gd-metin-devam-btn{
  display:block; margin-top:10px; background:none; border:none; padding:0;
  font-size:0.86rem; font-weight:700; color:var(--accent); cursor:pointer;
}
.gd-metin-devam-btn:hover{ text-decoration:underline; }

.gonderi-detay-sag{
  flex:1; min-width:320px; max-width:460px;
  display:flex; flex-direction:column;
  border-left:1px solid var(--border);
}
.gonderi-detay-baslik{
  display:flex; align-items:center; gap:11px;
  padding:16px; border-bottom:1px solid var(--border);
}
.gonderi-detay-baslik img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.gonderi-detay-baslik .gd-isim{ font-weight:700; font-size:0.88rem; }
.gonderi-detay-baslik .gd-zaman{ font-size:0.74rem; color:var(--text-dim); }

.gonderi-detay-govde{ flex:1; overflow-y:auto; padding:16px; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.gonderi-detay-govde::-webkit-scrollbar{ width:6px; }
.gonderi-detay-govde::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
.gonderi-detay-metin{ font-size:0.92rem; font-weight:600; color:var(--text); line-height:1.55; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); white-space:pre-wrap; word-break:break-word; }
.gonderi-detay-metin:empty{ display:none; margin:0; padding:0; border:none; }

.gd-yorumlar-baslik{ font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:12px; }
.gonderi-detay-yorumlar{ display:flex; flex-direction:column; gap:10px; }
.gd-yorum{ display:flex; gap:9px; }
.gd-yorum img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.gd-yorum-govde{ font-size:0.83rem; line-height:1.4; background:var(--surface-alt); border-radius:14px; padding:8px 12px; display:inline-block; }
.gd-yorum-govde b{ font-weight:700; margin-right:6px; }
.gd-yorum-zaman{ font-size:0.68rem; color:var(--text-dim); margin-top:4px; margin-left:2px; }
.gd-yorum-bos{ text-align:center; color:var(--text-dim); font-size:0.82rem; padding:20px 0; }
.gd-yorum-alt{ display:flex; align-items:center; gap:12px; margin-top:4px; margin-left:2px; }
.gd-yorum-begen-btn, .gd-yorum-yanitla-btn, .gd-yorum-begeni-sayisi{ font-size:0.72rem; font-weight:700; color:var(--text-dim); }
.gd-yorum-begeni-sayisi{ cursor:pointer; white-space:nowrap; }
.gd-yorum-begeni-sayisi:hover{ text-decoration:underline; }
.gd-yorum-begen-btn.liked{ color:var(--accent); }
.gd-yorum-yanitlar{ margin-top:10px; margin-left:20px; padding-left:14px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.gd-yorum-more-wrap{ position:relative; flex-shrink:0; }
.gd-yorum-more-btn{ color:var(--text-dim); padding:4px; }
.gd-yorum-more-menu{
  position:absolute; top:24px; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.25); min-width:130px; overflow:hidden;
}
.gd-yorum-begeni-wrap{ position:relative; display:inline-block; }
.gd-yorum-begeni-dropdown{
  position:absolute; top:20px; left:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.25); min-width:150px; max-height:220px; overflow-y:auto;
  display:flex; flex-direction:column; padding:6px 0;
}
.gd-yorum-begeni-dropdown a{ padding:8px 14px; font-size:0.8rem; font-weight:600; color:var(--text); white-space:nowrap; display:block; }
.gd-yorum-begeni-dropdown a:hover{ background:var(--surface-alt); }
.gd-yorum-more-menu button{ width:100%; text-align:left; padding:9px 12px; font-size:0.8rem; font-weight:600; color:var(--text); }
.gd-yorum-more-menu button:hover{ background:var(--surface-alt); }
.gd-yorum-hizli-tepkiler{ display:flex; gap:2px; padding:8px; border-bottom:1px solid var(--border); }
.gd-yorum-hizli-tepkiler button{ font-size:1.05rem; padding:5px; border-radius:8px; flex:1; text-align:center; transition:transform .12s ease, background .12s ease; }
.gd-yorum-hizli-tepkiler button:hover{ background:var(--surface-alt); transform:scale(1.15); }
.gd-yorum-tepki-rozetleri{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.gd-tepki-rozet{ background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:0.72rem; display:inline-flex; align-items:center; gap:3px; box-shadow:0 2px 5px -2px rgba(0,0,0,0.1); }

.gonderi-detay-stats{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:0 0 10px; font-size:0.8rem; font-weight:700; color:var(--text-dim);
}
.gonderi-detay-stats:empty{ display:none; padding:0; }
.gd-begenenler-avatarlar{ display:flex; flex-shrink:0; }
.gd-begenenler-avatarlar img{ width:20px; height:20px; border-radius:50%; object-fit:cover; border:2px solid var(--surface); margin-left:-8px; background:var(--surface-alt); }
.gd-begenenler-avatarlar img:first-child{ margin-left:0; }
.gonderi-detay-aksiyon{ margin:0 -16px 8px; padding:2px 16px 10px; border-bottom:1px solid var(--border); }
.gonderi-detay-aksiyon button{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:0.84rem; font-weight:600; color:var(--text-muted);
}
.gonderi-detay-aksiyon button:hover{ background:var(--surface-alt); }
.gonderi-detay-aksiyon button.liked{ color:var(--accent); }
.gonderi-detay-aksiyon button.pasif{ opacity:0.45; pointer-events:none; }

.gonderi-detay-yorum-form{
  display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border);
}
.gonderi-detay-yorum-form input{
  flex:1; border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 14px; font-size:0.83rem; background:var(--surface-alt); color:var(--text); font-family:inherit;
}
.gonderi-detay-yorum-form input:focus{ outline:none; border-color:var(--accent); }
.gonderi-detay-yorum-form button{
  color:var(--accent); font-weight:700; font-size:0.83rem; padding:0 8px; flex-shrink:0;
}
.gonderi-detay-yorum-form.pasif{ display:none; }

@media (max-width:760px){
  #gonderiDetayModal.modal-overlay{ padding:0; z-index:10001; }
  .gonderi-detay-box{
    width:100vw; height:100vh; height:100dvh; max-height:none;
    border-radius:0; flex-direction:column;
  }
  .gonderi-detay-medya{ flex:none; max-height:38vh; }
  .gonderi-detay-medya img{ max-height:38vh; }
  .gonderi-detay-medya.metin-modu{ max-height:38vh; padding:44px 20px 24px; align-items:flex-start; }
  .gonderi-detay-medya.metin-modu:not(.gd-metin-daraltilmis){ max-height:60vh; }
  .gonderi-detay-sag{
    min-width:0; max-width:none; flex:1; border-left:none; border-top:1px solid var(--border);
    min-height:0;
  }
  .gonderi-detay-govde{ min-height:0; }
  .gonderi-detay-yorum-form{
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .gonderi-detay-yorum-form input{ min-width:0; }
    .gd-yorum-alt{ flex-wrap:wrap; row-gap:4px; gap:6px 12px; }
}

@media (max-width:760px){
  .gonderi-detay-box{ flex-direction:column; width:94vw; max-height:92vh; }
  .gonderi-detay-medya img{ max-height:40vh; }
  .gonderi-detay-sag{ max-width:none; border-left:none; border-top:1px solid var(--border); }
}

/* ---- gönderi "..." menüsü ---- */
.post-more-menu button{
  display:flex; align-items:center; gap:8px;
  font-family:inherit; font-size:0.83rem; font-weight:600;
}
.post-more-menu button:hover{ background:var(--surface-alt); }
.post-more-menu .gonderi-sil-btn{ color:#F3425F; }
.post-more-menu .gonderi-sikayet-btn{ color:var(--text-muted); }

/* ---- ikonlu beğeni/yorum sayaçları ---- */
.post-stats-nice{
  display:flex; align-items:center; gap:14px;
  padding:2px 2px 10px; font-size:0.8rem; color:var(--text-dim);
}
.stat-chip{
  display:flex; align-items:center; gap:5px; font-weight:600;
}
.stat-chip .icon{ width:16px; height:16px; }
.stat-chip.begeni-chip{ color:#F3425F; }
.stat-chip.yorum-chip{ color:var(--text-dim); }
.stat-chip.tiklanabilir{ cursor:pointer; }
.stat-chip.tiklanabilir:hover{ text-decoration:underline; }

/* ---- beğenenler listesi ---- */
.begenen-satir{
  display:flex; align-items:center; gap:12px;
  padding:9px 4px; border-bottom:1px solid var(--border);
}
.begenen-satir:last-child{ border-bottom:none; }
.begenen-satir img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.begenen-satir b{ font-size:0.86rem; display:block; }
.begenen-satir span{ font-size:0.74rem; color:var(--text-dim); }

/* ---- beğeni avatarları (üst üste binen) ---- */
.begeni-avatarlar{
  display:flex; align-items:center; cursor:pointer;
}
.begeni-avatarlar img{
  width:20px; height:20px; border-radius:50%; object-fit:cover;
  border:2px solid var(--surface); margin-left:-7px;
}
.begeni-avatarlar img:first-child{ margin-left:0; }
.begeni-avatarlar .begeni-sayi-metin{
  margin-left:6px; font-size:0.8rem; color:var(--text-dim); font-weight:600;
}

/* ============ DURUM (HİKAYE) SİSTEMİ ============ */

/* ---- hikaye şeridindeki halkalar zaten var, ek yok ---- */

/* ---- durum oluşturma modalı ---- */
#durumOlusturModal{ z-index:10002; }
#durumMuzikSecModal{ z-index:10003; }
#durumOlusturModal .modal-box{ max-width:460px; padding:0; overflow:visible; }
@media (min-width:900px){
  #durumOlusturModal .modal-box{ max-width:480px; }
  .durum-yazi-onizleme{ max-height:320px; }
}
.durum-olustur-sekmeler{ display:flex; border-bottom:1px solid var(--border); }
.durum-olustur-sekme{
  flex:1; padding:14px; text-align:center; font-size:0.85rem; font-weight:700;
  color:var(--text-dim); border-bottom:2px solid transparent;
}
.durum-olustur-sekme.active{ color:var(--accent); border-color:var(--accent); }

.durum-yazi-onizleme{
  max-height:280px; margin:16px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
}
.durum-yazi-onizleme textarea{
  width:100%; background:transparent; border:none; outline:none; resize:none;
  color:#fff; font-family:inherit; font-weight:700; font-size:1.3rem; text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.durum-yazi-onizleme textarea::placeholder{ color:rgba(255,255,255,0.7); }

.durum-renk-secici{
  display:flex; gap:8px; padding:0 16px 16px; overflow-x:auto;
}
.durum-renk-nokta{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid transparent; transition:transform .15s ease;
}
.durum-renk-nokta.secili{ border-color:var(--text); transform:scale(1.12); }

.durum-olustur-alt{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); }

/* ---- durum görüntüleme (tam ekran) ---- */
#durumGoruntuleModal{ background:rgba(0,0,0,0.92); z-index:9999; }
#durumGoruntuleModal .modal-box{ display:none; }
.durum-goruntule-kutu{
  width:min(420px, 94vw); height:min(90vh, 760px);
  border-radius:16px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.durum-progress-satir{ position:absolute; top:10px; left:10px; right:10px; display:flex; gap:5px; z-index:5; }
.durum-progress-bar{ flex:1; height:3px; background:rgba(255,255,255,0.3); border-radius:3px; overflow:hidden; }
.durum-progress-dolu{ height:100%; width:0%; background:#fff; }
.durum-progress-bar.tamamlandi .durum-progress-dolu{ width:100%; }
.durum-progress-bar.aktif .durum-progress-dolu{ animation:durumIlerle 5s linear forwards; }
.duraklatildi .durum-progress-bar.aktif .durum-progress-dolu{ animation-play-state:paused; }
@keyframes durumIlerle{ from{ width:0%; } to{ width:100%; } }

.durum-goruntule-baslik{
  position:absolute; top:22px; left:14px; right:14px; z-index:5;
  display:flex; align-items:center; gap:10px; color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.85)) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}
.durum-goruntule-baslik img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,0.6); }
.durum-goruntule-baslik .dg-isim{ font-size:0.86rem; font-weight:700; }
.durum-goruntule-baslik .dg-zaman{ font-size:0.72rem; opacity:0.8; }
.durum-goruntule-kapat{ margin-left:auto; color:#fff; padding:6px; }

.durum-icerik-alani{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.durum-icerik-alani video{ width:100%; height:100%; object-fit:cover; }
.durum-icerik-alani img.durum-foto-arka-plan{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(35px) brightness(0.55); transform:scale(1.15); z-index:0; display:none;
}
.durum-icerik-alani img.durum-foto-on-plan{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.durum-icerik-yazi{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:40px; text-align:center; color:#fff; font-weight:700; font-size:1.5rem;
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* ---- durumdan duruma / kisiden kisiye gecis animasyonu (Instagram tarzi) ---- */
@keyframes durumIcerikGirisSag{ from{ opacity:0; transform:translateX(22px) scale(0.97); } to{ opacity:1; transform:translateX(0) scale(1); } }
@keyframes durumIcerikGirisSol{ from{ opacity:0; transform:translateX(-22px) scale(0.97); } to{ opacity:1; transform:translateX(0) scale(1); } }
.durum-icerik-alani.durum-gecis-ileri{ animation:durumIcerikGirisSag 0.32s cubic-bezier(0.22,0.61,0.36,1); }
.durum-icerik-alani.durum-gecis-geri{ animation:durumIcerikGirisSol 0.32s cubic-bezier(0.22,0.61,0.36,1); }

.durum-tikla-alan{ position:absolute; top:0; bottom:0; width:35%; z-index:4; }
.durum-tikla-sol{ left:0; }
.durum-tikla-sag{ right:0; }

.durum-alt-bar{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; gap:10px; padding:14px;
  background:linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.durum-alt-bar input{
  flex:1; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35);
  border-radius:999px; padding:10px 16px; color:#fff; font-size:0.83rem; font-family:inherit;
}
.durum-alt-bar input::placeholder{ color:rgba(255,255,255,0.75); }
.durum-alt-bar button{ color:#fff; flex-shrink:0; }
.durum-alt-bar .durum-begen-btn.liked{ color:#F3425F; }

@media (max-width:760px){
  .durum-goruntule-kutu{ width:100vw; height:100vh; height:100dvh; border-radius:0; }
  #durumGoruntuleModal{ padding:0; }
  .durum-goruntule-baslik{ top:calc(22px + env(safe-area-inset-top)); }
  .durum-progress-satir{ top:calc(10px + env(safe-area-inset-top)); }
  .durum-alt-bar{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}


/* ---- durum üzerine sürüklenebilir yazı katmanı ---- */
.durum-yazi-katmani{
  position:absolute; cursor:move; z-index:5;
  padding:6px 10px; font-weight:700; font-size:1.1rem; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.5); -webkit-text-stroke:0.5px rgba(0,0,0,0.4); background:rgba(0,0,0,0.32); border-radius:10px;
  touch-action:none; min-width:24px; min-height:1.4em;
  border:1.5px dashed transparent; max-width:80%; word-wrap:break-word; text-align:center;
}
.durum-yazi-katmani:hover, .durum-yazi-katmani:focus-within, .durum-yazi-katmani.surukleniyor{ border-color:rgba(255,255,255,0.6); outline:none; }
.durum-yazi-katmani .durum-yazi-katmani-input{
  display:block; width:100%; height:100%; margin:0; padding:0; border:none; outline:none;
  background:transparent; resize:none; overflow:hidden; cursor:text;
  font:inherit; font-weight:inherit; color:inherit; text-align:inherit; text-shadow:inherit;
  caret-color:#fff; -webkit-user-select:text; user-select:text;
}
.durum-yazi-katmani .yazi-sil-ikon{
  position:absolute; top:-14px; right:-14px; width:22px; height:22px; border-radius:50%;
  background:#F3425F; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; cursor:pointer; opacity:0; transition:opacity .15s ease;
}
.durum-yazi-katmani:hover .yazi-sil-ikon{ opacity:1; }

/* ---- Durum yazı stilleri (Instagram tarzı, tek font: Poppins) ---- */
.durum-yazi-katmani.stil-dolgu{
  background:#fff; color:#111; text-shadow:none; border-radius:6px; font-weight:800;
}
.durum-yazi-katmani.stil-neon{
  color:#fff; text-shadow:0 0 4px #4F7CFF, 0 0 10px #4F7CFF, 0 0 18px #8B5CF6; font-weight:800; background:none;
}
.durum-yazi-katmani.stil-daktilo{
  text-transform:uppercase; letter-spacing:0.12em; font-weight:600; font-size:1rem;
}

/* ---- Yazı araç çubuğu: stil değiştirici + renk paleti ---- */
.durum-yazi-arac-cubugu{
  display:none; align-items:center; gap:10px; padding:8px 12px;
  position:absolute; top:8px; left:8px; right:8px; z-index:6;
  background:rgba(0,0,0,0.45); border-radius:999px; backdrop-filter:blur(6px);
}
.durum-yazi-arac-cubugu.gorunur{ display:flex; }
.durum-stil-degistir-btn{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.15);
  color:#fff; font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center;
}
.durum-renk-serit{ display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none; }
.durum-renk-serit::-webkit-scrollbar{ display:none; }
.durum-renk-nokta-yazi{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); cursor:pointer;
}
.durum-renk-nokta-yazi.secili{ border-color:#fff; transform:scale(1.15); }

.durum-yazi-ekle-btn{
  position:absolute; z-index:6;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); color:#fff; border-radius:999px;
  padding:8px 16px 8px 12px; font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,0.28); transition:background .15s ease, transform .15s ease;
}
.durum-yazi-ekle-btn:hover{ background:rgba(0,0,0,0.65); transform:translateY(-1px); }

/* ---- emoji seçici ---- */
.emoji-secici-btn{
  position:absolute; bottom:-12px; left:12px; z-index:6;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); color:#fff; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  border:1px solid rgba(255,255,255,0.28); transition:transform .15s ease, background .15s ease;
}
.emoji-secici-btn:hover{ transform:scale(1.08); background:rgba(0,0,0,0.65); }

.emoji-panel{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:14px;
  padding:8px; margin:10px 20px 0;
  display:none; grid-template-columns:repeat(9, 1fr); gap:0;
  max-height:150px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.emoji-panel.open{ display:grid; }
#durumFotoEmojiPanel{
  position:absolute; top:92px; right:12px; z-index:7;
  width:220px; margin:0;
}
.emoji-panel::-webkit-scrollbar{ width:6px; }
.emoji-panel::-webkit-scrollbar-track{ background:transparent; }
.emoji-panel::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:6px; }
.emoji-panel::-webkit-scrollbar-thumb:hover{ background:var(--text-dim); }
.emoji-panel button{
  font-size:1.1rem; padding:4px; border-radius:7px; line-height:1;
  display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  transition:background .12s ease, transform .12s ease;
}
.emoji-panel button img{ width:20px; height:20px; }
.emoji-panel::-webkit-scrollbar{ width:6px; }
.emoji-panel::-webkit-scrollbar-track{ background:transparent; }
.emoji-panel::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:6px; }
.emoji-panel::-webkit-scrollbar-thumb:hover{ background:var(--text-dim); }

/* ---- Durum Paylaş modalı — genel tasarım yenileme ---- */
#durumOlusturModal .modal-box{
  border-radius:20px;
}

#durumOlusturModal .durum-olustur-sekmeler{
  display:flex; gap:4px; margin:0 20px 4px; padding:4px;
  background:var(--surface-alt); border-radius:12px; border:none;
}
.durum-olustur-sekme{
  flex:1; padding:10px; text-align:center; font-size:0.82rem; font-weight:700;
  color:var(--text-dim); border-radius:9px; border:none; transition:background .15s ease, color .15s ease;
}
.durum-olustur-sekme.active{
  color:var(--text); background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.durum-yazi-wrap{ position:relative; margin:18px 20px 4px; }
.durum-yazi-onizleme{
  min-height:200px; max-height:260px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; padding:22px;
  position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12), 0 10px 30px -12px rgba(0,0,0,0.35);
}
.durum-yazi-onizleme textarea{
  max-height:100%;
}

.durum-olustur-sub-label{
  font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--text-dim); margin:16px 20px 10px;
}

.durum-renk-secici{
  display:flex; gap:10px; padding:0 20px 4px; overflow-x:auto;
}
.durum-renk-nokta{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border-strong);
  transition:transform .15s ease, box-shadow .15s ease;
}
.durum-renk-nokta:hover{ transform:translateY(-2px); }
.durum-renk-nokta.secili{ box-shadow:0 0 0 2px var(--accent); transform:translateY(-2px); }

.durum-foto-onizleme{
  width:100%; aspect-ratio:9/16; max-height:52vh; border-radius:18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--surface-alt);
  position:relative; border:1.5px dashed var(--border-strong);
}
.durum-foto-onizleme:has(img){ border-style:solid; border-color:var(--border); background:#000; }
.durum-foto-onizleme img{ width:100%; height:100%; object-fit:cover; }
.durum-foto-onizleme .durum-foto-bos{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:50px 20px; text-align:center; color:var(--text-dim); font-size:0.85rem; font-weight:600; cursor:pointer;
  transition:opacity .15s ease;
}
.durum-foto-onizleme .durum-foto-bos:active{ opacity:0.75; }
.durum-foto-bos-ikon{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:rgba(79,124,255,0.12); border:1.5px solid rgba(79,124,255,0.32);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -12px rgba(0,0,0,0.3);
  transition:transform .18s ease;
}
.durum-foto-bos:active .durum-foto-bos-ikon{ transform:scale(0.94); }
.durum-foto-bos-ikon svg{ width:28px; height:28px; color:#4F7CFF; }
.durum-foto-bos-baslik{ font-size:0.92rem; font-weight:700; color:var(--text); }
.durum-foto-bos-ipucu{ font-size:0.74rem; font-weight:500; color:var(--text-dim); }

/* ---- Tam ekran "Instagram tarzi" durum modali icinde: acik/duz surface-alt yerine,
   modalin geri kalaniyla (siyah zemin) uyumlu, kaliteli koyu bir bos-durum gorunumu ---- */
#durumOlusturModal .durum-foto-onizleme{
  background:radial-gradient(circle at 50% 38%, #23262f 0%, #15171d 65%, #0d0e12 100%);
}
#durumOlusturModal .durum-foto-onizleme .durum-foto-bos{ color:rgba(255,255,255,0.55); }
#durumOlusturModal .durum-foto-bos-ikon{
  background:linear-gradient(145deg, rgba(79,124,255,0.24), rgba(79,124,255,0.06));
  border-color:rgba(79,124,255,0.4);
  box-shadow:0 0 0 8px rgba(79,124,255,0.06), 0 12px 28px -10px rgba(0,0,0,0.55);
}
#durumOlusturModal .durum-foto-bos-ikon svg{ color:#7FA0FF; }
#durumOlusturModal .durum-foto-bos-baslik{ color:#fff; }
#durumOlusturModal .durum-foto-bos-ipucu{ color:rgba(255,255,255,0.4); }

#durumHata{ margin:0 20px; }

.durum-olustur-alt{
  display:flex; gap:10px; padding:18px 20px 20px; border-top:1px solid var(--border); margin-top:12px;
}

/* ================= DURUM PAYLAS - INSTAGRAM TARZI TAM EKRAN ================= */
#durumOlusturModal .durum-olustur-kutu{
  width:min(420px, 94vw); height:min(90vh, 760px);
  border-radius:18px; overflow:hidden; position:relative;
  background:#111; box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
}
@media (max-width:760px){
  #durumOlusturModal .durum-olustur-kutu{ width:100vw; height:100vh; height:100dvh; border-radius:0; }
  #durumOlusturModal{ padding:0; }
}
#durumOlusturModal #durumYaziPanel,
#durumOlusturModal #durumFotoPanel{
  position:absolute; inset:0; display:flex; flex-direction:column;
}
#durumOlusturModal .durum-yazi-onizleme{
  position:absolute; inset:0; margin:0; border-radius:0; max-height:none;
  display:flex; align-items:center; justify-content:center; padding:32px;
}
#durumOlusturModal .durum-yazi-onizleme textarea{ font-size:1.4rem; max-height:none; }
#durumOlusturModal .durum-foto-onizleme{
  position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:0; max-height:none; aspect-ratio:auto; border:none;
  touch-action:none;
}
#durumOlusturModal .durum-foto-onizleme:has(img){ background:#000; }
#durumOlusturModal .durum-foto-onizleme img{ width:100%; height:100%; object-fit:cover; }
#durumOlusturModal .durum-foto-onizleme img.durum-foto-arka-plan{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(35px) brightness(0.55); transform:scale(1.15); z-index:0; display:none;
}
#durumOlusturModal .durum-foto-onizleme img.durum-foto-on-plan{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:transparent;
}
#durumOlusturModal .durum-olustur-ust-bar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  padding:calc(14px + env(safe-area-inset-top)) 14px 30px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}
#durumOlusturModal .durum-olustur-ikon-btn{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.18); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem;
}
#durumOlusturModal .durum-olustur-gorunurluk{
  flex-shrink:0; max-width:120px; padding:7px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.15);
  backdrop-filter:blur(4px); color:#fff; font-size:0.72rem; font-family:inherit;
}
#durumOlusturModal .durum-olustur-sekmeler{
  margin:0 0 0 auto; padding:0; background:transparent; border-radius:0; border:none;
  display:flex; gap:6px; flex-shrink:0;
}
#durumOlusturModal .durum-olustur-sekme{
  width:34px; height:34px; padding:0; border-radius:50%; flex:none;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(4px);
  color:#fff; font-weight:800; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; border-bottom:none;
}
#durumOlusturModal .durum-olustur-sekme.active{ background:#fff; color:#111; }
#durumOlusturModal .durum-olustur-sekmeler #durumYaziEmojiBtn{
  position:static; width:34px; height:34px; border-radius:50%; flex:none; margin:0;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; z-index:auto; bottom:auto; left:auto; right:auto; top:auto;
}
#durumOlusturModal .durum-olustur-sekmeler #durumFotoEmojiBtn{
  position:static; width:34px; height:34px; border-radius:50%; flex:none; margin:0;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(4px);
  color:#fff; align-items:center; justify-content:center;
  border:none; z-index:auto; bottom:auto; left:auto; right:auto; top:auto;
}
#durumOlusturModal .durum-olustur-sekmeler #durumMuzikEkleBtn{
  position:static; width:34px; height:34px; border-radius:50%; flex:none; margin:0;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(4px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; z-index:auto; bottom:auto; left:auto; right:auto; top:auto;
}
#durumOlusturModal #durumFotoYaziEkleBtn{ position:absolute; top:calc(64px + env(safe-area-inset-top)); left:14px; z-index:20; bottom:auto; }
#durumOlusturModal .durum-renk-secici{
  position:absolute; left:0; right:0; bottom:88px; z-index:20; padding:8px 20px 6px; margin:0;
}
#durumOlusturModal .durum-yazi-arac-cubugu{ top:auto; bottom:88px; left:14px; right:14px; }
#durumOlusturModal .emoji-panel{ position:absolute; z-index:25; margin:0; width:230px; }
#durumOlusturModal #durumYaziEmojiPanel{ top:calc(54px + env(safe-area-inset-top)); right:14px; }
#durumOlusturModal #durumFotoEmojiPanel{ top:calc(54px + env(safe-area-inset-top)); right:14px; }
#durumOlusturModal #durumHata{
  position:absolute; left:16px; right:16px; bottom:78px; z-index:20; margin:0; text-align:center;
  color:#fff; background:rgba(220,38,38,0.85); padding:6px 10px; border-radius:8px; font-size:0.75rem;
}
#durumOlusturModal #durumHata:empty{ display:none; }
#durumOlusturModal .durum-olustur-alt{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; gap:10px; margin:0; border-top:none;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
#durumOlusturModal .durum-olustur-alt .btn-outline{
  background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.35); backdrop-filter:blur(4px);
}
#durumOlusturModal .emoji-panel{
  background:rgba(20,20,20,0.92); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);
}
#durumOlusturModal .emoji-panel button{ color:#fff; }

/* ---- Durum üzerine sürüklenebilir müzik etiketi ---- */
.durum-muzik-etiketi{
  position:absolute; z-index:6; cursor:move; touch-action:none;
  display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); color:#fff;
  border:1.5px dashed transparent; max-width:220px;
}
.durum-muzik-etiketi:hover, .durum-muzik-etiketi.surukleniyor{ border-color:rgba(255,255,255,0.6); }
.durum-muzik-etiketi img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.durum-muzik-etiketi .durum-muzik-etiketi-nota{ font-size:1rem; flex-shrink:0; }
.durum-muzik-etiketi span{
  font-size:0.78rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.durum-muzik-etiketi.mod-gizli{ display:none; }

/* ---- Oluşturma modalında: seçili müzik rozeti ---- */
.durum-muzik-secili-rozet{
  display:flex; align-items:center; gap:8px; margin:0 16px 10px; padding:8px 12px;
  border-radius:12px; background:var(--surface-alt); font-size:0.82rem;
}
.durum-muzik-secili-rozet span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.durum-muzik-secili-rozet button{ background:none; border:none; cursor:pointer; font-size:0.9rem; color:var(--text-dim); }
#durumMuzikModDegistirBtn{
  background:rgba(255,255,255,0.22) !important; border-radius:999px !important; padding:5px 11px !important;
  font-size:0.72rem !important; font-weight:800 !important; white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:4px;
}
#durumMuzikModDegistirBtn:hover{ background:rgba(255,255,255,0.32) !important; }

#durumOlusturModal .durum-muzik-secili-rozet{
  position:absolute; top:calc(64px + env(safe-area-inset-top)); left:14px; right:14px; z-index:19; margin:0;
  background:rgba(0,0,0,0.5); color:#fff; backdrop-filter:blur(6px);
}
#durumOlusturModal .durum-muzik-secili-rozet button{ color:#fff; }

/* ---- Müzik seçim modalı ---- */
.durum-muzik-sec-kutu{
  background:var(--surface); width:min(420px, 92vw); max-height:80vh; border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
}
.durum-muzik-sec-ust{ display:flex; align-items:center; gap:10px; padding:16px 16px 8px; }
.durum-muzik-sec-ust h3{ margin:0; font-size:1rem; }
.durum-muzik-sec-kutu > input{
  margin:0 16px 12px; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-alt); font-size:0.88rem;
}
.durum-muzik-sec-listesi{ overflow-y:auto; padding:0 10px 14px; flex:1; }
.durum-muzik-sec-satir{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer;
}
.durum-muzik-sec-satir:hover{ background:var(--surface-alt); }
.durum-muzik-sec-satir img{ width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--surface-alt); flex-shrink:0; }
.durum-muzik-sec-satir-govde{ flex:1; min-width:0; }
.durum-muzik-sec-satir-govde b{ display:block; font-size:0.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.durum-muzik-sec-satir-govde span{ font-size:0.74rem; color:var(--text-dim); }
.durum-muzik-sec-satir button{
  flex-shrink:0; padding:6px 14px; border-radius:999px; border:none; background:var(--accent); color:#fff;
  font-size:0.76rem; font-weight:700; cursor:pointer;
}
.durum-muzik-liste-cal-btn{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface-alt); color:var(--text); font-size:0.78rem; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.durum-muzik-liste-cal-btn:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---- Müzik: başlangıç noktası seçim ekranı ---- */
.durum-muzik-detay{ padding:0 16px 16px; }
.durum-muzik-detay-ust{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.durum-muzik-detay-ust img{ width:56px; height:56px; border-radius:10px; object-fit:cover; }
.durum-muzik-detay-govde b{ display:block; font-size:0.94rem; }
.durum-muzik-detay-govde span{ font-size:0.8rem; color:var(--text-dim); }
.durum-muzik-detay-etiket{ font-size:0.78rem; color:var(--text-dim); margin:0 0 8px; font-weight:700; }
.durum-muzik-surukleyici{
  position:relative; height:56px; margin-bottom:8px; overflow:hidden; border-radius:10px; background:var(--surface-alt);
}
.durum-muzik-dalga-sarici{
  position:absolute; inset:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; display:flex; align-items:center; touch-action:none; cursor:grab;
}
.durum-muzik-dalga-sarici:active{ cursor:grabbing; }
.durum-muzik-dalga-sarici::-webkit-scrollbar{ display:none; }
.durum-muzik-dalga{ display:flex; align-items:center; height:100%; flex-shrink:0; }
.durum-muzik-dalga span{
  display:block; flex-shrink:0; border-radius:2px; background:var(--border-strong); transition:background .1s ease;
}
.durum-muzik-dalga span.aktif{ background:var(--accent); }
.durum-muzik-secim-penceresi{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:120px;
  border:2px solid var(--accent); border-radius:8px; pointer-events:none; box-sizing:border-box;
}
.durum-muzik-zaman-etiketi{
  text-align:center; font-size:0.76rem; color:var(--text-dim); font-weight:700; margin-bottom:16px; font-variant-numeric:tabular-nums;
}
.durum-muzik-detay-alt{ display:flex; gap:10px; margin-bottom:10px; }
.durum-muzik-detay-alt button{ flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-alt); font-weight:700; font-size:0.85rem; cursor:pointer; }
.durum-muzik-detay-alt .btn-primary{ background:var(--accent); color:#fff; border:none; }
.durum-muzik-detay-geri{ display:block; width:100%; text-align:center; background:none; border:none; color:var(--text-dim); font-size:0.8rem; cursor:pointer; padding:6px; }

/* ---- logo: mobilde üst menüde sadece ikon, mobil menüde tam isim kalır ---- */
@media (max-width:480px){
  .topbar .logo-text{ display:none; }
}

/* ---- bildirim paneli ---- */
.bildirim-panel{
  position:absolute; top:52px; right:0; z-index:50;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,0.35);
  width:340px; max-height:440px; display:none; flex-direction:column; overflow:hidden;
}
.bildirim-panel.open{ display:flex; }
@media (max-width:480px){
  .bildirim-panel{ position:fixed; top:60px; left:8px; right:8px; width:auto; max-height:70vh; }
}
.bildirim-panel-baslik{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border); font-weight:800; font-size:0.92rem;
}
.bildirim-panel-baslik button{ font-size:0.74rem; font-weight:700; color:var(--accent); }
.bildirim-liste{ overflow-y:auto; flex:1; }
.bildirim-satir{
  display:flex; align-items:flex-start; gap:11px; padding:12px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s ease;
}
.bildirim-satir:hover{ background:var(--surface-alt); }
.bildirim-satir.okunmamis{ background:rgba(79,124,255,0.06); }
.bildirim-satir img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bildirim-satir-ikon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
}
.bildirim-metin{ font-size:0.83rem; line-height:1.4; }
.bildirim-metin b{ font-weight:700; }
.bildirim-zaman{ font-size:0.72rem; color:var(--text-dim); margin-top:3px; }
.bildirim-bos{ padding:40px 20px; text-align:center; color:var(--text-dim); font-size:0.85rem; }
/* ---- yorum silme modalı, gönderi detay modalının üstünde kalsın ---- */
#yorumSilModal{ z-index:600; }

/* ---- bildirim panelinin altındaki "Tümünü Gör" bağlantısı ---- */
.bildirim-panel-alt{
  padding:11px; text-align:center; border-top:1px solid var(--border);
}
.bildirim-panel-alt a{
  font-size:0.8rem; font-weight:700; color:var(--accent);
}

/* ---- durum görüntüleyenler modalı, hikaye izleyicisinin üstünde kalsın ---- */
#durumGoruntuleyenlerModal{ z-index:10001; }

.durum-ses-btn{
  position:absolute; top:64px; right:14px; z-index:6;
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.45); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.ek-btn.kayit-aktif{ color:#F3425F; animation:sesKayitNabiz 1s ease-in-out infinite; }
@keyframes sesKayitNabiz{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.mesaj-okundu-isareti{ font-size:0.68rem; color:rgba(255,255,255,0.55); margin-left:4px; letter-spacing:-1px; }
.mesaj-okundu-isareti.okundu{ color:#8FD3FF; }
.mesaj-silinmis{ font-style:italic; opacity:0.6; }
.mesaj-duzenlendi-etiketi{ font-size:0.68rem; opacity:0.6; margin-left:6px; font-style:italic; }

/* ---- Çevrimiçi Arkadaşlar widget'ı ---- */
.friend-row{
  display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius:10px;
  transition:background .12s ease; line-height:1.3;
}
.friend-row:hover{ background:var(--surface-alt); }
.friend-row img{ width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; }

.friend-avatar-wrap{ position:relative; flex-shrink:0; }
.online-dot{
  position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
  background:#31A24C; border:2px solid var(--surface);
}

.name-col{ display:flex; flex-direction:column; min-width:0; justify-content:center; gap:1px; }
.name-col b{ font-size:0.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cevrimici-etiket{ font-size:0.7rem; color:#31A24C; font-weight:600; }

/* ---- üst menü arama: ikon + açılır dropdown ---- */
.topbar-arama-wrap{ position:relative; }
.topbar-arama-dropdown{
  display:none; position:absolute; top:calc(100% + 10px); right:0; left:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:12px; box-shadow:0 20px 40px -15px rgba(20,25,50,0.25); width:280px; max-width:calc(100vw - 24px); z-index:50; box-sizing:border-box;
}
.topbar-arama-dropdown.acik{ display:block; }
.topbar-arama-dropdown input{
  width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface-alt);
  color:var(--text); font-family:inherit; font-size:0.86rem; box-sizing:border-box;
}
.topbar-arama-dropdown input:focus{ outline:none; border-color:var(--accent); }
.topbar-arama-sonuclari{ display:none; max-height:360px; overflow-y:auto; margin-top:8px; }
.topbar-arama-baslik{ font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); padding:8px 4px 4px; }
.topbar-arama-satir{ display:flex; align-items:center; gap:10px; padding:8px 4px; text-decoration:none; color:inherit; border-radius:8px; }
.topbar-arama-satir:hover{ background:var(--surface-alt); }
.topbar-arama-satir img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.topbar-arama-satir div{ min-width:0; }
.topbar-arama-satir b{ display:block; font-size:0.83rem; font-weight:700; }
.topbar-arama-satir span{ display:block; font-size:0.75rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-arama-bos{ text-align:center; padding:16px 8px; font-size:0.82rem; color:var(--text-dim); }
.post-paylas-wrap{ position:relative; display:inline-block; }
.post-paylas-menu{ display:none; position:absolute; bottom:44px; left:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 44px -16px rgba(20,25,50,0.35); width:260px; z-index:50; padding:14px; }
.post-paylas-menu.acik{ display:block; }
.paylas-menu-baslik{ font-size:0.72rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:10px; padding:0 4px; }
.paylas-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.paylas-secenek-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; border-radius:12px; background:var(--surface-alt); text-align:center; font-size:0.74rem; font-weight:600; color:var(--text); transition:background .15s ease; line-height:1.25; }
.paylas-secenek-btn:hover{ background:var(--border); }
.paylas-ikon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.paylas-ikon svg{ width:19px; height:19px; }
.paylas-ikon-mesaj{ background:linear-gradient(135deg,#4F7CFF,#8B5CF6); }
.paylas-ikon-whatsapp{ background:#25D366; }
.paylas-ikon-facebook{ background:#1877F2; }
.paylas-ikon-x{ background:#000; }
.paylas-link-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:10px; background:var(--surface-alt); font-size:0.82rem; font-weight:600; color:var(--text); }
.paylas-link-btn:hover{ background:var(--border); }
.paylas-link-btn svg{ width:17px; height:17px; color:var(--text-dim); flex-shrink:0; }

@media (max-width:720px){
  .post-paylas-menu{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; border-radius:20px 20px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -20px 44px -10px rgba(0,0,0,0.3); max-height:70vh; overflow-y:auto; }
  .post-paylas-menu::before{ content:''; display:block; width:40px; height:4px; border-radius:999px; background:var(--border); margin:0 auto 14px; }
}

.mobil-alt-menu{ display:none; }

@media (max-width: 860px){
  .mobil-alt-menu{
    display:flex; align-items:flex-end; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    background:var(--surface); border-top:1px solid var(--border);
    padding:8px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(0,0,0,0.12);
  }
  .mobil-alt-oge{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    flex:1; min-width:0; text-decoration:none; color:var(--text-dim);
    font-size:0.62rem; font-weight:600; padding:2px 0;
  }
  .mobil-alt-oge .icon{ width:21px; height:21px; }
  .mobil-alt-oge.active{ color:var(--accent); }
  .mobil-alt-oge-vurgulu{ margin-top:-22px; color:var(--text-dim); }
  .mobil-alt-vurgu-daire{
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg,#4F7CFF,#8B5CF6); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -6px rgba(79,124,255,0.6);
    margin-bottom:2px;
  }
  .mobil-alt-vurgu-daire .icon{ width:22px; height:22px; }

  body{ padding-bottom:64px; }
}
/* ---- Link onizleme karti ---- */
.link-onizleme { display:flex; flex-direction:column; margin:10px 16px 12px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); color:inherit; text-decoration:none; transition:box-shadow .15s ease, transform .15s ease; }
.link-onizleme:hover { box-shadow:0 10px 26px -14px rgba(0,0,0,0.35); transform:translateY(-1px); }
.link-onizleme-gorsel { width:100%; aspect-ratio:1.91/1; background:rgba(127,127,127,0.12); overflow:hidden; }
.link-onizleme-gorsel img { width:100%; height:100%; object-fit:cover; display:block; }
.link-onizleme-govde { display:flex; flex-direction:column; gap:3px; padding:11px 14px 13px; min-width:0; border-top:1px solid var(--border); }
.link-onizleme.gorselsiz .link-onizleme-govde { border-top:0; }
.link-onizleme-site { font-size:0.72rem; font-weight:500; opacity:0.6; text-transform:lowercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-onizleme-baslik { font-size:0.92rem; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-onizleme-aciklama { font-size:0.8rem; font-weight:400; opacity:0.7; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Link onizleme: kutu/avatar stillerini ezmesin ---- */
#paylasimOnizleme .link-onizleme { width:100%; box-sizing:border-box; }
.link-onizleme .link-onizleme-gorsel img { width:100% !important; height:100% !important; max-width:none !important; border-radius:0 !important; border:0 !important; margin:0 !important; position:static !important; object-fit:cover; }

/* ---- Link onizleme: cevaplar ---- */
.link-cevaplar { display:flex; flex-direction:column; gap:7px; margin-top:8px; padding-top:9px; border-top:1px dashed var(--border); }
.link-cevaplar-baslik { font-size:0.74rem; font-weight:600; opacity:0.65; }
.link-cevap { display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border-radius:12px; background:rgba(127,127,127,0.1); }
.link-cevaplar .link-cevap-av { width:28px !important; height:28px !important; min-width:28px; max-width:28px !important; border-radius:50% !important; object-fit:cover; margin:0 !important; border:0 !important; position:static !important; }
.link-cevap-ic { display:flex; flex-direction:column; gap:1px; min-width:0; font-size:0.8rem; line-height:1.4; }
.link-cevap-ic b { font-weight:600; font-size:0.78rem; }
.link-cevap-ic span { font-weight:400; opacity:0.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.link-cevap-ad { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.link-cevap-tik { display:inline-flex; line-height:0; }
.link-cevap-rutbe { font-size:0.66rem; font-weight:600; padding:1px 7px; border-radius:999px; border:1px solid currentColor; line-height:1.5; }