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;
    }

/* =========================
   NOTE ITEM - hover + animation
   ========================= */
.note-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}

    /* Hover: hafif koyulaş + minik yükselme */
    .note-item:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }

    /* ✅ İşlem Yapıldı */
    .note-item.done {
        background: #fee2e2;
        border-color: #fca5a5;
    }

        /* Done hover: biraz daha koyu */
        .note-item.done:hover {
            background: #fecaca;
            border-color: #f87171;
        }

        /* Done başlık & badge */
        .note-item.done b {
            color: #7f1d1d;
        }

        .note-item.done .badge {
            background: #fecaca;
            color: #7f1d1d;
        }

/* Durum değişince kırmızıya geçiş animasyonu */
@keyframes flashDone {
    0% {
        background: #ffffff;
        border-color: #e5e7eb;
    }

    40% {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    100% {
        background: #fee2e2;
        border-color: #fca5a5;
    }
}

.note-item.just-done {
    animation: flashDone .45s ease;
}

/* =========================
   COMPLETED SECTION HEADER
   ========================= */
.completed-separator {
    margin: 24px 0 12px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Attachment icon badges */
.att {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 14px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    flex: 0 0 auto;
}

.att-pdf {
    background: #fff1f2;
    border-color: #fecdd3;
}

.att-word {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.att-excel {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.att-img {
    background: #f5f3ff;
    border-color: #ddd6fe;
}