/* PEKENANG CMS admin interface */
.cms-admin-panel { padding: 0 !important; overflow: hidden; }
.cms-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:26px 28px; border-bottom:1px solid #e2e8f0; background:linear-gradient(135deg,#f8fbff,#eef4ff); }
.cms-heading h3 { margin:5px 0 7px; font-size:24px; color:#172554; }
.cms-heading p { margin:0; color:#64748b; }
.cms-kicker { color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.12em; }
.cms-lock { background:#dbeafe; color:#1d4ed8; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:800; white-space:nowrap; }
.cms-layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:560px; }
.cms-sidebar { padding:18px 12px; background:#f8fafc; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; gap:5px; }
.cms-side-tab { width:100%; border:0; background:transparent; color:#475569; text-align:left; padding:12px 14px; border-radius:11px; font-weight:700; cursor:pointer; }
.cms-side-tab:hover,.cms-side-tab.active { background:#eaf1ff; color:#1d4ed8; }
.cms-editor { padding:26px; min-width:0; }
.cms-editor-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:22px; }
.cms-editor-head h3 { margin:0 0 6px; font-size:22px; color:#172554; }
.cms-editor-head p { margin:0; color:#64748b; font-size:14px; }
.cms-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; color:#334155; font-size:13px; font-weight:800; }
.cms-field input,.cms-field textarea { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:12px 13px; color:#0f172a; background:#fff; font:inherit; font-weight:500; outline:none; }
.cms-field input:focus,.cms-field textarea:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.cms-field textarea { resize:vertical; line-height:1.55; }
.cms-item-card { border:1px solid #e2e8f0; border-radius:15px; padding:17px; margin-bottom:15px; background:#fff; }
.cms-item-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; color:#1e3a8a; }
.cms-remove { border:0; background:#fff1f2; color:#be123c; padding:8px 11px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; }
.cms-button { border:0; border-radius:10px; padding:11px 15px; font-size:13px; font-weight:800; cursor:pointer; }
.cms-button-primary { color:#fff; background:#1d4ed8; }
.cms-button-light { color:#1e40af; background:#eff6ff; }
.cms-image-field { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; }
.cms-image-preview { width:150px; height:105px; border:1px dashed #cbd5e1; border-radius:11px; background:#f8fafc; overflow:hidden; display:grid; place-items:center; color:#94a3b8; font-size:12px; }
.cms-image-preview img { width:100%; height:100%; object-fit:cover; }
.cms-image-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.cms-image-actions input[type=text] { min-width:0; grid-column:1/-1; width:100%; border:1px solid #cbd5e1; border-radius:9px; padding:10px; }
.cms-upload-button { display:inline-flex; align-items:center; justify-content:center; background:#1d4ed8; color:#fff; padding:10px 14px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; }
.cms-upload-button input { display:none; }
.cms-save-row { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #e2e8f0; padding-top:18px; margin-top:24px; }
#cms-save-status { color:#64748b; font-size:12px; }
.cms-media-upload { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:13px; margin-bottom:18px; }
#cms-upload-status { color:#64748b; font-size:13px; }
.cms-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cms-media-card { border:1px solid #e2e8f0; border-radius:13px; overflow:hidden; min-width:0; }
.cms-media-card > img { width:100%; height:145px; object-fit:cover; display:block; background:#f1f5f9; }
.cms-media-info { padding:11px; display:grid; gap:5px; }
.cms-media-info strong { font-size:11px; overflow-wrap:anywhere; }
.cms-media-info small { color:#64748b; }
.cms-media-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cms-media-actions .cms-button,.cms-media-actions .cms-remove { font-size:10px; padding:7px 8px; }
.cms-empty { padding:30px; text-align:center; color:#64748b; background:#f8fafc; border-radius:12px; }
@media(max-width:800px) { .cms-layout { grid-template-columns:1fr; } .cms-sidebar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-right:0; border-bottom:1px solid #e2e8f0; } .cms-side-tab { text-align:center; padding:10px 6px; font-size:12px; } .cms-editor { padding:18px; } .cms-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .cms-heading { padding:20px 17px; } .cms-heading h3 { font-size:20px; } .cms-lock { font-size:10px; } .cms-image-field { grid-template-columns:1fr; } .cms-image-preview { width:100%; height:165px; } .cms-image-actions { grid-template-columns:1fr; } .cms-media-grid { grid-template-columns:1fr 1fr; } .cms-media-card > img { height:110px; } .cms-save-row { align-items:stretch; flex-direction:column; } .cms-save-row .cms-button { width:100%; } }

.cms-load-error{padding:22px;border:1px solid #fecaca;background:#fff7f7;border-radius:14px;color:#7f1d1d}.cms-load-error p{margin:8px 0;color:#7f1d1d}.cms-load-error .cms-button{margin-top:8px}

/* PEKENANG CMS v6: aliran upload gambar yang lebih mudah */
.cms-admin-panel { padding: 0 !important; overflow: hidden; }
.cms-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:25px 28px; border-bottom:1px solid #e2e8f0; background:linear-gradient(135deg,#f8fbff,#eef4ff); }
.cms-heading h3 { margin:5px 0 7px; font-size:23px; color:#172554; }
.cms-heading p { margin:0; color:#64748b; }
.cms-kicker { color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.12em; }
.cms-lock { background:#dbeafe; color:#1d4ed8; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:800; white-space:nowrap; }
.cms-layout { display:grid; grid-template-columns:215px minmax(0,1fr); min-height:570px; }
.cms-sidebar { padding:18px 12px; background:#f8fafc; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; gap:5px; }
.cms-side-tab { width:100%; border:0; background:transparent; color:#475569; text-align:left; padding:12px 14px; border-radius:11px; font-weight:700; cursor:pointer; }
.cms-side-tab:hover,.cms-side-tab.active { background:#eaf1ff; color:#1d4ed8; }
.cms-editor { padding:26px; min-width:0; }
.cms-editor-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:22px; }
.cms-editor-head h3 { margin:0 0 6px; font-size:22px; color:#172554; }
.cms-editor-head p { margin:0; color:#64748b; font-size:14px; }
.cms-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; color:#334155; font-size:13px; font-weight:800; }
.cms-field input,.cms-field textarea { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:12px 13px; color:#0f172a; background:#fff; font:inherit; font-weight:500; outline:none; }
.cms-field input:focus,.cms-field textarea:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.cms-field textarea { resize:vertical; line-height:1.55; }
.cms-item-card { border:1px solid #e2e8f0; border-radius:15px; padding:17px; margin-bottom:15px; background:#fff; }
.cms-item-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; color:#1e3a8a; }
.cms-remove { border:0; background:#fff1f2; color:#be123c; padding:8px 11px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; }
.cms-button { border:0; border-radius:10px; padding:11px 15px; font-size:13px; font-weight:800; cursor:pointer; transition:.15s ease; }
.cms-button:disabled { opacity:.55; cursor:wait; }
.cms-button-primary { color:#fff; background:#1d4ed8; }
.cms-button-light { color:#1e40af; background:#eff6ff; }
.cms-button-danger-light { color:#b42335; background:#fff0f1; }
.cms-image-field-wrap { padding:15px; border:1px solid #e2e8f0; border-radius:14px; margin:0 0 18px; background:#fbfdff; }
.cms-image-label { font-size:13px; font-weight:800; color:#334155; margin-bottom:10px; }
.cms-image-field { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start; }
.cms-image-preview { width:190px; height:135px; border:1px dashed #cbd5e1; border-radius:11px; background:#f1f5f9; overflow:hidden; display:grid; place-items:center; color:#94a3b8; font-size:12px; position:relative; }
.cms-image-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.cms-image-empty { color:#94a3b8; padding:10px; text-align:center; }
.cms-image-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.cms-upload-button { position:relative; display:inline-flex; align-items:center; justify-content:center; background:#1d4ed8; color:#fff; padding:11px 14px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; overflow:hidden; min-height:40px; }
.cms-upload-button:hover { background:#1746b5; }
.cms-upload-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:100px; }
.cms-image-hint { display:block; width:100%; color:#64748b; font-size:11px; line-height:1.5; }
.cms-url-details { width:100%; margin-top:4px; }
.cms-url-details summary { cursor:pointer; color:#475569; font-size:11px; font-weight:700; }
.cms-url-input { width:100%; margin-top:7px; padding:10px; border:1px solid #cbd5e1; border-radius:9px; }
.cms-save-row { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #e2e8f0; padding-top:18px; margin-top:24px; }
#cms-save-status { color:#64748b; font-size:12px; line-height:1.5; }
.cms-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:9px; padding:32px 20px; background:#f7faff; border:2px dashed #b9cbea; border-radius:16px; margin-bottom:23px; transition:.15s ease; }
.cms-dropzone.drag-over { border-color:#1d4ed8; background:#eaf2ff; transform:scale(1.005); }
.cms-dropzone strong { color:#17366e; font-size:16px; }
.cms-dropzone p { margin:0; color:#64748b; font-size:13px; }
.cms-drop-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#dceaff; color:#1d4ed8; font-size:27px; font-weight:800; }
.cms-upload-button-large { padding:12px 20px; margin:4px 0; }
#cms-upload-status { color:#64748b; font-size:11px; line-height:1.5; }
.cms-library-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 13px; color:#334155; font-size:13px; }
.cms-library-heading span { color:#64748b; font-size:11px; }
.cms-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cms-media-card { border:1px solid #e2e8f0; border-radius:13px; overflow:hidden; min-width:0; background:#fff; }
.cms-media-card > img { width:100%; height:150px; object-fit:cover; display:block; background:#f1f5f9; }
.cms-media-info { padding:11px; display:grid; gap:5px; }
.cms-media-info strong { font-size:11px; overflow-wrap:anywhere; }
.cms-media-info small { color:#64748b; font-size:10px; }
.cms-media-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cms-media-actions .cms-button,.cms-media-actions .cms-remove { font-size:10px; padding:7px 8px; }
.cms-empty { padding:30px; text-align:center; color:#64748b; background:#f8fafc; border-radius:12px; }
.cms-load-error { padding:22px; border:1px solid #fecaca; background:#fff7f7; border-radius:14px; color:#7f1d1d; }
.cms-load-error p { margin:8px 0; color:#7f1d1d; font-size:13px; }
.cms-load-error code { background:#fee2e2; padding:2px 5px; border-radius:4px; }
.cms-load-error .cms-button { margin-top:8px; }
.cms-loading { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 20px; color:#334155; text-align:center; }
.cms-loading small { color:#64748b; font-size:11px; }
.cms-spinner { width:26px; height:26px; border:3px solid #dbeafe; border-top-color:#2563eb; border-radius:50%; animation:cms-spin .8s linear infinite; }
@keyframes cms-spin { to { transform:rotate(360deg); } }
@media(max-width:800px) {
  .cms-layout { grid-template-columns:1fr; }
  .cms-sidebar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-right:0; border-bottom:1px solid #e2e8f0; }
  .cms-side-tab { text-align:center; padding:10px 6px; font-size:12px; }
  .cms-editor { padding:18px; }
  .cms-media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px) {
  .cms-heading { padding:19px 16px; }
  .cms-heading h3 { font-size:19px; }
  .cms-lock { font-size:10px; }
  .cms-editor { padding:14px; }
  .cms-editor-head { flex-direction:column; }
  .cms-image-field { grid-template-columns:1fr; }
  .cms-image-preview { width:100%; height:190px; }
  .cms-image-actions { display:grid; grid-template-columns:1fr; }
  .cms-image-actions > * { width:100%; }
  .cms-media-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .cms-media-card > img { height:105px; }
  .cms-save-row { align-items:stretch; flex-direction:column; }
  .cms-save-row .cms-button { width:100%; }
  .cms-dropzone { padding:24px 12px; }
}