/* sohbet-guvenlik.css — sohbet içi güvenlik kodu (Plan 3 Task 15; js/ekran/guvenlik-kodu.mjs, sohbet-odasi.mjs).
   Kaynak: design/web_oturum-showcase/v06-sohbet-ici-kod.html (wo6) yerel sınıfları ("wo6 özel" + ortak `.kod-izgara`/`.dcip`). Showcase durum anahtarı
   (`data-ekran`/`data-e`) yerine uygulama durumu. `.kahraman` temel kuralları css/ekran-giris.css'te. Renk YALNIZ takma adlardan; satır içi stil YOK. */

.kahraman--mercan{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.guvenlik-serit-yuva{ flex:none; }
.guvenlik-serit-yuva[hidden]{ display:none; }

/* ---- Başlık rozetleri ---- */
.nokta-ayrac{ color:var(--muted); }
.rozet-dog{ display:inline-flex; align-items:center; gap:4px; color:var(--primary-deep); font-weight:var(--fw-bold); cursor:pointer; }
.rozet-dog .ik{ width:14px; height:14px; }
.rozet-uy{ display:inline-flex; align-items:center; gap:6px; color:var(--gold-ink); font-weight:var(--fw-bold); cursor:pointer; }
.rozet-uy i{ width:14px; height:13px; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:var(--gold); display:inline-block; }
.rozet-dog:focus-visible, .rozet-uy:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; border-radius:var(--r-xs); }

/* ---- Şerit + akış içi satır ---- */
.serit-kod{ margin:12px 7% 0; }
.serit-kod .btn{ align-self:center; }
.serit-kod.serit--tehlike{ margin:0; border-radius:0; border-width:0 0 1px; }
.hap--kod{ cursor:pointer; border:1px solid var(--gold-line); font-family:inherit; text-align:left; align-self:center; }
.hap--kod:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }
.hap--kod b{ font-weight:var(--fw-x); }
.hap--kod .kod-ic{ display:block; }
.hap--kod .kod-acik{ display:block; }
.hap--kod .ac{ display:block; margin-top:4px; color:var(--primary-deep); font-weight:var(--fw-x); }
.hap--tamam{ background:var(--primary-soft); color:var(--on-primary-soft); }
.hap--sistem.hap--kod .ik{ width:16px; height:16px; margin-top:2px; }

/* ---- HCZ gönderim onayı (composer üstünde) ---- */
.hcz-onay{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 14px; background:var(--danger-soft); color:var(--on-danger-soft);
  border-top:1px solid color-mix(in srgb, var(--danger-ink) 28%, transparent); font-size:var(--fs-sub); }
.hcz-onay b{ font-weight:var(--fw-x); }
.hcz-onay > span{ flex:1; min-width:180px; }
.hcz-onay-eylem{ display:flex; gap:8px; }

/* ---- Modal ---- */
.guvenlik-perde{ z-index:30; }
.modal--kod{ width:600px; gap:16px; padding:26px 28px; }
.modal--kod .bas{ display:flex; align-items:center; gap:14px; }
.modal--kod .bas-metin{ flex:1; min-width:0; }
.modal--kod .bas h2{ flex:1; }
.modal--kod .eylemler{ align-items:center; }
.modal--kod .eylemler .sol{ margin-right:auto; }
.modal--kod .eylemler .btn[disabled]{ cursor:default; }
.modal--kod .ikon-btn:focus-visible, .modal--kod .btn:focus-visible{ outline:3px solid var(--primary-tint); outline-offset:2px; }
.kisiler{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.kisiler .ok{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-deep); border:1.5px solid var(--primary-tint); }
.kisiler .ad{ font-size:var(--fs-sub); font-weight:var(--fw-bold); }
.kod-alan{ padding:20px 16px; border-radius:var(--r-lg); background:var(--sheet-2); border:1px solid var(--line); box-shadow:var(--shadow-ic); }
.kod-izgara{ display:grid; grid-template-columns:repeat(4, auto); justify-content:center; gap:12px 26px; min-height:100px; align-content:center; }
.kod-izgara span{ font-family:var(--font-mono); font-size:var(--fs-h2); font-weight:var(--fw-semi); letter-spacing:2px; color:var(--ink); }
.kod-durum{ font-size:var(--fs-cap); font-weight:var(--fw-bold); color:var(--primary-deep); }
.kod-durum:empty{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* boşken yer kaplamaz; canlı bölge DOM'da kalır */
.kod-aciklama{ margin:0; }
.tara-yerine{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); background:var(--note-soft);
  border:1px solid color-mix(in srgb, var(--note-accent) 22%, transparent); font-size:var(--fs-cap); line-height:1.45; }
.tara-yerine .e{ font-size:22px; line-height:1; }
.tara-yerine b{ display:block; font-size:var(--fs-sub); }
.bilgi .kod-izgara{ gap:8px 14px; }
.bilgi .kod-izgara span{ font-size:var(--fs-sub); letter-spacing:1px; }