/* Admin və biznes səhifələrinin ortaq üslubu.
   Rəng tokenləri scripts/sablon.html-dəki ilə eynidir — üç sayt bir məhsul kimi görünsün. */
:root {
  --fon: #f5f7fa; --kart: #ffffff; --metn: #1b2430; --zeif: #5b6878; --xett: #dde3ea;
  --esas: #0b4f6c; --esas-acig: #e3eff5; --xeber: #b3261e; --xeber-fon: #fdecea;
  --ugur: #1e7a3c; --ugur-fon: #e5f4ea; --sari: #8a6100; --sari-fon: #fff6dd;
  --kolge: 0 2px 10px rgba(16,24,40,.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fon: #10151b; --kart: #18202a; --metn: #e6ebf1; --zeif: #9aa7b6; --xett: #2a3542;
    --esas: #5bb5d9; --esas-acig: #16303d; --xeber: #ff8a80; --xeber-fon: #3a1a1a;
    --ugur: #7fd69a; --ugur-fon: #15301f; --sari: #f3dd9b; --sari-fon: #3a3110;
    --kolge: 0 2px 10px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fon: #10151b; --kart: #18202a; --metn: #e6ebf1; --zeif: #9aa7b6; --xett: #2a3542;
  --esas: #5bb5d9; --esas-acig: #16303d; --xeber: #ff8a80; --xeber-fon: #3a1a1a;
  --ugur: #7fd69a; --ugur-fon: #15301f; --sari: #f3dd9b; --sari-fon: #3a3110;
  --kolge: 0 2px 10px rgba(0,0,0,.4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fon); color: var(--metn); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", sans-serif; }
a { color: var(--esas); }
[hidden] { display: none !important; }

/* Başlıq — əsas saytdakı qradiyent */
header { background: linear-gradient(120deg, #0b4f6c, #127a8f 50%, #c8102e); color: #fff; padding: 18px 16px 16px; }
header .ic { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
header h1 { margin: 0; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: -.01em; }
header p { margin: 2px 0 0; opacity: .92; }
header .sag { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
header .kim { font-size: 13px; opacity: .92; }
.tema { background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; text-decoration: none; }
.tema:hover { background: rgba(255,255,255,.3); }

main { max-width: 1400px; margin: 0 auto; padding: 16px; }
footer { text-align: center; color: var(--zeif); font-size: 13px; padding: 24px 16px 40px; }

/* Kartlar və bloklar */
.kart { background: var(--kart); border: 1px solid var(--xett); border-radius: 12px; padding: 16px 18px; box-shadow: var(--kolge); }
.kart h2 { margin: 0 0 10px; color: var(--esas); font-size: 19px; }
.kart h3 { margin: 14px 0 6px; font-size: 16px; }
.dar { max-width: 460px; margin: 24px auto; }
.giris-duzum { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; max-width: 1100px; margin: 10px auto; }
@media (max-width: 860px) { .giris-duzum { grid-template-columns: 1fr; } }
.tanitim h2 { font-size: clamp(22px, 3vw, 30px); color: var(--esas); margin: 6px 0 10px; line-height: 1.2; }
.tanitim ol { padding-left: 20px; }
.tanitim li { margin: 4px 0; }

/* Mesaj qutuları */
.mesaj { border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; border-left: 5px solid; }
.mesaj:empty { display: none; }
.mesaj.xeta { background: var(--xeber-fon); border-color: var(--xeber); color: var(--metn); }
.mesaj.ugur { background: var(--ugur-fon); border-color: var(--ugur); color: var(--metn); }
.mesaj.xeber { background: var(--sari-fon); border-color: #e0a800; color: var(--metn); }
.mesaj.info { background: var(--esas-acig); border-color: var(--esas); color: var(--metn); }

/* Düymələr */
.duyme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--xett); background: var(--kart); color: var(--metn); padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.2; min-height: 36px; }
.duyme:hover { border-color: var(--esas); }
.duyme:disabled { opacity: .55; cursor: not-allowed; }
.duyme.esas { background: var(--esas); color: #fff; border-color: var(--esas); font-weight: 600; }
:root[data-theme="dark"] .duyme.esas { color: #0b1a22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .duyme.esas { color: #0b1a22; } }
.duyme.tehluke { color: var(--xeber); border-color: var(--xeber); }
.duyme.tehluke:hover { background: var(--xeber-fon); }
.duyme.ugurlu { color: var(--ugur); border-color: var(--ugur); font-weight: 600; }
.duyme.ugurlu:hover { background: var(--ugur-fon); }
.duyme.bron { background: var(--ugur); color: #fff; border-color: var(--ugur); font-weight: 600; }
.duyme.bron:hover { filter: brightness(1.08); border-color: var(--ugur); }
:root[data-theme="dark"] .duyme.bron { color: #0b1a22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .duyme.bron { color: #0b1a22; } }
.duyme.kicik { padding: 4px 9px; min-height: 28px; font-size: 12.5px; }
.bron-zolaq { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.bron-zolaq .bron-et { font-size: 13px; color: var(--zeif); font-weight: 600; }
.duyme.kicik { padding: 4px 9px; font-size: 13px; min-height: 30px; }
.duymeler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Formalar */
.forma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.forma .tam { grid-column: 1 / -1; }
@media (max-width: 700px) { .forma { grid-template-columns: 1fr; } }
.sahe { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--zeif); font-weight: 600; min-width: 0; }
.sahe .ipucu, .ipucu { font-weight: 400; font-size: 12px; color: var(--zeif); }
input, select, textarea { font: inherit; font-size: 15px; font-weight: 400; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--xett); background: var(--fon); color: var(--metn); width: 100%; min-width: 0; }
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--esas); outline-offset: 0; border-color: var(--esas); }
input[type="checkbox"] { width: auto; }
label.yan { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--metn); cursor: pointer; }
input:user-invalid, textarea:user-invalid { border-color: var(--xeber); }
.sayac { font-size: 11.5px; color: var(--zeif); text-align: right; font-weight: 400; }
fieldset.qrup { border: 1px solid var(--xett); border-radius: 10px; padding: 8px 14px 14px; margin: 0; min-width: 0; }
fieldset.qrup legend { font-weight: 650; color: var(--esas); padding: 0 6px; font-size: 14px; }
details.etrafli-forma { border: 1px solid var(--xett); border-radius: 10px; padding: 8px 14px; }
details.etrafli-forma > summary { cursor: pointer; font-weight: 650; color: var(--esas); padding: 4px 0; }
details.etrafli-forma[open] > summary { margin-bottom: 10px; }

/* Tablar (sablon.html-dəki kimi) */
.tablar { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; border-bottom: 2px solid var(--xett); }
.tab { background: none; border: none; padding: 10px 14px; font: inherit; color: var(--zeif); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 6px; }
.tab[aria-selected="true"] { color: var(--esas); border-bottom-color: var(--esas); font-weight: 650; }
.tab .say { background: var(--xeber); color: #fff; border-radius: 99px; font-size: 11.5px; padding: 0 7px; font-weight: 700; }
.tab .say:empty { display: none; }
.panel { background: var(--kart); border: 1px solid var(--xett); border-top: none; border-radius: 0 0 12px 12px; padding: 14px 18px 20px; }
@media (max-width: 600px) { .tab { padding: 8px 9px; font-size: 14px; } .panel { padding: 12px 10px 16px; } }

/* Alətlər sətri (axtarış, filtrlər) */
.aletler { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 6px 0 12px; }
.aletler .sahe { flex: 0 1 180px; }
.aletler .sahe.genis { flex: 1 1 240px; }
.aletler .sag { margin-left: auto; }
@media (max-width: 600px) { .aletler .sahe { flex: 1 1 140px; } .aletler .sag { margin-left: 0; width: 100%; } .aletler .sag .duyme { width: 100%; } }

/* Cədvəllər */
.surus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 14px; }
th, td { border-bottom: 1px solid var(--xett); padding: 7px 8px; text-align: left; vertical-align: middle; }
th { background: var(--esas-acig); font-size: 13px; position: sticky; top: 0; }
tr.sonuk td:not(:last-child) { opacity: .55; }
td.ad-xana { font-weight: 600; }
td .alt { display: block; font-size: 12px; color: var(--zeif); font-weight: 400; }
td.reqem, th.reqem { text-align: right; white-space: nowrap; }
.cip { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--esas-acig); color: var(--esas); font-weight: 650; white-space: nowrap; }
.cip.yasil { background: var(--ugur-fon); color: var(--ugur); }
.cip.qirmizi { background: var(--xeber-fon); color: var(--xeber); }
.cip.sari { background: var(--sari-fon); color: var(--sari); }
.bos { color: var(--zeif); text-align: center; padding: 26px 10px; }
/* Dar ekranda cədvəli kart siyahısına çeviririk */
@media (max-width: 640px) {
  table.kartlasan thead { display: none; }
  table.kartlasan, table.kartlasan tbody, table.kartlasan tr, table.kartlasan td { display: block; width: 100%; }
  table.kartlasan tr { border: 1px solid var(--xett); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--kart); }
  table.kartlasan td { border: none; padding: 2px 0; }
  table.kartlasan td[data-bas]::before { content: attr(data-bas) ": "; color: var(--zeif); font-size: 12px; }
  table.kartlasan td.ad-xana::before { content: none; }
}

/* Xəritə seçicisi */
.xerite-sec { height: 340px; border-radius: 10px; border: 1px solid var(--xett); z-index: 0; }
.xerite-mini { height: 200px; border-radius: 10px; border: 1px solid var(--xett); z-index: 0; }
.koord-setir { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.koord-setir .sahe { flex: 1 1 120px; }
.axtar-setir { display: flex; gap: 8px; margin-bottom: 8px; }
.axtar-setir input { flex: 1; }
.axtar-netice { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--xett); border-radius: 8px; max-height: 190px; overflow: auto; }
.axtar-netice:empty { display: none; }
.axtar-netice li button { display: block; width: 100%; text-align: left; background: var(--kart); border: none; border-bottom: 1px solid var(--xett); padding: 7px 10px; font: inherit; font-size: 13.5px; color: var(--metn); cursor: pointer; }
.axtar-netice li button:hover, .axtar-netice li button:focus-visible { background: var(--esas-acig); outline: none; }
.kafel-qaranliq { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }

/* Şəkil yükləmə */
.sekil-sahe { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.sekil-onizleme { position: relative; width: 180px; height: 120px; border-radius: 10px; border: 1px dashed var(--xett); background: var(--fon); display: grid; place-items: center; color: var(--zeif); font-size: 12px; overflow: hidden; flex: none; text-align: center; }
.sekil-onizleme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sekil-sahe .sag-ic { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Modal / yan pəncərə */
.modal-fon { position: fixed; inset: 0; background: rgba(8,12,18,.6); display: none; align-items: flex-start; justify-content: center; padding: 3vh 12px; z-index: 2000; overflow: auto; }
.modal-fon.acik { display: flex; }
.modal { background: var(--kart); color: var(--metn); width: min(1000px, 100%); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
.modal-bas { background: linear-gradient(120deg, #0b4f6c, #127a8f); color: #fff; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-bas h2 { margin: 0; font-size: 20px; }
.bagla { background: rgba(255,255,255,.2); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; flex: none; }
.bagla:hover { background: rgba(255,255,255,.35); }
.modal-ic { padding: 16px 18px 20px; }
.modal-ayaq { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--xett); margin-top: 16px; }
@media (max-width: 600px) { .modal-fon { padding: 0; } .modal { border-radius: 0; min-height: 100%; } .modal-ic { padding: 12px; } .modal-ayaq .duyme { flex: 1 1 auto; } }

/* Biznes / moderasiya kartları */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 400px) { .kartlar { grid-template-columns: 1fr; } }
.ykart { background: var(--kart); border: 1px solid var(--xett); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--kolge); min-width: 0; }
.ykart .sekil { position: relative; overflow: hidden; flex: none; height: 170px; background: var(--esas-acig); display: grid; place-items: center; color: var(--zeif); font-size: 13px; }
.ykart .sekil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ykart .m { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ykart h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.ykart p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ykart .xususiyyet { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13.5px; margin: 4px 0; }
.ykart .xususiyyet dt { color: var(--zeif); }
.ykart .xususiyyet dd { margin: 0; overflow-wrap: anywhere; }
.ykart .duymeler { margin-top: auto; padding-top: 8px; }
.redd-qutu { background: var(--xeber-fon); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }

/* Ölkə kartları */
.olke-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.olke-kart { border: 1px solid var(--xett); border-radius: 12px; padding: 14px; background: var(--fon); }
.olke-kart b { font-size: 18px; display: block; }
.olke-kart .kod { font-size: 12px; color: var(--zeif); }
.olke-kart dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 8px 0 0; font-size: 14px; }
.olke-kart dd { margin: 0; font-weight: 650; text-align: right; }

.grup-basliq { margin: 18px 0 4px; font-size: 16px; color: var(--esas); display: flex; align-items: center; gap: 8px; }
.yuklenir { color: var(--zeif); padding: 20px; text-align: center; }
.gizli-ekran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Fayl seçimi: brauzerin ingiliscə «Choose File» yazısı əvəzinə öz düyməmiz */
.fayl-sec { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fayl-sec input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fayl-sec .fayl-ad { font-size: 13px; color: var(--zeif); font-weight: 400; overflow-wrap: anywhere; }
.fayl-sec input[type="file"]:focus-visible + .duyme { outline: 2px solid var(--esas); outline-offset: 2px; }
.menbe-setir { border-bottom: 1px dashed var(--xett); padding-bottom: 8px; }
header .kim:empty { display: none; }