/* ============================================================
   pages.css — styling tambahan khusus struktur MULTI-PAGE
   (prototype Fase 1). Tidak mengubah site.css hasil ekstrak.
   ============================================================ */

/* ---- Page hero kecil (dipakai Services/Work/About/Contact/Case) ---- */
.page-hero{padding:150px 0 60px;border-bottom:1px solid var(--line-06);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 60% at 75% 20%, rgba(245,144,37,.07), transparent 60%);pointer-events:none}
.page-hero .inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:1}
.page-hero h1{font-size:clamp(38px,5vw,72px);margin-top:18px;max-width:1000px}
.page-hero .lead{margin-top:22px;max-width:720px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-1);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted-2);transition:color .3s var(--ease-soft)}
.crumb a:hover{color:var(--orange)}
.crumb .sep{color:var(--line-20)}

/* ---- CASE STUDY detail ---- */
.cs-wrap{padding:56px 0 120px;background:var(--ink-1)}
.cs-inner{max-width:1100px;margin:0 auto;padding-inline:var(--gutter)}
.cs-figure{border-radius:24px;overflow:hidden;border:1px solid var(--line-10);margin-bottom:48px;
  background:var(--ink-3);aspect-ratio:16/9}
.cs-figure img{width:100%;height:100%;object-fit:cover;display:block}
.cs-grid{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
@media(max-width:860px){.cs-grid{grid-template-columns:1fr;gap:32px}}
.cs-body p{font-size:clamp(15px,1.05vw,17px);line-height:1.8;color:var(--muted-2)}
.cs-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:24px}
.cs-side .box{background:var(--ink-2);border:1px solid var(--line-06);border-radius:18px;padding:24px}
.cs-side .box h4{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-1);margin-bottom:14px}
.cs-services{display:flex;flex-wrap:wrap;gap:8px}
.cs-services span{font-size:12.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-14);
  color:var(--muted-3);background:rgba(255,255,255,.02)}
.cs-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted-2);margin-top:8px;transition:color .3s}
.cs-back:hover{color:var(--orange)}
.cs-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;
  background:var(--orange);color:var(--ink-0);font-weight:500;font-size:14px;transition:all .4s var(--ease-soft)}
.cs-cta:hover{background:var(--orange-2);transform:translateY(-2px)}

/* ---- Featured work strip (Home) + CTA band ---- */
.cta-band{padding:110px 0;text-align:center;background:var(--ink-1);border-top:1px solid var(--line-06);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%, rgba(245,144,37,.08), transparent 60%);pointer-events:none}
.cta-band .inner{max-width:820px;margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:1}
.cta-band h2{font-size:clamp(32px,4.4vw,60px)}
.cta-band p{margin:20px auto 36px;max-width:560px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer link antar halaman */
.footer-nav a{color:var(--muted-2);transition:color .3s}
.footer-nav a:hover{color:var(--orange)}

/* ---- Featured work (Home) ---- */
.feat{padding:120px 0;background:var(--ink-0);border-top:1px solid var(--line-06)}
.feat .inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.feat-head h2{font-size:clamp(30px,3.6vw,52px)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}
.feat-card{border:1px solid var(--line-06);border-radius:20px;overflow:hidden;background:var(--ink-2);
  transition:border-color .5s var(--ease-slow), transform .5s var(--ease-slow)}
.feat-card:hover{border-color:rgba(245,144,37,.4);transform:translateY(-6px)}
.feat-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.feat-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-slow)}
.feat-card:hover .thumb img{transform:scale(1.05)}
.feat-card .meta{padding:22px 24px 26px}
.feat-card .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-1)}
.feat-card h3{font-size:22px;margin-top:8px}
.feat-card .arr{color:var(--orange);font-size:14px;margin-top:14px;display:inline-flex;gap:6px;align-items:center}

/* ---- PRODUCTS landing ---- */
.prod-wrap{padding:70px 0 120px;background:var(--ink-1)}
.prod-inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.prod-grid{grid-template-columns:1fr}}
.prod-card{display:flex;flex-direction:column;gap:16px;padding:36px 34px;border-radius:22px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-3));border:1px solid var(--line-06);
  transition:border-color .6s var(--ease-slow),transform .6s var(--ease-slow),box-shadow .6s var(--ease-slow)}
.prod-card:hover{border-color:rgba(245,144,37,.4);transform:translateY(-6px);box-shadow:0 40px 100px -40px var(--orange-glow)}
.prod-ico{width:54px;height:54px;border-radius:14px;background:rgba(245,144,37,.10);border:1px solid rgba(245,144,37,.30);
  display:flex;align-items:center;justify-content:center}
