/* Shared additions for authored rich text; original website section styles remain authoritative. */
.pinfo[hidden], [data-article-kind="insight"] .pinfo { display: none !important; }
.pabout__text { overflow-wrap: anywhere; min-width: 0; }
.nl-article-body { overflow-wrap: anywhere; color: #4d4d4d; font-size: .9375rem; line-height: 1.7; }
.nl-article-body > p { margin: 0 0 var(--sp-4); }
.nl-article-body > h1, .nl-article-body > h2, .nl-article-body > h3, .nl-article-body > h4 { margin: var(--sp-8) 0 var(--sp-5); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #1a1a1a; }
.nl-article-body > h1 { font-size: 2.5rem; }
.nl-article-body > h2 { font-size: 2.25rem; }
.nl-article-body > h3 { font-size: 1.625rem; }
.nl-article-body > h4 { font-size: 1.25rem; }
.nl-article-body > :first-child { margin-top: 0; }
.nl-article-body ul, .nl-article-body ol { padding-left: 1.5em; margin-bottom: var(--sp-4); list-style: revert; }
.nl-article-body a, .pabout__text a { color: #c84a2d; text-decoration: underline; text-underline-offset: 3px; }
.nl-article-body blockquote { border-left: 2px solid var(--orange-100); margin: 32px 0; padding: 8px 0 8px 24px; font-size: 1.2rem; }
.nl-article-body img, .nl-article-body video { max-width: 100%; height: auto; }
.nl-article-body figure:not(.pgallery__item) { margin: 28px auto; }
.nl-article-body figure:not(.pgallery__item) img, .nl-article-body figure:not(.pgallery__item) video { display: block; margin: auto; border-radius: 12px; }
.nl-article-body figcaption { margin-top: 9px; font-size: .8rem; color: #777; text-align: center; }
.nl-article-body .pgallery__item img { height: 100%; }
.nl-article-body :is(img,video,figure).nl-media-small{display:block;width:240px;max-width:100%}
.nl-article-body :is(img,video,figure).nl-media-medium{display:block;width:480px;max-width:100%}
.nl-article-body :is(img,video,figure).nl-media-large{display:block;width:720px;max-width:100%}
.nl-article-body :is(img,video,figure).nl-media-xlarge{display:block;width:100%;max-width:100%}
.nl-article-body .nl-media-left,.nl-article-body figure.nl-media-left,.nl-article-body figure:not(.pgallery__item) .nl-media-left{margin-left:0;margin-right:auto}
.nl-article-body .nl-media-center,.nl-article-body figure.nl-media-center,.nl-article-body figure:not(.pgallery__item) .nl-media-center{margin-left:auto;margin-right:auto}
.nl-article-body .nl-media-right,.nl-article-body figure.nl-media-right,.nl-article-body figure:not(.pgallery__item) .nl-media-right{margin-left:auto;margin-right:0}
.nl-article-body hr{border:0;border-top:1px solid #ded6d1;margin:28px 0}
.article-back-to-top{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:100;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:linear-gradient(120deg,#f8613b,#fa967c);color:#fff;box-shadow:0 5px 18px #69240b30;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.article-back-to-top[hidden]{display:none}
.article-back-to-top svg{width:21px;height:21px;pointer-events:none}
.article-back-to-top:focus-visible{outline:3px solid #ffb99f;outline-offset:4px}
@media(hover:hover){.article-back-to-top:hover{transform:translateY(-2px);box-shadow:0 8px 24px #69240b48}.article-back-to-top:active{transform:scale(.95)}}
@media(max-width:700px){.article-back-to-top{right:16px;width:40px;height:40px;bottom:max(18px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.article-back-to-top{transition:none}.article-back-to-top:hover,.article-back-to-top:active{transform:none}}
.nl-content-empty { padding: 32px 0; }
.nl-content-empty p { margin-bottom: 20px; }
/* A preview displays the real page, clipping only the unrelated sections. */
html[data-nl-preview="home"] body > :not(.page-wrap), html[data-nl-preview="logos"] body > :not(.page-wrap),
html[data-nl-preview="home"] .page-wrap > :not(main), html[data-nl-preview="logos"] .page-wrap > :not(main),
html[data-nl-preview="home"] main > :not(.works), html[data-nl-preview="logos"] main > :not(.clients) { display: none !important; }
html[data-nl-preview] { scrollbar-width: thin; }
html[data-nl-preview="home"] .page-wrap, html[data-nl-preview="logos"] .page-wrap { animation: none !important; transform: none !important; }
html[data-nl-preview] .reveal, html[data-nl-preview] .stagger > *, html[data-nl-preview] .rule-grow { opacity: 1 !important; transform: none !important; animation: none !important; }
html[data-nl-preview] .nav { animation: none !important; opacity: 1 !important; transform: none !important; }
@media(max-width:760px) { .nl-article-body > h1 {font-size:2rem;} .nl-article-body > h2 {font-size:1.75rem;} }

/* --- Logo client: jumlah bebas (0–20), tetap rapi --------------------------
   Ukuran logo sama dengan grid lama (kolom maksimal 5/4/3/2 mengikuti lebar).
   Jumlah per baris diseimbangkan oleh server/renderer lewat --c5..--c2
   (mis. 7 logo = 4 + 3, 6 logo = 3 + 3), dan baris terakhir selalu di tengah.
   Tanpa variabel, nilainya sama dengan tampilan 20 logo. */
.clients .container { container-type: inline-size; }
.clients__grid {
  --gap: var(--sp-5);
  --max: 2;
  --cols: var(--c2, 2);
  --cell: calc((100cqw - (var(--max) - 1) * var(--gap)) / var(--max));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  width: 100%;
  max-width: calc(var(--cols) * var(--cell) + (var(--cols) - 1) * var(--gap));
  margin-inline: auto;
}
.clients__grid > .logo-card { flex: 0 0 var(--cell); min-width: 0; }
@container (min-width: 708px)  { .clients__grid { --max: 3; --cols: var(--c3, 3); } }
@container (min-width: 952px)  { .clients__grid { --max: 4; --cols: var(--c4, 4); } }
@container (min-width: 1196px) { .clients__grid { --max: 5; --cols: var(--c5, 5); } }
/* Tanpa logo: judul, grid dan "And many more" disembunyikan; di Homepage
   (tanpa tombol) seluruh bagian disembunyikan. */
.clients--empty :is(.clients__header, .clients__grid, .clients__more) { display: none; }
.clients--empty:not(:has(.clients__cta)) { display: none; }

/* Revisi 12 Okt 2026 — tombol Read More pada kartu artikel berwarna putih. */
.card__footer .btn--primary {
  background: #fff;
  border-color: #fff;
  color: #0b0b0b;
}
.card__footer .btn--primary:hover {
  filter: none;
  background: #f1f1f1;
  border-color: #f1f1f1;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}

/* Revisi 12 Okt 2026 — hero Homepage selalu terlihat utuh di desktop & tablet
   (judul, angka, dan tombol): tinggi mengikuti layar bila lebih pendek dari 900px. */
@media (min-width: 861px) {
  .hero:not(.hero--about) { min-height: max(560px, min(900px, 100vh)); }
  @supports (height: 100svh) { .hero:not(.hero--about) { min-height: max(560px, min(900px, 100svh)); } }
}

/* Revisi 12 Okt 2026 — mobile: kartu artikel berjejer horizontal dan bisa diswipe.
   Kartu berikutnya sedikit mengintip di tepi kanan sebagai petunjuk geser;
   setiap geseran berhenti rapi di awal kartu. Tablet & desktop tetap grid. */
@media (max-width: 699px) {
  .works__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .works__grid::-webkit-scrollbar { display: none; }
  .works__grid > .card { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .works__grid > .card:only-child { flex-basis: 100%; }
  .works__grid > .card:hover { transform: none; box-shadow: none; }
}

/* Revisi 12 Okt 2026 — hero Homepage di HP sempit (≤ 427px): angka & label statistik
   tidak lagi patah dua baris, dan kedua tombol tetap berdampingan seperti di
   layar 428px+. Ukuran mengecil halus mengikuti lebar layar. */
@media (max-width: 860px) {
  .hero .stats { gap: clamp(2px, 1.4vw, 8px); }
  .hero .stats__num { white-space: nowrap; font-size: clamp(1.15rem, 6.4vw, 1.6875rem); }
  .hero .stats__label { white-space: nowrap; font-size: clamp(.5625rem, 2.55vw, .6875rem); }
  .hero .stats__divider { margin-inline: clamp(2px, 1.2vw, 8px); }
  .hero .hero__actions { flex-wrap: nowrap; gap: clamp(8px, 2.6vw, 16px); }
  .hero .hero__actions .btn { white-space: nowrap; font-size: clamp(.8125rem, 3.7vw, 1rem); padding-inline: clamp(12px, 4vw, 20px); }
}
@media (max-width: 339px) {
  .hero .hero__actions { flex-wrap: wrap; }
}

/* Cards Featured di HP: tepi kiri & kanan memudar halus (seamless crop),
   jadi kartu terlihat "menghilang" ke tepi layar, bukan terpotong tajam. */
@media (max-width: 699px) {
  .works__grid {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent 100%);
  }
}

/* Tombol "Read More" di cards Featured (HP): sedikit lebih kecil. */
@media (max-width: 699px) {
  .works__grid .card__footer .btn {
    min-height: 0; height: auto;
    padding: 9px 16px;
    font-size: .8125rem;
    border-radius: 10px;
  }
}

/* Revisi 12 Okt 2026 — Featured Project & CTA (Homepage) pas satu layar
   di desktop dan tablet. Tinggi gambar kartu menyesuaikan tinggi layar,
   jadi judul, kartu, dan tombol Read More selalu terlihat utuh. */
@media (min-width: 700px) {
  .works {
    min-height: max(560px, 100vh);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(76px + 1vh); padding-bottom: 4vh;
  }
  .works > .container { width: 100%; }
  .works__header { gap: clamp(8px, 1.4vh, 16px); }
  .works__grid {
    --media: clamp(110px, calc(100vh - 600px), 340px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(24px, 5vh, 80px);
  }
  .works__grid > .card:only-child { grid-column: 2; }
  .works__grid .card__media { aspect-ratio: auto; height: var(--media); }
  .cta { min-height: max(560px, 100vh); display: flex; }
  .cta__content { min-height: 0; justify-content: center; }
}
@supports (height: 100svh) {
  @media (min-width: 700px) {
    .works, .cta { min-height: max(560px, 100svh); }
    .works__grid { --media: clamp(110px, calc(100svh - 600px), 340px); }
  }
}
/* Tablet: 3 kartu tetap satu baris, teks sedikit dirapatkan */
@media (min-width: 700px) and (max-width: 1023px) {
  .works__grid { gap: 12px; --media: clamp(110px, calc(100svh - 600px), 240px); }
  .works__grid .card__body { padding: 18px 16px 0; }
  .works__grid .card__footer { padding: 14px 16px 16px; }
  .works__grid .card__title { font-size: 1.25rem; }
  .works__grid .card__footer .btn { padding: 9px 16px; font-size: .8125rem; }
}
/* Tablet (tata letak CTA versi HP): teks tetap di bawah, foto HP di atas */
@media (min-width: 700px) and (max-width: 860px) {
  .cta__content { justify-content: flex-end; }
}

/* Video YouTube (embed) di artikel: rasio 16:9, sudut membulat seperti video upload. */
.nl-article-body iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px;background:#000;margin:auto}
.nl-article-body figure:has(> iframe):not([class*="nl-media-"]){width:100%}
.nl-article-body > p:has(iframe){clear:right}
/* Media yang diletakkan di paragraf pembuka (area "About") mengikuti ukuran & posisi dari dashboard. */
.pabout__text img,.pabout__text video{max-width:100%;height:auto}
.pabout__text figure{margin:28px auto}
.pabout__text figure img,.pabout__text figure video{display:block;margin:auto;border-radius:12px}
.pabout__text figcaption{margin-top:9px;font-size:.8rem;color:#777;text-align:center}
.pabout__text iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px;background:#000;margin:auto}
.pabout__text figure:has(> iframe):not([class*="nl-media-"]){width:100%}
.pabout__text :is(img,video,iframe,figure).nl-media-small{display:block;width:240px;max-width:100%}
.pabout__text :is(img,video,iframe,figure).nl-media-medium{display:block;width:480px;max-width:100%}
.pabout__text :is(img,video,iframe,figure).nl-media-large{display:block;width:720px;max-width:100%}
.pabout__text :is(img,video,iframe,figure).nl-media-xlarge{display:block;width:100%;max-width:100%}
.pabout__text figure :is(img,video,iframe)[class*="nl-media-"],.nl-article-body figure > iframe{width:100%}
.pabout__text > figure{clear:right}
.pabout__text .nl-media-left{margin-left:0;margin-right:auto}
.pabout__text .nl-media-center{margin-left:auto;margin-right:auto}
.pabout__text .nl-media-right{margin-left:auto;margin-right:0}


/* V10.17 — Inline row (Small/Medium + Left) and explicit managed 2/3/gallery layouts.
   Legacy .pgallery from older portfolio articles remains unchanged. */

:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:flex-start;width:100%;margin:26px 0}
:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item{flex:0 0 auto;aspect-ratio:auto;overflow:visible;background:transparent;border-radius:0;margin:0}
:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item.nl-media-small{width:min(240px,100%)}
:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item.nl-media-medium{width:min(480px,100%)}
:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item :is(img,video,iframe){display:block;width:100%;height:auto;max-width:100%;margin:0;object-fit:contain;border-radius:12px}
:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item iframe{aspect-ratio:16/9;height:auto}
:is(.nl-article-body,.pabout__text) .nl-media-layout{display:grid;gap:18px;width:100%;margin:28px 0;clear:both;align-items:start;min-width:0}
:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-two{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-three{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
:is(.nl-article-body,.pabout__text) .nl-media-layout > .nl-layout-item{margin:0;min-width:0;width:100%;max-width:100%;overflow:hidden}
:is(.nl-article-body,.pabout__text) .nl-media-layout > .nl-layout-item > :is(img,video,iframe){display:block;width:100%;height:auto;max-width:100%;margin:0;border-radius:12px}
:is(.nl-article-body,.pabout__text) .nl-media-layout > .nl-layout-item > iframe{aspect-ratio:16/9;border:0;background:#000}
:is(.nl-article-body,.pabout__text) .nl-media-layout > .nl-layout-item > figcaption{font-size:12px;text-align:left;line-height:1.5;color:#777;margin-top:8px}
@media(max-width:900px){:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-three,:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-two,:is(.nl-article-body,.pabout__text) .nl-media-layout.nl-layout-gallery{grid-template-columns:minmax(0,1fr)}:is(.nl-article-body,.pabout__text) .pgallery.nl-media-flow > .pgallery__item{width:100%!important}}