/* ir1lab — component layer. Built on tokens/*.css custom properties only. */

/* ---------- layout ---------- */
.ir1-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.ir1-container--narrow{max-width:var(--container-narrow)}
.ir1-section{padding:var(--section-y) 0}
.ir1-section--sm{padding:var(--section-y-sm) 0}
.ir1-section--subtle{background:var(--bg-subtle)}
.ir1-section--navy{background:var(--navy-900)}

/* ---------- responsive grid utilities ---------- */
/* Equal-width grids: 4/3/2 columns on desktop, collapsing at tablet then mobile. */
.ir1-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.ir1-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.ir1-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
/* Asymmetric two-column sections (FAQ, Kontak, Tentang…): ratio set inline per section, collapses below. */
.ir1-grid-split{display:grid;gap:var(--space-16);align-items:start}
/* Contact-style form fields: two per row on desktop, one on mobile. */
.ir1-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

@media (max-width:960px){
	.ir1-grid-4,.ir1-grid-3{grid-template-columns:repeat(2,1fr)}
	.ir1-grid-split{grid-template-columns:1fr!important}
}
@media (max-width:640px){
	.ir1-grid-4,.ir1-grid-3,.ir1-grid-2{grid-template-columns:1fr}
	.ir1-form-grid{grid-template-columns:1fr}
}

/* ---------- eyebrow / section heading ---------- */
.ir1-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.ir1-section-heading{display:flex;flex-direction:column;gap:var(--space-4)}
.ir1-section-heading--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.ir1-section-heading h2{margin:0}
.ir1-section-heading p{margin:0;color:var(--text-muted);font-size:var(--fs-body-lg);max-width:560px}
.ir1-section-heading--inverse .ir1-eyebrow{color:var(--red-400)}
.ir1-section-heading--inverse h2,.ir1-section-heading--inverse p{color:var(--ink-0)}
.ir1-section-heading--inverse p{color:var(--navy-200)}

/* ---------- buttons (always full pill) ---------- */
.ir1-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);letter-spacing:var(--ls-button);line-height:1;padding:0 var(--space-6);height:48px;cursor:pointer;text-decoration:none;transition:var(--transition-base);white-space:nowrap}
.ir1-btn:hover{transform:var(--lift)}
.ir1-btn:active{transform:var(--press)}
.ir1-btn svg{width:18px;height:18px}
.ir1-btn--sm{height:38px;padding:0 var(--space-5);font-size:var(--fs-caption)}
.ir1-btn--lg{height:56px;padding:0 var(--space-8);font-size:var(--fs-body)}
.ir1-btn--block{display:flex;width:100%}
.ir1-btn--primary{background:var(--surface-brand);color:var(--text-on-brand)}
.ir1-btn--primary:hover{box-shadow:var(--shadow-brand)}
.ir1-btn--accent{background:var(--surface-accent);color:var(--text-on-accent)}
.ir1-btn--accent:hover{box-shadow:var(--shadow-accent)}
.ir1-btn--secondary{background:var(--surface-brand-soft);color:var(--text-brand)}
.ir1-btn--outline{background:transparent;border-color:var(--border-default);color:var(--text-body)}
.ir1-btn--outline:hover{background:var(--bg-subtle)}
.ir1-btn--ghost{background:transparent;color:var(--text-body)}
.ir1-btn--ghost:hover{background:var(--bg-subtle)}
.ir1-btn--inverse{background:var(--ink-0);color:var(--navy-700)}

.ir1-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-circle);border:1px solid transparent;background:transparent;color:var(--text-body);cursor:pointer;transition:var(--transition-base)}
.ir1-icon-btn:hover{background:var(--bg-subtle);transform:var(--lift)}
.ir1-icon-btn svg{width:20px;height:20px}

/* ---------- badges / tags ---------- */
.ir1-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
.ir1-badge--accent{background:var(--surface-accent-soft);color:var(--text-accent)}
.ir1-badge--mint{background:var(--wash-mint);color:var(--ink-mint)}
.ir1-badge--sky{background:var(--wash-sky);color:var(--ink-sky)}
.ir1-badge--sand{background:var(--wash-sand);color:var(--ink-sand)}
.ir1-badge--lilac{background:var(--wash-lilac);color:var(--ink-lilac)}
.ir1-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.ir1-tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);background:var(--bg-subtle);color:var(--text-body);border:1px solid transparent;cursor:pointer;transition:var(--transition-base)}
.ir1-tag[aria-pressed="true"]{background:var(--surface-brand);color:var(--text-on-brand)}
.ir1-portfolio-filter{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-8) 0}
.ir1-portfolio-grid{transition:opacity var(--dur-fast) var(--ease-standard)}

