/* ekran-kapak.css — wo4 tam ekran kapaklar (Plan 3 Task 9; design/web_oturum-showcase/v04-tam-ekran-kilitler.html yerel stilleri TAŞINDI).
   Renk YALNIZ takma adlardan (css/tasarim-adlari.css → --t-* / --f-*); ham renk YOK (test/renk-kapisi.test.mjs). Satır içi stil YOK.
   `.kahraman*` (renkli emoji karosu) css/ekran-giris.css'te; sınıflar `kapak` önekli (başka kümelerin CSS'iyle çakışmaz). */

/* Tam pencere yüzey: uygulamanın YERİNE geçer. Işıma rengi data-ton'dan (yeşil varsayılan). */
.kapak{ position:relative; overflow:hidden; box-sizing:border-box; min-height:100vh; display:grid; place-items:center; background:var(--app-bg); color:var(--ink); }
.kapak::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 520px at 50% 38%, var(--ton, var(--primary-soft)), transparent 70%); }
.kapak[data-ton="altin"]{ --ton:var(--gold-soft); }
.kapak[data-ton="kirmizi"]{ --ton:var(--danger-soft); }
.kapak[data-ton="mor"]{ --ton:var(--note-soft); }
.kapak-ust{ position:absolute; top:22px; left:28px; right:28px; display:flex; align-items:center; gap:10px; font-weight:var(--fw-x); font-size:var(--fs-h3); z-index:1; }
.kapak-ust img{ width:28px; height:28px; border-radius:8px; }
.kapak-ust .e2e{ margin-left:auto; }
.kapak-duyuru{ position:relative; box-sizing:border-box; width:560px; max-width:calc(100% - 32px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:36px 40px 30px; background:var(--sheet); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow-lg), var(--shadow-ic); }
.kapak-duyuru .kahraman{ --k:112px; margin-top:-92px; box-shadow:var(--shadow-lg), var(--shadow-ic); }
.kapak-duyuru h1{ margin:6px 0 0; font-size:var(--fs-display); font-weight:var(--fw-x); letter-spacing:-.5px; line-height:1.2; color:var(--ink); }
.kapak-duyuru > p{ margin:0; color:var(--sub); font-size:var(--fs-body); line-height:1.5; }
.kapak-duyuru > p b{ color:var(--ink); }
.kapak-tam{ width:100%; }

/* Kullanıcı hapı (ekran kilidi) */
.kapak-kim{ display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border-radius:var(--r-pill); background:var(--sheet-2); border:1px solid var(--line); font-weight:var(--fw-x); color:var(--ink); }

/* Parola alanı: gerçek <input type=password>, kapsayıcı showcase `.girdi.odak` görünümünde (odak halkası :focus-within) */
.kapak-form{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.kapak-form > div{ text-align:left; }
.kapak-etiket{ display:block; font-size:var(--fs-cap); font-weight:var(--fw-bold); color:var(--sub); margin:0 0 6px; }
.kapak-girdi{ display:flex; align-items:center; gap:10px; height:48px; box-sizing:border-box; padding:0 14px; border-radius:var(--r-md); border:1.5px solid var(--line);
  background:var(--sheet); color:var(--ink); font-size:var(--fs-body); }
.kapak-girdi:focus-within{ border-color:var(--primary-deep); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.kapak-girdi-alan{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; letter-spacing:3px; color:inherit; }
.kapak-girdi .ik{ color:var(--muted); width:18px; height:18px; flex:none; }
.kapak-girdi-alan:disabled{ opacity:.6; }
.kapak-hata{ margin:6px 0 0; font-size:var(--fs-cap); font-weight:var(--fw-semi); color:var(--danger-deep); }

/* Gerçekler tablosu, adımlar, tehlike notu, eylem sırası, dipnot */
.kapak-gercekler{ width:100%; box-sizing:border-box; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; text-align:left; padding:14px 16px; margin:14px 0; /* showcase: <dl> UA kenar boşluğu (1em) */
  border-radius:var(--r-md); background:var(--sheet-2); border:1px solid var(--line); font-size:var(--fs-sub); }
.kapak-gercekler dt{ color:var(--sub); }
.kapak-gercekler dd{ margin:0; font-weight:var(--fw-bold); color:var(--ink); }
.kapak-adim-liste{ width:100%; display:flex; flex-direction:column; gap:8px; text-align:left; }
.kapak-adim-liste > div{ display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:var(--r-md); border:1px solid var(--line); font-size:var(--fs-sub); color:var(--ink); }
.kapak-e{ font-size:22px; width:28px; text-align:center; flex:none; }
.kapak-no{ width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--line-soft); color:var(--sub); font-size:var(--fs-micro); font-weight:var(--fw-x); }
.kapak-eylem-sira{ display:flex; gap:10px; width:100%; }
.kapak-eylem-sira .btn{ flex:1; }
.kapak-dipnot{ font-size:var(--fs-cap); color:var(--muted); display:flex; align-items:center; gap:6px; justify-content:center; }
.kapak-dipnot .ik{ width:15px; height:15px; }
.kapak-dipnot--ust{ margin-top:-4px; }
.kapak-tehlike-not{ width:100%; box-sizing:border-box; display:flex; gap:10px; align-items:flex-start; text-align:left; padding:12px 14px; border-radius:var(--r-md);
  background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger-ink) 28%, transparent); color:var(--on-danger-soft); font-size:var(--fs-cap); line-height:1.45; }
.kapak-tehlike-not .kapak-e{ font-size:18px; line-height:1.2; width:auto; }

@media (max-width: 640px) {
  .kapak-duyuru{ padding:28px 20px 24px; }
  .kapak-duyuru h1{ font-size:var(--fs-h1); }
  .kapak-eylem-sira{ flex-direction:column; }
}