/* ============================================================================
   PANO VE RAPOR STÜDYOSU — R PAKETİ (K.67): rapor görüntüleyici (/studyo/rapor/{Kod}),
   rapor tasarımcısı (/studyo/rapor-tasarim/{Kod}), zamanlanmış gönderimler (/studyo/zamanlama).

   ⚠️ RENK GÖMÜLMEZ: belirteçler (app.css :root + koyu kip, tema.css). Koşullu biçim
   renkleri (hata/uyari/basari/bilgi/soluk/mor) burada belirteçten türetilir; sunucu
   çıktıları (PDF/XLSX) aynı adların sabit tonlarını kullanır (RaporBicim.Ton).
   ⚠️ Telefon (≤ 900px): tasarımcı tek sütuna iner (alanlar → ön izleme → özellikler);
   ızgara kart kipine geçer (mobil.css, kart-tablo).
   ============================================================================ */

.rp-sayfa {
  --rk-hata: var(--hata); --rk-uyari: var(--uyari); --rk-basari: var(--basari); --rk-bilgi: var(--vurgu-600);
  --rk-soluk: var(--metin-3); --rk-mor: color-mix(in srgb, var(--grup-studyo, #4338CA) 85%, var(--metin));
  --rk-cubuk: color-mix(in srgb, var(--vurgu-500) 26%, transparent);
  --rk-cubuk-eksi: color-mix(in srgb, var(--hata) 24%, transparent);
  --rp-p0: var(--vurgu-500); --rp-p1: var(--uyari-parlak); --rp-p2: var(--basari-parlak); --rp-p3: var(--hata);
  --rp-p4: var(--grup-studyo, #4338CA); --rp-p5: var(--metin-3);
}
.rp-geri {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--metin-2);
  border: 1px solid var(--kenar); background: var(--yuzey); flex: 0 0 auto;
}
.rp-geri:hover { color: var(--st-ana); border-color: var(--st-ana); }
.rp-arac { align-items: center; }
.rp-iskelet { display: grid; gap: 10px; padding: 12px 0; }
.rp-bos { text-align: center; padding: 28px 12px; color: var(--metin-3); }
.rp-uyari { margin: 6px 0; }
.rp-hata-liste { margin: 0; padding-left: 18px; }
.rp-bildirim {
  position: fixed; right: 20px; bottom: 20px; z-index: 9500; display: flex; gap: 8px; align-items: center;
  background: var(--metin); color: var(--zemin); padding: 10px 16px; border-radius: 12px; box-shadow: var(--golge-3);
  animation: rp-gir .2s ease-out;
}
@keyframes rp-gir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* -------------------------------------------------------------- PARAMETRE */
.rp-param-kutu { margin-bottom: 14px; padding: 0; overflow: visible; }
.rp-param-bas {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; background: transparent;
  color: var(--metin); cursor: pointer; text-align: left; font-size: 14px;
}
.rp-param-bas .ipucu { flex: 1; min-width: 0; }
.rp-param-ok { color: var(--metin-3); }
.rp-param {
  display: grid; gap: 12px 16px; padding: 4px 16px 16px; align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.rp-param.kompakt { padding: 0; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.rp-param-alan { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.rp-param-alan.hatali .girdi { border-color: var(--hata); }
.rp-param-hata { color: var(--hata); font-size: 12px; }
.rp-param-eylem { display: flex; align-items: end; }
.rp-zorunlu { color: var(--hata); margin-left: 2px; }
.rp-islec { font-size: 11px; color: var(--metin-3); font-weight: 500; margin-left: 6px; }
.rp-aralik { display: flex; gap: 6px; align-items: center; }
.rp-aralik .girdi { min-width: 0; flex: 1; }
.rp-secim { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; overflow: hidden; }
.rp-secim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-temizle {
  position: absolute; right: 6px; bottom: 6px; border: 0; background: transparent; color: var(--metin-3); cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
}
.rp-cipler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
.rp-cip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--st-ana-acik, var(--vurgu-acik)); color: var(--metin); border: 1px solid transparent;
}
.rp-cip.hatali { border-color: var(--hata); color: var(--hata); background: var(--hata-bg); }
.rp-cip button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; }
.rp-cip button svg { width: 12px; height: 12px; }
.rp-cip-ekle { border: 1px dashed var(--kenar-koyu, var(--kenar)); background: transparent; color: var(--metin-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; }
.rp-cip-girdi { border: 0; outline: none; background: transparent; color: var(--metin); min-width: 180px; flex: 1; padding: 6px 4px; font: inherit; }
.rp-alicilar { border: 1px solid var(--kenar); border-radius: var(--r-md, 10px); padding: 4px 8px; background: var(--yuzey); }
.rp-cip-sec { border: 1px solid var(--kenar); background: var(--yuzey); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--metin-2); }
.rp-cip-sec.secili { background: var(--st-ana); border-color: var(--st-ana); color: #fff; }

/* ------------------------------------------------------------ DURUM + KUTU */
.rp-durum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--metin-2); margin: 0 0 10px; }
.rp-durum > span { display: inline-flex; align-items: center; gap: 4px; }
.rp-durum svg { width: 14px; height: 14px; }
.rp-durum-sag { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rp-kolon-menu { max-height: 340px; overflow: auto; min-width: 220px; }
.rp-kolon-menu label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.rp-kutular { display: grid; gap: 12px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.rp-kutular.kompakt { gap: 8px; }
.rp-kutu {
  position: relative; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 14px; padding: 14px 16px 12px 20px;
  box-shadow: var(--golge-1); overflow: hidden;
}
.rp-kutu::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--rp-kutu-renk, var(--st-ana)); }
.rp-kutu-baslik { font-size: 12.5px; color: var(--metin-3); }
.rp-kutu-deger { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rp-kutular.kompakt .rp-kutu-deger { font-size: 19px; }
.rp-kutu-hata { color: var(--hata); font-size: 12.5px; margin-top: 6px; }
.rp-grafikler { display: grid; gap: 14px; margin: 0 0 14px; }
.rp-grafikler.ikili { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.rp-grafik { padding: 12px; }
.rp-grafik-baslik { font-weight: 600; margin-bottom: 8px; }

/* --------------------------------------------------------------- IZGARA */
.rp-izgara-sarmal { overflow: auto; border: 1px solid var(--kenar); border-radius: 12px; background: var(--yuzey); }
.rp-izgara { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-izgara-sarmal.kompakt .rp-izgara { font-size: 12.5px; }
.rp-izgara thead th {
  position: sticky; top: 0; z-index: 2; background: var(--yuzey-2); border-bottom: 1px solid var(--kenar-koyu, var(--kenar));
  padding: 0; text-align: left; white-space: nowrap;
}
.rp-izgara thead th.sayi { text-align: right; }
.rp-sirala {
  width: 100%; border: 0; background: transparent; padding: 9px 10px; font: inherit; font-weight: 600; color: var(--metin);
  cursor: pointer; text-align: inherit; display: inline-flex; gap: 4px; align-items: center; justify-content: inherit;
}
.rp-izgara thead th.sayi .rp-sirala { justify-content: flex-end; }
.rp-sirala svg { width: 13px; height: 13px; color: var(--st-ana); }
.rp-izgara td { padding: 6px 10px; border-bottom: 1px solid var(--kenar); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.rp-izgara td.sayi { text-align: right; }
.rp-izgara td.orta { text-align: center; }
.rp-izgara.zebra tr.rp-detay:nth-child(even) td { background-color: var(--zebra); }
.rp-grup td { background: color-mix(in srgb, var(--st-ana) 9%, var(--yuzey)); font-weight: 600; }
.rp-grup.rp-d1 td { background: color-mix(in srgb, var(--st-ana) 5%, var(--yuzey)); }
.rp-grup.rp-d2 td, .rp-grup.rp-d3 td, .rp-grup.rp-d4 td, .rp-grup.rp-d5 td { background: color-mix(in srgb, var(--st-ana) 3%, var(--yuzey)); }
.rp-grup.kapali td { color: var(--metin-2); }
.rp-ac { border: 0; background: transparent; color: var(--metin); font: inherit; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 0; }
.rp-ac svg { width: 15px; height: 15px; color: var(--st-ana); }
.rp-ara td { font-weight: 700; background: var(--yuzey-2); border-top: 1px solid var(--kenar-koyu, var(--kenar)); }
.rp-genel td { font-weight: 800; background: color-mix(in srgb, var(--st-ana) 12%, var(--yuzey)); border-top: 2px solid var(--st-ana); position: sticky; bottom: 0; }
.rp-toplam-etiket { color: var(--metin-2); }
.rp-detay-bag { color: var(--st-ana); text-decoration: underline dotted; text-underline-offset: 3px; }
.rk-hata { color: var(--rk-hata); background-color: color-mix(in srgb, var(--rk-hata) 10%, transparent); }
.rk-uyari { color: var(--rk-uyari); background-color: color-mix(in srgb, var(--rk-uyari) 12%, transparent); }
.rk-basari { color: var(--rk-basari); background-color: color-mix(in srgb, var(--rk-basari) 10%, transparent); }
.rk-bilgi { color: var(--rk-bilgi); background-color: color-mix(in srgb, var(--rk-bilgi) 10%, transparent); }
.rk-soluk { color: var(--rk-soluk); }
.rk-mor { color: var(--rk-mor); background-color: color-mix(in srgb, var(--rk-mor) 10%, transparent); }
.rk-kalin { font-weight: 700; }

/* -------------------------------------------------------------- PDF / KİPLİK */
.rp-pdf-kiplik { width: min(1100px, 96vw); height: min(92vh, 1200px); display: flex; flex-direction: column; }
.rp-pdf-cerceve { width: 100%; flex: 1; min-height: 70vh; border: 0; background: var(--yuzey-2); border-radius: 0 0 12px 12px; }
.rp-t-onizleme .rp-pdf-cerceve { border-radius: 12px; min-height: 75vh; }

/* ------------------------------------------------------------- ZAMANLAMA */
.rp-z-kiplik { width: min(720px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.rp-z-govde { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.rp-z-satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.rp-z-satir > .alan, .rp-z-satir > fieldset { flex: 1 1 200px; min-width: 0; }
.rp-salt-okur { display: flex; gap: 8px; align-items: center; background: var(--yuzey-2); }
.rp-gunler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-gun {
  width: 46px; height: 36px; border-radius: 10px; border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-2);
  cursor: pointer; font-weight: 600; font-size: 13px;
}
.rp-gun.secili { background: var(--st-ana); color: #fff; border-color: var(--st-ana); }
.rp-anahtar { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-size: 13.5px; min-height: 36px; }
.rp-anahtar input { width: 18px; height: 18px; accent-color: var(--st-ana); }
.rp-z-ozet { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--st-ana-acik, var(--vurgu-acik)); }
.rp-z-ozet > svg { flex: 0 0 auto; color: var(--st-ana); margin-top: 2px; }
.rp-smtp { margin-bottom: 12px; align-items: center; }
.rp-smtp-tamam { display: flex; gap: 8px; align-items: center; color: var(--basari); font-size: 13px; margin-bottom: 12px; }
.rp-z-tablo td { vertical-align: top; }
.rp-z-hata { color: var(--hata); font-size: 12px; max-width: 360px; white-space: normal; }
.rp-z-eylem { white-space: nowrap; text-align: right; }
.rp-z-eylem .dugme { width: auto; padding: 0 8px; }
.rp-pasif td { opacity: .62; }
.rp-ayrac { border: 0; border-top: 1px solid var(--kenar); margin: 6px 0; }
.rp-e-kiplik .kiplik-govde { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------- TASARIMCI */
.rp-tasarim-sayfa { padding-bottom: 24px; }
.rp-t-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-t-ad { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rp-t-ad strong { font-size: 18px; }
.rp-t-ad .ipucu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-kirli { color: var(--uyari); font-weight: 600; }
.rp-t-arac { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rp-t-arac .dugme { width: auto; }
.rp-arac-dugme {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-2);
  display: grid; place-items: center; cursor: pointer;
}
.rp-arac-dugme:disabled { opacity: .4; cursor: default; }
.rp-t-izgara {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(320px, 380px);
}
.rp-t-sol, .rp-t-sag { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; padding: 12px; }
.rp-t-sol-bas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.rp-t-orta { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-t-orta-arac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-t-orta-arac .dugme { width: auto; }
.rp-t-param { padding: 12px; }
.rp-t-onizleme { min-height: 320px; border-radius: 14px; }
.rp-alanlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-alan {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; cursor: grab;
  font-size: 13px; background: var(--yuzey);
}
.rp-alan:hover { border-color: var(--kenar); background: var(--yuzey-2); }
.rp-alan.kullanimda .rp-alan-ad { color: var(--st-ana); font-weight: 600; }
.rp-alan-tur {
  width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
  background: var(--yuzey-2); color: var(--metin-2);
}
.rp-alan.olcu .rp-alan-tur { background: color-mix(in srgb, var(--basari-parlak) 18%, transparent); color: var(--basari); }
.rp-alan-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-alan-eylem { display: none; gap: 2px; }
.rp-alan:hover .rp-alan-eylem, .rp-alan:focus-within .rp-alan-eylem { display: inline-flex; }
.rp-mini {
  width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--metin-3); cursor: pointer;
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.rp-mini svg { width: 15px; height: 15px; }
.rp-mini:hover { background: var(--yuzey-2); color: var(--st-ana); }
.rp-mini.tehlike:hover { color: var(--hata); }
.rp-mini:disabled { opacity: .3; cursor: default; }
.rp-birak { border: 2px dashed transparent; border-radius: 12px; transition: border-color var(--gecis), background var(--gecis); }
.rp-birak.etkin { border-color: color-mix(in srgb, var(--st-ana) 55%, transparent); background: color-mix(in srgb, var(--st-ana) 5%, transparent); }
.rp-birak-ipucu { display: none; align-items: center; gap: 6px; }
.rp-birak.etkin .rp-birak-ipucu { display: flex; }
.rp-sorunlar { border: 1px solid color-mix(in srgb, var(--uyari-parlak) 50%, transparent); background: color-mix(in srgb, var(--uyari-parlak) 8%, var(--yuzey)); border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.rp-sorunlar.hatali { border-color: color-mix(in srgb, var(--hata) 50%, transparent); background: var(--hata-bg); }
.rp-sorunlar ul { margin: 6px 0 0; padding-left: 20px; }
.rp-sorunlar li.hata { color: var(--hata); }
.rp-salt { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Özellik paneli */
.rp-ozellik { display: flex; flex-direction: column; gap: 10px; }
.rp-sekmeler { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--kenar); padding-bottom: 8px; }
.rp-sekme {
  border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; color: var(--metin-2); cursor: pointer; font-size: 13px; font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
}
.rp-sekme.secili { background: var(--st-ana-acik, var(--vurgu-acik)); color: var(--st-ana); }
.rp-sekme-sayi { font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--yuzey-2); color: var(--metin-2); padding: 0 5px; }
.rp-ozellik-govde { display: flex; flex-direction: column; gap: 10px; }
.rp-alt-baslik { margin: 10px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--metin-3); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rp-alt-baslik .ipucu { text-transform: none; letter-spacing: 0; }
.rp-satir-kart { display: flex; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--kenar); border-radius: 10px; background: var(--yuzey); }
.rp-satir-kart.dikey { flex-direction: column; align-items: stretch; }
.rp-satir-kart .girdi { min-width: 0; flex: 1; }
.rp-satir-ust { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rp-satir-ust > .girdi { flex: 1 1 120px; }
.rp-satir-hata { color: var(--hata); font-size: 12px; }
.rp-sil { border: 0; background: transparent; color: var(--metin-3); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.rp-sil:hover { color: var(--hata); background: var(--hata-bg); }
.rp-kod { font-size: 11.5px; background: var(--yuzey-2); padding: 2px 6px; border-radius: 6px; color: var(--metin-2); }
.rp-kod-girdi { max-width: 120px; }
.rp-dugmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-dugmeler .dugme, .rp-ozellik .dugme-kucuk { width: auto; }
.rp-bilgi-satir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.rp-kolon-liste { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.rp-kolon-oge {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 4px; border-radius: 9px; border: 1px solid var(--kenar);
  background: var(--yuzey); cursor: pointer; font-size: 13px;
}
.rp-kolon-oge.secili { border-color: var(--st-ana); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-ana) 20%, transparent); }
.rp-kolon-oge.gizli .rp-kolon-ad { color: var(--metin-3); text-decoration: line-through; }
.rp-tutamac { cursor: grab; color: var(--metin-3); font-size: 12px; letter-spacing: -2px; padding: 0 2px; }
.rp-kolon-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-editor { border-top: 1px solid var(--kenar); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.rp-kip-kartlar { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-kip-kartlar.buyuk { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.rp-kip-kart {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--kenar); background: var(--yuzey); cursor: pointer; color: var(--metin);
}
.rp-kip-kart svg { color: var(--st-ana); width: 22px; height: 22px; }
.rp-kip-kart span { font-size: 12px; color: var(--metin-3); }
.rp-kip-kart.secili { border-color: var(--st-ana); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-ana) 22%, transparent); }
.rp-kip-kartlar.buyuk .rp-kip-kart { padding: 18px; min-height: 130px; }
.rp-renkler { display: inline-flex; gap: 4px; }
.rp-renk { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--yuzey); cursor: pointer; box-shadow: 0 0 0 1px var(--kenar); }
.rp-renk.secili { box-shadow: 0 0 0 2px var(--metin); }
.rk-ornek-hata { background: var(--rk-hata); } .rk-ornek-uyari { background: var(--rk-uyari); } .rk-ornek-basari { background: var(--rk-basari); }
.rk-ornek-bilgi { background: var(--rk-bilgi); } .rk-ornek-soluk { background: var(--rk-soluk); } .rk-ornek-mor { background: var(--rk-mor); }
.rp-kenarlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rp-kenarlar label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--metin-3); }
.rp-jeton { font-size: 11.5px; background: var(--yuzey-2); padding: 2px 6px; border-radius: 6px; cursor: help; }
.rp-secenekler { gap: 4px 14px; }

/* İfade düzenleyicisi */
.rp-ifade { display: flex; flex-direction: column; gap: 6px; }
.rp-ifade textarea { resize: vertical; font-size: 13px; }
.rp-ifade.gecerli textarea { border-color: color-mix(in srgb, var(--basari) 60%, var(--kenar)); }
.rp-ifade.hatali textarea { border-color: var(--hata); }
.rp-ifade-durum { font-size: 12px; min-height: 16px; }
.rp-ifade-tamam { color: var(--basari); display: inline-flex; gap: 4px; align-items: center; }
.rp-ifade-hata { color: var(--hata); display: inline-flex; gap: 4px; align-items: center; }
.rp-ifade-durum svg { width: 13px; height: 13px; }
.rp-ifade-cipler { display: flex; flex-wrap: wrap; gap: 4px; max-height: 92px; overflow: auto; }
.rp-ifade-cip {
  border: 1px solid var(--kenar); background: var(--yuzey-2); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; cursor: pointer;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--metin-2);
}
.rp-ifade-cip.islev { background: var(--st-ana-acik, var(--vurgu-acik)); color: var(--st-ana); }
.rp-ifade-cip.ozel { border-style: dashed; }

/* Sihirbaz */
.rp-adimlar { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; counter-reset: adim; }
.rp-adimlar li {
  counter-increment: adim; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: var(--yuzey-2); color: var(--metin-3); font-size: 13px; font-weight: 600;
}
.rp-adimlar li::before { content: counter(adim); width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: var(--kenar); color: var(--metin); font-size: 11px; }
.rp-adimlar li.etkin { background: var(--st-ana); color: #fff; }
.rp-adimlar li.etkin::before { background: #fff; color: var(--st-ana); }
.rp-adimlar li.bitti { color: var(--basari); }
.rp-sihirbaz-kart { text-align: left; cursor: pointer; font: inherit; color: var(--metin); }
.rp-sihirbaz-kart:disabled { opacity: .5; cursor: not-allowed; }
.rp-kart-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--metin-3); margin-top: auto; }
.rp-sihirbaz-alanlar { padding: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.rp-sihirbaz-secim { display: grid; gap: 2px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.rp-cakisma-alt { flex-wrap: wrap; }
.dugme.tehlike { background: var(--hata); border-color: var(--hata); }

@media (max-width: 1200px) {
  .rp-t-izgara { grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); }
  .rp-t-sag { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) {
  .rp-t-izgara { grid-template-columns: minmax(0, 1fr); }
  .rp-t-sol { position: static; max-height: 300px; }
  .rp-alan-eylem { display: inline-flex; }
  .rp-kenarlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-durum-sag { margin-left: 0; }
  .rp-kutu-deger { font-size: 20px; }
}