body{font-family:Segoe UI,Arial,sans-serif;margin:0;background:#f6f7fb;color:#222}
.nav{display:flex;gap:12px;align-items:center;padding:12px 18px;background:#111827;color:#fff}
.nav a{color:#fff;text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.container{max-width:980px;margin:18px auto;padding:0 14px}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:16px;margin:14px 0}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1}
input,textarea,select,button{font:inherit}
input[type=date],input[type=text],input[type=password],input[type=email],textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;background:#fff;box-sizing:border-box}
button{padding:10px 12px;border-radius:10px;border:1px solid #111827;background:#111827;color:#fff;cursor:pointer}
button.secondary{background:#fff;color:#111827}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;font-size:12px}
.note-item{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border-top:1px solid #f1f5f9;padding-top:12px;margin-top:12px}
.note-actions{display:flex;gap:8px;flex-wrap:wrap}
.error{color:#b91c1c}
.success{color:#047857}

/* Cizgili not editor */
.lined {
    min-height: 220px;
    line-height: 28px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 27px, #e5e7eb 28px );
}
    /* =========================
   BADGE
   ========================= */
    .badge

{
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 12px;
    background: #e5e7eb; /* açık gri */
    color: #374151;
    white-space: nowrap;
}

.badge.success {
    background: #dcfce7;
    color: #166534;
}

.badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

/* =========================
   SUCCESS / ERROR / WARNING BOX
   ========================= */
.success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid #10b981;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.error {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.warning-box {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* =========================
   DIRTY (DEĞİŞİKLİK VAR)
   ========================= */
#dirtyWarn {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 12px;
}

    #dirtyWarn div:first-child {
        font-weight: 700;
    }

/* =========================
   NOTE META
   ========================= */
.note-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: 0.85;
}

/* =========================
   BUTTON TWEAK
   ========================= */
.btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
}

    .btn.secondary {
        background: #6b7280;
    }

    .btn:hover {
        opacity: 0.9;
    }