/* ekran-ana.css — ana düzen (Plan 3 Task 3): boş durum illüstrasyonu, bağlantı şeridi, duyarlı kırılımlar.
   Kaynak: design/web_ana-showcase/v01-klasik.html (wa1) yerel stilleri; `.win--*` showcase sınıfları yerine uygulama sınıfları
   (`.app--1100` ≤1100 px, `.app--dar` ≤820 px; ana-duzen.mjs matchMedia ile yazar). Renk YALNIZ takma adlardan (kabuk.css gibi). */

/* ---- Ray: etiketli genişlikte 92, ≤1100 etiketsiz 64 ---- */
.app--etiketli { --ray-w: 92px; }
.app--1100 { --ray-w: 64px; --liste-w: 340px; }
.ray--etiketsiz { gap: 6px; }
.ray--etiketsiz .ray-profil, .ray-profil { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--sub); padding: 4px 0; cursor: pointer; }
.ray-profil .av { display: block; }
.ray-profil .av .bas { width: 100%; height: 100%; }
.ray-ogesi { cursor: pointer; }
/* Odak halkası (Task 46): tarayıcının 1px varsayılanı yerine uygulamanın 3px halkası (diğer düğmelerle aynı). */
.ray-ogesi:focus-visible, .ray-profil:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }

/* ≤1100: bilgi paneli sohbetin ÜSTÜNE biner */
.app--1100.bilgi-acik { grid-template-columns: var(--ray-w) var(--liste-w) minmax(0, 1fr); }
.app--1100.bilgi-acik > .bilgi { position: absolute; top: 0; right: 0; bottom: 0; width: var(--bilgi-w); box-shadow: var(--shadow-lg); z-index: 5; }

/* ≤820: TEK bölme — .app[data-dar="liste"] ya da [data-dar="sohbet"] */
.app--dar { grid-template-columns: var(--ray-w) minmax(0, 1fr); }
.app--dar[data-dar="liste"] > .sohbet, .app--dar[data-dar="liste"] > .bilgi,
.app--dar[data-dar="sohbet"] > .liste, .app--dar[data-dar="sohbet"] > .bilgi { display: none; }
.app--dar[data-dar="liste"] > .liste { border-right: none; }
.app--dar .sohbet-bas .geri { display: grid; }

/* ---- Bağlantı şeridi (liste bölmesinin üstü, tam genişlik) ---- */
.liste > .liste-serit .wa-serit { margin: 0; }
.serit .btn { flex: none; }
.serit .wa-eylem { margin-top: 8px; display: flex; }
.serit:not(.wa-serit--ust) { align-items: flex-start; }

/* ---- Boş durum: marka illüstrasyonu (tarayıcı kartı + kâğıt uçak + telefon kartı + kilit rozeti) ---- */
.sohbet { position: relative; }
.sohbet-bos { border-bottom: 6px solid var(--primary-tint); }
.sohbet-bos .bos { gap: 14px; max-width: 520px; }
.sohbet-bos .bos h2 { margin-top: 18px; font-size: var(--fs-display); font-weight: var(--fw-bold); }
.sohbet-bos .bos p { font-size: var(--fs-body); }
.wa-alt { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wa-toplanti { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.wa-e2e { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--sub); font-weight: var(--fw-semi); }
.wa-e2e .ik { width: 16px; height: 16px; color: var(--primary-deep); }
.wa-ipucu { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--muted); font-weight: var(--fw-semi); }
.wa-illus { position: relative; width: 300px; height: 212px; flex: none; }
.wa-illus-ekran { position: absolute; left: 0; top: 14px; width: 240px; height: 162px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-md), var(--shadow-ic); }
.wa-illus-ekran .bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: var(--line-soft); }
.wa-illus-ekran .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.wa-illus-ekran .ic { display: grid; grid-template-columns: 62px 1fr; height: calc(100% - 22px); }
.wa-illus-ekran .sol { display: flex; flex-direction: column; gap: 9px; padding: 12px 9px; background: var(--sheet-2); border-right: 1px solid var(--line-soft); }
.wa-illus-ekran .sol b { height: 9px; border-radius: var(--r-pill); background: var(--line); }
.wa-illus-ekran .sol b:first-child { background: var(--primary-tint); }
.wa-illus-ekran .sag { display: grid; place-items: center; background: var(--chat-bg); }
.wa-illus-ekran .sag img { width: 74px; height: 74px; }
.wa-illus-tel { position: absolute; right: 0; bottom: 0; width: 98px; height: 172px; border-radius: 22px; padding: 20px 9px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  background: var(--chat-bg); border: 4px solid var(--sheet); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.wa-illus-tel .centik { position: absolute; top: 7px; left: 50%; width: 30px; height: 6px; margin-left: -15px; border-radius: var(--r-pill); background: var(--line); }
.wa-illus-tel i { display: block; height: 16px; border-radius: 8px; box-shadow: var(--shadow-balon); }
.wa-illus-tel .bi { width: 62px; align-self: flex-start; background: var(--bubble-in); }
.wa-illus-tel .bi.kisa { width: 44px; }
.wa-illus-tel .bo { width: 56px; align-self: flex-end; background: var(--bubble-out); box-shadow: var(--shadow-balon), inset 0 0 0 1px color-mix(in srgb, var(--primary-tint) 55%, transparent); }
.wa-illus-kilit { position: absolute; left: 196px; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-h1); line-height: 1; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-md), var(--shadow-ic); }