/* Mor Replikler — AdminLTE 3.2.0 dark-mode üzerine mor tema.
   Elif Demir, 04.11.2026. Renkler logo (mor-replikler-logo-v1.jpg) ve müşteri
   mockup'ından (mor-replikler-ekranlar-v1.jpg). Özel CSS bilinçli olarak az:
   yalnız tema rengi + AdminLTE'de karşılığı olmayan üç desen (replik akışı,
   telefon tablosu, demo hâl şeridi). */
:root{
  --mr-zemin:#140a24; --mr-zemin-2:#1b0f2e;
  --mr-yuzey:#241339; --mr-yuzey-2:#2e1a48; --mr-yuzey-3:#382055;
  --mr-cizgi:#3f2a60; --mr-cizgi-2:#573c7f;
  --mr-mor:#8b5cf6; --mr-mor-koyu:#6d28d9; --mr-mor-acik:#cbb0ff;
  --mr-altin:#e9c87d; --mr-altin-koyu:#c9a455; --mr-altin-metin:#2a1040;
  --mr-metin:#f5effd; --mr-metin-2:#cdbce6; --mr-metin-3:#a394c0;
}
/* ——— zeminler ——— */
body.dark-mode,.dark-mode .wrapper{background-color:var(--mr-zemin);color:var(--mr-metin)}
.dark-mode .content-wrapper{background-color:var(--mr-zemin)}
.dark-mode .main-header,.dark-mode .main-footer{
  background-color:var(--mr-zemin-2);border-color:var(--mr-cizgi);color:var(--mr-metin-2)}
