/* ============================================================
   isaxtar.com — Shared Design System
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* color */
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
  --surface:#FFFFFF;     /* kart/nav/input səthi (temaya görə dəyişir) */
  --surface-2:#F7F8FA;   /* ikincil səth */
  --navy:#1B2B4B;
  --navy-soft:#EEF1F8;
  --orange:#FF6B35;
  --orange-dark:#E55A25;
  --green:#22C55E;
  --amber:#F59E0B;
  --red:#EF4444;
  --gray:#6B7280;
  --blue:#2F6FD6;
  --text:#111827;
  --text-2:#6B7280;
  --border:#E5E7EB;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-hover:0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:0 10px 40px rgba(17,24,39,.16);

  /* spacing */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;

  /* radius (yumşaq) */
  --r-card:16px; --r-btn:10px; --r-input:10px; --r-pill:20px;

  /* type */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Qaranlıq tema ---------- */
[data-theme="dark"]{
  --bg:#0F141C;
  --bg-soft:#161D29;
  --surface:#161D29;
  --surface-2:#1E2733;
  --navy:#0E1622;        /* footer/hero üçün daha tünd fon */
  --navy-soft:#1A2333;
  --text:#E6EAF2;
  --text-2:#9AA6B8;
  --border:#28323F;
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --shadow-hover:0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 12px 44px rgba(0,0,0,.6);
}
/* Qaranlıqda navy-mətn istifadələri oxunaqlı qalsın */
[data-theme="dark"] .logo-mark{ color:var(--text); }
[data-theme="dark"] .chip{ color:var(--text); }
[data-theme="dark"] .company-logo{ color:var(--text); }
[data-theme="dark"] .nav-burger{ color:var(--text); }
[data-theme="dark"] .badge-navy{ background:var(--navy-soft); color:var(--text); }
[data-theme="dark"] .btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .btn-secondary:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }
[data-theme="dark"] .skeleton{ background:#1c2532; background-image:linear-gradient(90deg,#1c2532 0,#26303f 40px,#1c2532 80px); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.2; color:var(--text); }
h1{ font-size:32px; font-weight:700; }
h2{ font-size:24px; font-weight:700; }
h3{ font-size:20px; font-weight:600; }
p{ margin:0; }
.muted{ color:var(--text-2); }
.small{ font-size:14px; }
.center{ text-align:center; }

/* ---------- Layout helpers ---------- */
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:1100px; margin:0 auto; padding:0 24px; }
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap1{ gap:8px; } .gap2{ gap:16px; } .gap3{ gap:24px; } .gap4{ gap:32px; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }
.between{ justify-content:space-between; }
.acenter{ align-items:center; }
.section{ padding:64px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; line-height:1;
  padding:12px 24px; border-radius:var(--r-btn);
  border:1.5px solid transparent; transition:.15s ease; white-space:nowrap;
}
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-dark); }
.btn-secondary{ background:var(--surface); color:var(--navy); border-color:var(--navy); }
.btn-secondary:hover{ background:var(--navy); color:#fff; }
.btn-ghost{ background:transparent; color:var(--text); }
.btn-ghost:hover{ background:var(--bg-soft); }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 28px; font-size:16px; height:48px; }
.btn-sm{ padding:8px 16px; font-size:14px; }
.btn:disabled,.btn-disabled{ background:#D1D5DB; color:#9CA3AF; border-color:transparent; cursor:not-allowed; }

/* ---------- Inputs ---------- */
.input,select.input,textarea.input{
  width:100%; height:44px; padding:12px 16px;
  border:1.5px solid var(--border); border-radius:var(--r-input);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:15px;
  transition:border-color .15s ease;
}
textarea.input{ height:auto; min-height:120px; resize:vertical; line-height:1.6; }
.input::placeholder{ color:#9CA3AF; }
.input:focus{ outline:none; border-color:var(--navy); }
.field-label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text); }
.field{ margin-bottom:16px; }
.input-icon{ position:relative; }
.input-icon .input{ padding-left:42px; }
.input-icon .lead{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9CA3AF; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.card-pad{ padding:24px; }
.card-hover{ transition:box-shadow .18s ease, transform .18s ease; }
.card-hover:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }

