/* ═══ ASVO · müştəri bazası · üslub ═══ */
:root{
  --su:#0b6fa4; --su-tund:#075279; --su-acig:#e8f3f9;
  --kagiz:#ffffff; --fon:#f4f6f8; --xett:#dde3e9;
  --metn:#1b2733; --sonuk:#657687;
  --yasil:#1a7f52; --sari:#b8860b; --qirmizi:#b3261e; --benov:#6b4fa0;
  --kolge:0 1px 2px rgba(16,32,48,.06),0 3px 10px rgba(16,32,48,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fon);color:var(--metn);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--su);text-decoration:none}
a:hover{text-decoration:underline}

/* ── başlıq ── */
.bas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--kagiz);border-bottom:1px solid var(--xett);padding:10px 20px;position:sticky;top:0;z-index:20}
.loqo{display:flex;align-items:baseline;gap:8px;font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--su-tund)}
.loqo:hover{text-decoration:none}
.loqo small{font-size:11px;font-weight:400;color:var(--sonuk);letter-spacing:.02em}
.damla{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--su);display:inline-block}
.menyu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menyu a{padding:7px 12px;border-radius:7px;color:var(--metn);font-size:14px;white-space:nowrap}
.menyu a:hover{background:var(--su-acig);text-decoration:none}
.menyu a.var{background:var(--su);color:#fff}
.istifadeci{font-size:13px;color:var(--sonuk);display:flex;gap:10px;align-items:center}
.cix{color:var(--qirmizi)}

main{max-width:1280px;margin:0 auto;padding:20px}
footer{max-width:1280px;margin:0 auto;padding:24px 20px;color:var(--sonuk);font-size:12px}

h1{font-size:22px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px;color:var(--su-tund)}
.alt{color:var(--sonuk);font-size:13px;margin:0 0 18px}

/* ── kart və şəbəkə ── */
.kart{background:var(--kagiz);border:1px solid var(--xett);border-radius:12px;padding:16px 18px;box-shadow:var(--kolge);margin-bottom:16px}
.setir{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.setir2{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.setir2{grid-template-columns:1fr}}

/* ── göstəricilər ── */
.olcu{background:var(--kagiz);border:1px solid var(--xett);border-radius:12px;padding:14px 16px;box-shadow:var(--kolge)}
.olcu .reqem{font-size:26px;font-weight:700;color:var(--su-tund);line-height:1.2}
.olcu .ad{font-size:12px;color:var(--sonuk);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.olcu .qeyd{font-size:12px;color:var(--sonuk);margin-top:4px}

/* ── cədvəl ── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:right;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--sonuk);
  border-bottom:2px solid var(--xett);padding:8px 10px;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th.sol,td.sol{text-align:left}
td{padding:9px 10px;border-bottom:1px solid var(--xett);vertical-align:middle}
tbody tr:hover{background:var(--su-acig)}
.cedvel-qab{overflow-x:auto}
.bos{padding:32px;text-align:center;color:var(--sonuk)}

/* ── nişanlar ── */
.nisan{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.s-potensial{background:#eef1f4;color:#4a5b6b}
.s-danisiqda{background:#fff4d6;color:var(--sari)}
.s-sinaq{background:#ece6f7;color:var(--benov)}
.s-aktiv{background:#dff2e7;color:var(--yasil)}
.s-dayandirilib{background:#fde8e6;color:var(--qirmizi)}
.s-itirilib{background:#eceff1;color:#7a8a99;text-decoration:line-through}
.etiket{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--su-acig);color:var(--su-tund);font-size:12px}

/* ── forma ── */
label{display:block;font-size:12px;color:var(--sonuk);margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--xett);border-radius:8px;background:#fff;
  font:inherit;color:var(--metn)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--su);outline-offset:-1px;border-color:var(--su)}
textarea{min-height:72px;resize:vertical}
.sahe{margin-bottom:12px}
.duymeler{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
button,.duyme{display:inline-block;padding:9px 16px;border:0;border-radius:8px;background:var(--su);color:#fff;
  font:inherit;font-weight:600;cursor:pointer}
button:hover,.duyme:hover{background:var(--su-tund);text-decoration:none;color:#fff}
.duyme.sade,button.sade{background:#fff;color:var(--metn);border:1px solid var(--xett)}
.duyme.sade:hover,button.sade:hover{background:var(--fon);color:var(--metn)}
.duyme.teh,button.teh{background:var(--qirmizi)}

/* ── süzgəc ── */
.suzgec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.suzgec .sahe{margin-bottom:0}

/* ── xəbər ── */
.xeber{padding:11px 15px;border-radius:9px;margin-bottom:16px;font-size:14px;border:1px solid}
.xeber.ugur{background:#dff2e7;border-color:#b5e0c9;color:var(--yasil)}
.xeber.xeta{background:#fde8e6;border-color:#f5c4bf;color:var(--qirmizi)}
.xeber.diqqet{background:#fff4d6;border-color:#f0dfae;color:var(--sari)}

/* ── müştəri kartı ── */
.rekvizit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px}
.rekvizit div span{display:block;font-size:12px;color:var(--sonuk)}
.rekvizit div b{font-weight:600;font-size:14px}
.lent{list-style:none;margin:0;padding:0}
.lent li{border-right:3px solid var(--su-acig);padding:8px 12px 8px 0;margin-bottom:8px}
.lent li .vaxt{font-size:12px;color:var(--sonuk)}

/* ── giriş ── */
.giris-qab{max-width:380px;margin:9vh auto;background:var(--kagiz);border:1px solid var(--xett);
  border-radius:14px;padding:28px;box-shadow:var(--kolge)}
.giris-qab .loqo{justify-content:center;margin-bottom:18px;font-size:24px}

/* ── mobil ── */
@media(max-width:700px){
  .bas{padding:8px 12px;gap:8px;align-items:center}
  .loqo{order:1;font-size:18px}
  .istifadeci{order:2;margin-left:auto;font-size:12px}
  /* menyu tək sətirdə üfüqi sürüşür — sətirlərə bölünmür */
  .menyu{order:3;width:100%;flex:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:2px;padding-bottom:2px;scrollbar-width:none}
  .menyu::-webkit-scrollbar{display:none}
  .menyu a{flex:0 0 auto;padding:6px 10px;font-size:13px}
  main{padding:12px}
  .olcu .reqem{font-size:22px}
  table{font-size:13px}
  td,th{padding:7px 6px}
}
.yalniz-genis{display:table-cell}
@media(max-width:820px){.yalniz-genis{display:none}}
.yalniz-orta{display:table-cell}
@media(max-width:560px){.yalniz-orta{display:none}}

/* ── dar ekranda müştəri siyahısı kart kimi ── */
@media(max-width:560px){
  .siyahi thead{display:none}
  .siyahi tr{display:block;border-bottom:1px solid var(--xett);padding:10px 0}
  .siyahi tbody tr:hover{background:transparent}
  .siyahi td{display:inline-block;border:0;padding:1px 10px 1px 0;width:auto;vertical-align:middle}
  .siyahi td:first-child{display:block;width:100%;padding-bottom:4px}
  .siyahi td[data-etiket]::after{content:" " attr(data-etiket);font-size:11px;color:var(--sonuk)}
  .siyahi td.sol.yalniz-genis{display:block;width:100%;color:var(--sonuk);font-size:13px}
  /* marşrut · borc · təmas kartda göstərilmir — gizlətmə qaydası sonuncudur ki, üstün olsun */
  .siyahi td.mobil-gizle,.siyahi td.sol.mobil-gizle{display:none}
}