/* sohbet-oda.css — sohbet odası: başlık + mesaj akışı (Plan 3 Task 12; js/ekran/sohbet-odasi.mjs, mesaj-balonu.mjs).
   Kaynak: design/web_sohbet-showcase/v06-is-modu.html (ws6) ORTAK_CSS + `.v6` kuralları (showcase durum anahtarları `data-gorunum-yalniz`/
   `data-durum-yalniz` yerine uygulama sınıfları: `.sohbet--grup`). Renk YALNIZ takma adlardan (ham renk YOK: test/renk-kapisi.test.mjs).
   Satır içi stil YOK: dalga çubukları nth-child, görsel oranları `.ar-*` sınıflarıyla. */

[hidden]{ display:none !important; }

/* ---- Başlık (ws6) ---- */
.sohbet-bas{ position:relative; z-index:4; padding:0 10px 0 14px; gap:10px; }
.sohbet-bas .kim{ cursor:pointer; border-radius:var(--r-sm); }
.sohbet-bas .kim .alt{ min-width:0; }
.sohbet-bas .alt .uyeler{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sohbet-bas .son{ color:var(--sub); }
.sohbet-bas .pres-etiket{ height:22px; padding:0; font-size:var(--fs-micro); background:transparent; }
.sohbet-bas .kim:focus-visible, .sohbet-bas .ikon-btn:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }
.bas-eylem{ display:flex; align-items:center; gap:2px; flex:none; }
.bas-ayrac{ width:1px; height:24px; background:var(--line); margin:0 2px; }
.cagri{ width:auto; height:34px; padding:0 12px; gap:6px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--sheet-2); color:var(--ink);
  font-size:var(--fs-cap); font-weight:var(--fw-bold); display:inline-flex; align-items:center; margin-right:4px; }
.cagri .ik{ width:17px; height:17px; color:var(--primary-deep); }
.cagri .etiket{ display:none; }
.cagri:first-child .etiket{ display:inline; }
.sure-cip{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:var(--r-pill); background:var(--line-soft); color:var(--sub);
  font-size:var(--fs-micro); font-weight:var(--fw-bold); flex:none; }
.sure-cip .ik{ width:14px; height:14px; }
.menu--baslik{ position:absolute; right:10px; top:calc(100% - 6px); z-index:30; width:240px; min-width:0; }
.menu--baslik .menu-ogesi, .baglam .menu-ogesi{ width:100%; border:0; background:transparent; font-family:inherit; text-align:left; cursor:pointer; }
.menu--baslik .menu-ogesi:hover, .baglam .menu-ogesi:hover{ background:var(--line-soft); }
.menu--baslik .menu-ogesi:focus-visible, .baglam .menu-ogesi:focus-visible, .hizli-emoji:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:-3px; }

/* ---- Sohbette ara şeridi ---- */
.oda-arama{ flex:none; display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--sheet); border-bottom:1px solid var(--line); }
.oda-arama .ara-kutu{ flex:1; min-width:0; }
.oda-arama-say{ font-size:var(--fs-cap); color:var(--sub); white-space:nowrap; min-width:56px; text-align:right; }

