/* ==========================================================================
   Page sections (desktop-first sesuai Weebix; override mobile di responsive.css)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 140px 0;
  background: var(--color-surface-alt) url("../images/brand/hero-bg.svg") no-repeat bottom center;
  background-size: 1300px auto;
}
.hero-grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.hero-content { margin-right: 95px; }
.hero-content .section-title { margin-bottom: 30px; }
.hero-body { max-width: 568px; margin-bottom: 40px; }
.hero-body p { margin: 0; }
.hero-footer { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hero-video-image { position: relative; }
.hero-image img,
.hero-slider-image img {
  width: 100%;
  aspect-ratio: 800 / 894;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.hero-image { border-radius: var(--radius-xl); }
.hero-play-button {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border: 7px solid var(--color-surface-alt);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--aira-white);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.play-btn .icon { width: 26px; height: 26px; margin-left: 4px; }
.play-btn:hover { background: var(--aira-navy); transform: scale(1.05); }
.play-btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  animation: pulse-ring 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }

.hero-slider .slider-dots { margin-top: 20px; }
.hero-slider .slider-dot { width: 15px; height: 15px; }

/* Hero layout 2 (index-2) */
.hero-layout-2 { text-align: center; }
.hero-layout-2 .hero-content { max-width: 1000px; margin: 0 auto; }
.hero-layout-2 .section-title { text-align: center; }
.hero-layout-2 .section-title h1 { font-size: var(--fs-hero-centered); }
.hero-layout-2 .hero-body { margin: 0 auto 40px; }
.hero-layout-2 .hero-footer { justify-content: center; }

/* ---------- Home about ---------- */
.about-image { position: relative; padding-right: 70px; }
.about-img img { width: 100%; aspect-ratio: 800 / 880; object-fit: cover; border-radius: var(--radius-xl); }
.about-img { border-radius: var(--radius-xl); }
.about-consultation {
  position: absolute;
  top: 50%;
  right: -1%;
  z-index: 2;
  transform: translateY(-50%);
}
.about-consultation a { display: block; border-radius: 50%; background: var(--aira-white); padding: 6px; }
.about-consultation svg { display: block; width: 160px; height: 160px; }
.about-consultation .rotating { display: block; animation: rotate 30s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.about-content .check-list { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.about-content .check-list li { width: 48%; margin-right: 2%; }

/* ---------- Page about ---------- */
.page-about-image { position: relative; margin-right: 20px; padding-bottom: 75px; }
.about-img-1 img { width: 100%; max-width: 526px; aspect-ratio: 526 / 567; object-fit: cover; border-radius: var(--radius-xl); }
.about-img-1 { border-radius: var(--radius-xl); max-width: 526px; }
.about-img-2 { position: absolute; right: 0; bottom: 0; width: 354px; }
.about-img-2 .reveal { border-radius: var(--radius-xl); border: 5px solid var(--aira-white); }
.about-img-2 img { aspect-ratio: 344 / 209; object-fit: cover; }
.work-experience {
  position: absolute;
  top: 30px;
  left: -50px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--aira-white);
}
.work-experience-icon svg { width: 48px; height: 48px; }
.work-experience h3 { margin-bottom: 5px; font-size: 40px; color: var(--aira-white); }
.work-experience p { margin: 0; font-size: 16px; font-family: var(--font-secondary); }
.page-about .about-content .section-title { margin-bottom: 30px; }

/* ---------- Team ---------- */
.team-member-item .team-image {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.team-image img { width: 100%; aspect-ratio: 600 / 776; object-fit: cover; border-radius: var(--radius-xl); transition: transform var(--dur-med) ease-in-out; }
.team-member-item:hover .team-image img { transform: scale(1.1); }
.team-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 2;
  padding: 0 20px 30px;
  opacity: 0;
  transition: all var(--dur-fast) ease-out;
}
.team-member-item:hover .team-social,
.team-member-item:focus-within .team-social,
.team-member-item.is-social-open .team-social { bottom: 0; opacity: 1; }
.team-social ul { display: flex; justify-content: center; gap: 10px; list-style: none; }
.team-social .social-chip { width: 40px; height: 40px; border-radius: 8px; background: var(--aira-white); }
.team-social .social-chip .icon { width: 20px; height: 20px; }
.team-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-content h3 { margin-bottom: 5px; font-size: 24px; }
.team-content p { margin: 0; font-family: var(--font-secondary); }
.team-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--aira-white);
  transition: background-color var(--dur-fast);
}
.team-share:hover,
.team-share[aria-expanded="true"] { background: var(--aira-navy); }
.team-share .icon { width: 18px; height: 18px; }