.dark-mode .main-sidebar,.dark-mode .sidebar-dark-primary{background-color:var(--mr-zemin-2)}
.dark-mode .brand-link{border-bottom:1px solid var(--mr-cizgi);color:var(--mr-metin)}
.dark-mode .card{background-color:var(--mr-yuzey);border:1px solid var(--mr-cizgi);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.dark-mode .card-header{background-color:transparent;border-bottom:1px solid var(--mr-cizgi)}
.dark-mode .card-footer{background-color:transparent;border-top:1px solid var(--mr-cizgi)}
.dark-mode .card-title{font-weight:650}
/* ——— kenar çubuğu ——— */
.dark-mode .nav-sidebar .nav-link{color:var(--mr-metin-2)}
.dark-mode .nav-sidebar .nav-link:hover{background-color:var(--mr-yuzey);color:var(--mr-metin)}
.dark-mode .nav-sidebar .nav-link.active{
  background:linear-gradient(135deg,var(--mr-mor-koyu),#7c3aed);
  background-color:var(--mr-mor-koyu);color:#fff;box-shadow:none}
.dark-mode .nav-header{color:var(--mr-metin-3);font-size:12.5px;letter-spacing:.05em}
.brand-im{width:34px;height:34px;border-radius:9px;display:inline-grid;place-items:center;
  background:linear-gradient(145deg,#4c1d95,#7c3aed);background-color:#5b21b6;
  font-size:17px;line-height:1;margin-right:9px;vertical-align:middle}
.brand-link,.navbar-brand{display:flex;align-items:center}  /* Tur 2: alt başlık ikonun
   altına kaçıyordu; yan yana dizilim flex ile sabitlendi (PNG göz kontrolü yakaladı) */
.brand-ad{font-size:15px;font-weight:700;letter-spacing:.08em;vertical-align:middle}
.brand-ad small{display:block;font-size:12.5px;letter-spacing:.13em;color:var(--mr-altin);
  font-weight:600;margin-top:-3px}
/* ——— düğmeler: mor birincil, altın eylem ——— */
.btn-primary,.dark-mode .btn-primary{
  background:linear-gradient(135deg,var(--mr-mor-koyu),#7c3aed);
  background-color:var(--mr-mor-koyu);border-color:var(--mr-mor-koyu);color:#fff}
.btn-primary:hover,.dark-mode .btn-primary:hover{
  background-color:#5b21b6;border-color:#5b21b6;color:#fff}
.btn-altin{background:linear-gradient(135deg,var(--mr-altin),var(--mr-altin-koyu));
  background-color:var(--mr-altin);border-color:var(--mr-altin-koyu);
  color:var(--mr-altin-metin);font-weight:650}
.btn-altin:hover{background-color:var(--mr-altin-koyu);color:var(--mr-altin-metin)}
.dark-mode .btn-secondary{background-color:var(--mr-yuzey-2);border-color:var(--mr-cizgi-2);
  color:var(--mr-metin)}
.dark-mode .btn-secondary:hover{background-color:var(--mr-yuzey-3);color:var(--mr-metin)}
.btn:focus-visible,.btn:focus{outline:3px solid var(--mr-mor-acik);outline-offset:2px;
  box-shadow:0 0 0 2px var(--mr-zemin)}   /* Tur 2: altın düğmede halka dolguya karışıyordu (1,16:1) */
/* fareyle tıklanınca odak halkası kalmasın (Tur 2): :focus tek başına fare tıklamasında da
   eşleşiyordu. :focus kuralı destek yoksa diye duruyor, bu satır onu klavyeye indiriyor. */
.btn:focus:not(:focus-visible){outline:none;box-shadow:none}
/* dokunma hedefi: parmak boyu. AdminLTE varsayılanları 44 px'in ALTINDA kalıyor:
   .btn 31 px · .nav-link 40 px · ikonlu .btn-sm 30 px genişlik — üçü de ölçümle yakalandı. */
.btn{min-height:46px;min-width:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-sm{min-height:46px;min-width:46px}
.nav-sidebar .nav-link,.navbar-nav .nav-link{min-height:46px;display:flex;align-items:center}
.nav-sidebar .nav-link p{margin-bottom:0}
.btn-block{width:100%}
/* ——— form ——— */
.dark-mode .form-control{background-color:var(--mr-zemin-2);border-color:var(--mr-cizgi);
  color:var(--mr-metin);min-height:46px}
.dark-mode .form-control:focus{background-color:var(--mr-zemin-2);border-color:var(--mr-mor);
  color:var(--mr-metin);box-shadow:0 0 0 .2rem rgba(139,92,246,.55);
  outline:2px solid var(--mr-mor-acik);outline-offset:0}
.dark-mode .form-control::placeholder{color:var(--mr-metin-3)}
/* ⚠ .dark-mode .form-control (0,2,0) bu kuralı eziyordu: "textarea.form-control" (0,1,1)
   Tur 1 boyunca HİÇ uygulanmadı. Özgüllüğü eşitledim. (Tur 2'de ölçüm ortaya çıkardı.) */
.dark-mode textarea.form-control{min-height:72px}
/* geniş ekranda replik sütunu dar kalıyor, metin üçüncü satırda kesiliyordu (24 px dikey) */
@media (min-width:992px){.dark-mode textarea.form-control{min-height:124px}}
/* Tablo içindeki girişlerde AdminLTE'nin 12 px yatay dolgusu değerden yer çalıyor:
   sütun daralınca "YAŞLI ADAM" kesiliyordu. Dolgu 8 px → değere +8 px alan. */
.tablo-kart td .form-control{padding-left:8px;padding-right:8px}
/* ——— tablo ——— */
.dark-mode .table{color:var(--mr-metin)}
.dark-mode .table thead th{border-bottom:2px solid var(--mr-cizgi);color:var(--mr-metin-3);
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.dark-mode .table td,.dark-mode .table th{border-top:1px solid var(--mr-cizgi);vertical-align:top}
.dark-mode .table-hover tbody tr:hover{background-color:var(--mr-yuzey-2);color:var(--mr-metin)}
.dark-mode tr.belirsiz-satir{background-color:#2d2110}
.dark-mode tr.belirsiz-satir:hover{background-color:#362817}
/* telefon VE tablet dikeyde tablo → kart (tek DOM; yatay kaydırma YOK).
   Eşik 768 → 992: beş sütunlu düzenlenebilir tablo 768 px'de o kadar sıkışıyor ki
   karakter/duygu değerleri input içinde kesiliyordu (blade ölçümü, 04.11). */
@media (max-width:991.98px){
  .tablo-kart,.tablo-kart tbody{display:block;width:100%;max-width:100%}
  .tablo-kart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tablo-kart tbody tr{display:block;margin-bottom:12px;border:1px solid var(--mr-cizgi);
    border-radius:10px;padding:12px;background:var(--mr-yuzey-2);position:relative}
  .dark-mode .tablo-kart tbody tr.belirsiz-satir{border-color:#8a6a1e}
  .tablo-kart tbody td{display:block;border:0!important;padding:6px 0}
  .tablo-kart tbody td::before{content:attr(data-etiket);display:block;font-size:12px;
    font-weight:650;color:var(--mr-metin-3);margin-bottom:4px}
  .tablo-kart tbody td.td-sira{position:absolute;top:10px;right:12px;padding:0;width:auto}
  .tablo-kart tbody td.td-sira::before{display:none}
  .tablo-kart tbody td.td-karakter{padding-right:46px}
}
/* ——— rozetler / durum ——— */
.rozet-ornek{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:650;background:#4a3410;color:#ffd98a;border:1px solid #7a5a1c}
.badge{font-size:12.5px;font-weight:650;padding:5px 10px;border-radius:999px;
  white-space:normal;text-align:left}
.breadcrumb-item a{min-height:44px;display:inline-flex;align-items:center}
.badge-mor{background:var(--mr-mor-koyu);color:#fff}
.badge-duygu{background:var(--mr-yuzey-3);color:var(--mr-metin-2);border:1px solid var(--mr-cizgi-2)}
.badge-hazir{background:#14432c;color:#5fe39b;border:1px solid #1e6b45}
.badge-bekle{background:#3b2a5e;color:var(--mr-mor-acik);border:1px solid var(--mr-cizgi-2)}
.badge-hata{background:#4a1623;color:#ffb3c1;border:1px solid #7d2d43}
.badge-belirsiz{background:#7a5a1c;color:#ffe9bd}
/* ——— ilerleme ——— */
.dark-mode .progress{background-color:var(--mr-yuzey-3);height:8px;border-radius:999px}
.dark-mode .progress-bar{background:linear-gradient(90deg,var(--mr-mor-koyu),var(--mr-mor));
  background-color:var(--mr-mor)}
/* ——— uyarı kutuları ——— */
.dark-mode .alert-danger{background-color:#3a1420;border-color:#7d2d43;color:#f4c9d3}
.dark-mode .alert-danger b,.dark-mode .alert-danger h5{color:#ffd7de}
.dark-mode .alert-info{background-color:#1e2a4a;border-color:#2f4473;color:#cfe0ff}
.dark-mode .overlay-wrapper .overlay{background-color:rgba(20,10,36,.85)}
.hata-kod{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8aab8;
  background:#2a0e17;border-radius:8px;padding:8px 10px;overflow-wrap:anywhere;display:block}
/* ——— metin yardımcıları ——— */
.dark-mode .text-muted{color:var(--mr-metin-3)!important}
.kucuk{font-size:13px;color:var(--mr-metin-3)}
.bos-deger{color:var(--mr-metin-3);font-style:italic}

/* ——— Tur 2: odak göstergesi ve üzerine gelme (eksik kalmıştı) ——— */
a:focus-visible,.nav-link:focus-visible,.brand-link:focus-visible,.navbar-brand:focus-visible,
.breadcrumb-item a:focus-visible,label.kisi-kart:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--mr-mor-acik);outline-offset:2px}
a:focus:not(:focus-visible),.nav-link:focus:not(:focus-visible){outline:none}
.dark-mode .breadcrumb-item a:hover{color:var(--mr-mor-acik)}
.dark-mode .brand-link:hover,.dark-mode .navbar-brand:hover{color:#fff}
.dark-mode .navbar-nav .nav-link:hover{background-color:var(--mr-yuzey);color:var(--mr-metin)}
.dark-mode .table-hover tbody tr:hover .form-control{background-color:var(--mr-zemin)}
/* hareketi azalt: .dalga dışında Font Awesome döner ikonları da duruyor */
@media (prefers-reduced-motion:reduce){
  .fa-spin{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ════════════════════════════════════════════════════════════════════════════
   Aşağıdaki bölümler demo HTML'lerindeki sayfa içi <style> bloklarından taşındı
   (e1/e2/e3). Blade'de hâller koşulla basıldığı için demo şeridine ait
   .demo-serit · .hal-anahtar · radyo seçicileri ve .hal{display:none} SİLİNDİ.
   ════════════════════════════════════════════════════════════════════════════ */

/* ——— E1 · yönetmen: yükleme alanı + ayrıştırma iskeleti ——— */
.birak{border:2px dashed var(--mr-cizgi-2);border-radius:12px;padding:24px 16px;text-align:center;
  background:var(--mr-yuzey-2)}
.birak-im{width:54px;height:54px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#4c1d95,#7c3aed);background-color:#5b21b6;font-size:24px;color:#fff}
.ayirac{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--mr-metin-3);font-size:12.5px}
.ayirac::before,.ayirac::after{content:"";height:1px;background:var(--mr-cizgi);flex:1}
.iskelet{height:46px;border-radius:9px;background:var(--mr-yuzey-3);opacity:.5}
.iskelet.uzun{height:72px}
.td-sira-im{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  background:var(--mr-yuzey-3);font-weight:700;color:var(--mr-metin-2)}
/* gerçek dosya seçici: görünmez ama klavyeyle odaklanabilir; label düğme gibi davranır */
.dosya-giris{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.dosya-giris:focus-visible + .dosya-etiket{outline:3px solid var(--mr-mor-acik);outline-offset:2px}
.dosya-etiket{margin:0}
.dosya-adi{display:block;margin-top:10px;font-size:13px;color:var(--mr-metin-2);overflow-wrap:anywhere}

/* ——— E2 · oyuncu: sahne ve karakter seçimi ——— */
.dar{max-width:560px;margin:0 auto}
.sahne-im{width:46px;height:46px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,#4c1d95,#7c3aed);background-color:#5b21b6;font-size:19px;color:#fff}
.sahne-pasif{background-color:var(--mr-zemin-2)}
.kisi-kart{display:flex;align-items:center;gap:13px;padding:14px;border-radius:12px;margin:0 0 11px;
  background:var(--mr-yuzey);border:2px solid var(--mr-cizgi);cursor:pointer;width:100%}
.kisi-kart:hover{border-color:var(--mr-cizgi-2)}
.kisi-im{width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--mr-yuzey-3);border:1px solid var(--mr-cizgi-2);
  font-size:17px;font-weight:700;color:var(--mr-mor-acik)}
.kisi-tik{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:2px solid var(--mr-cizgi-2);color:transparent;font-size:12px}
.kisi-sec:checked + .kisi-kart{border-color:var(--mr-mor);background:var(--mr-yuzey-2)}
.kisi-sec:checked + .kisi-kart .kisi-im{background:linear-gradient(145deg,#4c1d95,#7c3aed);
  background-color:#5b21b6;color:#fff;border-color:var(--mr-mor)}
.kisi-sec:checked + .kisi-kart .kisi-tik{background:var(--mr-mor-koyu);border-color:var(--mr-mor);color:#fff}
.kisi-sec:focus-visible + .kisi-kart{outline:3px solid var(--mr-mor-acik);outline-offset:2px}
/* ⚠ Bu radyolar GERÇEK form ögesi (karakter seçimi GET ile gönderilir), demo anahtarı DEĞİL. */
.kisi-sec{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.dinle-im{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--mr-yuzey-3);border:1px solid var(--mr-cizgi-2);color:var(--mr-metin)}

/* ——— E3 · oyuncu: replik akışı ——— */
.rep{border-radius:12px;padding:13px 15px;border:1px solid var(--mr-cizgi);
  background:var(--mr-yuzey);margin-bottom:11px}
.rep-ad{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--mr-mor-acik)}
.rep-metin{font-size:16px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.rep-gecti{background:var(--mr-zemin-2);border-color:#32204d}
.rep-gecti .rep-metin{font-size:15px;color:var(--mr-metin-2)}
.rep-gecti .rep-ad{color:#b69ae4}
.rep-benim{border-style:dashed}
.rep-benim .rep-ad{color:var(--mr-altin)}
.rep-sonra{background:var(--mr-zemin-2);border-color:#2c1b45}
.rep-sonra .rep-metin{color:var(--mr-metin-3)}
.rep-sonra .rep-ad{color:#9f86cc}
.rep-calan{border:2px solid var(--mr-mor);background:linear-gradient(160deg,#2f1a52,#241339);
  background-color:#2a1648;box-shadow:0 0 0 4px rgba(139,92,246,.13)}
.rep-calan .rep-metin{font-size:18px;font-weight:600}
.dalga{display:flex;align-items:flex-end;gap:4px;height:24px;margin-top:12px}
.dalga i{display:block;width:4px;min-height:6px;border-radius:2px;
  background:var(--mr-mor-acik);animation:mr-zipla 1s ease-in-out infinite;transform-origin:bottom}
.dalga i:nth-child(1){height:40%;animation-delay:0s}
.dalga i:nth-child(2){height:75%;animation-delay:.12s}
.dalga i:nth-child(3){height:100%;animation-delay:.24s}
.dalga i:nth-child(4){height:60%;animation-delay:.36s}
.dalga i:nth-child(5){height:85%;animation-delay:.48s}
.dalga i:nth-child(6){height:35%;animation-delay:.6s}
@keyframes mr-zipla{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.dalga i{animation:none}}
.sira-kart{border:2px solid var(--mr-altin);border-radius:12px;padding:20px 16px;text-align:center;
  background:linear-gradient(165deg,#3a2a12,#241339);background-color:#2f2114;margin-bottom:11px}
.sira-rozet{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:var(--mr-altin);color:var(--mr-altin-metin);font-size:13.5px;font-weight:750;
  letter-spacing:.05em;margin-bottom:13px;text-transform:uppercase}
.kontrol{position:sticky;bottom:0;z-index:4;background:var(--mr-zemin-2);
  border-top:1px solid var(--mr-cizgi);padding:11px 14px}
.k-dug{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:68px;min-height:56px;
  padding:6px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--mr-metin-2);
  background:none;border:0}
.k-dug i{font-size:18px}
.k-dug:hover{background:var(--mr-yuzey);color:var(--mr-metin)}
.k-dug[disabled]{opacity:.45}
.k-ana{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--mr-mor-koyu),#7c3aed);background-color:var(--mr-mor-koyu);
  color:#fff;flex:0 0 auto;border:0}
.k-dug:focus-visible,.k-ana:focus-visible{outline:3px solid var(--mr-mor-acik);outline-offset:2px}

/* ——— dikey esneme: kısa içerikte altta boş alan kalmasın (Tur 2 kusuru) ——— */
.wrapper{display:flex;flex-direction:column;min-height:100vh}
.content-wrapper{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.content-wrapper > .esne{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
/* .dar'ın margin:0 auto'su flex item olunca genişliği içeriğe düşürüyor (ilerleme çubuğu
   kayboluyordu) — doğrudan çocuk olan şerit tam genişlik kalsın. */
.content-wrapper > .dar{width:100%}
.kontrol{margin-top:auto}