/* ---------- Badges / chips / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; padding:4px 12px; border-radius:var(--r-pill);
  background:#F3F4F6; color:var(--gray);
}
.badge-green{ background:rgba(34,197,94,.12); color:#15803D; }
.badge-blue{ background:rgba(47,111,214,.12); color:#1D4ED8; }
.badge-amber{ background:rgba(245,158,11,.14); color:#B45309; }
.badge-red{ background:rgba(239,68,68,.12); color:#B91C1C; }
.badge-gray{ background:#F3F4F6; color:var(--gray); }
.badge-navy{ background:var(--navy-soft); color:var(--navy); }
.badge-orange{ background:rgba(255,107,53,.14); color:var(--orange-dark); }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:500; padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--navy); border:1.5px solid var(--border);
  transition:.15s ease; cursor:pointer;
}
.chip:hover{ border-color:var(--orange); color:var(--orange-dark); }
.chip.active{ background:var(--orange); color:#fff; border-color:var(--orange); }

/* ---------- Logo / avatar ---------- */
.logo-mark{ font-weight:800; font-size:22px; letter-spacing:-.3px; color:var(--navy); display:inline-flex; align-items:center; gap:9px; }
.logo-mark .ic{ width:34px; height:34px; border-radius:11px; background:linear-gradient(140deg, #2F6FD6 0%, #1B2B4B 78%); display:inline-grid; place-items:center; box-shadow:0 4px 14px rgba(47,111,214,.38); position:relative; overflow:hidden; }
.logo-mark .ic::after{ content:''; position:absolute; top:-45%; left:-30%; width:85%; height:85%; background:radial-gradient(circle, rgba(255,255,255,.40), transparent 70%); pointer-events:none; }
.logo-mark .ic svg{ position:relative; z-index:1; }
.brand-accent{ color:var(--orange); }
/* PNG loqo (asset gələndə .ic glyph yerinə işlədilir) */
.logo-img{ width:34px; height:34px; border-radius:11px; object-fit:contain; display:block; }
.footer .logo-img{ }
/* SVG ikon + birləşik söz loqo */
.logo-mark{ gap:9px; }
.logo-ic{ width:30px !important; height:30px !important; max-width:30px; max-height:30px; border-radius:8px; display:block; flex:none; object-fit:contain; }
@media(max-width:680px){ .logo-ic{ width:26px !important; height:26px !important; } }
.logo-word{ white-space:nowrap; }   /* İşAxtar birlikdə */
.nav-auth{ display:inline-flex; align-items:center; gap:10px; }

/* ---------- Nav utility: tema toggle + dil seçici ---------- */
.theme-toggle{
  width:38px; height:38px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text); display:inline-grid; place-items:center;
  transition:.15s ease; flex:none;
}
.theme-toggle:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-1px); }
.lang-select{
  height:38px; padding:0 30px 0 12px; border:1.5px solid var(--border); border-radius:10px;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239AA6B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5 6 7.5 9 4.5'/></svg>") no-repeat right 10px center;
  color:var(--text); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  -webkit-appearance:none; appearance:none; transition:.15s ease; flex:none;
}
.lang-select:hover{ border-color:var(--orange); }
.lang-select:focus{ outline:none; border-color:var(--navy); }
.nav-util{ display:flex; align-items:center; gap:8px; }
@media(max-width:860px){ .nav-util{ display:none; } }
.mobile-menu .mobile-util{ display:flex; gap:12px; align-items:center; padding:14px 8px 4px; border-bottom:none; }

/* ---------- Modern select (choose) oxu ---------- */
select.input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%239AA6B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:38px; cursor:pointer;
}
select.input::-ms-expand{ display:none; }

/* ---------- Modern scrollbarlar (filtr siyahıları + bütün sayt) ---------- */
*{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:2px solid var(--surface); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-2); background-clip:padding-box; border:2px solid var(--surface); }
/* filtr siyahıları üçün daha incə */
#fCategory::-webkit-scrollbar, #fCity::-webkit-scrollbar, #fMode::-webkit-scrollbar{ width:7px; }
#fCategory, #fCity, #fMode{ scrollbar-width:thin; padding-right:4px; }
.avatar{ border-radius:50%; background:var(--bg-soft); border:1px solid var(--border); object-fit:cover; display:grid; place-items:center; color:var(--gray); font-weight:600; flex:none; }
.company-logo{ width:48px; height:48px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--border); display:grid; place-items:center; font-weight:700; color:var(--navy); flex:none; }

