:root{
  --bg:#0b0c10;
  --surface:#121318;
  --muted:#aab0b6;
  --text:#e6e7e8;
  --accent:#4da3ff;
  --accent-2:#6de38f;
  --border:#1f222a;
  --danger:#ff5d5d;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:240px;background:var(--surface);
  border-right:1px solid var(--border);padding:16px;overflow:auto
}
.brand{font-weight:800;margin-bottom:12px}
.navlink{display:block;padding:10px 12px;border-radius:12px;color:var(--text);margin:2px 0}
.navlink.active,.navlink:hover{background:#0f1118}
.group{margin:14px 0 6px;color:var(--muted);font-size:.9rem}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin: 10px 0;
    font-size: 14px
}

.alert-error {
    border: 1px solid rgba(255,80,80,.35);
    background: rgba(255,80,80,.12)
}


.topbar{
  position:fixed;left:240px;right:0;top:0;height:56px;background:rgba(11,12,16,.8);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:12px
}
.menu-btn,.theme-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 12px;border-radius:10px}
.menu-btn{display:none}
.top-title{font-weight:700}
.spacer{flex:1}

.content{padding:80px 20px 30px;max-width:1100px;margin-left:240px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--accent);color:#0b0c10;border:1px solid transparent;font-weight:700}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn.outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn.danger{background:var(--danger)}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}

.editor-wrap{display:grid;grid-template-columns:420px 1fr;gap:16px}
.editor-form .field{display:flex;flex-direction:column;margin-bottom:12px}
.editor-form input,.editor-form textarea, .editor-form select{
  background:#0e1016;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px
}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:400px;box-shadow:var(--shadow);overflow:hidden}
.preview-head{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border)}
.preview iframe{width:100%;height:calc(100% - 44px);border:0;min-height:520px}

.media-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.media-grid .item{background:#0e1016;border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px}
.media-grid img{width:100%;border-radius:8px}

.muted{color:var(--muted)}
.small{font-size:.88rem}

.login{display:grid;place-items:center;height:80vh}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;min-width:350px;min-height:auto}
.login-card .field{display:flex;flex-direction:column;margin-bottom:10px}

@media (max-width:1000px){
  .cards{grid-template-columns:1fr 1fr}
  .editor-wrap{grid-template-columns:1fr}
}

@media (max-width:760px){
  .sidebar{transform:translateX(-100%);position:fixed}
  .sidebar.show{transform:none}
  .menu-btn{display:inline-block}
  .topbar{left:0}
  .content{margin-left:0}
  .media-grid{grid-template-columns:repeat(2,1fr)}
}



/* Page head */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.page-title {
    margin: 0 0 4px;
    font-size: 1.35rem
}

/* Stats */
.stat {
    padding: 16px
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: .2px
}

.stat-sub {
    margin-top: 6px
}

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #0e1016;
    color: var(--text);
    font-size: .82rem
}

    .pill.ok {
        border-color: rgba(109,227,143,.35);
        background: rgba(109,227,143,.10)
    }

    .pill.warn {
        border-color: rgba(77,163,255,.35);
        background: rgba(77,163,255,.10)
    }

/* Blocks */
.block {
    padding: 0
}

.block-head {
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--border)
}

    .block-head h2 {
        margin: 0 0 6px;
        font-size: 1.05rem
    }

    .block-head p {
        margin: 0
    }

/* Actions tiles */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    padding: 16px
}

.action-tile {
    display: block;
    background: #0e1016;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: none;
    color: var(--text)
}

    .action-tile:hover {
        text-decoration: none;
        filter: brightness(1.05)
    }

    .action-tile .tile-title {
        font-weight: 800;
        margin-bottom: 6px
    }

    .action-tile .tile-cta {
        margin-top: 10px;
        color: var(--accent);
        font-weight: 800
    }

    .action-tile.danger .tile-cta {
        color: var(--danger)
    }

/* Notes */
.note-list {
    padding: 16px;
    display: grid;
    gap: 10px
}

.note {
    background: #0e1016;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px
}

.note-title {
    font-weight: 800;
    margin-bottom: 4px
}

/* Form card */
.form-card {
    max-width: 520px;
    margin: 0 auto
}

.form-head {
    margin-bottom: 10px
}

    .form-head h2 {
        margin: 0 0 6px;
        font-size: 1.1rem
    }

.simple-form .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px
}

.simple-form input {
    background: #0e1016;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px;
    border-radius: 10px
}

/* Alert success */
.alert-success {
    border: 1px solid rgba(109,227,143,.35);
    background: rgba(109,227,143,.12)
}

@media (max-width:1000px) {
    .actions-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:760px) {
    .page-head {
        flex-direction: column;
        align-items: stretch
    }

    .actions-grid {
        grid-template-columns: 1fr
    }
}
.tool-select {
    background: #0e1016;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px;
    border-radius: 10px;
    min-width: 220px
}
/* CSP-safe helpers (editor.php) */
.block-head--lined {
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.editor-card {
    margin-bottom: 14px;
}

.block-head--tight {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
}

.h2-sm {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.m-0 {
    margin: 0;
}

.p-16 {
    padding: 16px;
}

.mt-6 {
    margin-top: .35rem;
}
.hr-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}

/*tost yeni alert bölümü*/

/* Toast Notification */
.toast {
    position: fixed;
    top: 24px;
    right: 24px;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    font-weight: 600;
    z-index: 9999;
    animation: toastIn .35s ease, toastOut .35s ease 3.5s forwards;
}

.toast-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
}

.toast-error {
    background: linear-gradient(135deg, #ff5d5d, #c0392b);
    color: #fff;
}

.toast-icon {
    font-size: 20px;
    line-height: 1;
}

.toast-text {
    flex: 1;
    font-size: 14.5px;
}

/* Animations */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.96);
    }

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

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(.96);
    }
}