/* ---------- cards ---------- */
.ir1-card{background:var(--surface-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);padding:var(--space-6)}
.ir1-card--raised{border:none;box-shadow:var(--shadow-lg)}
.ir1-card--brand{background:var(--surface-brand);border:none;color:var(--ink-0)}
.ir1-card--interactive{transition:var(--transition-base)}
.ir1-card--interactive:hover{transform:var(--lift);box-shadow:var(--shadow-lg)}

.ir1-feature-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle)}
.ir1-feature-card__icon{width:56px;height:56px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center}
.ir1-feature-card__icon svg{width:26px;height:26px}
.ir1-feature-card h3{margin:0;font-size:var(--fs-h5)}
.ir1-feature-card p{margin:0;color:var(--text-muted);font-size:var(--fs-body-sm)}
.ir1-feature-card__index{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-faint)}
.tone-sky{background:var(--wash-sky);color:var(--ink-sky)}
.tone-mint{background:var(--wash-mint);color:var(--ink-mint)}
.tone-sand{background:var(--wash-sand);color:var(--ink-sand)}
.tone-lilac{background:var(--wash-lilac);color:var(--ink-lilac)}
.tone-blush{background:var(--wash-blush);color:var(--ink-blush)}

.ir1-stat{display:flex;flex-direction:column;gap:2px}
.ir1-stat--center{align-items:center;text-align:center}
.ir1-stat__value{font-family:var(--font-mono);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--text-heading)}
.ir1-stat--inverse .ir1-stat__value{color:var(--ink-0)}
.ir1-stat__value sup,.ir1-stat__suffix{color:var(--red-500);font-size:.55em;font-weight:var(--fw-bold)}
.ir1-stat--inverse .ir1-stat__suffix{color:var(--red-400)}
.ir1-stat__label{font-size:var(--fs-body-sm);color:var(--text-muted)}
.ir1-stat--inverse .ir1-stat__label{color:var(--navy-300)}

.ir1-app-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-subtle);overflow:hidden;transition:var(--transition-base)}
.ir1-app-card:hover{transform:var(--lift);box-shadow:var(--shadow-lg)}
.ir1-app-card__cover{height:160px;display:flex;align-items:center;justify-content:center}
.ir1-app-card__cover svg{width:34px;height:34px}
.ir1-app-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.ir1-app-card__meta{display:flex;align-items:center;justify-content:space-between}
.ir1-app-card__name{margin:0;font-size:var(--fs-h5)}
.ir1-app-card__blurb{margin:0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.ir1-app-card__rating{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted)}
.ir1-app-card__rating svg{width:14px;height:14px;color:var(--warning-500)}

.ir1-pricing-card{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle)}
.ir1-pricing-card--featured{background:var(--navy-600);border:none;color:var(--ink-0);box-shadow:var(--shadow-brand)}
.ir1-pricing-card__plan{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.ir1-pricing-card__price{font-family:var(--font-mono);font-size:var(--fs-h2);font-weight:var(--fw-bold)}
.ir1-pricing-card__period{font-size:var(--fs-body-sm);color:var(--text-muted);font-weight:var(--fw-regular)}
.ir1-pricing-card--featured .ir1-pricing-card__period{color:var(--navy-300)}
.ir1-pricing-card__desc{margin:0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.ir1-pricing-card--featured .ir1-pricing-card__desc{color:var(--navy-200)}
.ir1-pricing-card__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-pricing-card__features li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm)}
.ir1-pricing-card__features svg{width:16px;height:16px;color:var(--red-500);flex:none}
.ir1-pricing-card--featured .ir1-pricing-card__features svg{color:var(--red-400)}

.ir1-testimonial-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);border:1px solid var(--border-subtle)}
.ir1-testimonial-card__stars{display:flex;gap:2px;color:var(--warning-500)}
.ir1-testimonial-card__stars svg{width:16px;height:16px}
.ir1-testimonial-card__quote{margin:0;font-size:var(--fs-body);color:var(--text-body)}
.ir1-testimonial-card__author{display:flex;flex-direction:column}
.ir1-testimonial-card__name{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm)}
.ir1-testimonial-card__role{font-size:var(--fs-caption);color:var(--text-muted)}
.ir1-testimonial-list{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--container-narrow);margin:0 auto}
.ir1-testimonial-card--row{flex-direction:row;align-items:center;gap:var(--space-6)}
.ir1-testimonial-card--row .ir1-testimonial-card__quote{flex:1}
@media (max-width:640px){.ir1-testimonial-card--row{flex-direction:column;align-items:flex-start}}

