/* ==========================================================================
   Bizim Topraklar — v9.34 Sohbet güncellemesi
   1) Mesaj balonları kısaldı (saat balonun sağ altına alındı, boşluklar daraltıldı)
   2) Balon içindeki gri/yarı saydam kutular (yanıt alıntısı, link/dosya/video) yumuşak köşeli
   3) Sol menü: şehir fotoğrafının altına "Şehir Kartı" (tarihçe, görülecek yerler, lezzetler)
   4) Grup Bilgisi paneli baştan tasarlandı ve düzeltildi
   Yalnızca görsel katman; sohbet mantığına dokunmaz. Geri almak: chat_room.html'deki bt-chat-v3 satırları.
   ========================================================================== */

:root{
  --bt4-red:var(--bt-red,#e11d3c);
  --bt4-red-d:var(--bt-red-dark,#be123c);
  --bt4-red-soft:var(--bt-red-soft,rgba(225,29,60,.08));
  --bt4-ink:var(--bt-ink,#16192a);
  --bt4-ink2:var(--bt-ink-2,#4a5069);
  --bt4-mut:var(--bt-muted,#7b8196);
  --bt4-line:rgba(20,24,38,.09);
  --bt4-surf:#fff;
  --bt4-surf2:#f4f5fa;
  --bt4-shadow:0 6px 20px rgba(16,20,35,.07);
  --bt4-ease:cubic-bezier(.2,.8,.2,1);
}
html[data-bs-theme="dark"],html.dark,body.dark{
  --bt4-ink:#eef0ff;--bt4-ink2:#b9bdd6;--bt4-mut:#8e93b3;
  --bt4-line:rgba(255,255,255,.09);--bt4-surf:#1b1e2b;--bt4-surf2:#141722;
  --bt4-shadow:0 6px 20px rgba(0,0,0,.35);
  --bt4-red-soft:rgba(225,29,60,.16);
}

/* ==========================================================================
   1) BALONLAR — kısa ve derli toplu
   Eskiden: isim satırı + saat satırı + metin + 10px alt boşluk = uzun balon.
   Şimdi: saat, metnin sağ altında (Telegram gibi), boşluklar daraltıldı.
   ========================================================================== */
html body.tr-chat-shell .cht .message-data{
  border-radius:18px !important;
  line-height:1.38 !important;
  max-width:min(74%,470px) !important;
}
html body.tr-chat-shell .cht .message-data .chat-txt{
  padding:3px 12px 6px !important;
  line-height:1.4 !important;
}
html body.tr-chat-shell .cht .message-data.grp small,
html body.tr-chat-shell .cht .message-data small.sender-name{
  padding:6px 12px 0 !important;
  line-height:1.25 !important;
}
/* Varsayılan (metin olmayan mesajlar: dosya, link, silinmiş, ses…): saat satırı ince */
html body.tr-chat-shell .cht .message-meta-inline{
  min-height:0 !important;
  padding:5px 12px 0 !important;
  gap:4px !important;
  line-height:1 !important;
}
html body.tr-chat-shell .cht .chat-txt.deleted{ padding:6px 12px !important; }

@supports selector(:has(*)){
  /* (a) Metin balonu: saat sağ altta, son satır saate yer bırakır */
  html body.tr-chat-shell .cht .message-data:has(.chat-txt:not(.deleted)){ position:relative; }
  html body.tr-chat-shell .cht .message-data:has(.chat-txt:not(.deleted)) > .message-meta-inline{
    position:absolute !important; right:11px !important; bottom:4px !important; left:auto !important;
    padding:0 !important; justify-content:flex-end !important; z-index:2; pointer-events:none;
  }
  html body.tr-chat-shell .cht .message-data .chat-txt:not(.deleted)::after{
    content:""; display:inline-block; width:40px; height:1px;
  }
  html body.tr-chat-shell .cht.sent .message-data .chat-txt:not(.deleted)::after{ width:58px; }

  /* (b) Görsel / gif / sticker / video: saat, medyanın sağ altında küçük hap */
  html body.tr-chat-shell .cht .message-data:has(.chat-img-sgl,.chat-img-duo,.chat-img-grp,.chat-gif,.chat-sticker,.chat-video-block) > .message-meta-inline{
    position:absolute !important; right:8px !important; bottom:7px !important; left:auto !important;
    padding:3px 8px !important; border-radius:999px; z-index:3; pointer-events:none;
    background:rgba(16,20,35,.46); color:#fff !important;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  html body.tr-chat-shell .cht .message-data:has(.chat-img-sgl,.chat-img-duo,.chat-img-grp,.chat-gif,.chat-sticker,.chat-video-block){ position:relative; }
}

/* ==========================================================================
   2) BALON İÇİ KUTULAR — yumuşak köşeler
   Yanıt alıntısı (.replied-to) gri, yarı saydam ve neredeyse köşeliydi (5px).
   ========================================================================== */
html body.tr-chat-shell .cht .replied-to{
  margin:6px 8px 3px !important;
  border-radius:14px !important;
  overflow:hidden;
  background:var(--bt4-red-soft) !important;
  border:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  align-items:stretch;
  transition:background .15s ease;
}
html body.tr-chat-shell .cht .replied-to:hover{ background:rgba(225,29,60,.13) !important; }
html body.tr-chat-shell .cht.sent .replied-to{ background:rgba(255,255,255,.2) !important; }
html body.tr-chat-shell .cht.sent .replied-to:hover{ background:rgba(255,255,255,.28) !important; }

html body.tr-chat-shell .cht .replied-border{
  width:3px !important; flex:none; align-self:stretch;
  margin:7px 0 7px 9px; border-radius:3px !important;
  background:var(--bt4-red) !important;
}
html body.tr-chat-shell .cht.sent .replied-border{ background:#fff !important; opacity:.9; }

html body.tr-chat-shell .cht .replied-content{
  padding:5px 10px 5px 8px !important;
  min-height:0 !important; max-height:58px !important;
}
html body.tr-chat-shell .cht .replied-user{
  font-size:.74rem !important; line-height:1.25 !important; font-weight:700 !important;
  color:var(--bt4-red-d);
}
html body.tr-chat-shell .cht.sent .replied-user{ color:#fff; }
html body.tr-chat-shell .cht .replied-html{
  font-size:.78rem !important; line-height:1.3 !important; max-height:2.6em !important; opacity:.88;
}
html body.tr-chat-shell .cht .replied-preview img{
  width:38px !important; height:38px !important; object-fit:cover;
  border-radius:10px; margin:5px 7px 5px 0;
}

/* Link önizleme, dosya, video, iletilen mesaj, silinmiş mesaj kutuları */
html body.tr-chat-shell .cht .chat-link-block,
html body.tr-chat-shell .cht .link-preview,
html body.tr-chat-shell .cht .file-section,
html body.tr-chat-shell .cht .video-section,
html body.tr-chat-shell .cht .chat-fwd,
html body.tr-chat-shell .cht .chat-replied-bubble,
html body.tr-chat-shell .cht .chat-txt.deleted{ border-radius:14px !important; }
html body.tr-chat-shell .cht .link-meta{ border-radius:0 0 14px 14px !important; }
html body.tr-chat-shell .cht .chat-link-block img{ border-radius:14px 14px 0 0 !important; }
html body.tr-chat-shell .cht .video-thumb{ border-radius:12px !important; }
html body.tr-chat-shell .cht .chat-fwd{ margin:4px 6px 0; padding:5px 10px !important; }
html body.tr-chat-shell .cht .chat-txt.deleted{ margin:3px 6px; }

/* ==========================================================================
   3) SOL MENÜ — Şehir Kartı
   ========================================================================== */
.bt-city-side{ margin:12px 10px 14px; color:var(--bt4-ink); font-size:.82rem; }
.bt-city-side:empty{ display:none; }
.bt-cs-card{
  background:var(--bt4-surf); border:1px solid var(--bt4-line); border-radius:20px;
  padding:14px; box-shadow:var(--bt4-shadow);
}
.bt-cs-head{ display:flex; align-items:center; gap:11px; }
.bt-cs-badge{
  flex:none; min-width:40px; height:40px; padding:0 6px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--bt4-red),var(--bt4-red-d)); color:#fff; font-weight:800; font-size:.95rem;
  box-shadow:0 6px 14px rgba(225,29,60,.28);
}
.bt-cs-title{ font-weight:800; font-size:1rem; line-height:1.15; color:var(--bt4-ink); overflow-wrap:anywhere; }
.bt-cs-tag{ color:var(--bt4-mut); font-size:.74rem; line-height:1.3; margin-top:2px; }
.bt-cs-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 2px; }
.bt-cs-stat{ background:var(--bt4-surf2); border-radius:13px; padding:8px 11px; }
.bt-cs-stat b{ display:flex; align-items:center; gap:6px; font-size:1.02rem; line-height:1.2; color:var(--bt4-ink); }
.bt-cs-stat span{ font-size:.68rem; color:var(--bt4-mut); }
.bt-cs-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.bt-cs-sec{ margin-top:13px; }
.bt-cs-sec h4{
  display:flex; align-items:center; gap:6px; margin:0 0 7px;
  font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--bt4-mut);
}
.bt-cs-sec h4 i{ color:var(--bt4-red); font-size:.95rem; }
.bt-cs-hist{ margin:0; line-height:1.55; color:var(--bt4-ink2); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.bt-cs-hist.open{ display:block; -webkit-line-clamp:unset; }
.bt-cs-more{ border:0; background:none; padding:4px 0 0; font:700 .74rem/1 inherit; color:var(--bt4-red); cursor:pointer; }
.bt-cs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.bt-cs-list li{ display:flex; align-items:center; gap:8px; color:var(--bt4-ink2); line-height:1.3; }
.bt-cs-list li i{ flex:none; width:22px; height:22px; border-radius:8px; display:grid; place-items:center; background:var(--bt4-red-soft); color:var(--bt4-red); font-size:.8rem; }
.bt-cs-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.bt-cs-chip{
  background:var(--bt4-red-soft); color:var(--bt4-red-d); border-radius:999px; padding:4px 10px;
  font-size:.72rem; font-weight:700; line-height:1.2; text-decoration:none;
}
a.bt-cs-chip:hover{ background:var(--bt4-red); color:#fff; }
.bt-cs-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }
.bt-act{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 7px;
  border:1px solid var(--bt4-line); border-radius:14px; background:var(--bt4-surf); color:var(--bt4-ink2);
  font:600 .64rem/1.1 inherit; cursor:pointer; transition:transform .15s var(--bt4-ease),background .15s,color .15s,border-color .15s;
}
.bt-act i{ font-size:1.15rem; }
.bt-act:hover{ transform:translateY(-1px); border-color:rgba(225,29,60,.4); color:var(--bt4-red); }
.bt-act.on{ background:var(--bt4-red-soft); color:var(--bt4-red); border-color:rgba(225,29,60,.35); }
.bt-act:focus-visible{ outline:2px solid var(--bt4-red); outline-offset:2px; }

/* ==========================================================================
   4) GRUP BİLGİSİ PANELİ
   Hata: scripts.js her tıklamada body'ye "sb-rightnav-toggled" ekliyor; chatnet.css bunun için
   paneline margin-right:-15rem veriyor. Panel artık position:fixed olduğundan bu, paneli
   ekranın dışına kaydırıyordu. Aşağıda margin sıfırlandı; açma/kapama bt-chat-v3.js'te tek yerde.
   ========================================================================== */
html body.tr-chat-shell .rightbar-wrapper{
  position:fixed !important; top:0 !important; right:0 !important; left:auto !important; bottom:auto !important;
  margin:0 !important;
  width:390px !important; max-width:94vw !important; min-width:0 !important;
  height:100dvh !important; max-height:100dvh !important; min-height:0 !important;
  display:flex !important; flex-direction:column;
  background:var(--bt4-surf2) !important; color:var(--bt4-ink) !important;
  border:0 !important; border-radius:26px 0 0 26px;
  box-shadow:-24px 0 60px rgba(16,20,35,.24) !important;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  z-index:1450 !important;
  transform:translateX(104%); visibility:hidden;
  transition:transform .3s var(--bt4-ease), visibility 0s linear .3s;
}
html body.tr-chat-shell .rightbar-wrapper.bt-gi-open{
  transform:none; visibility:visible; transition:transform .3s var(--bt4-ease), visibility 0s;
}
html body.tr-chat-shell.bt-groupinfo-open::after{ display:none !important; }
html body.tr-chat-shell.bt-groupinfo-open .tr-mobile-chat-nav{ display:none !important; }
html body.tr-chat-shell .rightbar-wrapper::-webkit-scrollbar{ width:6px; }
html body.tr-chat-shell .rightbar-wrapper::-webkit-scrollbar-thumb{ background:rgba(120,125,150,.35); border-radius:6px; }

.bt-gi-overlay{
  position:fixed; inset:0; z-index:1440; background:rgba(14,16,28,.46);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
body.bt-groupinfo-open .bt-gi-overlay{ opacity:1; pointer-events:auto; }

/* Üst çubuk */
.bt-gi-top{
  position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--bt4-surf2); border-bottom:1px solid transparent;
}
.bt-gi-top.is-stuck{ border-bottom-color:var(--bt4-line); background:color-mix(in srgb,var(--bt4-surf2) 88%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.bt-gi-top-title{ flex:1; font-weight:800; font-size:.98rem; color:var(--bt4-ink); }
.bt-gi-iconbtn{
  width:36px; height:36px; border-radius:12px; border:1px solid var(--bt4-line); background:var(--bt4-surf);
  color:var(--bt4-ink2); display:grid; place-items:center; cursor:pointer; transition:transform .15s,color .15s;
}
.bt-gi-iconbtn:hover{ color:var(--bt4-red); transform:translateY(-1px); }
.bt-gi-iconbtn:focus-visible{ outline:2px solid var(--bt4-red); outline-offset:2px; }

/* Kahraman alanı */
.bt-gi-hero{ position:relative; margin:0 12px; border-radius:24px; background:var(--bt4-surf); border:1px solid var(--bt4-line); box-shadow:var(--bt4-shadow); overflow:hidden; text-align:center; padding-bottom:16px; }
.bt-gi-cover{
  height:118px; background:linear-gradient(135deg,var(--bt4-red),var(--bt4-red-d)) center/cover no-repeat;
  position:relative;
}
.bt-gi-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35)); }
.bt-gi-avatar{
  position:relative; z-index:2; width:92px; height:92px; margin:-46px auto 0; border-radius:50%; overflow:hidden;
  border:4px solid var(--bt4-surf); background:linear-gradient(135deg,var(--bt4-red),var(--bt4-red-d));
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(16,20,35,.22);
}
.bt-gi-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.bt-gi-avatar .bt-group-avatar-fallback{ font-size:2rem; color:#fff; font-weight:800; }
.bt-gi-name{ margin:10px 16px 2px; font-size:1.25rem; font-weight:800; color:var(--bt4-ink) !important; line-height:1.2; overflow-wrap:anywhere; }
.bt-gi-sub{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:6px 14px 0; }
.bt-gi-pill{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:var(--bt4-red-soft); color:var(--bt4-red-d); font-size:.74rem; font-weight:700; text-decoration:none;
}
.bt-gi-pill[hidden]{ display:none; }
a.bt-gi-pill:hover{ background:var(--bt4-red); color:#fff; }
.bt-gi-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 14px 0; }
.bt-gi-stat{ background:var(--bt4-surf2); border-radius:16px; padding:10px 6px; }
.bt-gi-stat b{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:1.1rem; line-height:1.2; color:var(--bt4-ink); }
.bt-gi-stat span{ display:block; font-size:.68rem; color:var(--bt4-mut); margin-top:2px; }
.bt-gi-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 14px 0; }

/* Kartlar */
.bt-gi-card{
  margin:12px 12px 0; padding:14px 15px; border-radius:20px; background:var(--bt4-surf);
  border:1px solid var(--bt4-line); box-shadow:var(--bt4-shadow);
}
.bt-gi-card h3{
  display:flex; align-items:center; gap:7px; margin:0 0 9px; font-size:.78rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bt4-mut) !important;
}
.bt-gi-card h3 i{ color:var(--bt4-red); font-size:1.05rem; }
.bt-gi-desc{ margin:0; color:var(--bt4-ink2); line-height:1.55; font-size:.88rem; }
.bt-gi-rules{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; counter-reset:r; }
.bt-gi-rules li{ position:relative; padding-left:30px; color:var(--bt4-ink2); font-size:.85rem; line-height:1.4; counter-increment:r; }
.bt-gi-rules li::before{
  content:counter(r); position:absolute; left:0; top:0; width:21px; height:21px; border-radius:8px;
  display:grid; place-items:center; background:var(--bt4-red-soft); color:var(--bt4-red-d); font-weight:800; font-size:.72rem;
}
.bt-gi-card .bt-cs-sec:first-of-type{ margin-top:0; }

/* Mevcut SEO "hakkında" kutusu — kart görünümü */
html body.tr-chat-shell .rightbar-wrapper .bt-room-about{
  margin:12px 12px 0; padding:14px 15px; border-radius:20px; background:var(--bt4-surf);
  border:1px solid var(--bt4-line); box-shadow:var(--bt4-shadow);
}
html body.tr-chat-shell .rightbar-wrapper .bt-room-about h2{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bt4-mut) !important; }
html body.tr-chat-shell .rightbar-wrapper .bt-room-about p{ color:var(--bt4-ink2); }
html body.tr-chat-shell .rightbar-wrapper .bt-about-links a{ background:var(--bt4-surf2); border-color:transparent; }
html body.tr-chat-shell .rightbar-wrapper .bt-about-links a:hover{ background:var(--bt4-red); color:#fff; }

/* Sekmeler (Üyeler / Fotoğraf / Video / Dosya / Bağlantı) */
html body.tr-chat-shell .rightbar-wrapper > .mb-1{ margin:12px 12px 0 !important; position:sticky; top:60px; z-index:5; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab{
  display:grid !important; grid-template-columns:repeat(5,1fr); gap:4px; padding:4px;
  background:var(--bt4-surf); border:1px solid var(--bt4-line); border-radius:18px; box-shadow:var(--bt4-shadow);
}
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-item{ min-width:0; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-link{
  display:flex !important; flex-direction:column; align-items:center; gap:2px; width:100%;
  padding:7px 2px 6px !important; border-radius:14px !important; color:var(--bt4-mut) !important; background:transparent !important;
  font-size:1.05rem; line-height:1; transition:background .15s,color .15s;
}
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-link .bt-tab-l{ font-size:.6rem; font-weight:700; letter-spacing:.01em; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-link.active{ background:var(--bt4-red) !important; color:#fff !important; box-shadow:0 6px 14px rgba(225,29,60,.3); }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-link:not(.active):hover{ background:var(--bt4-red-soft) !important; color:var(--bt4-red) !important; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tabContent{
  margin:10px 12px 28px; padding:8px; border-radius:20px; background:var(--bt4-surf);
  border:1px solid var(--bt4-line); box-shadow:var(--bt4-shadow); min-height:140px;
}
html body.tr-chat-shell .rightbar-wrapper .room-user-search,
html body.tr-chat-shell .rightbar-wrapper .group-user-search{
  border-radius:14px !important; background:var(--bt4-surf2) !important; border-color:transparent !important; padding-left:12px;
}
html body.tr-chat-shell .rightbar-wrapper .user-list-item{ border-radius:14px !important; }

/* Mobil */
@media (max-width:768px){
  html body.tr-chat-shell .rightbar-wrapper{ width:100% !important; max-width:100% !important; border-radius:0; }
  .bt-gi-cover{ height:104px; }
}
@media (prefers-reduced-motion:reduce){
  html body.tr-chat-shell .rightbar-wrapper,.bt-gi-overlay{ transition:none !important; }
}

/* Düzeltme: panel flex sütunu olduğu için kartlar sıkışıp kayboluyordu */
html body.tr-chat-shell .rightbar-wrapper > *{ flex-shrink:0 !important; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab{ list-style:none !important; margin:0; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-item{ list-style:none !important; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-link{ border:0 !important; cursor:pointer; }
html body.tr-chat-shell .rightbar-wrapper #rpanel-tab .nav-item::marker{ content:""; }
.bt-gi-hero{ flex-shrink:0; }