/* ══════════════════════════════════════════════
   YAH Projek Pembangunan — paparan shortcode
   Diskop di bawah .yah-progress (selari dengan page Progress Pembangunan)
   ══════════════════════════════════════════════ */
.yah-progress {
  --navy:#0D1B3E; --primary:#1E3A8A;
  --gold:#C9A84C; --gold-light:#E8C96A;
  --cream:#FAF7F2;
  --green:#059669; --green-soft:rgba(5,150,105,.1);
  --amber:#D97706; --amber-soft:rgba(217,119,6,.1);
  font-family:'Poppins',sans-serif;
  color:var(--navy);
  overflow-x:hidden;
  line-height:1.5;
}
.yah-progress *,
.yah-progress *::before,
.yah-progress *::after { box-sizing:border-box !important; margin:0 !important; padding:0 !important; }
.yah-progress [hidden] { display:none !important; }
.yah-progress img { display:block;max-width:100%;height:auto;border:0 !important;border-radius:0 !important;box-shadow:none !important; }
.yah-progress a { text-decoration:none; }
.yah-progress button { font-family:'Poppins',sans-serif; }
.elementor-widget-shortcode .elementor-widget-container:has(.yp-sc) { padding:0 !important; margin:0 !important; }

/* ── CONTAINERS & BACKGROUNDS ── */
.yah-progress .wrap { max-width:76rem;margin-left:auto !important;margin-right:auto !important;padding-left:24px !important;padding-right:24px !important;position:relative;z-index:2; }
.yah-progress .sec  { padding:88px 0 !important;position:relative;overflow:hidden; }
.yah-progress .yp-bg-white { background:#fff; }
.yah-progress .yp-bg-none  { background:transparent; }
.yah-progress .yp-bg-navy  { background:var(--navy); }
.yah-progress .yp-bg-cream {
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.yah-progress .grid-bg {
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(201,168,76,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.05) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ── SECTION HEAD ── */
.yah-progress .section-label { display:inline-flex;align-items:center;gap:10px;font-size:11px !important;font-weight:700 !important;letter-spacing:.15em;text-transform:uppercase;color:var(--gold) !important; }
.yah-progress .section-label::before { content:'';display:block;width:24px;height:2px;background:var(--gold);flex-shrink:0; }
.yah-progress .sec-head { text-align:center;margin-bottom:56px !important; }
.yah-progress .sec-head .section-label { margin-bottom:16px !important; }
.yah-progress .sec-title { font-family:'Poppins',sans-serif;font-weight:900;font-size:40px !important;line-height:1.2;color:var(--navy); }
.yah-progress .sec-title span { color:var(--primary); }
.yah-progress .sec-line { width:48px;height:2px;background:var(--gold);margin:20px auto 0 !important; }
.yah-progress .sec-sub { color:#6b7280;font-size:15px !important;line-height:1.8;max-width:620px;margin:20px auto 0 !important; }
.yah-progress .yp-bg-navy .sec-title { color:#fff; }
.yah-progress .yp-bg-navy .sec-title span { color:var(--gold); }
.yah-progress .yp-bg-navy .sec-sub { color:rgba(255,255,255,.55); }
.yah-progress .yp-empty { text-align:center;color:#9ca3af;font-size:14px !important;padding:32px 0 !important; }
.yah-progress .yp-bg-navy .yp-empty { color:rgba(255,255,255,.5); }

/* ── CHIPS ── */
.yah-progress .chip { display:inline-flex;align-items:center;gap:6px;padding:6px 12px !important;border-radius:9999px;font-size:11px !important;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; }
.yah-progress .chip::before { content:'';width:7px;height:7px;border-radius:50%;background:currentColor; }
.yah-progress .chip-done { background:#ECFDF5;color:var(--green); }
.yah-progress .chip-run  { background:#FFFBEB;color:var(--amber); }
.yah-progress .chip-run::before { animation:yp-pulse 1.4s ease-in-out infinite; }
.yah-progress .chip-soon { background:#EEF2FF;color:var(--primary); }
@keyframes yp-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.5)} }

/* ── ANIMATION (hanya bila JS aktif — kekal kelihatan dalam editor Elementor) ── */
.yah-progress.yp-js .yp-anim { opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease; }
.yah-progress.yp-js .yp-anim.in { opacity:1;transform:none; }
.yah-progress .yp-anim.d1 { transition-delay:.1s; }
.yah-progress .yp-anim.d2 { transition-delay:.2s; }
.yah-progress .yp-anim.d3 { transition-delay:.3s; }

/* ── BUTTONS ── */
.yah-progress .btn-navy-sm { display:inline-flex;align-items:center;gap:6px;padding:11px 18px !important;border-radius:12px;font-weight:700;font-size:13px !important;background:var(--navy);color:#fff !important;transition:background .2s;border:none;cursor:pointer; }
.yah-progress .btn-navy-sm:hover { background:var(--primary); }
.yah-progress .btn-ghost-sm { display:inline-flex;align-items:center;gap:6px;padding:11px 18px !important;border-radius:12px;font-weight:700;font-size:13px !important;background:transparent;color:var(--navy) !important;border:1px solid rgba(13,27,62,.15) !important;cursor:pointer;transition:border-color .2s,background .2s; }
.yah-progress .btn-ghost-sm:hover { border-color:var(--gold) !important;background:rgba(201,168,76,.08); }

/* ══════════ TELAH SIAP ══════════ */
.yah-progress .done-grid { display:grid;grid-template-columns:1fr;gap:24px; }
.yah-progress .done-card { background:#fff;border-radius:24px;overflow:hidden;border:1px solid #eef0f3 !important;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease; }
.yah-progress .done-card:hover { transform:translateY(-6px);box-shadow:0 24px 56px rgba(13,27,62,.12); }
.yah-progress .done-cover { position:relative;height:220px;overflow:hidden;cursor:zoom-in;background:#e5e7eb; }
.yah-progress .done-cover img { width:100%;height:100% !important;object-fit:cover;transition:transform .7s ease; }
.yah-progress .done-card:hover .done-cover img { transform:scale(1.06); }
.yah-progress .done-cover .chip { position:absolute;top:16px;left:16px; }
.yah-progress .done-cover .yr { position:absolute;bottom:14px;right:14px;background:rgba(13,27,62,.8);color:#fff;font-size:11px !important;font-weight:700;padding:6px 10px !important;border-radius:8px; }
.yah-progress .done-body { padding:24px !important;display:flex;flex-direction:column;flex:1; }
.yah-progress .done-body h3 { font-family:'Poppins',sans-serif;font-size:18px !important;font-weight:800;line-height:1.3;color:var(--navy);margin-bottom:10px !important; }
.yah-progress .done-body p { color:#6b7280;font-size:13.5px !important;line-height:1.75; }
.yah-progress .done-meta { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px !important; }
.yah-progress .done-meta span { font-size:11.5px !important;font-weight:600;color:var(--navy);background:var(--cream);border-radius:8px;padding:6px 10px !important; }
.yah-progress .thumbs { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto !important;padding-top:20px !important; }
.yah-progress .thumbs button { position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:none;cursor:zoom-in;background:#e5e7eb; }
.yah-progress .thumbs img { width:100%;height:100% !important;object-fit:cover;transition:transform .4s ease,opacity .3s; }
.yah-progress .thumbs button:hover img { transform:scale(1.1);opacity:.85; }
.yah-progress .thumbs .more { position:absolute;inset:0;background:rgba(13,27,62,.72);color:#fff;font-weight:800;font-size:14px !important;display:flex;align-items:center;justify-content:center; }

/* ══════════ SEDANG BERJALAN ══════════ */
.yah-progress .run-list { display:grid;gap:28px; }
.yah-progress .run-card { background:#fff;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:0 10px 40px rgba(13,27,62,.06);border:1px solid #eef0f3 !important; }
.yah-progress .run-media { position:relative;min-height:280px;background:#e5e7eb;overflow:hidden;cursor:zoom-in; }
.yah-progress .run-media > img { position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;transition:transform .7s; }
.yah-progress .run-card:hover .run-media > img { transform:scale(1.05); }
.yah-progress .run-media::after { content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,62,.75),transparent 55%);pointer-events:none; }
.yah-progress .run-media .chip { position:absolute;top:18px;left:18px;z-index:2; }
.yah-progress .run-pct-big { position:absolute;bottom:18px;left:22px;z-index:2;color:#fff;font-weight:900;font-size:48px !important;line-height:1; }
.yah-progress .run-pct-big small { display:block;font-size:11px !important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:6px !important; }
.yah-progress .run-body { padding:32px 28px !important; }
.yah-progress .run-body h3 { font-family:'Poppins',sans-serif;font-size:22px !important;font-weight:900;line-height:1.25;color:var(--navy); }
.yah-progress .run-body > p { color:#6b7280;font-size:14px !important;line-height:1.75;margin-top:10px !important; }
.yah-progress .bar-wrap { margin-top:24px !important; }
.yah-progress .bar-top { display:flex;justify-content:space-between;font-size:12px !important;font-weight:700;margin-bottom:8px !important; }
.yah-progress .bar-top span:last-child { color:var(--gold); }
.yah-progress .bar { height:12px;border-radius:9999px;background:#EEF0F4;overflow:hidden;position:relative; }
.yah-progress .bar i { display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width 1.6s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden; }
.yah-progress .bar i::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:yp-shine 2.4s infinite; }
@keyframes yp-shine { to { transform:translateX(100%); } }
.yah-progress .ms { display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px !important; }
.yah-progress .ms li { list-style:none;display:flex;align-items:center;gap:10px;font-size:13px !important;color:#4b5563; }
.yah-progress .ms .ic { width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px !important;font-weight:900; }
.yah-progress .ms .ok .ic   { background:var(--green-soft);color:var(--green); }
.yah-progress .ms .now .ic  { background:var(--amber-soft);color:var(--amber); }
.yah-progress .ms .wait .ic { background:#F3F4F6;color:#9ca3af; }
.yah-progress .ms .now  { font-weight:700;color:var(--navy); }
.yah-progress .ms .wait { color:#9ca3af; }
.yah-progress .run-facts { display:grid;gap:10px;margin-top:24px !important; }
.yah-progress .run-facts div { background:var(--cream);border-radius:14px;padding:12px !important; }
.yah-progress .run-facts b { display:block;font-size:14px !important;font-weight:800; }
.yah-progress .run-facts span { font-size:11px !important;color:#9ca3af; }
.yah-progress .run-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:24px !important; }

/* ══════════ AKAN DATANG ══════════ */
.yah-progress .soon-grid { display:grid;grid-template-columns:1fr;gap:22px; }
.yah-progress .soon-card { position:relative;border-radius:24px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;cursor:zoom-in;background:#1f2a4a;border:1px solid rgba(255,255,255,.08) !important;transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.yah-progress .soon-card:hover { transform:translateY(-6px); }
.yah-progress .soon-card > img { position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;filter:grayscale(.35);transition:filter .5s,transform .7s; }
.yah-progress .soon-card:hover > img { filter:grayscale(0);transform:scale(1.05); }
.yah-progress .soon-card::before { content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(13,27,62,.98) 10%,rgba(13,27,62,.6) 50%,rgba(13,27,62,.1) 100%); }
.yah-progress .soon-top { position:absolute;top:18px;left:18px;right:18px;z-index:2;display:flex;justify-content:space-between;align-items:center; }
.yah-progress .soon-num { font-weight:900;font-size:13px !important;color:rgba(255,255,255,.5); }
.yah-progress .soon-body { position:relative;z-index:2;padding:26px !important; }
.yah-progress .soon-body .when { font-size:11px !important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); }
.yah-progress .soon-body h3 { font-family:'Poppins',sans-serif;font-size:21px !important;font-weight:900;color:#fff;line-height:1.25;margin-top:8px !important; }
.yah-progress .soon-body p { font-size:13px !important;color:rgba(255,255,255,.6);line-height:1.7;margin-top:10px !important; }
.yah-progress .soon-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:16px !important; }
.yah-progress .soon-tags span { font-size:11px !important;font-weight:600;color:var(--gold-light);background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25) !important;padding:5px 10px !important;border-radius:8px; }

/* focus untuk kad boleh klik */
.yah-progress [data-yplb]:focus-visible,
.yah-progress [data-yplb-open]:focus-visible { outline:3px solid var(--gold) !important;outline-offset:3px; }

/* ══════════ LIGHTBOX ══════════ */
.yp-lb-host .yp-lb { position:fixed;inset:0;z-index:999999;background:rgba(6,12,28,.95);display:none;align-items:center;justify-content:center;flex-direction:column; }
.yp-lb-host .yp-lb.open { display:flex;animation:yp-fade .25s ease; }
@keyframes yp-fade { from{opacity:0} to{opacity:1} }
.yp-lb-host .yp-lb-img { max-width:min(92vw,1100px);max-height:76vh;width:auto !important;height:auto !important;border-radius:14px !important;box-shadow:0 30px 80px rgba(0,0,0,.5) !important;user-select:none; }
.yp-lb-host .yp-lb-cap { color:#fff;font-size:14px !important;font-weight:600;margin-top:18px !important;text-align:center;padding:0 20px !important; }
.yp-lb-host .yp-lb-count { color:rgba(255,255,255,.45);font-size:12px !important;margin-top:6px !important; }
.yp-lb-host .yp-lb-btn { position:absolute;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:22px !important;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.yp-lb-host .yp-lb-btn:hover { background:var(--gold);color:var(--navy); }
.yp-lb-host .yp-lb-close { top:20px;right:20px; }
.yp-lb-host .yp-lb-prev { left:20px;top:50%;transform:translateY(-50%); }
.yp-lb-host .yp-lb-next { right:20px;top:50%;transform:translateY(-50%); }

/* ══════════ RESPONSIVE ══════════ */
@media(min-width:640px){
  .yah-progress .done-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .yah-progress .soon-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
  .yah-progress .ms { grid-template-columns:1fr 1fr; }
}
@media(min-width:1024px){
  .yah-progress .run-card { grid-template-columns:5fr 7fr; }
  .yah-progress .run-card.flip { grid-template-columns:7fr 5fr; }
  .yah-progress .run-card.flip .run-media { order:2; }
  .yah-progress .run-body { padding:40px !important; }
  .yah-progress .soon-card { min-height:440px; }
}
@media(max-width:767px){
  .yah-progress .sec { padding:64px 0 !important; }
  .yah-progress .sec-title { font-size:30px !important; }
  .yah-progress .run-facts b { font-size:12.5px !important; }
  .yp-lb-host .yp-lb-prev, .yp-lb-host .yp-lb-next { top:auto;bottom:24px;transform:none; }
  .yp-lb-host .yp-lb-prev { left:calc(50% - 60px); }
  .yp-lb-host .yp-lb-next { right:calc(50% - 60px); }
}
@media(prefers-reduced-motion:reduce){
  .yah-progress *, .yp-lb-host * { animation:none !important;transition:none !important; }
}