/* ---------- Portfolio filter ---------- */
.our-projects-nav { margin-bottom: 50px; }
.our-projects-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; list-style: none; }
.filter-btn {
  display: inline-block;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: capitalize;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.filter-btn:hover,
.filter-btn[aria-pressed="true"],
.filter-btn[aria-current="true"] { background: var(--color-accent); color: var(--aira-white); }
.filter-status { margin: -30px 0 30px; text-align: center; font-family: var(--font-secondary); font-size: 14px; }
.project-item-box { transition: opacity 0.35s ease, transform 0.35s ease; }
.project-item-box.is-hiding { opacity: 0; transform: scale(0.94); }
.project-item-box[hidden] { display: none; }

/* ---------- Contact ---------- */
.contact-information { padding: 100px 0 50px; }
.contact-item {
  height: 100%;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}
.contact-item .card-title-row { border-color: var(--color-divider-strong); }
.contact-content { padding: 20px; }
.contact-content p { max-width: 280px; margin: 0; }
.contact-content p a { color: var(--color-text); transition: color var(--dur-fast); }
.contact-content p a:hover { color: var(--color-accent); }
.contact-image { overflow: hidden; border-radius: var(--radius-lg); }
.contact-image img { width: 100%; aspect-ratio: 1024 / 508; object-fit: cover; border-radius: var(--radius-lg); transition: transform var(--dur-med) ease-out; }
.contact-item:hover .contact-image img { transform: scale(1.1); }
.contact-us { padding: 50px 0; }
.contact-details .section-title { max-width: 525px; margin-bottom: 30px; }
.contact-detail-body p { margin-bottom: 35px; }
.contact-detail-body h3 { margin-bottom: 25px; font-size: 40px; letter-spacing: var(--tracking-display); text-transform: capitalize; }
.contact-form-box { padding: 40px; border-radius: var(--radius-xl); background: var(--color-surface-alt); }
.google-map { padding: 50px 0 100px; }
.map-frame { overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface-alt); }
.map-frame iframe { display: block; width: 100%; height: 400px; border: 0; filter: grayscale(100%); transition: filter var(--dur-fast) ease-out; }
.map-frame iframe:hover,
.map-frame iframe:focus { filter: grayscale(0); }
.map-caption { margin: 12px 0 0; font-family: var(--font-secondary); font-size: 14px; }

/* ---------- Blog single ---------- */
.page-single-post { padding: 100px 0 50px; }
.post-single-image { max-width: 1200px; margin: 0 auto 40px; overflow: hidden; border-radius: var(--radius-xl); }
.post-single-image img { width: 100%; aspect-ratio: 1200 / 504; object-fit: cover; border-radius: var(--radius-xl); }
.post-content { max-width: 1100px; margin: 0 auto; }
.post-entry { margin-bottom: 30px; border-bottom: 1px solid var(--color-divider); }
.post-entry h2 { margin-bottom: 30px; font-size: 40px; letter-spacing: -0.02em; }
.post-entry .check-list { margin: 0 0 30px; }
.post-entry blockquote {
  margin: 0 0 30px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.post-entry blockquote p {
  margin: 0;
  padding-left: 70px;
  background: url("../icons/quote.svg") no-repeat 0 6px / 48px 48px;
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-heading);
}
.post-footer { display: grid; gap: 20px; align-items: center; margin-bottom: 30px; }
@media (min-width: 992px) { .post-footer { grid-template-columns: 2fr 1fr; } }
.post-tags { display: flex; flex-wrap: wrap; gap: 10px 15px; list-style: none; }
.post-tag {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-heading);
  font-family: var(--font-secondary);
  font-weight: var(--fw-bold);
  font-size: 15px;
}
.post-social-links { display: flex; justify-content: flex-end; }
.share-label { margin-right: 12px; align-self: center; font-family: var(--font-secondary); font-weight: var(--fw-bold); color: var(--color-heading); }
.share-feedback { flex-basis: 100%; margin: 8px 0 0; text-align: right; font-size: 14px; }
.post-social-links { flex-wrap: wrap; }
.related-articles { padding: 50px 0 100px; }