/* ---- Mesaj akışı ---- */
.composer-yuva{ display:contents; }
.mesajlar-sarmal{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
/* Duvar kâğıdı katmanı (js/duvar-kagidi.mjs; W149-DUVAR-ODA): mesaj akışının ARKASINDA (DOM'da ilk, z-index YOK ⇒ sonraki konumlu kardeşler üstte). Ham renk YOK:
   görsel dosya + var(--chat-bg) zemini. Açık/koyu AYRI görsel; `akis` tek dosyadır, koyuda ters çevrilip screen ile bindirilir (ekran-giris.css .bag-hero ile aynı).
   İki koyu dal (tema.css ile aynı): data-tema="koyu" + sistem-koyu (data-tema açık değilken). */
.oda-duvar{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.oda-duvar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.oda-duvar .duvar-koyu{ display:none; }
:root[data-tema="koyu"] .oda-duvar .duvar-acik{ display:none; }
:root[data-tema="koyu"] .oda-duvar .duvar-koyu{ display:block; }
:root[data-tema="koyu"] .oda-duvar .duvar-akis{ filter:invert(1); mix-blend-mode:screen; opacity:.5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .oda-duvar .duvar-acik{ display:none; }
  :root:not([data-tema="acik"]) .oda-duvar .duvar-koyu{ display:block; }
  :root:not([data-tema="acik"]) .oda-duvar .duvar-akis{ filter:invert(1); mix-blend-mode:screen; opacity:.5; }
}
.sohbet .mesajlar{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:0; padding:14px 22px 10px;
  overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.sohbet .mesajlar:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:-3px; }
.sohbet .mesajlar > .sanal-bosluk:first-child{ margin-top:auto; }
/* flex `gap` yerine satır başına üst boşluk (sanal liste yükseklik ölçümü kenar boşluğunu da sayar): 2px gap + önceki kenar boşluğu */
.sohbet .mesajlar > .msj{ margin-top:4px; }
.sohbet .mesajlar > .msj.grup-ilk{ margin-top:12px; }
.sohbet .mesajlar > .msj.tepkili{ margin-bottom:18px; }
.sohbet .mesajlar > .hap{ margin:12px 0 6px; }
.sohbet .mesajlar > .okunmamis-ayrac{ margin:12px 0 4px; }
.sohbet .mesajlar .balon{ max-width:82%; }
.gun-yuzen{ position:absolute; top:10px; left:50%; transform:translateX(-50%); margin:0; z-index:7; box-shadow:var(--shadow-md); }
.hap--sistem .hap-link{ color:var(--primary-deep); font-weight:var(--fw-x); text-decoration:underline; text-underline-offset:2px; }
.hap--sistem{ align-items:center; }
.hap--sistem .ik{ margin-top:0; }
.asagi-btn{ position:absolute; right:22px; bottom:14px; z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--sheet);
  color:var(--sub); display:grid; place-items:center; box-shadow:var(--shadow-md); }
.asagi-btn .ik{ width:22px; height:22px; }
.asagi-btn .rozet{ position:absolute; top:-6px; right:-6px; }
.asagi-btn:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }
.okunmamis-ayrac{ display:flex; align-items:center; gap:12px; }
.okunmamis-ayrac::before, .okunmamis-ayrac::after{ content:""; flex:1; height:1px; background:color-mix(in srgb, var(--primary-deep) 35%, transparent); }
.okunmamis-ayrac span{ padding:4px 12px; border-radius:var(--r-pill); background:var(--primary-soft); color:var(--on-primary-soft); font-size:var(--fs-micro);
  font-weight:var(--fw-x); box-shadow:var(--shadow-balon); }