/* ---------- Top navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:64px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.nav-in{ height:100%; max-width:1240px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; }
.nav-links{ display:flex; gap:28px; margin:0 auto; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--text); padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:var(--orange-dark); }
.nav-links a.active{ color:var(--orange); border-bottom-color:var(--orange); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-burger{ display:none; background:none; border:none; font-size:22px; color:var(--navy); }

@media(max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-cta .btn{ padding:8px 14px; font-size:14px; }
}

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#fff; padding:56px 0 0; margin-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.footer a,.footer p,.footer li{ color:#9CA3AF; font-size:14px; }
.footer a:hover{ color:#fff; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer .brand-desc{ max-width:300px; line-height:1.7; margin-top:12px; }
.footer .logo-mark{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:grid; place-items:center; color:#fff; }
.footer-social a:hover{ background:rgba(255,255,255,.12); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); margin-top:40px; padding:20px 0; text-align:center; font-size:13px; color:#9CA3AF; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Job card ---------- */
.job-card{ display:flex; flex-direction:column; gap:12px; padding:20px; }
.job-card .top{ display:flex; align-items:flex-start; gap:12px; }
.job-card .company{ font-size:14px; color:var(--text-2); }
.job-card .title{ font-size:18px; font-weight:700; color:var(--text); }
.job-card .title:hover{ color:var(--orange-dark); }
.job-card .meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--text-2); }
.job-card .salary{ color:#15803D; font-weight:600; font-size:15px; }
.job-card .foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; border-top:1px solid var(--border); margin-top:2px; }
.bookmark{ background:none; border:none; color:var(--text-2); font-size:20px; line-height:1; padding:2px; transition:.15s; }
.bookmark:hover{ color:var(--orange); }
.bookmark.on{ color:var(--orange); }
.bookmark.on svg{ fill:currentColor; }

/* ---------- Checkboxes / radios ---------- */
.check{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:15px; color:var(--text); cursor:pointer; }
/* Modern seçim qutuları (checkbox / radio) */
.check input[type=checkbox], .check input[type=radio]{
  -webkit-appearance:none; appearance:none; flex:none;
  width:19px; height:19px; margin:0; border:1.5px solid var(--border);
  background:var(--surface); position:relative; cursor:pointer; transition:.15s ease;
}
.check input[type=checkbox]{ border-radius:6px; }
.check input[type=radio]{ border-radius:50%; }
.check input:hover{ border-color:var(--orange); }
.check input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,53,.25); }
.check input[type=checkbox]:checked{ background:var(--orange); border-color:var(--orange); }
.check input[type=checkbox]:checked::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.check input[type=radio]:checked{ border-color:var(--orange); }
.check input[type=radio]:checked::after{
  content:''; position:absolute; left:50%; top:50%; width:9px; height:9px;
  border-radius:50%; background:var(--orange); transform:translate(-50%,-50%);
}

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tabs button{ background:none; border:none; padding:12px 18px; font-size:15px; font-weight:600; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.active{ color:var(--orange); border-bottom-color:var(--orange); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.pill-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.pill-tabs button{ background:var(--surface); border:1.5px solid var(--border); color:var(--text-2); padding:7px 16px; border-radius:var(--r-pill); font-size:14px; font-weight:600; }
.pill-tabs button.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------- Dashboard shell ---------- */
.dash{ display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 64px); }
.dash-side{ background:var(--surface); border-right:1px solid var(--border); padding:24px 16px; position:sticky; top:64px; height:calc(100vh - 64px); overflow:auto; }
.dash-main{ padding:32px; background:var(--bg-soft); }
.side-menu{ display:flex; flex-direction:column; gap:4px; margin-top:24px; }
.side-menu a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-btn); font-size:15px; font-weight:500; color:var(--text); }
.side-menu a:hover{ background:var(--bg-soft); }
.side-menu a.active{ background:var(--orange); color:#fff; }
.side-menu a.danger{ color:var(--red); margin-top:8px; }
.side-menu a.danger:hover{ background:rgba(239,68,68,.08); }
@media(max-width:860px){
  .dash{ grid-template-columns:1fr; }
  .dash-side{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--border); }
  .side-menu{ flex-direction:row; flex-wrap:wrap; }
  .dash-main{ padding:20px; }
}