.ir1-blog-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle);transition:var(--transition-base)}
.ir1-blog-card:hover{transform:var(--lift);box-shadow:var(--shadow-lg)}
.ir1-blog-card__cover{height:180px;display:flex;align-items:center;justify-content:center}
.ir1-blog-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.ir1-blog-card__meta{display:flex;gap:var(--space-3);font-size:var(--fs-caption);color:var(--text-muted);font-family:var(--font-mono)}
.ir1-blog-card__title{margin:0;font-size:var(--fs-h5)}
.ir1-blog-card__excerpt{margin:0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.ir1-blog-card--row{flex-direction:row;align-items:center}
.ir1-blog-card--row .ir1-blog-card__cover{width:96px;height:96px;flex:none}

.ir1-single-cover img{border-radius:var(--radius-xl)}

/* ---------- video embed ---------- */
.ir1-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-sunken)}
.ir1-video-embed iframe,.ir1-video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- custom sections ---------- */
.ir1-custom-section__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.ir1-custom-section__grid--reverse .ir1-custom-section__media{order:-1}
.ir1-custom-section__body{display:flex;flex-direction:column;gap:var(--space-4)}
.ir1-custom-section__body p{white-space:pre-line}
.ir1-custom-section__media img{width:100%;border-radius:var(--radius-xl);object-fit:cover}
@media (max-width:768px){
	.ir1-custom-section__grid{grid-template-columns:1fr}
	.ir1-custom-section__grid--reverse .ir1-custom-section__media{order:0}
}

/* ---------- placeholder imagery ---------- */
.ir1-placeholder{border-radius:var(--radius-2xl);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.ir1-placeholder svg{width:30px;height:30px}
.ir1-placeholder span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* ---------- forms ---------- */
.ir1-field{display:flex;flex-direction:column;gap:var(--space-2)}
.ir1-field label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-heading)}
.ir1-input,.ir1-textarea,.ir1-select{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body-sm);padding:0 var(--space-4);height:48px;transition:var(--transition-base)}
.ir1-textarea{height:auto;padding:var(--space-3) var(--space-4);min-height:120px;resize:vertical}
.ir1-input:focus,.ir1-textarea:focus,.ir1-select:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--border-brand)}
.ir1-input--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.ir1-input--dark::placeholder{color:var(--navy-300)}

.ir1-pricing-toggle{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-8) 0 var(--space-10)}
.ir1-pricing-toggle__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-muted)}
.ir1-pricing-toggle__label.is-active{color:var(--text-heading)}

.ir1-switch{position:relative;display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer}
.ir1-switch__track{width:44px;height:26px;border-radius:var(--radius-pill);background:var(--border-default);transition:var(--transition-base);position:relative;flex:none}
.ir1-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--dur-base) var(--ease-spring);box-shadow:var(--shadow-xs)}
.ir1-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ir1-switch input:checked + .ir1-switch__track{background:var(--surface-brand)}
.ir1-switch input:checked + .ir1-switch__track::after{transform:translateX(18px)}
.ir1-switch input:focus-visible + .ir1-switch__track{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- accordion (native <details>) ---------- */
.ir1-accordion{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}
.ir1-accordion-item{border-bottom:1px solid var(--border-subtle)}
.ir1-accordion-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;font-weight:var(--fw-semibold);color:var(--text-heading)}
.ir1-accordion-item summary::-webkit-details-marker{display:none}
.ir1-accordion-item summary svg{width:18px;height:18px;flex:none;transition:transform var(--dur-base) var(--ease-standard)}
.ir1-accordion-item[open] summary svg{transform:rotate(45deg)}
.ir1-accordion-item p{margin:0 0 var(--space-5);color:var(--text-muted);font-size:var(--fs-body-sm)}

/* ---------- progress bar ---------- */
.ir1-progress{height:8px;border-radius:var(--radius-pill);background:var(--bg-sunken);overflow:hidden}
.ir1-progress--inverse{background:rgba(255,255,255,.12)}
.ir1-progress__fill{height:100%;background:var(--surface-accent);border-radius:var(--radius-pill)}

