/*
Theme Name: Job
Author: zeo
Description: WordPress Theme moden dengan gaya SaaS, Bento Grid, dan Architectural Design menggunakan Tailwind CSS.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: job
*/


/* ===============================
   EDB COMPONENT SYSTEM v1
================================ */
:root{
  --edb-ink:#000000;
  --edb-white:#ffffff;
  --edb-zinc-50:#fafafa;
  --edb-zinc-100:#f4f4f5;
  --edb-zinc-200:#e4e4e7;
  --edb-zinc-300:#d4d4d8;
  --edb-zinc-400:#a1a1aa;
  --edb-zinc-500:#71717a;
  --edb-zinc-600:#52525b;
  --edb-zinc-700:#3f3f46;
  --edb-zinc-800:#27272a;
  --edb-zinc-900:#18181b;
  --edb-accent:#4f46e5;
  --edb-radius-card:2rem;
  --edb-radius-card-lg:2.5rem;
  --edb-shadow-soft:0 18px 50px -24px rgba(0,0,0,.10);
  --edb-shadow-lift:0 24px 60px -24px rgba(0,0,0,.12);
}

.edb-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--edb-radius-card);
  transition:all .45s cubic-bezier(.16,1,.3,1);
}
.edb-card:hover{
  border-color:rgba(0,0,0,.14);
  box-shadow:var(--edb-shadow-lift);
  transform:translateY(-3px);
}
.edb-card--soft:hover{
  transform:translateY(-2px);
  box-shadow:var(--edb-shadow-soft);
}
.edb-card--dark{
  background:linear-gradient(180deg, #18181b 0%, #000000 100%);
  border-color:rgba(255,255,255,.08);
  color:#fff;
}
.edb-card--flat:hover{
  transform:none;
  box-shadow:none;
}

.edb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.95rem 1.5rem;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.edb-btn--primary{
  background:#000;
  color:#fff;
  border:1px solid #000;
}
.edb-btn--primary:hover{
  background:#18181b;
  border-color:#18181b;
}
.edb-btn--secondary{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.10);
}
.edb-btn--secondary:hover{
  border-color:rgba(0,0,0,.22);
  background:#fafafa;
}
.edb-btn--ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
.edb-btn--ghost:hover{
  background:rgba(255,255,255,.16);
}

.edb-kicker{
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.30em;
  color:var(--edb-zinc-400);
}
.edb-kicker--accent{
  color:var(--edb-accent);
}
.edb-section-title{
  color:var(--edb-ink);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.05em;
  line-height:.98;
}
.edb-meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--edb-zinc-400);
}
.edb-body-muted{
  color:var(--edb-zinc-500);
  line-height:1.85;
}
.edb-stack-sm > * + *{ margin-top:.75rem; }
.edb-stack-md > * + *{ margin-top:1rem; }
.edb-stack-lg > * + *{ margin-top:1.5rem; }

.edb-divider{ border-color: rgba(0,0,0,.08); }

@media (max-width: 768px){
  .edb-btn{
    padding:.9rem 1.25rem;
    letter-spacing:.14em;
  }
}

/* =========================================================
   S5 PERFORMANCE + CSS CONSOLIDATION
   Shared tokens and reusable UI primitives
========================================================= */
:root{
  --edb-black:#000000;
  --edb-white:#ffffff;
  --edb-zinc-50:#fafafa;
  --edb-zinc-100:#f4f4f5;
  --edb-zinc-200:#e4e4e7;
  --edb-zinc-300:#d4d4d8;
  --edb-zinc-400:#a1a1aa;
  --edb-zinc-500:#71717a;
  --edb-zinc-600:#52525b;
  --edb-zinc-700:#3f3f46;
  --edb-zinc-800:#27272a;
  --edb-zinc-900:#18181b;
  --edb-accent:#4F46E5;
  --edb-radius-sm:16px;
  --edb-radius-md:24px;
  --edb-radius-lg:32px;
  --edb-shadow-card:0 18px 50px -24px rgba(0,0,0,.10);
  --edb-shadow-hover:0 24px 60px -24px rgba(0,0,0,.12);
  --edb-border-soft:1px solid rgba(0,0,0,.08);
  --edb-transition:cubic-bezier(.16,1,.3,1);
}

.edb-card,
.saas-card,
.card-soft,
.bento-card,
.edb-related-card{
  background:#fff;
  border:var(--edb-border-soft);
  transition:transform .45s var(--edb-transition), box-shadow .45s var(--edb-transition), border-color .45s var(--edb-transition), background-color .25s ease, color .25s ease;
  box-shadow:none;
}

.edb-card:hover,
.saas-card:hover,
.card-soft:hover,
.bento-card:hover,
.edb-related-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,0,0,.14);
  box-shadow:var(--edb-shadow-hover);
}

.edb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:all .25s ease;
}

.edb-btn--primary{
  background:#000;
  color:#fff;
  border:1px solid #000;
}

.edb-btn--primary:hover{
  background:#27272a;
  border-color:#27272a;
}

.edb-btn--secondary{
  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.10);
}

.edb-btn--secondary:hover{
  border-color:rgba(0,0,0,.2);
  background:#fafafa;
}

.edb-kicker{
  font-size:10px;
  font-weight:900;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--edb-zinc-400);
}

.edb-section-title{
  font-size:clamp(1.75rem, 4vw, 3rem);
  line-height:.98;
  font-weight:900;
  letter-spacing:-.05em;
  color:#000;
}

.edb-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--edb-zinc-400);
}

.edb-body-muted{
  color:var(--edb-zinc-500);
}

.edb-shell{
  max-width:80rem;
  margin-inline:auto;
}

@media (max-width:768px){
  .edb-card:hover,
  .saas-card:hover,
  .card-soft:hover,
  .bento-card:hover,
  .edb-related-card:hover{
    transform:none;
    box-shadow:var(--edb-shadow-card);
  }
}