/* === Annatar (Tengwar) font ailesi === */
@font-face { font-family:'Annatar'; src:url('/fonts/tngan.ttf') format('truetype');   font-weight:400; font-style:normal; }
@font-face { font-family:'Annatar'; src:url('/fonts/tnganb.ttf') format('truetype');  font-weight:700; font-style:normal; }
@font-face { font-family:'Annatar'; src:url('/fonts/tngani.ttf') format('truetype');  font-weight:400; font-style:italic; }
@font-face { font-family:'Annatar'; src:url('/fonts/tnganbi.ttf') format('truetype'); font-weight:700; font-style:italic; }
.tengwar { font-family:'Annatar', serif; }

/* === Genel === */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:#e8eef6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55)),
    url('/images/ulmo.png') center / cover no-repeat fixed;
}

/* Sayfa düzeni */
.page{ min-height:100%; padding:24px; display:flex; flex-direction:column; }
.container{ max-width:960px; margin:0 auto; width:100% }

/* Header */
.header{ padding:12px 0 8px }
.title{ margin:0; font-size:clamp(22px,4.6vw,38px); font-weight:800; letter-spacing:.2px }
.text-sm{ margin:6px 0 0; color:#c9d7ea; font-size:14px; font-weight:500 }
.header-actions{ margin-top:12px }
.btn-primary{
  padding:10px 14px; border-radius:10px; cursor:pointer;
  border:1px solid #2a3b52; background:#0f1a2b; color:#e8eef6; font-weight:800
}
.btn-primary:hover{ background:#1e293b; border-color:#3b82f6 }

/* Kart / Bölüm */
.card{
  background:rgba(15,22,32,.92);
  border:1px solid #1e2a3a;
  border-radius:14px;
  padding:18px;
  margin-top:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h2{ margin:0 0 10px; font-size:20px }
.card p{ line-height:1.8; margin:0 }

/* Düzenleyiciler */
.toolbar-primary{
  display:flex; gap:8px; align-items:center; margin:10px 0 6px;
}
.toolbar-label{ color:#9fb0c6; font-size:14px; margin-right:6px }
.btn-red{
  padding:10px 14px; border-radius:10px; cursor:pointer;
  border:1px solid #7f1d1d; background:#1f0b0b; color:#fecaca;
  font-weight:800; letter-spacing:.2px
}
.btn-red.active{ background:#7f1d1d; color:#ffe4e6; border-color:#ef4444 }
.btn-send{
  margin-left:auto; padding:10px 14px; border-radius:10px; cursor:pointer;
  border:1px solid #284363; background:#122034; color:#e8eef6; font-weight:800
}

.toolbar-secondary{
  display:flex; gap:8px; align-items:center; margin:6px 0 10px;
  position:relative;
}
.btn-mini{
  padding:6px 10px; border-radius:8px; cursor:pointer;
  border:1px solid #2a3b52; background:#122034; color:#dbe7f6;
  min-width:40px; text-align:center; font-weight:900
}

.btn-red:hover{ background:#991b1b; border-color:#dc2626; color:#fff5f5 }
.btn-send:hover{ background:#1e3a5f; border-color:#3b82f6 }
.btn-mini:hover{ background:#1e293b; border-color:#3b82f6 }
button:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px }

/* Composer giriş alanları */
.composer .composer-input{
  width:100%; min-height:150px; padding:12px 14px;
  border:1px solid #1e2a3a; border-radius:12px; background:#0a1320; color:#e8eef6;
  outline:none; line-height:1.6
}
.composer .composer-input::placeholder{ color:#6e86a6 }

/* Başlık composer’ı daha kompakt */
.composer-title .composer-input{
  min-height:0; height:44px; padding:10px 12px; border-radius:10px;
}

/* Renk paleti — varsayılan kapalı; .is-open olunca görünür */
.color-picker{ position:relative; }
.color-panel{
  position:absolute; top:110%; left:0;
  display:none !important;                 /* kapalı */
  grid-template-columns: repeat(8, 34px);
  gap:10px; padding:10px;
  background:#0a1320; border:1px solid #1e2a3a; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:1000;
}
.color-panel.is-open{ display:grid !important; }

.swatch{
  width:34px; height:34px;                 /* KARE */
  border-radius:6px;
  border:2px solid #1e2a3a;
  cursor:pointer;
  display:block;
  background: var(--c) !important;         /* renk HTML’den gelir */
  transition:transform .08s ease;
}
.swatch:hover{ transform:scale(1.06) }
.swatch:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px }

/* Görsel ekle butonu */
.media-picker label.btn-mini{
  display:inline-flex; align-items:center; gap:6px;
}
.hide-sm{ display:inline }
@media (max-width:768px){
  .hide-sm{ display:none } /* mobilde yazıyı gizleyip sadece 📷 bırakır */
}

/* İçerikteki görseller */
.content img.inline-img,
.article-content img.inline-img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid #1e2a3a;
  margin:10px 0;
  display:block;
}

/* Yorum kartları */
.comment{
  margin-top:14px; padding:12px; border:1px solid #1e2a3a; border-radius:12px; background:#0a1320
}
.meta{ font-size:12px; color:#9fb0c6; margin-bottom:6px }
.content{ line-height:1.8 }

/* Ayraç */
hr.sep{ height:1px; border:0; background:#1e2a3a; margin:22px 0 }

/* Mobil iyileştirme */
@media (max-width:768px){
  .page{ padding:16px }
  body{ background-attachment:scroll; background-position:center top }
  .btn-send{ width:100%; margin-left:0 }
  .toolbar-primary,.toolbar-secondary{ flex-wrap:wrap }
  .color-panel{ left:auto; right:0; grid-template-columns: repeat(4, 34px); }
}