/* ---------- alert / toast / empty state ---------- */
.ir1-alert{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-subtle);font-size:var(--fs-body-sm)}
.ir1-alert--success{background:var(--success-100);color:var(--success-500)}
.ir1-alert--warning{background:var(--warning-100);color:var(--warning-500)}
.ir1-alert--danger{background:var(--danger-100);color:var(--danger-500)}
.ir1-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-16) var(--space-6);color:var(--text-muted)}

/* ---------- breadcrumb / pagination ---------- */
.ir1-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted)}
.ir1-breadcrumb a{color:var(--text-muted)}
.ir1-breadcrumb a:hover{color:var(--text-accent)}
.ir1-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.ir1-pagination a,.ir1-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-pill);font-size:var(--fs-body-sm);color:var(--text-body)}
.ir1-pagination .current{background:var(--surface-brand);color:var(--text-on-brand)}

/* ---------- header ---------- */
.ir1-topbar{background:var(--navy-900);color:var(--navy-200);font-size:var(--fs-caption)}
.ir1-topbar .ir1-container{height:42px;display:flex;align-items:center;gap:var(--space-6)}
.ir1-topbar__item{display:inline-flex;align-items:center;gap:7px}
.ir1-topbar__item svg{width:14px;height:14px}
.ir1-topbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.ir1-topbar__socials{display:flex;gap:var(--space-3)}
.ir1-topbar__socials svg{width:15px;height:15px}

.ir1-site-header{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.ir1-site-header .ir1-container{height:82px;display:flex;align-items:center;gap:var(--space-8)}
.ir1-site-header__logo{display:flex;align-items:center;gap:var(--space-2)}
.ir1-site-header__logo img{height:34px;width:auto}
.ir1-nav{margin-left:var(--space-4)}
.ir1-nav__list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-6)}
.ir1-nav__list li{position:relative}
.ir1-nav__list a{display:inline-block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-body);padding-bottom:2px;border-bottom:2px solid transparent}
.ir1-nav__list li.current-menu-item > a,.ir1-nav__list a:hover{color:var(--text-accent)}
.ir1-nav__list li.current-menu-item > a{border-bottom-color:var(--surface-accent)}
.ir1-nav__list ul{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:100%;left:0;min-width:200px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:none}
.ir1-nav__list li:hover > ul{display:block}
.ir1-nav__list ul a{display:block;padding:var(--space-2) var(--space-3);border-bottom:none}
.ir1-site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.ir1-nav-toggle{display:none;width:44px;height:44px;border-radius:var(--radius-circle);border:none;background:transparent;color:var(--text-body);align-items:center;justify-content:center;cursor:pointer}

@media (max-width:960px){
	.ir1-nav-toggle{display:flex}
	.ir1-nav{position:fixed;inset:0 0 0 auto;width:min(320px,85vw);height:100vh;background:var(--bg-page);box-shadow:var(--shadow-xl);padding:var(--space-20) var(--space-6) var(--space-6);transform:translateX(100%);transition:transform var(--dur-base) var(--ease-standard);overflow-y:auto;z-index:40}
	.ir1-nav.is-open{transform:translateX(0)}
	.ir1-nav__list{flex-direction:column;gap:var(--space-2)}
	.ir1-nav__list a{font-size:var(--fs-h5);padding:var(--space-2) 0}
	.ir1-nav__list ul{position:static;box-shadow:none;border:none;display:block;padding-left:var(--space-4)}
	body.ir1-nav-is-open::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:35}
}

