/* Basit HTML Editör — bağımsız bileşen. Projeden bağımsız: yalnız kendi sınıflarını (bhe-*) tanımlar, dış değişken ZORUNLU değildir. */
.bhe{border:1px solid var(--renk-kenar, #d7dce5); border-radius:8px; background:var(--renk-yuzey, #fff); overflow:hidden; display:flex; flex-direction:column;}
.bhe.odakli{border-color:var(--renk-birincil, #2f4dbf); box-shadow:0 0 0 2px var(--renk-birincil-alfa-12, rgba(47,77,191,0.12));}

/*#region Araç çubuğu*/
.bhe-arac{display:flex; align-items:center; flex-wrap:wrap; gap:3px; padding:5px 6px; border-bottom:1px solid var(--renk-kenar, #d7dce5); background:var(--renk-arkaplan-acik, #f8fafc);}
.bhe-arac button{height:26px; min-width:28px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:1px solid transparent; border-radius:5px; background:none; color:var(--renk-yazi, #1e293b); font-size:12px; line-height:1; cursor:pointer; transition:background .12s, border-color .12s, color .12s;}
.bhe-arac button:hover{background:var(--renk-yuzey, #fff); border-color:var(--renk-kenar, #d7dce5);}
.bhe-arac button.etkin{background:var(--renk-birincil-acik, #e8edff); border-color:var(--renk-birincil-acik, #e8edff); color:var(--renk-birincil, #2f4dbf);}
.bhe-arac button.bhe-kalin{font-weight:800;}
.bhe-arac button.bhe-italik{font-style:italic;}
.bhe-arac button.bhe-alti{text-decoration:underline;}
.bhe-arac button.bhe-kod{font-family:ui-monospace, Consolas, "Courier New", monospace; font-size:11px;}
.bhe-arac select{height:26px; padding:0 4px; border:1px solid var(--renk-kenar, #d7dce5); border-radius:5px; background:var(--renk-yuzey, #fff); color:var(--renk-yazi, #1e293b); font-size:11px; font-family:inherit; cursor:pointer;}

/* Renk kutusu: yerli input[type=color], yalnız çerçevesi sadeleştirildi. */
.bhe-arac input[type="color"]{width:28px; height:26px; padding:2px; border:1px solid var(--renk-kenar, #d7dce5); border-radius:5px; background:var(--renk-yuzey, #fff); cursor:pointer;}
.bhe-ayrac{width:1px; height:18px; margin:0 3px; background:var(--renk-kenar, #d7dce5);}
.bhe-arac .bhe-sag{margin-left:auto;}
/*#endregion*/

/*#region Yazım alanı*/
.bhe-alan{min-height:150px; max-height:520px; overflow:auto; padding:10px 12px; font-size:13px; line-height:1.55; color:var(--renk-yazi, #1e293b); outline:none; word-break:break-word;}

/* Boşken ipucu: contenteditable placeholder desteklemiyor. */
.bhe-alan:empty::before{content:attr(data-ipucu); color:var(--renk-yazi-soluk, #94a3b8); pointer-events:none;}
.bhe-alan a{color:var(--renk-birincil, #2f4dbf);}

/* HTML kaynağı: monospace, düz kutu. */
.bhe-kaynak{display:none; width:100%; min-height:150px; max-height:520px; padding:10px 12px; border:0; outline:none; resize:vertical; background:var(--renk-arkaplan-acik, #f8fafc); color:var(--renk-yazi, #1e293b); font-family:ui-monospace, Consolas, "Courier New", monospace; font-size:12px; line-height:1.5; box-sizing:border-box;}
.bhe.kaynak-modu .bhe-alan{display:none;}
.bhe.kaynak-modu .bhe-kaynak{display:block;}

/* Kaynak modunda biçim düğmeleri iş görmez; kapalı gösteriliyor. */
.bhe.kaynak-modu .bhe-arac button:not(.bhe-kod), .bhe.kaynak-modu .bhe-arac select, .bhe.kaynak-modu .bhe-arac input[type="color"]{opacity:.45; pointer-events:none;}
/*#endregion*/

/*#region Koyu tema*/
html[data-tema="koyu"] .bhe-arac{background:var(--renk-arkaplan-acik);}
html[data-tema="koyu"] .bhe-arac button:hover{background:var(--renk-yuzey);}
html[data-tema="koyu"] .bhe-kaynak{background:var(--renk-arkaplan-acik);}
/*#endregion*/