/* Home hero (owner, 2026-10-23: like Heyzine's): the headline on the left, a sample flipbook on
   the right; the book (or its Preview button) opens the flipbook tool. Replaces the banner image;
   everything below it (category bar, tools) is unchanged. */
.hh{text-align:left;max-width:1440px;margin:0 auto;padding:56px clamp(20px,5vw,80px) 64px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;
  background:radial-gradient(1200px 500px at 85% 20%,#EEF5EF 0,rgba(238,245,239,0) 60%)}
.hh-text{max-width:640px;align-self:start;padding-top:8px}
.hh-samples{margin-top:30px}
.hh-samples-label{font:700 10px/1.5 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;color:#78716c;margin:0 0 14px}
.hh-sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:412px}
.hh-sample{padding:0;border:0;background:transparent;text-align:left;cursor:pointer;min-width:0;color:#44403c}
.hh-sample-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;padding:12px 8px;border-radius:3px 9px 9px 3px;font:900 clamp(12px,1.5vw,22px)/1 Georgia,serif;letter-spacing:-.04em;box-shadow:3px 4px 0 #d6cdbb,0 8px 20px #30251912;overflow:hidden;transition:transform .18s,outline .18s;isolation:isolate}
.hh-sample-cover:before{content:'';position:absolute;z-index:-1;width:80%;height:55%;right:-12%;top:26%;border-radius:70% 0 0 0;background:#ffffff28;border:1px solid #ffffff45;transform:rotate(-15deg)}
.hh-sample-cover span{font:700 7px/1.5 system-ui,sans-serif;letter-spacing:.12em}
.hh-sample-cover:has(img){padding:0}
.hh-sample-cover img{display:block;width:100%;height:100%;object-fit:cover}
.hh-catalog-cover,.hh-magazine-cover,.hh-journal-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;background:#fff}
.hh-magazine-cover,.hh-journal-cover{object-fit:cover}
.hh-catalog-page{background:#fff;overflow:hidden}
.hh-catalog-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.hh-sample-back{background:#1A3C34}
.sample-interior{background:#d7c4a7;color:#3b332b}.sample-fashion{background:#34344d;color:#f5d8ce}.sample-travel{background:#1f6258;color:#e8e2b4}.sample-learning{background:#f2a445;color:#342b42}
.hh-sample b{display:block;font:600 10px/1.5 'Plus Jakarta Sans',sans-serif;margin-top:10px}
.hh-sample:hover .hh-sample-cover{transform:translateY(-4px)}
.hh-sample[aria-pressed=true] .hh-sample-cover{outline:3px solid #ff5c28;outline-offset:3px}
.hh-sample:focus-visible{outline:2px solid #1a3c34;outline-offset:7px;border-radius:8px}
.hh-sample-notice{font:11px/1.5 system-ui,sans-serif;color:#78716c;margin:14px 0 0}
.hh[data-sample=interior]{--sample-color:#71604c;--sample-paper:#f3eadd}
.hh[data-sample=fashion]{--sample-color:#34344d;--sample-paper:#f7e7e0}
.hh[data-sample=travel]{--sample-color:#1f6258;--sample-paper:#edf1df}
.hh[data-sample=magazine]{--sample-color:#e45a24;--sample-paper:#f3eee7}
.hh[data-sample=learning]{--sample-color:#71492d;--sample-paper:#fff0d0}
.hh[data-sample] .hh-cover-top{background:var(--sample-color)}
.hh[data-sample] .hh-cover-bottom,.hh[data-sample] .hh-in{background:var(--sample-paper)}
@media(max-width:420px){.hh-sample-grid{gap:10px}.hh-sample-cover{padding:10px 6px}.hh-sample b{font-size:9px}}
.hh-logo{display:flex;align-items:center;gap:12px;margin:0 0 26px}
.hh-logo img{width:54px;height:54px}
.hh-logo span{font:800 12px/1.3 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.3em;color:#57534E}
.hh-title{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(36px,4.4vw,62px);line-height:1.04;letter-spacing:-.03em;color:#1C1917;margin:0 0 20px}
.hh-title em{font-style:normal;color:#2F6B4F}
.hh-lead{font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:#57534E;margin:0 0 30px;max-width:560px}
.hh-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hh-go{display:inline-flex;align-items:center;gap:10px;border:1.5px solid #1C1917;border-radius:999px;background:#FF5C28;color:#fff;text-decoration:none;
  font:800 16px/1 'Plus Jakarta Sans',system-ui,sans-serif;padding:15px 26px;box-shadow:3px 3px 0 #1C1917;transition:transform .15s,box-shadow .15s}
.hh-go:hover{transform:translateY(-1px);box-shadow:4px 4px 0 #1C1917}
.hh-all{font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#1A3C34;text-decoration:underline;text-underline-offset:4px;padding:10px 6px}
.hh-tags{margin:28px 0 0;font:700 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.24em;color:#A8A29E}

/* the sample book: cover, page edges on the right, a corner that keeps lifting */
.hh-book-wrap{display:flex;justify-content:center}
.hh-book{position:relative;display:block;width:min(400px,100%);aspect-ratio:400/556;text-decoration:none;color:inherit;filter:drop-shadow(0 24px 32px rgba(28,25,23,.18));transition:transform .3s}
.hh-book:hover{transform:translateY(-4px) rotate(-1deg)}
.hh-book::before{content:'';position:absolute;top:6px;bottom:6px;right:-9px;width:12px;border-radius:0 6px 6px 0;
  background:repeating-linear-gradient(90deg,#FBF8F1 0 2px,#E5DECF 2px 3px);box-shadow:inset -1px 0 0 #D8D0BF}
/* The cover is drawn in units of its own height (--u = 1/556 of it), so the sample cover and the
   preview book's cover look the same at any size and one can stand in for the other while moving. */
.hh-cover{position:absolute;inset:0;overflow:hidden;background:#FFFBF2;display:flex;flex-direction:column;font-family:'Plus Jakarta Sans',system-ui,sans-serif;container-type:size}
.hh-cover-top{--u:calc(100cqh/556);flex:0 0 60%;background:linear-gradient(160deg,#21503F,#1A3C34 60%,#14302A);color:#fff;padding:calc(28*var(--u)) calc(26*var(--u)) calc(46*var(--u));display:flex;gap:calc(18*var(--u))}
.hh-cover-title{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.hh-cover-brand{display:block;width:calc(170*var(--u));max-width:100%;padding:calc(6*var(--u)) calc(8*var(--u));box-sizing:border-box;border-radius:calc(8*var(--u));background:#FFFBF2}
.hh-cover-brand img{display:block;width:100%;height:auto;object-fit:contain}
.hh-cover-title strong{font-family:'Fraunces',Georgia,serif;font-size:calc(44*var(--u));line-height:.92;letter-spacing:-.03em;font-weight:900}
.hh-cover-title strong em{font:inherit;font-style:normal;color:#FFB37E}
.hh-cover-list{list-style:none;margin:0;padding:0 0 0 calc(16*var(--u));border-left:1px solid rgba(255,255,255,.3);font-size:calc(10.5*var(--u));line-height:2.1;opacity:.9;white-space:nowrap}
.hh-cover-bottom{--u:calc(100cqh/556);position:relative;flex:1;margin-top:calc(-26*var(--u));background:#FFFBF2;border-radius:calc(30*var(--u)) 0 0 0;padding:calc(30*var(--u)) calc(26*var(--u)) calc(52*var(--u));display:flex;align-items:flex-end}
.hh-cover-note{display:block;margin:0;font-size:calc(21*var(--u));line-height:1.3;color:#1C1917;max-width:calc(250*var(--u))}
.hh-cover-note b{font-weight:800}
.hh-cover-mark{position:absolute;right:calc(26*var(--u));top:calc(-31*var(--u));width:calc(62*var(--u));height:calc(62*var(--u));border-radius:calc(18*var(--u));background:#FFFBF2;display:grid;place-items:center;box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(0,0,0,.12)}
.hh-cover-mark img{display:block;width:calc(42*var(--u));height:calc(42*var(--u));object-fit:contain}
.hh-corner{position:absolute;right:0;bottom:0;width:70px;height:70px;border-top-left-radius:100%;transform-origin:100% 100%;
  background:linear-gradient(135deg,rgba(28,25,23,0) 48%,rgba(28,25,23,.07) 50%,#EFE8DA 53%,#FFFFFF 100%);box-shadow:-3px -3px 7px rgba(28,25,23,.07);animation:hh-lift 3.2s ease-in-out infinite}
.hh-book:hover .hh-corner{animation-duration:1.4s}
@keyframes hh-lift{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
.hh-preview{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:13px 22px;border:1.5px solid #1C1917;border-radius:999px;background:#1A3C34;color:#FFF7EA;box-shadow:3px 3px 0 #1C1917;
  font:800 15px/1 'Plus Jakarta Sans',system-ui,sans-serif;z-index:2;transition:transform .15s,box-shadow .15s,background .15s}
.hh-book:hover .hh-preview{transform:translateX(-50%) translateY(-2px);box-shadow:4px 5px 0 #1C1917;background:#21503F}
.hh-preview svg{width:20px;height:20px;color:#FFB37E}
@media (prefers-reduced-motion:reduce){.hh-corner{animation:none}}

@media (max-width:900px){
  .hh-sample-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:370px}
  .hh{grid-template-columns:1fr;gap:40px;padding:28px 20px 44px;text-align:left}
  .hh-book{width:min(290px,76vw)}
  .hh-preview{font-size:13px;padding:11px 18px;bottom:-20px}
  }

/* the banner above the hero */
.hh-banner{position:relative;display:block;max-width:1440px;margin:0 auto;container-type:inline-size;text-decoration:none}
.hh-banner img{display:block;width:100%;height:auto}
/* the words over the picture, placed in units of the banner's width (cqw), so they sit where the
   picture's own words were at any size (coordinates from the 2171 px original) */
.hh-banner-title{position:absolute;left:5.05cqw;top:5.95cqw;font:800 4.95cqw/0.93 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.025em;color:#0F172A;text-align:left;white-space:nowrap}
.hh-banner-title em{font-style:normal;background:linear-gradient(90deg,#2F7D4F,#3F9A62 60%,#2E7A4C);-webkit-background-clip:text;background-clip:text;color:transparent}
.hh-banner-chip{position:absolute;top:23.55cqw;font:600 1.5cqw/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#1F2937}
.hh-banner-long{font-size:1.4cqw;letter-spacing:-.01em}       /* Gambar is longer than Image: still clear of the divider */
/* the label on the tilted card beside the laptop */
.hh-banner-card{position:absolute;left:54.9cqw;top:21.25cqw;transform:translate(-50%,-50%) rotate(-8deg);font:600 1.3cqw/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#1F2937;white-space:nowrap}
.hh-banner+.hh{padding-top:28px}

/* Preview: the sample book as a real flipbook in a window over the page (assets/home-hero.js) */
.hh-book{cursor:pointer}
.hh-book:focus-visible{outline:3px solid #FF5C28;outline-offset:8px}
.hh-demo{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 0 0}
/* open: the text stays on the left, the open book takes the sample cover's place (wider) */
.hh.is-preview{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:40px}
@media (max-width:900px){.hh.is-preview{grid-template-columns:1fr}}
.hh-demo[hidden]{display:none}
.hh-demo-tools{position:absolute;top:0;right:0;display:flex;gap:8px;z-index:2}
.hh-demo-tools button{height:42px;min-width:42px;padding:0 12px;border-radius:999px;border:1px solid #E4DED0;background:#fff;color:#1C1917;font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hh-demo-tools button:hover{background:#FAF4E8}
.hh-demo-tools svg{width:20px;height:20px}
.hh-demo-stage{position:relative;overflow:hidden}
.hh-demo-stage{width:100%;height:min(680px,calc(100dvh - 180px));min-height:320px;display:flex;align-items:center;justify-content:center}
.hh-demo-book{margin:auto}
.hh-demo-zoom{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.hh-demo-toolbar{box-sizing:border-box;display:flex;align-items:center;justify-content:safe center;gap:5px;max-width:100%;min-width:0;padding:8px 2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;white-space:nowrap}
.hh-demo-toolbar button{flex:0 0 auto;min-height:34px;min-width:34px;padding:6px 11px;border:1px solid #E4DED0;border-radius:999px;background:#FFFDFA;color:#1A3C34;font:700 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 5px #1c19170a}
.hh-demo-toolbar #hh-demo-full{background:linear-gradient(135deg,#ff7843,#ff4f1c);color:#fff;border-color:#d94519;box-shadow:0 3px 0 #cf3a11,0 5px 14px #ff5c283b}
.hh-demo-toolbar #hh-demo-full:hover{background:#e84516;color:#fff;border-color:#b93512}
#hh-tool-pen{display:none}
.hh-demo-toolbar button:hover:not(:disabled){background:#F1F5EC;border-color:#a9bfa9}
.hh-demo-toolbar button[aria-pressed=true]{background:#E4F3C2;border-color:#83a779}
.hh-demo-toolbar button:disabled{opacity:.4;cursor:default}
.hh-demo-toolbar button svg{width:12px;height:12px;vertical-align:middle}
.hh-tool-notice{font:11px/1.5 system-ui;max-width:100%;margin:0;color:#57534E}
.hh-tool-notice[hidden]{display:none}
.hh-page{position:relative;overflow:hidden;background:#FFFBF2;box-sizing:border-box;font-family:'Plus Jakarta Sans',system-ui,sans-serif;text-align:left}
.hh-demo-book>.hh-page{display:none}                      /* until the flipbook takes them */
.hh-page .hh-cover{position:absolute;inset:0}
.hh-in{padding:9% 9%;display:flex;flex-direction:column;gap:14px}
.hh-in small{font-size:11px;font-weight:800;letter-spacing:.2em;color:#F97316}
.hh-in strong{font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,2.6vw,32px);line-height:1.08;color:#1A3C34}
.hh-in>span{font-size:clamp(12px,1.25vw,15px);line-height:1.6;color:#57534E}
.hh-list{display:flex;flex-direction:column;gap:8px}
.hh-list span::before{content:'✓';color:#2F6B4F;font-weight:800;margin-right:8px}
/* Keep live page announcements available to screen readers without a second navigation row. */
.hh-demo-bar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hh-go-small{font-size:13px;padding:11px 18px;margin-left:10px;box-shadow:2px 2px 0 #1C1917}
@media (max-width:640px){.hh-demo{padding:52px 0 0}.hh-go-small{margin-left:0}}
/* PageFlip sets each page's display itself: lay the text out as blocks, not flex */
.hh-in>small,.hh-in>strong,.hh-in>span{display:block;margin:0 0 14px}
.hh-in>small{margin-bottom:12px}
.hh-list>span{display:block;margin:0 0 8px}

/* full screen: the preview fills the screen on the page's cream */
.hh-demo:fullscreen{background:#FAF7F0;padding:56px 20px 20px}
.hh-demo:fullscreen .hh-demo-tools{top:14px;right:16px}
.hh-demo:fullscreen .hh-demo-stage{height:calc(100dvh - 200px);max-height:none;width:100%}
.hh-demo-book{filter:drop-shadow(0 18px 28px rgba(28,25,23,.16))}
/* the cover glides to the middle and back (FlipbookLayout.centerCover), as in every reader (book-effects.css) */
.hh-demo-book.book-shift{transition:transform .45s cubic-bezier(.37,0,.63,1);will-change:transform}
.hh-demo-book.book-shift-instant{transition:none}
.hh-book.is-loading .hh-preview{animation:hh-wait .9s ease-in-out infinite alternate}
@keyframes hh-wait{to{opacity:.6}}

/* the switch between the hero and its preview (assets/home-hero.js): the sample cover itself
   slides and grows into the preview book's cover while the columns make room, then the real
   book takes its place unseen and opens. Nothing fades. */
.hh{transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1),gap .5s cubic-bezier(.4,0,.2,1)}
@media (min-width:901px){.hh-book-wrap,.hh-demo{grid-column:2;grid-row:1}}
@media (max-width:900px){.hh-book-wrap,.hh-demo{grid-column:1;grid-row:2}}
.hh-book-wrap{position:relative;z-index:1}
.hh-book.is-moving{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.hh-book.is-moving:hover{transform:none}
.hh.is-moving .hh-preview,.hh.is-preview .hh-preview{visibility:hidden}
.hh.is-moving .hh-corner,.hh.is-preview .hh-corner{display:none}
.hh-demo.is-waiting{visibility:hidden}
.hh.is-shown>.hh-book-wrap{visibility:hidden}
@media (prefers-reduced-motion:reduce){.hh,.hh-book.is-moving{transition:none}}
/* The cover's cell is as tall as the preview (close tools + stage + gap + compact toolbar), so the hero
   keeps its height when one replaces the other. Phones: a cover as big as the preview's page. */
.hh-book-wrap{min-height:calc(max(320px,min(680px,100dvh - 180px)) + 104px);align-items:center}
@media (max-width:900px){
  .hh-book{width:min(350px,100%)}
  .hh-demo-stage{height:calc(min(350px,100vw - 40px) / .72);min-height:0}
  .hh-book-wrap{min-height:calc(min(350px,100vw - 40px) / .72 + 104px)}
}