.prod-ico svg{width:26px;height:26px;stroke:var(--orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.prod-card h3{font-size:26px}
.prod-card .tag{color:var(--muted-2);font-size:15px;line-height:1.55}
.prod-card .mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.prod-card .mini span{font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-10);color:var(--muted-2)}
.prod-card .go{margin-top:auto;color:var(--orange);font-size:14px;display:inline-flex;align-items:center;gap:8px;padding-top:8px}

/* ---- PRODUCT detail: features ---- */
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:720px){.feature-list{grid-template-columns:1fr}}
.feature-list .f{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;
  background:var(--ink-2);border:1px solid var(--line-06)}
.feature-list .f .chk{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(245,144,37,.12);
  border:1px solid rgba(245,144,37,.3);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:12px;margin-top:2px}
.feature-list .f .txt{font-size:14.5px;color:var(--muted-3);line-height:1.5}
.prod-hero-ico{width:64px;height:64px;border-radius:16px;background:rgba(245,144,37,.10);border:1px solid rgba(245,144,37,.30);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.prod-hero-ico svg{width:32px;height:32px;stroke:var(--orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- DEMO PRODUK ---- */
.hero-cta-row2{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.demo-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  background:var(--orange);color:var(--ink-0);font-weight:600;font-size:14.5px;transition:all .4s var(--ease-soft)}
.demo-btn:hover{background:var(--orange-2);transform:translateY(-2px);box-shadow:0 18px 44px -16px var(--orange-glow)}
.demo-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-0);box-shadow:0 0 0 4px rgba(10,10,10,.25)}
.ghost-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border:1px solid var(--line-14);color:#fff;border-radius:999px;font-size:14px;transition:all .4s var(--ease-soft)}
.ghost-btn:hover{border-color:#fff;background:rgba(255,255,255,.03)}
.demo-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);border:1px solid rgba(245,144,37,.3);background:rgba(245,144,37,.08);
  padding:5px 10px;border-radius:999px}
.demo-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:demopulse 1.8s infinite}
@keyframes demopulse{0%,100%{opacity:1}50%{opacity:.35}}
/* box demo di sidebar */
.demo-box{background:linear-gradient(180deg,rgba(245,144,37,.10),rgba(245,144,37,.02));border:1px solid rgba(245,144,37,.28)!important}
.demo-panels{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.demo-panels a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted-3);padding:9px 12px;border-radius:10px;
  border:1px solid var(--line-06);background:rgba(255,255,255,.02);transition:all .3s var(--ease-soft)}
.demo-panels a:hover{border-color:rgba(245,144,37,.4);color:#fff}
.demo-panels a b{color:#fff;font-weight:600}

/* ---- APP PREVIEW (iframe live app sbg thumbnail) ---- */
.app-preview{margin:0}
.app-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.app-tabs button{font:inherit;font-size:13px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-14);
  color:var(--muted-2);background:transparent;cursor:pointer;transition:all .3s var(--ease-soft)}
.app-tabs button:hover{color:#fff;border-color:var(--line-20)}
.app-tabs button.on{background:var(--orange);color:var(--ink-0);border-color:var(--orange);font-weight:600}
.appwin{border:1px solid var(--line-14);border-radius:16px;overflow:hidden;background:#0c0c10;
  box-shadow:0 40px 100px -50px rgba(0,0,0,.7)}
.appwin-bar{height:40px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--ink-3);border-bottom:1px solid var(--line-10)}
.appwin-bar .dots{display:flex;gap:6px}
.appwin-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--line-20)}
.appwin-bar .url{flex:1;height:24px;border-radius:7px;background:var(--ink-1);border:1px solid var(--line-10);
  display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:10.5px;color:var(--muted-1);letter-spacing:.04em}
.appwin-open{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line-10);border-radius:7px;padding:5px 10px;transition:all .3s var(--ease-soft)}
.appwin-open:hover{color:var(--orange);border-color:rgba(245,144,37,.4)}
.appwin-vp{position:relative;width:100%;padding-top:60%;overflow:hidden;background:#f4f5f7}
.appwin-vp iframe{position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;border:0}
.appwin-vp.no-int iframe{pointer-events:none}
.appwin-vp .launch{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:20px;
  background:linear-gradient(180deg,transparent 55%,rgba(6,6,8,.55));opacity:0;transition:opacity .35s var(--ease-soft)}
.appwin:hover .appwin-vp .launch{opacity:1}
.app-cap{font-size:12.5px;color:var(--muted-1);margin-top:12px;text-align:center}

/* thumbnail mini di kartu landing */
.card-thumb{position:relative;width:100%;padding-top:56%;overflow:hidden;border-radius:12px;border:1px solid var(--line-10);background:#f4f5f7}
.card-thumb iframe{position:absolute;top:0;left:0;width:250%;height:250%;transform:scale(.4);transform-origin:0 0;border:0;pointer-events:none}
.card-thumb .pill{position:absolute;top:10px;left:10px;z-index:2}