/* NovaCRM Demo — açık tema, indigo vurgu */
:root {
    --ana: #4f46e5; --ana-k: #4338ca; --acik: #eef2ff;
    --bg: #f4f5fb; --beyaz: #ffffff; --cizgi: #e5e7f0;
    --txt: #1e2235; --mut: #6b7290;
    --yesil: #34d399; --kirmizi: #f87171; --sari: #fbbf24;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--txt); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

.demo-bant {
    background: linear-gradient(90deg, #0c1220, #1c2740); color: #8b98b8;
    font-size: .8rem; padding: 7px 18px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.demo-bant b { color: #00e5ff; }
.demo-bant a { color: #e6ecff; }
.demo-bant a:hover { color: #00e5ff; }

/* Giriş */
.giris-sayfa { min-height: calc(100vh - 34px); display: flex; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(700px at 20% 10%, #e0e4ff, transparent), radial-gradient(700px at 90% 90%, #ffe9f3, transparent), var(--bg); }
.giris-kart { width: 100%; max-width: 400px; background: var(--beyaz); border-radius: 18px; padding: 38px;
    box-shadow: 0 24px 60px rgba(79, 70, 229, .14); animation: gel .5s ease; }
@keyframes gel { from { opacity: 0; transform: translateY(18px); } }
.marka { font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 4px; }
.marka span { color: var(--ana); }
.marka-alt { text-align: center; color: var(--mut); font-size: .87rem; margin-bottom: 24px; }
.demo-ipucu { background: var(--acik); border: 1px dashed var(--ana); color: var(--ana-k); border-radius: 10px;
    padding: 10px 14px; font-size: .84rem; margin-bottom: 18px; text-align: center; }

/* Yerleşim */
.yerlesim { display: flex; min-height: calc(100vh - 34px); }
.kenar { width: 230px; flex-shrink: 0; background: var(--beyaz); border-right: 1px solid var(--cizgi); padding: 22px 14px; }
.kenar .marka { text-align: left; font-size: 1.3rem; padding: 0 10px 18px; border-bottom: 1px solid var(--cizgi); margin-bottom: 14px; }
.kenar nav a { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 10px;
    color: var(--mut); font-weight: 600; font-size: .92rem; margin-bottom: 4px; transition: .2s; }
.kenar nav a:hover { background: var(--acik); color: var(--ana); }
.kenar nav a.aktif { background: var(--ana); color: #fff; box-shadow: 0 8px 18px rgba(79, 70, 229, .3); }
.icerik { flex: 1; padding: 28px; min-width: 0; }
.ust { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.ust h1 { font-size: 1.4rem; }

/* Kartlar */
.istat-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.istat { background: var(--beyaz); border-radius: 14px; padding: 20px; border: 1px solid var(--cizgi); transition: .25s; }
.istat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30, 34, 53, .08); }
.istat .deger { font-size: 1.6rem; font-weight: 800; }
.istat .ad { color: var(--mut); font-size: .84rem; }
.istat .ikon { font-size: 1.3rem; margin-bottom: 8px; display: inline-block; background: var(--acik); border-radius: 10px; padding: 7px 10px; }

.kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 14px; padding: 22px; margin-bottom: 22px; }
.kutu h2 { font-size: 1.05rem; margin-bottom: 16px; }
.iki-sutun { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; align-items: start; }

/* Grafik çubukları */
.cubuklar { display: flex; align-items: flex-end; gap: 18px; height: 190px; padding-top: 10px; }
.cubuk-grup { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.cubuk { width: 100%; max-width: 58px; border-radius: 8px 8px 4px 4px; animation: buyu .9s cubic-bezier(.22,1,.36,1); transform-origin: bottom; }
@keyframes buyu { from { transform: scaleY(0); } }
.cubuk-grup small { color: var(--mut); font-size: .74rem; text-align: center; }
.cubuk-grup b { font-size: .8rem; }

/* Tablo */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); padding: 10px 12px; border-bottom: 2px solid var(--cizgi); }
td { padding: 12px; border-bottom: 1px solid var(--cizgi); font-size: .92rem; vertical-align: middle; }
tbody tr:hover { background: #fafbff; }

.rozet { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .74rem; font-weight: 700; }
.rozet.vip { background: #fef3c7; color: #b45309; }
.rozet.aktif { background: #d1fae5; color: #047857; }
.rozet.potansiyel { background: var(--acik); color: var(--ana-k); }

/* Form */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--mut); margin-bottom: 6px; }
input, select, textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--cizgi); border-radius: 10px;
    font-size: .93rem; font-family: inherit; background: #fff; color: var(--txt); transition: .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.alan { margin-bottom: 14px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border: none; border-radius: 10px;
    background: var(--ana); color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; font-family: inherit; transition: .2s; }
.btn:hover { background: var(--ana-k); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); }
.btn.gri { background: #eceef6; color: var(--txt); }
.btn.gri:hover { background: #e0e3ef; box-shadow: none; }
.btn.kirmizi { background: var(--kirmizi); }
.btn.kucuk { padding: 6px 12px; font-size: .78rem; border-radius: 8px; }

.uyari { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .9rem; animation: gel .35s ease; }
.uyari.iyi { background: #d1fae5; color: #047857; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; }
.sutun { background: #eef0f8; border-radius: 14px; padding: 12px; }
.sutun-baslik { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 800;
    padding: 4px 6px 10px; text-transform: uppercase; letter-spacing: .4px; }
.sutun-baslik i { font-style: normal; background: #fff; border-radius: 99px; padding: 1px 9px; font-size: .74rem; }
.fkart { background: #fff; border-radius: 11px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--cizgi);
    box-shadow: 0 3px 10px rgba(30, 34, 53, .05); animation: gel .4s ease; }
.fkart b { display: block; font-size: .86rem; margin-bottom: 3px; }
.fkart .kim { color: var(--mut); font-size: .76rem; }
.fkart .tutar { font-weight: 800; font-size: .9rem; margin-top: 6px; }
.fkart .oklar { display: flex; gap: 6px; margin-top: 9px; }
.fkart .oklar button { flex: 1; border: 1px solid var(--cizgi); background: #fafbff; border-radius: 7px;
    padding: 4px; cursor: pointer; font-size: .8rem; transition: .15s; }
.fkart .oklar button:hover { background: var(--acik); border-color: var(--ana); }

.zaman-cizgi { list-style: none; }
.zaman-cizgi li { position: relative; padding: 0 0 16px 22px; font-size: .88rem; }
.zaman-cizgi li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ana); }
.zaman-cizgi li::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1.5px; background: var(--cizgi); }
.zaman-cizgi li:last-child::after { display: none; }
.zaman-cizgi small { display: block; color: var(--mut); font-size: .75rem; }

@media (max-width: 1000px) { .kanban { grid-template-columns: repeat(2, 1fr); } .istat-izgara { grid-template-columns: repeat(2, 1fr); } .iki-sutun { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .yerlesim { flex-direction: column; } .kenar { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; }
    .kenar .marka { border: none; padding: 0 10px; margin: 0; } .kenar nav { display: flex; gap: 4px; flex-wrap: wrap; } .kanban { grid-template-columns: 1fr; } }