/* ============================================================
   DEFTERDEN PANELE — e-ihtiyaç sayfası (donusum.js)
   Solda kâğıt dünyası (defter, fiş, WhatsApp), sağda panel. Kaydırdıkça
   dikey çizgi soldan sağa süpürür; kâğıt satırlar aynı yerdeki panel
   satırlarına dönüşür. Masaüstünde sahne sabitlenir, cepte üst üste akar.
   ============================================================ */
.dn-sahne{position:relative;margin-top:2.4rem;border:1px solid var(--line-2);overflow:hidden;background:var(--card)}
.dn-kat{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.9rem}
.dn-defter{
  background:#EDE7D6;color:#2B2A26;
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(43,42,38,.12) 31px 32px);
}
.dn-defter .dn-baslik{font-family:'Comic Sans MS','Bradley Hand',cursive;font-size:1.05rem;color:#6a655a;letter-spacing:.02em}
.dn-panel{position:absolute;inset:0;background:var(--bg);color:var(--text);clip-path:inset(0 100% 0 0)}
.dn-panel .dn-baslik{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acid)}
.dn-cizgi{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--acid);box-shadow:0 0 18px var(--acid);z-index:3;pointer-events:none}
.dn-cizgi::after{content:"kaydırın →";position:absolute;top:1rem;left:.8rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acid);white-space:nowrap}

.dn-satir{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;min-height:64px}
/* kâğıt satırlar: her biri farklı bir "kaynak" */
.dn-defter .dn-satir{border-radius:2px;padding:.6rem .9rem;transform:rotate(var(--egim,0deg));box-shadow:0 8px 20px -14px rgba(0,0,0,.6)}
.dn-defter .k-wa{background:#DCF8C6;border-radius:12px 12px 12px 2px;font-family:system-ui,sans-serif;font-size:.92rem}
.dn-defter .k-wa .kim{font-size:.68rem;color:#2f5a22;font-weight:700}
.dn-defter .k-not{background:#FFF3A3;font-family:'Comic Sans MS','Bradley Hand',cursive;font-size:1rem}
.dn-defter .k-fis{background:#fff;font-family:var(--font-mono);font-size:.78rem;border:1px dashed #9a9482}
.dn-defter .k-defter{background:transparent;font-family:'Comic Sans MS','Bradley Hand',cursive;font-size:1.02rem;border-bottom:1px solid rgba(43,42,38,.25)}
.dn-defter .k-tel{background:#fff;font-size:.9rem;border-left:4px solid #c0392b}
.dn-defter .ikon{font-size:1.2rem;width:28px;text-align:center}
.dn-defter .sag{font-size:.72rem;color:#5d574a;font-family:var(--font-mono)}

/* panel satırları */
.dn-panel .dn-satir{border:1px solid var(--line);padding:.6rem .9rem;background:var(--card)}
.dn-panel .ikon{width:28px;height:28px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--acid);font-family:var(--font-mono);font-size:.62rem}
.dn-panel .ad{font-weight:700;color:var(--ink);font-size:.95rem}
.dn-panel .alt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.dn-panel .cip{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .6rem;border:1px solid var(--line-2);color:var(--ink);white-space:nowrap}
.dn-panel .cip.ok{background:var(--acid);color:#000;border-color:var(--acid)}
.dn-panel .cip.bekle{border-color:var(--acid);color:var(--acid)}

.dn-alt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
.dn-alt div{background:var(--bg);padding:1rem 1.2rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dn-alt b{color:var(--acid);font-weight:500}
@media (max-width:860px){
  .dn-cizgi::after{display:none}
  .dn-alt{grid-template-columns:1fr}
}

/* düzeltme: panel satırında ad ve alt bilgi alt alta */
.dn-panel .dn-satir > span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.dn-cizgi::after{top:auto;bottom:1rem}

/* cep: satır sıkışmasın; rozet alta insin, alt metin sarsın */
@media (max-width:640px){
  .dn-satir{grid-template-columns:auto 1fr;row-gap:.4rem;min-height:0}
  .dn-panel .dn-satir .cip,.dn-defter .dn-satir .sag{grid-column:2}
  .dn-panel .cip{justify-self:start}
  .dn-panel .alt{white-space:normal;letter-spacing:.08em}
}

/* ============================================================
   DÜZELTME (parti 2)
   HATA: panel katmanı position:absolute; inset:0 ile defterin
   üstünde duruyor. Panel satırları dar ekranda defter
   satırlarından uzun olduğu için sahnenin dışına taşıyor;
   rozetler kendi kutularının altına sarkıyor ve arkadaki
   kâğıt satırları panelin boşluklarından sızıyordu.
   HATA: hareket azaltma açıkken donusum.js clip-path'i
   kaldırıp paneli tam açıyor, defter katmanı hiç görünmüyordu
   — "önce kâğıt, sonra panel" anlatısı kayboluyordu.
   ÇÖZÜM: her iki durumda iki katman akışta üst üste dizilir.
   ============================================================ */
@media (max-width:860px){
  .dn-panel{
    position:static;inset:auto;clip-path:none !important;
    border-top:1px solid var(--line-2)
  }
  .dn-cizgi{display:none}
}
@media (prefers-reduced-motion: reduce){
  .dn-panel{
    position:static;inset:auto;clip-path:none !important;
    border-top:1px solid var(--line-2)
  }
  .dn-cizgi{display:none}
  .dn-kat{transition:none}
}
/* Rozet, satırın kendi kutusunun içinde kalsın. */
.dn-panel .dn-satir{align-content:center}
@media (max-width:640px){
  .dn-panel .dn-satir,.dn-defter .dn-satir{padding:.7rem .9rem}
  .dn-panel .cip{margin-top:.15rem}
}

/* Kâğıt satırlarındaki ikonlar artık emoji değil inline SVG. */
.dn-defter .ikon{display:grid;place-items:center;height:28px;color:#5d574a}
.dn-defter .ikon svg{width:18px;height:18px;display:block}
.dn-defter .k-tel .ikon{color:#c0392b}
.dn-defter .k-wa .ikon{color:#2f5a22}