/* ---- Mesaj parçaları ---- */
.msj{ position:relative; }
.msj:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; border-radius:var(--r-md); }
.msj-av{ display:none; }
.msj-av > .av{ display:block; }
.sohbet--grup .msj.gelen .msj-av{ display:block; margin-right:8px; align-self:flex-start; }
.sohbet--grup .msj.gelen.girinti{ padding-left:40px; }
.balon .meta .duz{ margin-right:4px; font-style:italic; }
.tik.bekliyor{ width:14px; height:14px; margin:0 1px; color:var(--bubble-meta); }
.meta--blok{ float:none; position:static; display:flex; justify-content:flex-end; margin:4px 0 0; top:0; }
.balon.kartli{ padding-bottom:6px; }
.iletildi{ display:flex; align-items:center; gap:4px; font-size:var(--fs-cap); font-style:italic; color:var(--bubble-meta); margin:0 0 3px; }
.iletildi .ik{ width:15px; height:15px; }
.gonderen{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-b{ color:var(--accent-deep) !important; } .g-a{ color:var(--primary-deep) !important; } .g-c{ color:var(--gold-ink) !important; }
.bahsetme{ color:var(--on-primary-soft); background:var(--primary-soft); font-weight:var(--fw-bold); padding:0 4px; border-radius:5px; }
.link{ color:var(--primary-deep); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.balon code{ font-family:var(--font-mono); background:color-mix(in srgb, var(--ink) 8%, transparent); border-radius:4px; padding:0 4px; }
.balon pre{ margin:2px 0; padding:6px 8px; border-radius:6px; background:color-mix(in srgb, var(--ink) 8%, transparent); overflow-x:auto; white-space:pre-wrap; }
.balon pre code{ background:transparent; padding:0; }
.alinti{ cursor:pointer; }
.alinti:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:1px; }
.alinti .kim{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ek-dosya .dosya-ic{ min-width:0; flex:1; }
.ek-dosya .ad{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ek-dosya{ max-width:380px; min-width:0; }
.ek-dosya .ikon-btn{ flex:none; }
.ek-dosya .boy, .alinti .ne{ color:var(--bubble-meta); }
.dosya-ikon{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--primary-soft); color:var(--primary-deep); }
.dosya-ikon .ik{ width:20px; height:20px; }
.silinmis .silindi-metin, .cozulemedi, .dogrulanamadi{ font-style:italic; color:var(--bubble-meta); }
.dogrulanamadi{ display:block; font-size:var(--fs-micro); margin-top:2px; }

/* bağlantı önizleme kartı */
.link-kart, .konum-kart{ display:flex; margin:0 -5px 6px -6px; border-radius:8px; overflow:hidden; background:color-mix(in srgb, var(--ink) 6%, transparent);
  width:340px; max-width:calc(100% + 11px); color:inherit; text-decoration:none; }
.link-kart img{ width:78px; height:78px; object-fit:cover; flex:none; display:block; }
.link-kart .ic, .konum-kart .ic, .kisi-kart .ic{ padding:7px 12px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.link-kart .site{ font-size:var(--fs-micro); color:var(--bubble-meta); font-weight:var(--fw-bold); }
.link-kart .bas, .konum-kart .bas, .kisi-kart .bas{ font-size:var(--fs-sub); font-weight:var(--fw-x); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.link-kart .acik, .konum-kart .acik, .kisi-kart .acik{ font-size:var(--fs-cap); color:color-mix(in srgb, var(--bubble-out-ink) 72%, transparent);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.konum-ikon{ width:78px; height:64px; flex:none; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-deep); }
.konum-ikon .ik{ width:28px; height:28px; }
.kisi-kart{ display:flex; align-items:center; gap:10px; padding:4px 0; min-width:220px; }

/* medya ızgarası / tek görsel */
.medya-izgara{ display:grid; grid-template-columns:repeat(4, 86px); gap:3px; margin:2px -5px 5px -6px; border-radius:8px; overflow:hidden; }
.medya-izgara .k{ position:relative; height:86px; overflow:hidden; display:block; padding:0; border:0; background:var(--line-soft); cursor:pointer; }
.medya-izgara img{ width:100%; height:100%; object-fit:cover; display:block; }
.medya-izgara.tek{ display:block; width:min(330px, calc(100% + 11px)); }
.medya-izgara.tek .k{ width:100%; height:auto; aspect-ratio:4 / 3; }
.medya-izgara.tek .k.ar-1x1{ aspect-ratio:1 / 1; }
.medya-izgara.tek .k.ar-16x9{ aspect-ratio:16 / 9; }
.medya-izgara.tek .k.ar-21x9{ aspect-ratio:21 / 9; }
.medya-izgara.tek .k.ar-3x4{ width:auto; height:320px; max-width:100%; aspect-ratio:3 / 4; }
.medya-izgara.tek .k.ar-9x16{ width:auto; height:320px; max-width:100%; aspect-ratio:9 / 16; }
.medya-izgara .k:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:-3px; }
.k-yer{ position:absolute; inset:0; margin:auto; width:32px; height:32px; color:var(--muted); }
.oynat-rozet{ position:absolute; left:50%; top:42%; transform:translate(-50%, -50%); width:34px; height:34px; border-radius:50%; background:var(--scrim); color:var(--fixed-white);
  display:grid; place-items:center; }
.oynat-rozet .ik{ width:18px; height:18px; }
.medya-izgara .sure{ position:absolute; left:6px; bottom:5px; display:flex; align-items:center; gap:4px; font-size:var(--fs-micro); font-weight:var(--fw-x);
  color:var(--fixed-white); padding:1px 6px; border-radius:var(--r-pill); background:var(--scrim); }
.medya-izgara .fazla{ position:absolute; inset:0; display:grid; place-items:center; background:var(--scrim); color:var(--fixed-white); font-size:var(--fs-h1); font-weight:var(--fw-x); }

/* sesli mesaj */
.ses{ display:flex; align-items:center; gap:10px; width:320px; max-width:100%; padding:2px 0 0; }
.ses-av{ position:relative; }
.ses-mik{ position:absolute; right:-4px; bottom:-3px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--sheet);
  color:var(--voice-accent-deep); box-shadow:var(--shadow-sm); }
.ses-mik .ik{ width:12px; height:12px; }
.oynat-btn{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--primary-tint); background:var(--primary-soft);
  color:var(--primary-deep); box-shadow:var(--shadow-ic); }
.oynat-btn .ik{ width:16px; height:16px; }
.ses-orta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dalga{ display:flex; align-items:center; gap:2px; height:30px; }
.dalga i{ display:block; width:3px; border-radius:2px; background:color-mix(in srgb, var(--sub) 40%, transparent); flex:none; }
.dalga i.o{ background:var(--voice-accent-deep); }
.dalga i:nth-child(1){ height:8px; }
.dalga i:nth-child(2){ height:14px; }
.dalga i:nth-child(3){ height:20px; }
.dalga i:nth-child(4){ height:12px; }
.dalga i:nth-child(5){ height:24px; }
.dalga i:nth-child(6){ height:18px; }
.dalga i:nth-child(7){ height:10px; }
.dalga i:nth-child(8){ height:22px; }
.dalga i:nth-child(9){ height:28px; }
.dalga i:nth-child(10){ height:16px; }
.dalga i:nth-child(11){ height:12px; }
.dalga i:nth-child(12){ height:20px; }
.dalga i:nth-child(13){ height:26px; }
.dalga i:nth-child(14){ height:14px; }
.dalga i:nth-child(15){ height:8px; }
.dalga i:nth-child(16){ height:18px; }
.dalga i:nth-child(17){ height:24px; }
.dalga i:nth-child(18){ height:30px; }
.dalga i:nth-child(19){ height:20px; }
.dalga i:nth-child(20){ height:12px; }
.dalga i:nth-child(21){ height:16px; }
.dalga i:nth-child(22){ height:22px; }
.dalga i:nth-child(23){ height:14px; }
.dalga i:nth-child(24){ height:10px; }
.dalga i:nth-child(25){ height:18px; }
.dalga i:nth-child(26){ height:26px; }
.dalga i:nth-child(27){ height:20px; }
.dalga i:nth-child(28){ height:12px; }
.dalga i:nth-child(29){ height:8px; }
.dalga i:nth-child(30){ height:14px; }
.dalga i:nth-child(31){ height:22px; }
.dalga i:nth-child(32){ height:16px; }
.dalga i:nth-child(33){ height:10px; }
.dalga i:nth-child(34){ height:18px; }
.dalga i:nth-child(35){ height:12px; }
.dalga i:nth-child(36){ height:8px; }
.ses-alt{ display:flex; justify-content:space-between; font-size:var(--fs-micro); color:var(--bubble-meta); }
.ses-alt .meta{ float:none; position:static; margin:0; }
.hiz{ flex:none; height:26px; padding:0 9px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--sheet); color:var(--ink); font-size:var(--fs-micro);
  font-weight:var(--fw-x); box-shadow:var(--shadow-sm); }

