/* =====================================================================
   Jaringan Jaya Solution — Corporate Website
   style.css  ·  Base styles, fonts, keyframes, hover states, responsive
   ===================================================================== */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FAF8F4;
  color: #171C26;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: #F05A28; text-decoration: none; }
a:hover { color: #C8441A; }
::selection { background: #F05A28; color: #fff; }

/* ---------- Keyframes ---------- */
@keyframes jjsKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
@keyframes jjsFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jjsScrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- Scroll-reveal (progressive enhancement; hidden only when JS is active) ---------- */
.js-enabled [data-reveal] { opacity: 0; transform: translateY(30px); }
[data-reveal].jjs-visible { opacity: 1 !important; transform: none !important; }

/* ---------- Element hover / focus states (generated from design) ---------- */
.jh0:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh1:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh2:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh3:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh4:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh5:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh6:hover { background: rgba(240,90,40,0.08); color: #F05A28; }
.jh7:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(240,90,40,0.45); color: #fff; }
.jh8:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(240,90,40,0.55); color: #fff; }
.jh9:hover { transform: translateY(-3px); background: rgba(255,255,255,0.20); color: #fff; }
.jh10:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(23,28,38,0.12); }
.jh11:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(23,28,38,0.12); }
.jh12:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(23,28,38,0.12); }
.jh13:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(23,28,38,0.12); }
.jh14:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(23,28,38,0.12); }
.jh15:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(23,28,38,0.12); }
.jh16:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(23,28,38,0.12); }
.jh17:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(23,28,38,0.12); }
.jh18:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(23,28,38,0.12); }
.jh19:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(23,28,38,0.12); }
.jh20:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh21:hover { transform: scale(1.06); }
.jh22:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh23:hover { transform: scale(1.06); }
.jh24:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh25:hover { transform: scale(1.06); }
.jh26:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh27:hover { transform: scale(1.06); }
.jh28:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh29:hover { transform: scale(1.06); }
.jh30:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.jh31:hover { transform: scale(1.06); }
.jh32:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh33:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh34:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh35:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh36:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh37:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh38:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh39:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,28,38,0.10); }
.jh40:hover { transform: translateY(-2px); color: #fff; }
.jh41:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(23,28,38,0.13); }
.jh42:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(23,28,38,0.13); }
.jh43:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(23,28,38,0.13); }
.jh44:hover { transform: scale(1.04); }
.jh45:hover { transform: scale(1.04); }
.jh46:hover { transform: scale(1.04); }
.jh47:hover { transform: scale(1.04); }
.jh48:hover { transform: scale(1.04); }
.jh49:hover { transform: scale(1.04); }
.jh50:hover { transform: scale(1.04); }
.jh51:hover { transform: scale(1.04); }
.jh52:hover { transform: scale(1.04); }
.jh53:hover { transform: scale(1.04); }
.jh54:hover { transform: scale(1.04); }
.jh55:hover { transform: scale(1.04); }
.jh56:hover { transform: scale(1.04); }
.jh57:hover { transform: scale(1.04); }
.jh58:hover { transform: scale(1.04); }
.jh59:hover { transform: scale(1.04); }
.jh60:hover { transform: scale(1.04); }
.jh61:hover { transform: scale(1.04); }
.jh62:hover { filter: grayscale(0); opacity: 1; }
.jh63:hover { filter: grayscale(0); opacity: 1; }
.jh64:hover { filter: grayscale(0); opacity: 1; }
.jh65:hover { filter: grayscale(0); opacity: 1; }
.jh66:hover { filter: grayscale(0); opacity: 1; }
.jh67:hover { filter: grayscale(0); opacity: 1; }
.jh68:hover { filter: grayscale(0); opacity: 1; }
.jh69:hover { filter: grayscale(0); opacity: 1; }
.jh70:hover { filter: grayscale(0); opacity: 1; }
.jh71:hover { filter: grayscale(0); opacity: 1; }
.jh72:hover { filter: grayscale(0); opacity: 1; }
.jh73:hover { filter: grayscale(0); opacity: 1; }
.jh74:hover { filter: grayscale(0); opacity: 1; }
.jh75:hover { filter: grayscale(0); opacity: 1; }
.jh76:hover { filter: grayscale(0); opacity: 1; }
.jh77:hover { filter: grayscale(0); opacity: 1; }
.jh78:hover { transform: translateY(-3px); color: #fff; }
.jh79:hover { transform: translateY(-3px); background: rgba(255,255,255,0.2); color: #fff; }
.jh80:focus { border: 1px solid #F05A28; }
.jh81:focus { border: 1px solid #F05A28; }
.jh82:focus { border: 1px solid #F05A28; }
.jh83:focus { border: 1px solid #F05A28; }
.jh84:focus { border: 1px solid #F05A28; }
.jh85:hover { transform: translateY(-2px); }
.jh86:hover { color: #FF7A45; }
.jh87:hover { color: #FF7A45; }
.jh88:hover { color: #FF7A45; }
.jh89:hover { color: #FF7A45; }
.jh90:hover { color: #FF7A45; }
.jh91:hover { color: #FF7A45; }
.jh92:hover { color: #FF7A45; }
.jh93:hover { color: #FF7A45; }
.jh94:hover { color: #FF7A45; }
.jh95:hover { color: #FF7A45; }
.jh96:hover { background: #F05A28; color: #fff; }

/* ---------- Gallery ---------- */
.jjs-gallery { cursor: zoom-in; }

/* ---------- Lightbox ---------- */
.jjs-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,12,18,0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; padding: 40px;
  cursor: zoom-out;
}
.jjs-lightbox.jjs-open { display: flex; }
.jjs-lightbox-img {
  width: 90%; height: 90%; border-radius: 16px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.jjs-lightbox-close {
  position: absolute; top: 18px; right: 26px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.85); font-size: 40px; line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Mobile navigation ---------- */
.jjs-menu-btn { display: none; }
.jjs-mobile-menu { display: none; }

@media (max-width: 900px) {
  .jjs-desktop-links { display: none !important; }
  .jjs-menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; margin-left: auto;
    background: none; border: none; cursor: pointer;
  }
  .jjs-menu-btn span {
    display: block; height: 2px; width: 22px; border-radius: 2px;
    background: #171C26; transition: transform .3s ease, opacity .3s ease;
  }
  .jjs-menu-btn.jjs-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .jjs-menu-btn.jjs-open span:nth-child(2) { opacity: 0; }
  .jjs-menu-btn.jjs-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .jjs-mobile-menu {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(250,248,244,0.97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
  .jjs-mobile-menu.jjs-open { opacity: 1; pointer-events: auto; }
  .jjs-mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .jjs-mobile-menu a {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 26px;
    color: #171C26;
  }
  .jjs-mobile-menu a:hover { color: #F05A28; }
  .jjs-mobile-menu .jjs-mobile-cta {
    margin-top: 10px; background: #F05A28; color: #fff;
    padding: 14px 30px; border-radius: 14px; font-size: 20px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .js-enabled [data-reveal] { opacity: 1; transform: none; }
}