/* ---------- Stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card{ text-align:center; padding:24px; }
.stat-card .num{ font-size:32px; font-weight:700; color:var(--orange); }
.stat-card .lbl{ font-size:14px; color:var(--text-2); margin-top:4px; }
@media(max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ text-align:left; padding:14px 16px; color:var(--text-2); font-weight:600; border-bottom:1px solid var(--border); background:var(--bg-soft); white-space:nowrap; }
.tbl td{ padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:hover td{ background:var(--bg-soft); }
.icon-btn{ width:32px; height:32px; border:1px solid var(--border); border-radius:6px; background:var(--surface); display:inline-grid; place-items:center; font-size:14px; color:var(--text-2); }
.icon-btn:hover{ background:var(--bg-soft); color:var(--text); }

/* ---------- Modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.overlay.open{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow-lg); width:100%; max-width:480px; max-height:90vh; overflow:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); }
.modal-body{ padding:24px; }
.modal-close{ background:none; border:none; font-size:22px; color:var(--text-2); line-height:1; }

/* ---------- Upload zone ---------- */
.upload{ border:2px dashed var(--border); border-radius:var(--r-card); padding:28px; text-align:center; color:var(--text-2); transition:.15s; }
.upload:hover{ border-color:var(--orange); background:var(--bg-soft); }

/* ---------- Divider with text ---------- */
.divider{ display:flex; align-items:center; gap:14px; color:var(--text-2); font-size:14px; margin:18px 0; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* ---------- Utility ---------- */
.hidden{ display:none !important; }
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; }
.dot-sep::before{ content:'·'; margin:0 8px; color:var(--border); }

/* ---------- Icon system ---------- */
[data-ic]{ display:inline-flex; align-items:center; justify-content:center; line-height:0; flex:none; }
[data-ic] svg{ display:block; }
/* inline-with-text icons (meta rows, links) sit on the text baseline */
.ic-text [data-ic], .meta [data-ic], .salary [data-ic]{ vertical-align:-.18em; }
.meta [data-ic]{ color:var(--text-2); }
.logo-mark .ic [data-ic]{ color:#fff; }
.footer .logo-mark .ic{ background:rgba(255,255,255,.14); }
.side-menu a [data-ic], .admin-menu a [data-ic]{ width:20px; }
.nav-cta [data-ic]{ }

/* ---------- Modern polish ---------- */
.btn-primary{ box-shadow:0 1px 2px rgba(255,107,53,.25); }
.btn-primary:hover{ box-shadow:0 6px 18px rgba(255,107,53,.32); transform:translateY(-1px); }
.btn{ transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.btn:active{ transform:translateY(0); }

/* nicer focus rings for accessibility */
.input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(27,43,75,.12); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,53,.35); }
a:focus-visible, button:focus-visible, .chip:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* hero — layered mesh + grid for a cooler, premium feel */
.hero-bg{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(900px 360px at 15% -10%, rgba(255,107,53,.22), transparent 60%),
    radial-gradient(800px 380px at 100% 120%, rgba(47,111,214,.28), transparent 55%),
    var(--navy);
}
.hero-bg::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 75%);
}
.search-bar{ box-shadow:0 18px 50px -12px rgba(0,0,0,.4); }

/* chips with icons get a soft hover lift */
.chip{ transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease; }
.chip:hover{ transform:translateY(-1px); }