/* ---------- footer ---------- */
.ir1-site-footer{background:var(--navy-950);color:var(--navy-200)}
.ir1-site-footer .ir1-container{padding-top:var(--space-20);padding-bottom:var(--space-8)}
.ir1-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:var(--space-12)}
.ir1-footer-brand{display:flex;flex-direction:column;gap:var(--space-5)}
.ir1-footer-brand img{height:38px;width:auto}
.ir1-footer-brand p{margin:0;font-size:var(--fs-body-sm);color:var(--navy-300);max-width:300px}
.ir1-footer-socials{display:flex;gap:var(--space-2)}
.ir1-footer-socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:var(--navy-200)}
.ir1-footer-socials svg{width:17px;height:17px}
.ir1-footer-col{display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-footer-col__title{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--navy-400)}
.ir1-footer-col a{font-size:var(--fs-body-sm);color:var(--navy-200)}
.ir1-footer-col a:hover{color:#fff}
.ir1-footer-col ul.ir1-footer-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-footer-newsletter{display:flex;flex-direction:column;gap:var(--space-4)}
.ir1-footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);font-size:var(--fs-caption);color:var(--navy-400)}
.ir1-footer-bottom a{color:var(--navy-400)}
.ir1-footer-bottom a:hover{color:#fff}

/* ---------- hero ---------- */
.ir1-hero{background:linear-gradient(180deg,var(--navy-50) 0%,var(--bg-page) 78%);padding:var(--space-20) 0 var(--section-y)}
.ir1-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-16);align-items:center}
.ir1-hero__copy{display:flex;flex-direction:column;gap:var(--space-6);animation:ir1-rise var(--dur-slower) var(--ease-out) both}
.ir1-hero__copy h1{font-size:var(--fs-display-2);line-height:var(--lh-tight)}
.ir1-hero__copy h1 .accent{color:var(--text-accent)}
.ir1-hero__lede{margin:0;font-size:var(--fs-body-lg);color:var(--text-muted);max-width:520px}
.ir1-hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.ir1-hero__stats{display:flex;gap:var(--space-12);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.ir1-hero__visual{position:relative}
.ir1-hero__badge-card{position:absolute;left:-28px;bottom:44px;display:flex;align-items:center;gap:var(--space-3);border-radius:var(--radius-xl);padding:var(--space-4);background:var(--surface-card);box-shadow:var(--shadow-lg)}
.ir1-hero__badge-icon{width:44px;height:44px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex:none}
.ir1-hero__badge-card strong{display:block;font-size:var(--fs-body-sm);color:var(--text-heading)}
.ir1-hero__badge-card span.sub{font-size:var(--fs-caption);color:var(--text-muted)}
@media (max-width:960px){.ir1-hero__grid{grid-template-columns:1fr}.ir1-hero__badge-card{left:0}}

/* ---------- hero: "terpusat" variant ---------- */
.ir1-hero--centered .ir1-hero__grid{grid-template-columns:1fr;max-width:720px;margin:0 auto;text-align:center}
.ir1-hero--centered .ir1-hero__copy{align-items:center}
.ir1-hero--centered .ir1-hero__lede{max-width:560px}
.ir1-hero--centered .ir1-hero__stats{justify-content:center}

/* ---------- features: "daftar" variant ---------- */
.ir1-feature-list{display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--container-narrow);margin:0 auto}
.ir1-feature-row{display:flex;gap:var(--space-5);align-items:flex-start}
.ir1-feature-row h3{margin:0 0 4px;font-size:var(--fs-h5)}
.ir1-feature-row p{margin:0;color:var(--text-muted);font-size:var(--fs-body-sm)}

/* ---------- about split ---------- */
.ir1-about__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--space-16);align-items:center}
.ir1-about__grid--reverse{grid-template-columns:1.05fr .95fr}
.ir1-about__grid--reverse .ir1-about__media{order:1}
.ir1-about__media{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.ir1-about__media-col{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-10)}
.ir1-about__points{display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-about__point{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-body);color:var(--text-body)}
.ir1-about__point i{width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface-accent-soft);color:var(--text-accent);display:flex;align-items:center;justify-content:center}
.ir1-about__point svg{width:15px;height:15px}
@media (max-width:960px){.ir1-about__grid,.ir1-about__media{grid-template-columns:1fr}}

/* ---------- stats band (dark) ---------- */
.ir1-stats-band__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.ir1-stats-band__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10)}
.ir1-skill{display:flex;flex-direction:column;gap:8px}
.ir1-skill__row{display:flex;justify-content:space-between}
.ir1-skill__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--ink-0)}
.ir1-skill__value{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--navy-300)}
@media (max-width:960px){.ir1-stats-band__grid{grid-template-columns:1fr}}

/* ---------- section header row (title + action) ---------- */
.ir1-section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}

/* ---------- page header band ---------- */
.ir1-page-header{background:var(--bg-subtle);padding:var(--space-10) 0}
.ir1-page-header h1{margin:var(--space-2) 0 0}
.ir1-page-header p{margin:var(--space-2) 0 0;color:var(--text-muted);font-size:var(--fs-body-lg);max-width:640px}