/* tepki çipi: kendi tepkim vurgulu */
.tepkiler .tepki.benim{ text-shadow:0 0 0 var(--primary); }

/* ---- Hover araç çubuğu + bağlam menüsü ---- */
.hover-arac{ position:absolute; top:50%; transform:translateY(-50%); display:none; gap:1px; padding:3px; border-radius:var(--r-pill); background:var(--sheet);
  border:1px solid var(--line); box-shadow:var(--shadow-md); z-index:6; white-space:nowrap; }
.msj:hover .hover-arac, .msj:focus-within .hover-arac{ display:flex; }
.msj.gelen .hover-arac{ left:calc(100% + 10px); } .msj.giden .hover-arac{ right:calc(100% + 10px); }
.hover-arac button{ width:32px; height:32px; border:0; background:transparent; border-radius:50%; display:grid; place-items:center; color:var(--sub); }
.hover-arac button:hover, .hover-arac button.aktif{ background:var(--line-soft); color:var(--ink); }
.hover-arac button:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:-3px; }
.hover-arac .ik{ width:18px; height:18px; }
.msj.ustunde .balon{ box-shadow:var(--shadow-balon), 0 0 0 2px color-mix(in srgb, var(--primary-tint) 70%, transparent); }
.baglam{ position:absolute; left:calc(100% + 10px); top:-6px; z-index:8; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.msj.giden .baglam{ left:auto; right:calc(100% + 10px); align-items:flex-end; }
.baglam.baglam--yukari{ top:auto; bottom:0; }
.hizli-tepki{ display:flex; align-items:center; gap:2px; padding:4px 6px; border-radius:var(--r-pill); background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.hizli-tepki .hizli-emoji{ width:36px; height:36px; display:grid; place-items:center; font-size:var(--fs-h1); border-radius:50%; border:0; background:transparent; cursor:pointer; }
.hizli-tepki .hizli-emoji:hover{ background:var(--line-soft); }
.hizli-tepki .hizli-emoji[aria-pressed="true"]{ background:var(--primary-soft); }
.baglam .menu{ width:272px; }
.baglam .menu-ogesi{ height:36px; }