/* card-hover refinement */
.card{ transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card-hover:hover{ border-color:#D8DEE8; }

/* stat numbers — subtle gradient text */
.stat-card .num, .hero-stat .num{ background:linear-gradient(135deg, var(--orange), #ff8a5c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* section heading accent underline */
.heading-accent{ position:relative; display:inline-block; }
.heading-accent::after{ content:''; position:absolute; left:0; bottom:-10px; width:44px; height:4px; border-radius:4px; background:var(--orange); }

/* ---------- Mobile menu drawer ---------- */
.mobile-menu{ display:none; position:fixed; inset:64px 0 0; background:var(--surface); z-index:49; padding:24px; flex-direction:column; gap:8px; animation:kr-fade .2s ease; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:14px 8px; font-size:18px; font-weight:600; border-bottom:1px solid var(--border); }

/* ============================================================
   PROFESSIONAL POLISH — motion, micro-interactions, responsive
   ============================================================ */

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- Keyframes ---------- */
@keyframes kr-fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes kr-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kr-pop{ 0%{ opacity:0; transform:scale(.96) translateY(8px); } 100%{ opacity:1; transform:none; } }
@keyframes kr-spin{ to{ transform:rotate(360deg); } }
@keyframes kr-shimmer{ 0%{ background-position:-468px 0; } 100%{ background-position:468px 0; } }
@keyframes kr-heart{ 0%{ transform:scale(1); } 35%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
@keyframes kr-toast-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes kr-bar{ from{ transform:scaleY(.001); } to{ transform:scaleY(1); } }

/* ---------- Reveal-on-scroll (JS toggles .in) ---------- */
.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.16,.84,.44,1), transform .55s cubic-bezier(.16,.84,.44,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Entrance helpers ---------- */
.intro{ animation:kr-fade-up .6s both cubic-bezier(.16,.84,.44,1); }
.intro-2{ animation:kr-fade-up .6s .08s both cubic-bezier(.16,.84,.44,1); }
.intro-3{ animation:kr-fade-up .6s .16s both cubic-bezier(.16,.84,.44,1); }
/* dynamic lists: children fade-up as they render (stagger via --i set by JS) */
.stagger > *{ animation:kr-fade-up .5s both cubic-bezier(.16,.84,.44,1); animation-delay:calc(var(--i,0) * 50ms); }
/* tab panels animate when shown */
.tab-panel.active, [data-panel].active{ animation:kr-fade-up .38s both cubic-bezier(.16,.84,.44,1); }

/* ---------- Bookmark heart pop ---------- */
.bookmark.pop{ animation:kr-heart .42s ease; }

/* ---------- Spinners & button loading ---------- */
.spinner{ width:18px; height:18px; border:2.5px solid rgba(27,43,75,.2); border-top-color:var(--navy);
  border-radius:50%; animation:kr-spin .7s linear infinite; display:inline-block; }
.btn.loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn.loading::after{ content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2.5px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%; animation:kr-spin .7s linear infinite; }
.btn-secondary.loading::after, .btn-ghost.loading::after{ border-color:rgba(27,43,75,.25); border-top-color:var(--navy); }

/* ---------- Skeleton loaders ---------- */
.skeleton{ background:#eef0f3;
  background-image:linear-gradient(90deg,#eef0f3 0px,#f6f7f9 40px,#eef0f3 80px); background-size:600px;
  border-radius:8px; animation:kr-shimmer 1.2s infinite linear; color:transparent !important; }

/* ---------- Modal / overlay motion ---------- */
.overlay{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.overlay.open{ animation:kr-fade .22s ease; }
.overlay.open .modal{ animation:kr-pop .3s cubic-bezier(.16,.84,.44,1); }

/* ---------- Toast notifications ---------- */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:min(360px,92vw); }
.toast{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:13px 16px; font-size:14px; font-weight:500; color:var(--text);
  display:flex; gap:10px; align-items:flex-start; animation:kr-toast-in .3s cubic-bezier(.16,.84,.44,1); }
.toast .tc{ flex:none; display:inline-flex; }
.toast.success{ border-left-color:var(--green); } .toast.success .tc{ color:var(--green); }
.toast.error{ border-left-color:var(--red); } .toast.error .tc{ color:var(--red); }
.toast.info{ border-left-color:var(--blue); } .toast.info .tc{ color:var(--blue); }
.toast.hide{ opacity:0; transform:translateY(8px); transition:.3s ease; }

/* ---------- Nav: shadow once scrolled ---------- */
.nav{ transition:box-shadow .2s ease; }
.nav.scrolled{ box-shadow:0 6px 24px rgba(17,24,39,.07); }

/* nav links: animated underline */
.nav-links a{ position:relative; }
.nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
  background:var(--orange); transition:right .22s ease; }
.nav-links a:hover::after{ right:0; }
.nav-links a.active::after{ right:0; }

/* dashboard side-menu hover slide */
.side-menu a{ transition:background .15s ease, color .15s ease, transform .15s ease; }
.side-menu a:hover{ transform:translateX(3px); }

/* chart bars grow in */
.chart-bar{ transform-origin:bottom; animation:kr-bar .6s both cubic-bezier(.16,.84,.44,1); }

/* image / avatar subtle */
.company-logo, .avatar{ transition:transform .18s ease; }
.card-hover:hover .company-logo{ transform:scale(1.05); }

/* ============================================================
   RESPONSIVE — global breakpoints
   ============================================================ */
@media(max-width:1024px){
  .container,.container-narrow{ padding:0 20px; }
}
@media(max-width:760px){
  h1{ font-size:clamp(24px,7vw,30px); }
  h2{ font-size:21px; } h3{ font-size:18px; }
  .section{ padding:44px 0; }
  .container,.container-narrow{ padding:0 16px; }
  .card-pad{ padding:18px; }
  .modal-body{ padding:18px; } .modal-head{ padding:16px 18px; }
  .footer{ padding:40px 0 0; } .footer-bottom{ margin-top:28px; }
  .toast-wrap{ right:12px; left:12px; bottom:12px; max-width:none; }
  /* hero search: stack inputs full-width */
  .search-bar{ flex-direction:column; align-items:stretch !important; }
  .search-bar > *{ max-width:none !important; width:100%; }
}
@media(max-width:520px){
  .btn-lg{ padding:12px 20px; font-size:15px; height:46px; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .pill-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .pill-tabs button{ flex:none; }
  .tabs{ overflow-x:auto; }
  .tabs button{ white-space:nowrap; }
}

/* ============================================================
   MOBİL KOMPAKT — sıx boşluqlar, kiçik kartlar, yığılan filtr
   ============================================================ */
.filters-mobile-btn{ display:none; }

@media(max-width:920px){
  /* mobil-də filtr paneli yığıla bilir */
  .filters-mobile-btn{ display:inline-flex; }
  .listings-grid aside.collapsed{ display:none; }
  .listings-grid aside{ margin-bottom:4px; }
}

@media(max-width:680px){
  body{ font-size:15px; }
  .section{ padding:30px 0; }
  .container,.container-narrow{ padding:0 14px; }
  .card-pad{ padding:15px; }
  .gap3{ gap:14px; } .gap4{ gap:18px; }

  /* nav daha alçaq */
  .nav{ height:56px; }
  .nav-in{ padding:0 14px; gap:10px; }
  .logo-mark{ font-size:18px; }
  .mobile-menu{ inset:56px 0 0; padding:16px; }
  .mobile-menu a{ padding:12px 6px; font-size:16px; }

  /* hero kompakt (inline padding-i əvəz edir) */
  .hero-bg{ padding:34px 0 30px !important; }
  .hero-bg h1{ margin:0; }
  .search-bar{ margin-top:20px !important; padding:10px !important; gap:8px !important; }

  /* iş kartları sıx */
  .job-card{ padding:13px; gap:8px; }
  .job-card .top{ gap:10px; }
  .job-card .title{ font-size:15.5px; }
  .job-card .company{ font-size:12.5px; }
  .job-card .meta{ font-size:13px; gap:7px; }
  .job-card .salary{ font-size:14px; }
  .job-card .foot{ padding-top:8px; }
  .company-logo{ width:40px; height:40px; }
  .cards-grid{ gap:10px !important; }
  .listings-grid{ gap:14px !important; }

  /* badge / chip / düymə sıx */
  .badge{ font-size:12px; padding:3px 9px; }
  .chip{ font-size:13px; padding:6px 12px; }
  .btn{ padding:10px 16px; font-size:14px; }
  .btn-sm{ padding:7px 12px; font-size:13px; }
  .btn-lg{ height:44px; padding:11px 18px; font-size:15px; }

  /* statistika kartları + stat-strip */
  .stat-card{ padding:16px; } .stat-card .num{ font-size:24px; }
  .stats-strip{ padding:16px 8px !important; gap:0 !important; }
  .stats-strip-item{ padding:0 14px !important; }
  .stats-strip-item > div:first-child{ font-size:23px !important; }
  .stats-strip-item .small{ font-size:12px; }

  /* dashboard sıx */
  .dash-main{ padding:14px; }
  .dash-side{ padding:14px; }
  .side-menu a{ padding:10px 12px; font-size:14px; }

  /* cədvəllər sıx */
  .tbl th,.tbl td{ padding:10px 9px; font-size:13px; }

  /* kart-grid aralıqları */
  .saved-grid,.similar-grid{ gap:10px !important; }
  .footer{ padding:30px 0 0; } .footer h4{ margin-bottom:10px; }
  .footer ul{ gap:7px; }
}

@media(max-width:400px){
  .container,.container-narrow{ padding:0 11px; }
  .card-pad{ padding:13px; }
  .job-card{ padding:11px; }
  .stat-card .num{ font-size:22px; }
  .stats-strip-item{ padding:0 10px !important; }
  .nav-cta .btn{ padding:7px 11px; font-size:13px; }
}