/* ---------- blog layout ---------- */
.ir1-blog-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-12);align-items:start}
@media (max-width:960px){.ir1-blog-layout{grid-template-columns:1fr}}
.ir1-blog-main{display:flex;flex-direction:column;gap:var(--space-8)}
.ir1-blog-hero{overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card);text-decoration:none;display:block}
.ir1-blog-hero__cover{height:300px}
.ir1-blog-hero__body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-blog-hero__meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-caption);color:var(--text-faint)}
.ir1-blog-hero__body h2{font-size:var(--fs-h3)}
.ir1-blog-hero__body p{margin:0;color:var(--text-muted)}
.ir1-blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
@media (max-width:640px){.ir1-blog-grid{grid-template-columns:1fr}}

.ir1-sidebar{display:flex;flex-direction:column;gap:var(--space-6)}
.ir1-sidebar__card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.ir1-sidebar__card h3{margin:0;font-size:var(--fs-h5)}
.ir1-sidebar__cat{display:flex;justify-content:space-between;font-size:var(--fs-body-sm);color:var(--text-body)}
.ir1-sidebar__cat span{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-faint)}
.ir1-sidebar__popular{display:flex;gap:var(--space-3);align-items:flex-start}
.ir1-sidebar__popular-thumb{width:54px;height:54px;flex:none;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.ir1-sidebar__popular-title{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-heading);line-height:1.35}
.ir1-sidebar__popular-date{font-size:var(--fs-caption);color:var(--text-faint)}
.ir1-sidebar__newsletter{background:var(--surface-brand);color:var(--ink-0)}
.ir1-sidebar__newsletter h3,.ir1-sidebar__newsletter p{color:var(--ink-0)}
.ir1-sidebar__newsletter p{color:var(--navy-200);margin:0;font-size:var(--fs-body-sm)}

.ir1-search-form{display:flex;gap:var(--space-2)}

/* ---------- article ---------- */
.ir1-article__meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.ir1-article__meta img.avatar{border-radius:50%}
.ir1-article__actions{margin-left:auto;display:flex;gap:var(--space-2)}
.ir1-article__cover{height:360px}
.ir1-article-body{max-width:var(--container-narrow);display:flex;flex-direction:column;gap:var(--space-5)}
.ir1-article-body p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body)}
.ir1-article-body p.lede{font-size:var(--fs-body-lg);font-weight:var(--fw-medium);color:var(--text-heading)}
.ir1-article-body h2,.ir1-article-body h3{margin-top:var(--space-4)}
.ir1-article-body blockquote{margin:0;padding:var(--space-6) var(--space-8);background:var(--bg-subtle);border-radius:var(--radius-xl);font-size:var(--fs-body-lg);font-weight:var(--fw-medium);color:var(--text-heading);border:none}
.ir1-article-body img{border-radius:var(--radius-xl)}
.ir1-article__tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}

/* ---------- CTA band ---------- */
.ir1-cta-band{background:var(--navy-600);border-radius:var(--radius-2xl);padding:var(--space-16) var(--space-20);display:flex;align-items:center;gap:var(--space-16);box-shadow:var(--shadow-brand)}
.ir1-cta-band h2{color:var(--ink-0);max-width:560px}
.ir1-cta-band p{color:var(--navy-200);max-width:520px}
.ir1-cta-band__actions{display:flex;flex-direction:column;gap:var(--space-3)}

/* ---------- responsive: layout ---------- */
@media (max-width:960px){
  .ir1-topbar,.ir1-site-header__actions .ir1-btn{display:none}
  .ir1-footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .ir1-cta-band{flex-direction:column;align-items:flex-start;padding:var(--space-10)}
}
@media (max-width:640px){
  .ir1-footer-grid{grid-template-columns:1fr}
  .ir1-cta-band{padding:var(--space-6)}
  .ir1-section{padding:var(--section-y-sm) 0}
  .ir1-container{padding:0 var(--space-4)}
}

/* ---------- responsive: rows that must wrap instead of overflow ---------- */
.ir1-hero__stats{flex-wrap:wrap;row-gap:var(--space-4)}
.ir1-hero__actions{flex-wrap:wrap}
.ir1-cta-band__actions,.ir1-cta-band{flex-wrap:wrap}
@media (max-width:480px){
  .ir1-hero__stats{gap:var(--space-6)}
}

/* ---------- responsive: type scale ---------- */
@media (max-width:640px){
  h1{font-size:var(--fs-h2)}
  h2{font-size:var(--fs-h3)}
  .ir1-hero__copy h1{font-size:34px}
  .ir1-cta-band h2{font-size:var(--fs-h3)}
}