/* ============================================================
   Yönetici paneli — 1589 ile açılır
   Site temasından bağımsız kendi renkleriyle çalışır.
   ============================================================ */
.cms {
  position: fixed; inset: auto 0 0 0; z-index: 500;
  height: min(68vh, 720px);
  display: flex; flex-direction: column;
  background: #10131a; color: #e9edf5;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.8);
  transform: translateY(102%);
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.cms.is-on { transform: none; }
html.cms-open body { padding-bottom: min(68vh, 720px); }

.cms__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.12);
  background: #161a24; flex: none;
}
.cms__bar b { font-size: .95rem; letter-spacing: -.01em; }
.cms__page { font-size: .74rem; color: #8b94a8; font-family: ui-monospace, Consolas, monospace; }
.cms__status { font-size: .74rem; color: #8bd0a8; min-height: 1.1em; }
.cms__nav {
  font: inherit; font-size: .82rem; color: #e9edf5; cursor: pointer;
  background: #0b0e14; border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: .5em .7em; max-width: 260px;
}
.cms__nav:focus { outline: none; border-color: #6f8cff; }
.cms__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.cms__btn {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .55em 1em; border-radius: 8px; color: #e9edf5;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  transition: background .2s, border-color .2s, transform .2s;
  display: inline-flex; align-items: center; gap: .4em;
}
.cms__btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.cms__btn--sm { font-size: .76rem; padding: .45em .85em; }
.cms__btn--warn { color: #ffb4ac; border-color: rgba(255,120,110,.35); }
.cms__btn--warn:hover { background: rgba(255,90,80,.22); }
.cms__btn--x { padding: .5em .8em; }

.cms__body { overflow: auto; padding: 16px 18px 28px; flex: 1; }
.cms__empty { color: #8b94a8; font-size: .9rem; padding: 10px 0; }

.cms__sec { margin-bottom: 26px; }
.cms__h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #7f93c4; font-weight: 700;
}
.cms__h i { font-style: normal; background: rgba(127,147,196,.18); border-radius: 999px; padding: .15em .6em; font-size: .68rem; }
.cms__h::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }

.cms__list { display: grid; gap: 10px; }
.cms__row {
  display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: start;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px;
}
.cms__row--img { grid-template-columns: 120px 1fr; align-items: center; }
.cms__key {
  font-size: .74rem; color: #9aa6bd; font-family: ui-monospace, Consolas, monospace;
  word-break: break-all; line-height: 1.5;
}
.cms__input {
  width: 100%; font: inherit; font-size: .88rem; color: #e9edf5;
  background: #0b0e14; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: .6em .8em; resize: vertical;
}
.cms__input:focus { outline: none; border-color: #6f8cff; box-shadow: 0 0 0 3px rgba(111,140,255,.22); }

.cms__thumb {
  width: 120px; height: 78px; border-radius: 8px; overflow: hidden;
  background: #0b0e14; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center;
}
.cms__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms__meta { display: grid; gap: 8px; }
.cms__mini { display: flex; gap: 8px; flex-wrap: wrap; }

.cms__gal {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 12px; display: grid; gap: 10px; justify-items: start;
}
.cms__strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; width: 100%; }
.cms__cell {
  position: relative; flex: 0 0 132px; background: #0b0e14;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden;
}
.cms__cell img { width: 132px; height: 88px; object-fit: cover; display: block; }
.cms__cap {
  width: 100%; font: inherit; font-size: .72rem; color: #cfd6e6;
  background: #0b0e14; border: none; border-top: 1px solid rgba(255,255,255,.1);
  padding: .45em .6em;
}
.cms__cap:focus { outline: none; background: #131824; }
.cms__del {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(210,30,30,.9); color: #fff; font-size: .7rem; line-height: 1; cursor: pointer;
  border: none; display: grid; place-items: center;
}
.cms__del:hover { background: #e11; }

@media (max-width: 720px) {
  .cms { height: 78vh; }
  html.cms-open body { padding-bottom: 78vh; }
  .cms__row, .cms__row--img { grid-template-columns: 1fr; }
  .cms__thumb { width: 100%; height: 120px; }
}