@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 /* ── Tokens & Reset ─────────────────────────────────────────────── */
 :root {
   --c-bg: #f4f6fb;
   --c-surface: #ffffff;
   --c-surface2: #f0f2f8;
   --c-border: #e2e8f0;
   --c-border2: #cbd5e1;
   --c-primary: #6366f1;
   --c-primary2: #8b5cf6;
   --c-primary-lt: #eef2ff;
   --c-accent: #06b6d4;
   --c-success: #10b981;
   --c-danger: #ef4444;
   --c-danger-lt: #fef2f2;
   --c-text: #1e2235;
   --c-muted: #64748b;
   --c-faint: #94a3b8;
   --radius: 10px;
   --radius-lg: 16px;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
   --shadow: 0 4px 16px rgba(0, 0, 0, .08);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);
   --sidebar-w: 220px;
   --transition: .18s cubic-bezier(.4, 0, .2, 1);
   --font-title: "Bakbak One", sans-serif;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   touch-action: manipulation;
   border: none !important;
   box-shadow: none !important;
 }

 body {
   color: var(--c-text);
   background: var(--c-bg);
   -webkit-font-smoothing: antialiased;
   font-family: "Poppins", sans-serif;
   font-size: 17px;
   touch-action: manipulation;
   border: none !important;
   box-shadow: none !important;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 img {
   max-width: 100%;
   height: auto;
   display: inline-block;
   vertical-align: middle;
 }

 input,
 textarea,
 button,
 select {
   font-family: "Poppins", sans-serif;
 }

 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }

 ::-webkit-scrollbar-track {
   background: transparent;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--c-border2);
   border-radius: 99px;
 }

 /* ══════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════ */
 .form-group {
   margin-bottom: 16px;
 }

 .form-group label {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--c-muted);
   margin-bottom: 6px;
   letter-spacing: .4px;
   text-transform: uppercase;
 }

 .input-icon-wrap {
   position: relative;
 }

 .input-icon {
   position: absolute;
   left: 13px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--c-faint);
   pointer-events: none;
 }

 input[type="text"],
 input[type="password"],
 input[type="email"],
 textarea {
   width: 100%;
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   border-radius: var(--radius);
   color: var(--c-text);
   font-size: 14px;
   outline: none;
   transition: border-color var(--transition), box-shadow var(--transition);
 }

 input[type="text"],
 input[type="password"],
 input[type="email"] {
   padding: 10px 13px;
 }

 .input-icon-wrap input {
   padding-left: 42px;
 }

 textarea {
   padding: 11px 13px;
   resize: vertical;
   min-height: 100px;
 }

 input:focus,
 textarea:focus {
   border-color: var(--c-primary);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
 }

 input::placeholder,
 textarea::placeholder {
   color: var(--c-faint);
 }

 /* ── Buttons ────────────────────────────────────────────────────── */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 18px;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   border: none;
   outline: none;
   transition: all var(--transition);
   white-space: nowrap;
 }

 .btn:disabled {
   opacity: .5;
   cursor: not-allowed;
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--c-primary), var(--c-primary2));
   color: #fff;
   box-shadow: 0 2px 10px rgba(99, 102, 241, .3);
 }

 .btn-primary:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 4px 18px rgba(99, 102, 241, .4);
 }

 .btn-outline {
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   color: var(--c-muted);
 }

 .btn-outline:hover {
   border-color: var(--c-primary);
   color: var(--c-primary);
   background: var(--c-primary-lt);
 }

 .btn-ghost {
   background: transparent;
   color: var(--c-muted);
 }

 .btn-ghost:hover {
   background: var(--c-surface2);
   color: var(--c-text);
 }

 .btn-danger {
   background: var(--c-danger-lt);
   color: var(--c-danger);
   border: 1.5px solid #fca5a5;
 }

 .btn-danger:hover {
   background: #fee2e2;
 }

 .btn-full {
   width: 100%;
   justify-content: center;
   padding: 13px;
   font-size: 15px;
 }

 .btn-sm {
   padding: 6px 12px;
   font-size: 12px;
   border-radius: 8px;
   gap: 5px;
 }

 /* ── Alerts ─────────────────────────────────────────────────────── */
 .alert {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 11px 15px;
   border-radius: var(--radius);
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 18px;
 }

 .alert-error {
   background: #fef2f2;
   color: #b91c1c;
   border: 1px solid #fca5a5;
 }

 .alert-success {
   background: #f0fdf4;
   color: #166534;
   border: 1px solid #86efac;
 }

 .alert-success a {
   color: var(--c-success);
   text-decoration: underline;
 }

 /* ── Toast ──────────────────────────────────────────────────────── */
 .toast {
   position: fixed;
   bottom: 28px;
   right: 28px;
   z-index: 9999;
   padding: 12px 20px;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 600;
   opacity: 0;
   pointer-events: none;
   transform: translateY(8px);
   transition: opacity .25s, transform .25s;
   box-shadow: var(--shadow-lg);
 }

 .toast.show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }

 .toast-success {
   background: var(--c-success);
   color: #fff;
 }

 .toast-error {
   background: var(--c-danger);
   color: #fff;
 }

 /* ── Spinner ────────────────────────────────────────────────────── */
 .spinner {
   display: inline-block;
   width: 13px;
   height: 13px;
   border: 2px solid rgba(255, 255, 255, .4);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin .65s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 /* ══════════════════════════════════════════════════════════════════
   LOGIN (light)
   ══════════════════════════════════════════════════════════════════ */
 .login-body {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #eef2ff 0%, #f8f9fc 50%, #f0f9ff 100%);
 }

 .login-wrapper {
   width: 100%;
   max-width: 420px;
   padding: 20px;
 }

 .login-card {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1.5px solid var(--c-border);
   padding: 38px 34px;
   box-shadow: var(--shadow-lg);
 }

 .login-logo {
   display: flex;
   align-items: center;
   gap: 13px;
   margin-bottom: 30px;
 }

 .logo-icon {
   width: 46px;
   height: 46px;
   flex-shrink: 0;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(99, 102, 241, .3);
 }

 .logo-icon.sm {
   width: 34px;
   height: 34px;
   border-radius: 9px;
 }

 .login-brand {
   font-size: 21px;
   font-weight: 800;
   color: var(--c-text);
   letter-spacing: -.5px;
 }

 .login-brand span {
   color: var(--c-primary);
 }

 .login-tagline {
   font-size: 12px;
   color: var(--c-faint);
   margin-top: 2px;
 }

 .login-form .btn-full {
   margin-top: 6px;
 }

 /* ══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT
   grid */
 .admin-body {
   display: flex;
   min-height: 100vh;
   background: var(--c-bg);
 }

 /* Sidebar */
 .sidebar {
   width: var(--sidebar-w);
   flex-shrink: 0;
   background: var(--c-surface);
   border-right: 1.5px solid var(--c-border);
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   z-index: 100;
   box-shadow: 2px 0 12px rgba(0, 0, 0, .04);
 }

 .sidebar-logo {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 20px 18px 18px;
   font-size: 15px;
   font-weight: 800;
   color: var(--c-text);
   border-bottom: 1.5px solid var(--c-border);
 }

 .sidebar-logo b {
   color: var(--c-primary);
 }

 .sidebar-nav {
   flex: 1;
   padding: 14px 10px;
   display: flex;
   flex-direction: column;
   gap: 3px;
 }

 .sidebar-footer {
   padding: 10px;
   border-top: 1.5px solid var(--c-border);
 }

 .nav-item {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 9px 12px;
   border-radius: 9px;
   color: var(--c-muted);
   font-weight: 500;
   transition: all var(--transition);
   font-size: 13.5px;
 }

 .nav-item:hover {
   background: var(--c-bg);
   color: var(--c-text);
 }

 .nav-item.active {
   background: var(--c-primary-lt);
   color: var(--c-primary);
   font-weight: 600;
 }

 .nav-item.logout:hover {
   background: var(--c-danger-lt);
   color: var(--c-danger);
 }

 .main-content {
   margin-left: var(--sidebar-w);
   flex: 1;
   padding: 32px;
   max-width: 1040px;
   /* 800 + padding */
 }

 .main-content>* {
   max-width: 1000px;
   margin-left: 0;
   margin-right: auto;
 }

 .editor-topbar {
   max-width: 1000px;
 }

 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 26px;
 }

 .page-header h2 {
   font-size: 21px;
   font-weight: 800;
   letter-spacing: -.4px;
 }

 .page-sub {
   color: var(--c-muted);
   font-size: 13px;
   margin-top: 2px;
 }

 .empty-state {
   text-align: center;
   padding: 70px 20px;
   color: var(--c-muted);
 }

 .empty-state svg {
   margin: 0 auto 18px;
   opacity: .5;
 }

 .empty-state h3 {
   font-size: 17px;
   color: var(--c-text);
   margin-bottom: 7px;
 }

 /* ── Client Cards ───────────────────────────────────────────────── */
 .clients-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   gap: 18px;
 }

 .client-card {
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   border-radius: var(--radius-lg);
   padding: 20px;
   box-shadow: var(--shadow-sm);
   transition: all var(--transition);
 }

 .client-card:hover {
   border-color: var(--c-primary);
   box-shadow: 0 4px 20px rgba(99, 102, 241, .12);
 }

 .client-card-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 }

 .client-avatar {
   width: 44px;
   height: 44px;
   border-radius: 11px;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--c-primary), var(--c-primary2));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
   font-weight: 800;
   color: #fff;
   box-shadow: 0 3px 10px rgba(99, 102, 241, .3);
 }

 .client-info h3 {
   font-size: 15px;
   font-weight: 700;
 }

 .client-slug {
   font-size: 11px;
   color: var(--c-faint);
   font-family: monospace;
 }

 .client-card-actions {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   margin-bottom: 13px;
 }

 .client-url-copy {
   display: flex;
   gap: 6px;
   align-items: center;
   background: var(--c-bg);
   border: 1px solid var(--c-border);
   border-radius: 8px;
   padding: 7px 10px;
 }

 .client-url-copy input {
   flex: 1;
   background: none;
   border: none;
   outline: none;
   font-size: 11px;
   color: var(--c-muted);
   font-family: monospace;
   padding: 0 !important;
   width: auto !important;
 }

 .client-url-copy button {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--c-faint);
   display: flex;
   transition: color var(--transition);
 }

 .client-url-copy button:hover {
   color: var(--c-primary);
 }

 /* ── Modal ──────────────────────────────────────────────────────── */
 .modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 500;
   background: rgba(30, 34, 53, .35);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition);
 }

 .modal-overlay.open {
   opacity: 1;
   pointer-events: auto;
 }

 .modal {
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   border-radius: var(--radius-lg);
   width: 100%;
   max-width: 450px;
   box-shadow: var(--shadow-lg);
   transform: scale(.97);
   transition: transform var(--transition);
 }

 .modal-overlay.open .modal {
   transform: scale(1);
 }

 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px;
   border-bottom: 1.5px solid var(--c-border);
 }

 .modal-header h3 {
   font-size: 16px;
   font-weight: 700;
 }

 .modal-close {
   background: none;
   border: none;
   color: var(--c-muted);
   font-size: 17px;
   cursor: pointer;
   line-height: 1;
   padding: 4px 8px;
   border-radius: 6px;
   transition: all var(--transition);
 }

 .modal-close:hover {
   background: var(--c-danger-lt);
   color: var(--c-danger);
 }

 .modal-body {
   padding: 22px;
 }

 .modal-footer {
   display: flex;
   gap: 9px;
   justify-content: flex-end;
   margin-top: 18px;
 }

 /* ══════════════════════════════════════════════════════════════════
   EDITOR (edit.php) — Light
   ══════════════════════════════════════════════════════════════════ */
 .editor-main {
   margin-left: var(--sidebar-w);
   flex: 1;
   padding: 0 32px 48px;
 }

 .editor-topbar {
   position: sticky;
   top: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
   margin-bottom: 26px;
   background: var(--c-bg);
   border-bottom: 1.5px solid var(--c-border);
 }

 .editor-breadcrumb {
   display: flex;
   align-items: center;
   gap: 7px;
   color: var(--c-muted);
   font-size: 13px;
 }

 .editor-breadcrumb a:hover {
   color: var(--c-primary);
 }

 .editor-actions {
   display: flex;
   gap: 9px;
 }

 .editor-section {
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   border-radius: var(--radius-lg);
   padding: 22px;
   margin-bottom: 20px;
   box-shadow: var(--shadow-sm);
 }

 .section-label {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11.5px;
   font-weight: 700;
   color: var(--c-muted);
   text-transform: uppercase;
   letter-spacing: .6px;
   margin-bottom: 14px;
 }

 .section-hint {
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
   color: var(--c-faint);
   margin-left: auto;
   font-size: 11px;
 }

 /* CKEditor in light mode */
 .ck-editor-wrap .ck.ck-editor__editable {
   min-height: 130px !important;
 }

 .ck.ck-toolbar {
   background: var(--c-bg) !important;
   border-color: var(--c-border) !important;
   border-radius: var(--radius) var(--radius) 0 0 !important;
 }

 .ck.ck-editor__editable {
   border-color: var(--c-border) !important;
   border-radius: 0 0 var(--radius) var(--radius) !important;
 }

 .ck.ck-editor__editable.ck-focused {
   border-color: var(--c-primary) !important;
   box-shadow: 0 0 0 3px rgba(99, 102, 241, .1) !important;
 }

 /* ── Posts Grid (editor) ─────────────────────────────────────────── */
 .posts-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
 }

 .post-card {
   border-radius: var(--radius);
   overflow: hidden;
   border: 1.5px solid var(--c-border);
   background: var(--c-bg);
   transition: all .2s;
   cursor: grab;
 }

 .post-card:active {
   cursor: grabbing;
 }

 .post-card:hover {
   border-color: var(--c-primary);
   box-shadow: 0 4px 16px rgba(99, 102, 241, .15);
 }

 .post-card.post-hidden {
   opacity: .35;
   border-style: dashed;
 }

 .post-card-img {
   position: relative;
   aspect-ratio: 4/5;
   overflow: hidden;
 }

 .post-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .3s;
 }

 .post-card:hover .post-card-img img {
   transform: scale(1.04);
 }

 .post-card-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 7px;
   opacity: 0;
   transition: opacity .2s;
 }

 .post-card:hover .post-card-overlay {
   opacity: 1;
 }

 .post-toggle {
   background: rgba(255, 255, 255, .2);
   border: none;
   color: #fff;
   border-radius: 6px;
   padding: 4px 5px;
   cursor: pointer;
   display: flex;
   transition: background .2s;
 }

 .post-toggle:hover {
   background: rgba(255, 255, 255, .4);
 }

 .post-delete {
   background: rgba(239, 68, 68, .75);
   border: none;
   color: #fff;
   border-radius: 6px;
   padding: 4px 5px;
   cursor: pointer;
   display: flex;
   transition: background .2s;
 }

 .post-delete:hover {
   background: rgba(239, 68, 68, 1);
 }

 .drag-handle {
   color: rgba(255, 255, 255, .8);
   font-size: 17px;
   cursor: grab;
   line-height: 1;
   user-select: none;
   padding: 4px;
 }

 .post-caption {
   width: 100%;
   padding: 7px 9px;
   background: none;
   border: none;
   border-top: 1px solid var(--c-border);
   color: var(--c-muted);
   font-size: 11.5px;
   outline: none;
 }

 .post-caption:focus {
   color: var(--c-text);
   background: var(--c-primary-lt);
 }

 /* Upload button in post grid */
 .post-upload-btn {
   aspect-ratio: 4/5;
   border: 2px dashed var(--c-border2);
   border-radius: var(--radius);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   color: var(--c-faint);
   font-size: 12px;
   font-weight: 500;
   transition: all .2s;
   background: var(--c-bg);
 }

 .post-upload-btn:hover {
   border-color: var(--c-primary);
   color: var(--c-primary);
   background: var(--c-primary-lt);
 }

 .post-upload-btn svg {
   width: 28px;
   height: 28px;
 }

 #postFileInput {
   display: none;
 }

 /* SortableJS */
 .sortable-ghost {
   opacity: .25;
   border: 2px dashed var(--c-primary) !important;
 }

 .sortable-chosen {
   box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important;
 }

 /* ── Section Blocks ─────────────────────────────────────────────── */
 .section-block {
   background: var(--c-bg);
   border: 1.5px solid var(--c-border);
   border-radius: var(--radius);
   margin-bottom: 12px;
   overflow: hidden;
   transition: border-color .18s;
 }

 .section-block:hover {
   border-color: var(--c-primary);
 }

 .section-block-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
   background: var(--c-surface);
   border-bottom: 1px solid var(--c-border);
 }

 .section-block-title {
   font-size: 13px;
   font-weight: 600;
 }

 .section-block-controls {
   display: flex;
   gap: 5px;
 }

 .section-block-body {
   padding: 14px;
 }

 .sec-btn {
   background: var(--c-surface);
   border: 1.5px solid var(--c-border);
   color: var(--c-muted);
   border-radius: 6px;
   padding: 3px 8px;
   cursor: pointer;
   font-size: 13px;
   transition: all .18s;
 }

 .sec-btn:hover {
   border-color: var(--c-border2);
   color: var(--c-text);
   background: var(--c-bg);
 }

 .sec-btn-danger:hover {
   background: var(--c-danger-lt);
   border-color: #fca5a5;
   color: var(--c-danger);
 }

 .mini-label {
   font-size: 11px;
   font-weight: 600;
   color: var(--c-faint);
   text-transform: uppercase;
   letter-spacing: .5px;
   margin-bottom: 5px;
 }

 /* Image upload area in section */
 .img-upload-area {
   border: 2px dashed var(--c-border2);
   border-radius: var(--radius);
   padding: 20px;
   text-align: center;
   cursor: pointer;
   color: var(--c-faint);
   font-size: 13px;
   transition: all .18s;
   background: var(--c-surface);
 }

 .img-upload-area:hover {
   border-color: var(--c-primary);
   color: var(--c-primary);
   background: var(--c-primary-lt);
 }

 .img-upload-area.has-img {
   padding: 0;
   border-style: solid;
   overflow: hidden;
 }

 .img-upload-area.has-img img {
   width: 100%;
   max-height: 280px;
   object-fit: contain;
 }

 .img-upload-area svg {
   display: block;
   margin: 0 auto 8px;
 }

 /* Add section bar */
 .add-section-bar {
   display: flex;
   align-items: center;
   gap: 9px;
   flex-wrap: wrap;
   padding: 14px;
   background: var(--c-bg);
   border: 1.5px dashed var(--c-border2);
   border-radius: var(--radius);
   color: var(--c-muted);
   font-size: 13px;
 }

 /* ══════════════════════════════════════════════════════════════════
   VIEW PAGE — Fresh White (matches reference image)
   ══════════════════════════════════════════════════════════════════ */
 .view-body {
   background: transparent;
   color: #1e2235;

   min-height: 100vh;
 }

 /* Top strip: logo + company name */
 .view-top {
   padding: 32px 0 0;
   text-align: center;
   box-shadow: none !important;
 }

 .view-top-inner {
   max-width: 860px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   gap: 16px;
   justify-content: center;
 }

 .view-brand-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   flex-shrink: 0;
   background: linear-gradient(135deg, #6366f1, #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 24px;
   font-weight: 900;
 }

 .view-company-name {
   font-size: 22px;
   font-weight: 800;
   letter-spacing: -.5px;
   color: #1e2235;
 }

 /* Intro / header text */
 .view-intro-text {
   max-width: 1000px;
   margin: 0 auto;

   text-align: center;

 }

 .view-intro-text p,
 .view-text-content p,
 .view-intro-box p {
   text-align: center;
 }

 /* Ensure block images also center if they are in these containers */
 .view-intro-text img,
 .view-text-content img,
 .view-intro-box img {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
 }

 .view-intro-text h3 {
   font-size: 19px;
   font-weight: 700;
   color: #1e2235;
   margin-bottom: 8px;
 }

 .view-intro-text p {
   margin-bottom: 10px;
 }

 .view-intro-text a {
   color: #6366f1;
 }

 .view-intro-text strong {
   color: #1e2235;
 }

 /* Posts section */
 .view-posts-section {
   max-width: 1000px;
   margin: 36px auto 0;
   padding: 0 5px;
 }

 .view-posts-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0px;
 }

 @media (max-width: 580px) {
   .view-posts-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 /* Horizontal Slider Section (Additional) */
 .view-slider-section {
   max-width: 1000px;
   margin: 48px auto 0;
   padding: 0 24px;
   display: none;
 }

 @media (max-width: 768px) {
   .view-slider-section {
     display: block;
     margin-top: 32px;
     padding: 0;
     overflow: hidden;
   }

   .view-slider-grid {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     gap: 12px;
     padding: 0 24px 24px;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }

   .view-slider-grid::-webkit-scrollbar {
     display: none;
   }

   .view-slider-card {
     flex: 0 0 82%;
     scroll-snap-align: center;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .09);
     background: #fff;
     border: 1px solid #e9eef5;
   }

   .view-slider-card img {
     width: 100%;
     aspect-ratio: 4/5;
     object-fit: cover;
     display: block;
   }
 }

 .view-post-card {
    
   overflow: hidden;
  
   background: #fff;
   
   transition: transform .22s, box-shadow .22s;
   cursor: pointer;
 }

 .view-post-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
 }

 .view-post-card img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   display: block;
 }

 /* Lightbox Modal */
 .lightbox {
   display: none;
   position: fixed;
   z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .lightbox.show {
   display: flex;
   opacity: 1;
 }

 .lightbox-content {
   max-width: 100%;
   max-height: 100%;
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .lightbox-content img {
   max-width: 100%;
   max-height: 90vh;
   object-fit: contain;
   border-radius: 4px;
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
   animation: zoomIn 0.3s ease;
 }

 @keyframes zoomIn {
   from {
     transform: scale(0.9);
     opacity: 0;
   }

   to {
     transform: scale(1);
     opacity: 1;
   }
 }

 .lightbox-close {
   position: absolute;
   top: 20px;
   right: 30px;
   color: #fff;
   font-size: 40px;
   font-weight: 300;
   cursor: pointer;
   user-select: none;
   transition: color 0.2s;
 }

 .lightbox-close:hover {
   color: #ccc;
 }

 .view-post-caption {
   padding: 9px 12px;
   font-size: 11.5px;
   color: #64748b;
   font-weight: 500;
   border-top: 1px solid #f1f5f9;
 }

 /* Extra sections */
 .view-sections-wrap {
   max-width: 1000px;
   margin: 48px auto 0;
   padding: 0 24px;
 }

 .view-text-section {
   margin-bottom: 40px;
 }

 .view-image-section {
   margin-bottom: 40px;
   text-align: center;
 }

 .view-image-section img {
   max-width: 100%;

   margin: 0 auto;
 }

 .view-section-title {
   font-size: 18px;
   font-weight: 800;
   color: #1e2235;
   margin-bottom: 16px;
   padding-bottom: 10px;
   border-bottom: 2px solid #f1f5f9;
   letter-spacing: -.3px;
 }

 .view-text-content p {
   color: #475569;
   font-size: 15px;
   line-height: 1.8;
   margin-bottom: 10px;
 }

 .view-text-content img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
   display: inline-block;
   /* Aligns with text-align: center */
   vertical-align: middle;
 }

 .view-text-content ul,
 .view-text-content ol {
   padding-left: 20px;
   color: #475569;
   font-size: 15px;
 }

 .view-text-content strong {
   color: #1e2235;
 }

 .view-text-content a {
   color: #6366f1;
 }

 /* CKEditor 4 centering & float support */
 .view-text-content p[style*="text-align:center"],
 .view-text-content p[style*="text-align: center"],
 .view-text-content div[style*="text-align:center"],
 .view-text-content div[style*="text-align: center"] {
   text-align: center !important;
 }

 .view-text-content img[style*="float:left"],
 .view-text-content img[style*="float: left"] {
   float: left;
   margin-right: 15px;
   margin-bottom: 15px;
 }

 .view-text-content img[style*="float:right"],
 .view-text-content img[style*="float: right"] {
   float: right;
   margin-left: 15px;
   margin-bottom: 15px;
 }

 .view-text-content .clear {
   clear: both;
 }

 .view-intro-box {
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   border-radius: 18px;
   padding: 34px 38px;
   margin-bottom: 40px;
   color: #fff;
   box-shadow: 0 6px 28px rgba(99, 102, 241, .25);
 }

 .view-intro-box h3 {
   font-size: 19px;
   font-weight: 800;
   margin-bottom: 12px;
 }

 .view-intro-box p {
   color: rgba(255, 255, 255, .88);
   font-size: 15px;
   line-height: 1.75;
 }

 .view-divider {
   height: 1px;
   background: #f1f5f9;
   margin: 40px 0;
 }

 /* Footer strip — minimal */
 .view-footer {
   max-width: 1000px;
   margin: 48px auto 0;
   padding: 24px 24px 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid #f1f5f9;
 }

 .view-footer-brand {
   font-size: 13px;
   color: #94a3b8;
 }

 .view-footer-brand b {
   color: #6366f1;
 }

 /* Admin edit button (only shown when admin logged in) */
 .view-edit-fab {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 99;
 }

 /* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
 @media (max-width: 768px) {
   .sidebar {
     display: none;
   }

   .main-content,
   .editor-main {
     margin-left: 0;
     padding: 16px;
   }

   .page-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 11px;
   }

   .clients-grid {
     grid-template-columns: 1fr;
   }

   .view-intro-box {
     padding: 22px;
   }

   .view-top-inner {
     flex-direction: column;
   }
 }


 .cke_notification {
   display: none !important;
 }



 .color-tema h1 {
   color: #000;
   letter-spacing: -1px;
   font-family: var(--font-title);
   font-weight: 400;
   font-size: clamp(35px, 4vw, 55px);
   padding-bottom: 15px;
 }

 .color-tema p {
   color: #000;
font-size: clamp(14px, calc(6px + 1.4vw), 20px);
  }