/* Hallmark · shape: Index-first · genre: editorial · theme: brand · redesign: full · job: try
 * paper: oklch(98% 0.009 88) · accent: #fac92b · display: Bricolage Grotesque · body: DM Sans · hero: Banner · nav: edge-aligned · footer: mast · signature: real tutorial screenshot on Saweria yellow
 * axes: light/grotesk-heavy/chromatic-yellow · posture: Committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: R, removed the drawn browser, floating chips and cup; actual tutorial and QR carry the page */
/* Hallmark · hero-review: subagent ship · 0 blocking findings across four sizes */
/* Hallmark · waive 39b · original image-launch and image-tab controls are tutorial previews, not CTA buttons · retaining large image hit areas is necessary for the screenshot zoom and gallery controls */
/* Hallmark · waive 59 · dense Index-first tutorial with rules and two contrasting paper bands · compact preparation and offer notes keep the guide within reach rather than adding landing-page whitespace */
/* Hallmark · waive 77 · one informational promo-note band with a real question link · the existing offer disclaimer belongs in a short reading band instead of a new illustrated section */
/* Hallmark · reworded "Kenali Google AI Pro. Ikuti langkahnya." to "Google AI Pro. Mulai dari sini." · gate 58 tightens the hero */
/* Hallmark · reworded "Satu tahap setiap waktu." to "Panduan langkah demi langkah." · gate 54 merges the plain label into the heading */
/* Hallmark · reworded "Masih ada yang mengganjal?" to "Tanya jawab." · gate 54 merges the section label into its heading */
/* Hallmark · dropped "Panduan praktis, dalam bahasa kita", "Sebelum mulai", "Dari pembaca, untuk panduan berikutnya" · gate 54 removes redundant eyebrows while retaining their facts in headings and body copy */
/* Hallmark · dropped window-dots, art-window, cup, saucer, faq-graphic · gates 47a and 80 replace drawn filler with original screenshots and user-requested Saweria QR */
/* Hallmark · answered F4 · selected tutorial tab and completed reading state are controls, not additional primary actions; primary CTA remains the ink button */
/* Hallmark · finish-review: subagent ship · 0 findings after URL-only recapture · gap: none */
@import url('./tokens.css');
@import url('./base.css');
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
a { text-decoration: none; }
button { cursor: pointer; }
button, input { color: inherit; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
button:disabled, [aria-disabled='true'] { opacity: .55; cursor: not-allowed; }
button[aria-busy='true'] { cursor: progress; }
button:active, .button:active { transform: translateY(1px); }
p { line-height: 1.65; }
.header { background: var(--color-paper); border-bottom: 1px solid var(--color-ink); }
.header-inner { min-height: 88px; display: flex; align-items: center; gap: var(--gap-columns); }
.brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.brand small { display: none; }
.brand-light { font-weight: 400; }
.header nav { display: flex; gap: var(--space-lg); align-items: center; margin-left: auto; }
.header nav a, .support-link { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; min-height: 48px; display: inline-flex; align-items: center; }
.header nav a:hover, .text-link:hover, .footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.support-link { border-left: 1px solid var(--color-rule); padding-left: var(--space-lg); }
.hero { background: var(--color-field); color: var(--color-accent-ink); border-bottom: 1px solid var(--color-ink); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-hero); }
h1 { font-size: var(--text-display); line-height: 1; max-width: 14ch; }
.hero-copy { min-width: 0; }
.hero-copy > p { font-size: var(--text-lead); max-width: 38ch; margin-top: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-input); font-weight: 600; font-size: var(--text-md); white-space: nowrap; }
.primary, .next-button, .saweria { background: var(--color-ink); color: var(--color-paper); }
.primary:hover, .next-button:hover, .saweria:hover { background: var(--color-ink-2); }
.text-link { font-size: var(--text-md); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; }
.hero-figure { margin: 0; min-width: 0; }
.hero-figure img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: contain; background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-print); }
.hero-figure figcaption { font-size: var(--text-sm); margin-top: var(--space-lg); }
.reading-facts { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.reading-facts p { font-size: var(--text-sm); }
.promo-note { display: flex; align-items: start; gap: var(--space-lg); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.promo-note p { max-width: 75ch; font-size: var(--text-sm); }
.info-icon { font-size: var(--text-md); font-weight: 600; }
.promo-note a { font-size: var(--text-sm); text-decoration: underline; margin-left: auto; white-space: nowrap; }
.preparation { padding-block: var(--space-3xl); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--gap-columns); margin-bottom: var(--space-xl); }
.section-heading > p { max-width: 45ch; color: var(--color-muted); }
.prep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.prep-grid article { border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.prep-grid h3 { font-size: var(--text-title); margin-bottom: var(--space-md); }
.prep-grid p { font-size: var(--text-md); color: var(--color-muted); }
.guide-section { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--space-3xl); border-block: 1px solid var(--color-rule); }
.search { display: flex; align-items: center; gap: var(--space-sm); border-bottom: 2px solid var(--color-ink); min-height: 52px; }
.search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.search input { background: transparent; border: 0; width: 208px; min-height: 48px; font-size: var(--text-md); }
.search kbd { font-size: var(--text-sm); }
.guide-workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--gap-columns); }
.guide-sidebar { min-width: 0; }
.sidebar-top { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-sm); padding-block: var(--space-md); border-block: 1px solid var(--color-rule); }
#step-nav { margin-block: var(--space-md); }
.step-button { display: flex; width: 100%; text-align: left; gap: var(--space-sm); align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--color-rule-soft); padding: var(--space-md) var(--space-xs); min-height: 64px; }
.step-button:hover { background: var(--color-paper-3); }
.step-button[aria-current='step'] { background: var(--color-field); color: var(--color-accent-ink); border-bottom-color: var(--color-ink); }
.step-number { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.step-button strong { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.step-button small { display: none; }
.step-button.completed .step-number { text-decoration: underline; text-underline-offset: .25em; }
.progress-box { margin-top: var(--space-xl); }
.progress-box > div { display: flex; justify-content: space-between; font-size: var(--text-sm); }
progress { appearance: none; height: 8px; width: 100%; border: 0; background: var(--color-paper-3); margin-top: var(--space-sm); }
progress::-webkit-progress-bar { background: var(--color-paper-3); }
progress::-webkit-progress-value { background: var(--color-ink); }
progress::-moz-progress-bar { background: var(--color-ink); }
.progress-box p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.reset-button { background: transparent; border: 0; text-decoration: underline; padding: var(--space-sm) 0; font-size: var(--text-sm); min-height: 44px; }
.sidebar-help { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--space-lg); font-size: var(--text-sm); text-decoration: underline; }
.tutorial { min-width: 0; border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.tutorial-eyebrow { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: var(--space-md); }
#tutorial-title { font-size: clamp(1.75rem, 2.7vw, 2.75rem); line-height: 1.1; margin-bottom: var(--space-lg); }
.tutorial-intro { max-width: 67ch; margin-bottom: var(--space-lg); }
.resource-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.resource-link { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; min-height: 44px; }
.resource-link:hover { text-decoration-thickness: 2px; }
.tutorial-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); }
.visual { grid-row: 1; }
.figure-box { margin: 0; }
.figure-toolbar { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.image-launch { display: block; width: 100%; background: var(--color-paper); border: 1px solid var(--color-ink); padding: var(--space-md); cursor: zoom-in; position: relative; }
.image-launch img { width: 100%; height: 400px; object-fit: contain; }
.zoom-label { display: block; text-align: right; font-size: var(--text-sm); text-decoration: underline; padding-top: var(--space-sm); }
.image-caption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); max-width: 70ch; }
.image-tabs { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.image-tab { min-width: 0; flex: 1; background: transparent; border: 1px solid var(--color-rule); border-radius: var(--radius-input); padding: var(--space-xs); font-size: var(--text-sm); min-height: 48px; }
.image-tab img { width: 100%; height: 64px; object-fit: cover; object-position: top; margin-bottom: var(--space-xs); }
.image-tab[aria-pressed='true'] { border-color: var(--color-ink); background: var(--color-field); color: var(--color-accent-ink); }
.image-tab:hover { border-color: var(--color-ink); }
.instructions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); }
.instruction { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.instruction h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; line-height: 1.5; margin-bottom: var(--space-sm); }
.instruction h3 span { font-variant-numeric: tabular-nums; }
.instruction p { color: var(--color-muted); font-size: var(--text-md); }
.copy-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-size: var(--text-sm); }
.copy-field button { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); min-height: 44px; white-space: nowrap; }
.tutorial-note { border-left: 2px solid var(--color-ink); padding-left: var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; }
.tutorial-note b { color: var(--color-ink); }
.tutorial-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); }
.complete-button { display: inline-flex; gap: var(--space-xs); align-items: center; background: transparent; border: 1px solid var(--color-rule); padding: var(--space-sm); border-radius: var(--radius-input); min-height: 48px; font-size: var(--text-sm); white-space: nowrap; }
.complete-button.done { background: var(--color-success-paper); border-color: var(--color-ink); }
.check-box { width: 16px; height: 16px; border: 1px solid var(--color-muted); display: inline-grid; place-items: center; }
.next-button { border: 1px solid var(--color-ink); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-lg); min-height: 48px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.guide-footnote { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.guide-footnote p { max-width: 75ch; }
.faq-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-columns); padding-block: var(--space-4xl); }
.faq-intro > p { margin-top: var(--space-lg); color: var(--color-muted); max-width: 28ch; }
.faq-list details { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { cursor: pointer; font-size: var(--text-md); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-lg); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex-shrink: 0; font-size: 24px; line-height: 1; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { color: var(--color-muted); margin-top: var(--space-lg); max-width: 65ch; }
.faq-list a { text-decoration: underline; }
.support-section { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; background: var(--color-field); color: var(--color-accent-ink); padding-block: var(--space-2xl); border: 1px solid var(--color-ink); }
.support-copy p { max-width: 42ch; margin-top: var(--space-lg); }
.support-action { margin-top: var(--space-xl); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.support-action > span { font-size: var(--text-sm); }
.qr-figure { margin: 0; text-align: center; justify-self: center; }
.qr-print { background: var(--color-field); padding: var(--space-sm); border: 1px solid var(--color-ink); border-radius: var(--radius-input); box-shadow: var(--shadow-print); }
.qr-print img { width: 268px; height: 268px; object-fit: contain; }
.qr-figure figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); }
.footer { padding-top: var(--space-3xl); padding-bottom: var(--space-xl); }
.footer-main { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); padding-bottom: var(--space-xl); }
.footer-main .brand { font-size: clamp(2rem, 6vw, 5rem); }
.footer-main > div { display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); }
.footer-bottom { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); display: flex; justify-content: space-between; gap: var(--gap-columns); color: var(--color-muted); font-size: var(--text-sm); }
.footer-bottom p { max-width: 72ch; }
.footer-bottom span { white-space: nowrap; }
.skip { position: fixed; top: -100px; left: var(--space-md); background: var(--color-ink); color: var(--color-paper); padding: var(--space-md); z-index: var(--z-tooltip); }
.skip:focus-visible { top: var(--space-md); }
dialog { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-ink); border-radius: var(--radius-card); max-width: 1200px; width: calc(100% - 32px); max-height: 94dvh; padding: var(--space-lg); }
dialog::backdrop { background: var(--color-overlay); }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-size: var(--text-md); margin-bottom: var(--space-md); }
.dialog-toolbar button { min-height: 44px; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); padding: var(--space-xs) var(--space-sm); }
dialog > img { width: 100%; max-height: 76dvh; object-fit: contain; }
dialog > p { margin: var(--space-md) auto 0; text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
#toast { position: fixed; z-index: var(--z-toast); bottom: var(--space-lg); left: 50%; transform: translateX(-50%); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-lg); max-width: calc(100% - 32px); border-radius: var(--radius-input); font-size: var(--text-sm); display: none; }
#toast.visible { display: block; }
#no-results { padding-block: var(--space-lg); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .header-inner { min-height: 80px; gap: var(--space-md); flex-wrap: wrap; }
  .header nav { gap: var(--space-md); }
  .support-link { padding-left: var(--space-md); }
  .hero-layout { padding-block: var(--space-2xl); }
  .hero-figure img { aspect-ratio: 4 / 3; }
  .hero-copy > p { font-size: var(--text-md); }
  .hero-actions { gap: var(--space-md); margin-top: var(--space-lg); }
  .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .guide-workspace { grid-template-columns: minmax(0, 1fr); }
  #step-nav { display: flex; overflow-x: auto; gap: var(--space-sm); }
  .step-button { width: auto; flex-shrink: 0; padding-inline: var(--space-md); }
  .step-button strong { white-space: nowrap; }
  .sidebar-top, .sidebar-help, .progress-box p { display: none; }
  .progress-box { margin-top: var(--space-md); }
  .guide-heading { align-items: start; flex-direction: column; }
  .tutorial { margin-top: var(--space-lg); }
  .faq-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .faq-intro h2 br { display: none; }
  .faq-intro > p { max-width: 60ch; }
  .qr-print img { width: 220px; height: 220px; }
  .support-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .support-action { align-items: start; flex-direction: column; }
  .footer-bottom { flex-direction: column; gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .header-inner { min-height: 80px; gap: var(--space-xs); justify-content: space-between; }
  .brand { font-size: 24px; }
  .header nav { display: none; }
  .support-link { font-size: var(--text-sm); border: 0; padding-left: 0; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); gap: var(--space-xl); }
  h1 { font-size: clamp(2.65rem, 11vw, 4.5rem); }
  .hero-copy > p { max-width: 35ch; }
  .hero-figure img { aspect-ratio: 16 / 10; box-shadow: 4px 4px 0 var(--color-ink); }
  .hero-figure figcaption { margin-top: var(--space-md); }
  .hero-actions { gap: var(--space-lg); }
  .button { min-height: 48px; padding-inline: var(--space-md); }
  .reading-facts { gap: var(--space-sm) var(--space-lg); }
  .promo-note { flex-direction: column; gap: var(--space-md); padding-block: var(--space-lg); }
  .promo-note .info-icon { display: none; }
  .promo-note a { margin: 0; }
  .preparation { padding-block: var(--space-2xl); }
  .section-heading { margin-bottom: var(--space-lg); }
  .section-heading > p { display: none; }
  .prep-grid { gap: var(--space-lg); }
  .prep-grid h3 { font-size: 20px; }
  .prep-grid p { font-size: var(--text-sm); }
  .guide-section { padding-block: var(--space-2xl); }
  .search { width: 100%; }
  .search input { width: 100%; font-size: 16px; }
  #tutorial-title { font-size: 32px; }
  .tutorial-eyebrow { font-size: var(--text-sm); }
  .tutorial-eyebrow span:last-child { display: none; }
  .image-launch { padding: var(--space-xs); }
  .image-launch img { height: 240px; }
  .image-tab img { height: 40px; }
  .image-tabs { gap: var(--space-xs); }
  .image-tab { padding: var(--space-xs); font-size: var(--text-sm); }
  .image-tab span { display: none; }
  .instructions { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .tutorial-bottom { flex-direction: column; align-items: stretch; }
  .complete-button, .next-button { justify-content: center; }
  .resource-row { gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .faq-section { padding-block: var(--space-2xl); }
  .faq-list summary { gap: var(--space-md); }
  .support-section { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); gap: var(--space-xl); }
  .support-copy h2 { font-size: 36px; }
  .qr-print img { width: 252px; height: 252px; }
  .qr-figure { justify-self: start; }
  .footer { padding-top: var(--space-2xl); }
  .footer-main { align-items: start; flex-direction: column; gap: var(--space-lg); }
  .footer-main .brand { font-size: 48px; }
  .footer-main > div { font-size: var(--text-md); }
  .dialog-toolbar { font-size: var(--text-sm); }
  dialog { padding: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } button:active, .button:active { transform: none; } }

.noscript-step { margin-top: var(--space-2xl); }
.noscript-step h3, .noscript-step figure, .noscript-step li { margin-block: var(--space-lg); }
.noscript-step a { text-decoration: underline; }
.noscript-step figcaption { font-size: var(--text-sm); margin-top: var(--space-sm); }

b, strong { font-weight: 600; }
.start-note { background: var(--color-paper-2); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.start-note .container { padding-block: var(--space-md); }
.start-note p { font-size: var(--text-sm); max-width: 110ch; line-height: 1.6; }
.hero h1 { font-size: clamp(2.25rem, 3.9vw + .25rem, 3.75rem); max-width: 20ch; line-height: 1.08; }
.hero-layout { padding-block: var(--space-xl); }
.hero-copy > p { font-size: 18px; line-height: 1.5; max-width: 44ch; }
.hero-actions { margin-top: var(--gap-columns); }
@media (max-width: 40rem) {
  .start-note p { font-size: var(--text-sm); }
  .hero h1 { font-size: clamp(2.1rem, 8.8vw, 3.5rem); }
  .hero-copy > p { font-size: var(--text-md); }
  .hero-actions { margin-top: var(--space-lg); }
}