/* ---------- Service single ---------- */
.page-service-single { padding: 100px 0; }
.service-featured-image { margin-bottom: 30px; overflow: hidden; border-radius: var(--radius-xl); }
.service-featured-image img { width: 100%; aspect-ratio: 857 / 436; object-fit: cover; border-radius: var(--radius-xl); }
.service-entry p:last-child { margin-bottom: 0; }
.service-entry h2 { margin: 10px 0 20px; font-size: 32px; letter-spacing: -0.02em; }
.services-list-box {
  position: sticky;
  top: 120px;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}
.services-list-box .icon-box { margin-bottom: 20px; color: var(--color-accent); }
.services-list-box .icon-box svg { width: 56px; height: 56px; }
.services-list-box h3 { margin-bottom: 30px; font-size: var(--fs-card-title); text-transform: capitalize; }
.services-list-box .check-list { margin-bottom: 30px; }
.services-list-box .btn { width: 100%; }
.your-choice-item {
  height: 100%;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}
.your-choice-item .card-title-row { border-color: var(--color-divider-strong); }
.your-choice-item .round-icon { background: var(--aira-navy); }
.ask-question {
  position: sticky;
  top: 110px;
  padding: 40px 30px;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}
.ask-question-content { margin-bottom: 30px; }
.ask-question-content h3 { margin-bottom: 20px; font-size: 28px; }
.ask-question-content p { margin: 0; }
.ask-contact-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: var(--aira-white);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  transition: box-shadow var(--dur-fast);
}
.ask-contact-list:last-child { margin-bottom: 0; }
.ask-contact-list:hover { box-shadow: 0 0 0 2px var(--color-accent); }
.ask-contact-list .dot-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--aira-white); }
.ask-contact-list .dot-icon .icon { width: 14px; height: 14px; }
.ask-contact-list span { color: var(--color-heading); word-break: break-word; }

/* ---------- Project single ---------- */
.page-project-single { padding: 100px 0 50px; }
.project-feature-image { margin-bottom: 50px; overflow: hidden; border-radius: var(--radius-xl); }
.project-feature-image img { width: 100%; aspect-ratio: 1300 / 659; object-fit: cover; border-radius: var(--radius-xl); }
.project-sidebar { position: sticky; top: 120px; padding-right: 50px; }
.about-project-box { padding: 40px; border-radius: var(--radius-lg); background: var(--color-surface-alt); text-align: center; }
.project-info-box { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--color-divider-strong); }
.project-info-box:last-child { padding: 0; margin: 0; border: 0; }
.project-icon { display: flex; justify-content: center; margin-bottom: 15px; color: var(--color-accent); }
.project-icon svg { width: 44px; height: 44px; }
.project-info-box p { margin-bottom: 10px; font-family: var(--font-secondary); text-transform: capitalize; }
.project-info-box h3 { font-size: 20px; word-break: break-word; }
.project-entry h2 { margin-bottom: 40px; font-size: 40px; letter-spacing: -0.02em; text-transform: capitalize; }
.project-entry h2:not(:first-child) { margin-top: 10px; }
.project-details-gallery { padding: 50px 0 100px; }
.project-gallery-items { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.gallery-link { display: block; border-radius: var(--radius-xl); }
.gallery-link img { width: 100%; aspect-ratio: 1366 / 768; object-fit: cover; border-radius: var(--radius-xl); }
.gallery-link .image-anime { border-radius: var(--radius-xl); }

/* ---------- FAQ page ---------- */
.faq-section .faq-wrap { max-width: 1083px; margin: 0 auto; }

/* ---------- 404 ---------- */
.error-page { padding: 100px 0; text-align: center; }
.error-page-image { margin-bottom: 40px; }
.error-page-image img { margin: 0 auto; width: min(100%, 560px); }
.error-page-content-heading { margin-bottom: 40px; }
.error-page-content-heading h2 { margin-bottom: 30px; font-size: var(--fs-display); letter-spacing: var(--tracking-display); }
.error-page-content-heading p { margin: 0; }

.play-btn { position: relative; }
.grid--partners { list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .grid--partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .grid--partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid--partners { gap: 15px; } }