- .hero - .hero__grid - .hero__content - .hero h1 - .hero__subtitle - .hero__copy - .hero__actions Fungsi: Mengatur banner utama website, layout dua kolom, headline besar, subheadline, teks pendukung, CTA, background industrial berbasis gambar, dan aksen kuning Safetoe pada area pembuka. ============================== */ .hero { min-height: calc(100vh - 140px); display: grid; align-items: center; overflow: hidden; padding: 70px 0 56px; background: url("assets/hero-safetoe-background.png") right center / auto 100% no-repeat, linear-gradient(135deg, #fff9df 0%, #ffffff 48%, #eef2f6 100%); } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.46) 42%, rgba(0, 0, 0, 0.12) 74%, transparent 100%); pointer-events: none; } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 48px; } .hero .eyebrow { color: var(--safetoe-yellow); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); } .hero h1 { max-width: 720px; margin: 0; color: #ffffff; font-size: clamp(3rem, 7vw, 5.8rem); line-height: 0.98; text-transform: uppercase; text-shadow: 0 4px 28px rgba(0, 0, 0, 0.62); } .hero__subtitle { margin: 22px 0 8px; color: #f7f8fb; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 800; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62); } .hero__copy { max-width: 590px; margin: 0; color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.58); } .hero__actions, .catalog-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ============================== BUTTON / CALL TO ACTION Berhubungan dengan: - .btn - .btn--primary - .btn--secondary - .hero__actions .btn--secondary - .btn--whatsapp - tombol/link CTA di Hero, Catalog, Product, dan Contact Fungsi: Menyatukan style tombol utama, tombol sekunder, dan tombol WhatsApp agar konsisten di seluruh halaman, termasuk hover dan icon di dalam tombol. ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 18px; border: 1px solid transparent; border-radius: 8px; font-weight: 800; line-height: 1; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn svg { width: 19px; height: 19px; } .btn--primary { color: var(--charcoal); background: var(--safetoe-yellow); box-shadow: 0 16px 30px rgba(255, 209, 0, 0.28); } .btn--primary:hover { background: var(--safetoe-yellow-dark); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(181, 138, 0, 0.26); } .btn--secondary { color: var(--charcoal); border-color: #d6d9df; background: var(--white); } .btn--secondary:hover { color: var(--safetoe-yellow-dark); border-color: rgba(255, 209, 0, 0.55); background: var(--safetoe-yellow-soft); transform: translateY(-2px); } .hero__actions .btn--secondary { color: var(--charcoal); border-color: transparent; background: var(--safetoe-yellow); box-shadow: 0 16px 30px rgba(255, 209, 0, 0.28); } .hero__actions .btn--secondary:hover { color: var(--charcoal); border-color: transparent; background: var(--safetoe-yellow-dark); box-shadow: 0 18px 36px rgba(181, 138, 0, 0.26); } .btn--whatsapp { color: var(--white); background: var(--success); } .btn--whatsapp:hover { background: #0a6f4b; transform: translateY(-2px); } /* ============================== HERO TRUST INDICATORS Berhubungan dengan: - .trust-grid - .trust-item - .trust-item__icon Fungsi: Mengatur tiga indikator kepercayaan pada Hero, seperti pengalaman, negara, dan standar internasional, dalam bentuk kartu kecil yang mudah dipindai. ============================== */ .trust-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(210px, 0.9fr) minmax(230px, 1fr); gap: 14px; max-width: 740px; margin: 30px 0 34px; } .trust-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; min-height: 86px; padding: 14px; border: 1px solid rgba(230, 232, 236, 0.9); border-radius: 8px; background: rgba(255, 255, 255, 0.76); box-shadow: var(--shadow-sm); min-width: 0; } .trust-item__icon { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: var(--safetoe-yellow-dark); background: var(--safetoe-yellow-soft); } .trust-item__icon svg { width: 24px; height: 24px; } .trust-item strong { color: var(--charcoal); font-size: 1.3rem; line-height: 1.1; } .trust-item span:last-child { color: #263247; font-weight: 900; opacity: 1; line-height: 1.15; text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55); } .trust-item:first-child span:last-child { white-space: nowrap; } /* ============================== HERO VISUAL / PLACEHOLDER SHOE Berhubungan dengan: - .hero__visual - .industrial-lines - .shoe-placeholder - .shoe-placeholder__boot - .boot-collar, .boot-upper, .boot-toe, .boot-sole, .boot-lace - .hero-badge Fungsi: Mengatur visual sepatu di sisi kanan Hero. Jika gambar produk tidak tersedia, class placeholder membentuk ilustrasi sepatu sederhana agar layout tidak rusak. Pastikan class ini digunakan pada elemen visual Hero terkait. ============================== */ .hero__visual { position: relative; min-height: 430px; display: none; } .hero__visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 48px rgba(17, 24, 39, 0.18)); } .industrial-lines { position: absolute; inset: 10% 4% auto auto; width: 80%; height: 62%; opacity: 0.16; background: linear-gradient(90deg, transparent 12%, #243041 12% 13%, transparent 13%), linear-gradient(0deg, transparent 62%, #243041 62% 64%, transparent 64%), repeating-linear-gradient(90deg, transparent 0 42px, #243041 42px 45px); clip-path: polygon(10% 100%, 24% 20%, 30% 20%, 42% 100%, 48% 100%, 55% 0, 62% 0, 70% 100%, 100% 100%, 100% 100%, 0 100%); } .shoe-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; } .shoe-placeholder__boot { position: relative; width: min(620px, 100%); height: 360px; transform: rotate(-3deg); } .boot-collar, .boot-upper, .boot-toe, .boot-sole, .boot-lace { position: absolute; display: block; border: 3px solid #2f3744; background: rgba(255, 255, 255, 0.82); } .boot-collar { right: 142px; top: 30px; width: 170px; height: 112px; border-radius: 34px 42px 14px 16px; transform: rotate(8deg); } .boot-upper { right: 92px; top: 92px; width: 260px; height: 148px; border-radius: 40px 44px 36px 30px; transform: skewX(-8deg); } .boot-toe { left: 54px; top: 186px; width: 300px; height: 104px; border-radius: 110px 26px 30px 54px; } .boot-sole { left: 32px; bottom: 18px; width: 526px; height: 64px; border-radius: 20px 24px 34px 50px; background: linear-gradient(180deg, #ffffff, #e6e8ec); } .boot-lace { right: 244px; width: 128px; height: 0; border-width: 2px; transform: rotate(-18deg); } .lace-1 { top: 126px; } .lace-2 { top: 158px; } .lace-3 { top: 190px; } .hero-badge { position: absolute; right: 18%; bottom: 18%; z-index: 3; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 8px; color: var(--charcoal); background: var(--safetoe-yellow); font-weight: 900; box-shadow: 0 18px 34px rgba(255, 209, 0, 0.28); } /* ============================== INDUSTRY & PROTECTION SHOWCASE Berhubungan dengan: -

- .showcase-section - .carousel-block - .showcase-header - .carousel-actions - .carousel-track - .showcase-card - .showcase-card--industry - .showcase-card--protection - .showcase-card--snapshot - .showcase-card__line Fungsi: Mengatur section showcase industri dan proteksi, termasuk carousel horizontal, header per carousel, tombol panah, kartu visual berbasis aset snapshot dari referensi, hover state, dan scroll snap untuk mobile. ============================== */ .showcase-section, .catalogs-section, .contact-section { background: var(--white); } .showcase-section { padding: 44px 0 0; background: var(--white); overflow: hidden; } .showcase-section .container { width: var(--container); } .catalogs-section { padding-bottom: 108px; overflow: hidden; } .catalogs-section::before { content: ""; position: absolute; top: -140px; right: -180px; width: 620px; height: 620px; border-radius: 50%; border: 110px solid rgba(255, 209, 0, 0.08); pointer-events: none; } .catalogs-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(90deg, var(--safetoe-yellow) 0 46%, var(--charcoal) 46% 100%); pointer-events: none; } .catalogs-section .container { position: relative; z-index: 1; width: var(--container); } .carousel-block + .carousel-block { margin-top: 60px; } .carousel-block--protection { position: relative; isolation: isolate; padding: 42px 0 44px; } .carousel-block--protection::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; background: #f6f6f6; transform: translateX(-50%); } .showcase-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) auto; align-items: end; gap: 32px; margin-bottom: 30px; } .showcase-header .eyebrow { margin-bottom: 12px; color: var(--safetoe-yellow-dark); } .showcase-header h2 { margin: 0; color: #050505; font-size: clamp(2.1rem, 3.2vw, 3rem); line-height: 1.05; } .showcase-header__text { margin: 0; color: #313844; font-size: 1.02rem; line-height: 1.55; } .carousel-heading h3, .tech-group h3 { margin: 0; color: var(--charcoal); font-size: 1.55rem; } .carousel-actions { display: flex; justify-content: flex-end; gap: 10px; } .carousel-actions[hidden] { display: none; } .showcase-section .carousel-button { width: 52px; height: 52px; border-color: rgba(17, 24, 39, 0.12); border-radius: 50%; color: #050505; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08); } .showcase-section .carousel-button:hover { border-color: rgba(255, 209, 0, 0.65); color: #050505; background: var(--safetoe-yellow); } .carousel-track { display: flex; gap: 9px; overflow-x: auto; padding: 0 0 20px; scroll-snap-type: x mandatory; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track--wide { gap: 8px; } .showcase-card, .technology-card, .product-card, .catalog-card, .info-card, .quote-card, .contact-card, .about-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: var(--shadow-sm); } .showcase-card { position: relative; min-height: 218px; display: grid; align-content: start; gap: 14px; padding: 22px; scroll-snap-align: start; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .showcase-card:hover { border-color: rgba(255, 209, 0, 0.55); transform: translateY(-4px); box-shadow: var(--shadow-md); } .showcase-card--industry { min-height: 320px; align-content: end; gap: 10px; padding: 22px 16px 24px; overflow: hidden; border: 0; color: var(--white); background: linear-gradient(180deg, rgba(3, 7, 18, 0.24), rgba(3, 7, 18, 0.86)), linear-gradient(135deg, #283142, #0b1220); box-shadow: 0 22px 38px rgba(17, 24, 39, 0.16); } .showcase-card--industry::before { content: ""; position: absolute; inset: 0; opacity: 0.88; background: radial-gradient(circle at 82% 18%, rgba(255, 209, 0, 0.32), transparent 22%), radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.12), transparent 24%), linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%); } .showcase-card--industry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.1), rgba(2, 6, 23, 0.9)); } .showcase-card--energy { background: linear-gradient(180deg, rgba(3, 7, 18, 0.24), rgba(3, 7, 18, 0.88)), linear-gradient(135deg, #5f281a, #172033 55%, #0a0f19); } .showcase-card--oil { background: linear-gradient(180deg, rgba(3, 7, 18, 0.2), rgba(3, 7, 18, 0.9)), linear-gradient(135deg, #154061, #0d2740 48%, #08131f); } .showcase-card--mining { background: linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.88)), linear-gradient(135deg, #6d4b25, #3b352b 45%, #101820); } .showcase-card--manufacturing { background: linear-gradient(180deg, rgba(3, 7, 18, 0.2), rgba(3, 7, 18, 0.9)), linear-gradient(135deg, #5e6570, #2d333b 48%, #0b1118); } .showcase-card--construction { background: linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.9)), linear-gradient(135deg, #6e3d22, #283242 52%, #0a0f18); } .showcase-card--winter { background: linear-gradient(180deg, rgba(3, 7, 18, 0.1), rgba(3, 7, 18, 0.86)), linear-gradient(135deg, #dbeafe, #4b6b84 40%, #101827); } .showcase-card--food { background: linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.88)), linear-gradient(135deg, #d2d8d6, #27635a 48%, #0b1516); } .showcase-card--forest { background: linear-gradient(180deg, rgba(3, 7, 18, 0.16), rgba(3, 7, 18, 0.9)), linear-gradient(135deg, #6b4b24, #24472f 48%, #0c1511); } .showcase-card--industry > * { position: relative; z-index: 1; } .showcase-card--protection { min-height: 305px; justify-items: center; align-content: start; gap: 16px; padding: 34px 20px 30px; border: 0; text-align: center; background: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 40px rgba(17, 24, 39, 0.08); } .showcase-card__icon, .technology-card__icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 8px; color: var(--safetoe-yellow-dark); background: var(--safetoe-yellow-soft); } .showcase-card--industry .showcase-card__icon { width: 62px; height: 62px; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 50%; color: var(--white); background: rgba(255, 255, 255, 0.04); } .showcase-card--protection .showcase-card__icon { width: 92px; height: 92px; border-radius: 50%; color: #050505; background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.78), transparent 28%), linear-gradient(135deg, #fff8d6, #ffe59b); } .showcase-card__icon svg, .technology-card__icon svg { width: 42px; height: 42px; } .showcase-card--industry .showcase-card__icon svg { width: 44px; height: 44px; } .showcase-card--protection .showcase-card__icon svg { width: 48px; height: 48px; } .showcase-card h4, .technology-card h4, .product-card h3, .catalog-card h3, .info-card h3, .contact-card h3 { margin: 0; color: var(--charcoal); line-height: 1.22; } .showcase-card--industry h4 { color: var(--white); font-size: 1rem; } .showcase-card--protection h4 { max-width: 170px; color: #050505; font-size: 1.08rem; } .showcase-card__line { width: 22px; height: 4px; display: block; border-radius: 999px; background: var(--safetoe-yellow); } .showcase-card--protection .showcase-card__line { margin: 0 auto; } .showcase-card p, .technology-card p, .product-card p, .catalog-card p, .info-card p, .contact-note { margin: 0; color: var(--muted); } .showcase-card--industry p { color: rgba(255, 255, 255, 0.92); font-size: 0.88rem; line-height: 1.58; } .showcase-card--protection p { max-width: 178px; color: #424956; font-size: 0.93rem; line-height: 1.68; } .showcase-card--snapshot { width: var(--card-width); height: var(--card-height); min-width: var(--card-width); min-height: var(--card-height); flex: 0 0 var(--card-width); display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background-image: var(--card-image); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; box-shadow: none; } .showcase-card--industry.showcase-card--snapshot { width: 203px; min-width: 203px; flex-basis: 203px; height: 310px; min-height: 310px; } .showcase-card--protection.showcase-card--snapshot { width: 203px; min-width: 203px; flex-basis: 203px; height: 310px; min-height: 310px; } .showcase-card--snapshot::before, .showcase-card--snapshot::after { content: none; } .showcase-card--snapshot:hover { border-color: transparent; transform: none; box-shadow: none; } .showcase-card--snapshot > * { opacity: 0; pointer-events: none; } /* ============================== SAFETOE NEW TECHNOLOGY SECTION Berhubungan dengan: -

- .technology-section - .tech-group - .technology-grid - .technology-carousel-heading - .technology-carousel-track - .technology-section .carousel-button - .technology-card - .technology-card--image - .technology-card--square - .technology-card__top - .technology-card__icon - .technology-card__visual - .technology-card__visual img Fungsi: Mengatur kelompok teknologi perlindungan dan material dalam carousel kartu modern, termasuk tombol geser, gambar kartu teknologi full-card, dan efek hover. ============================== */ .technology-section, .products-section, .about-section, .blogs-section { background: #fbfbfa; } .tech-group + .tech-group { margin-top: 54px; } .technology-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .technology-carousel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .technology-carousel-heading .carousel-actions { flex: 0 0 auto; } .technology-section .carousel-button { width: 52px; height: 52px; border-color: rgba(17, 24, 39, 0.12); border-radius: 50%; color: #050505; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08); } .technology-section .carousel-button:hover { border-color: rgba(255, 209, 0, 0.65); color: #050505; background: var(--safetoe-yellow); } .technology-carousel-track { display: flex; grid-template-columns: none; align-items: stretch; gap: 18px; overflow-x: auto; padding: 0 0 22px; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .technology-carousel-track::-webkit-scrollbar { display: none; } .technology-carousel-track .technology-card { flex: 0 0 214px; scroll-snap-align: start; } .technology-card { min-height: 308px; display: grid; align-content: start; gap: 16px; padding: 18px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .technology-card--image { border: 0.5px solid rgba(17, 24, 39, 0.22); min-height: auto; padding: 0; gap: 0; align-content: stretch; background: var(--white); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.1); } .technology-card:hover { border-color: rgba(255, 209, 0, 0.55); transform: translateY(-4px); box-shadow: var(--shadow-md); } .technology-card__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .technology-card__icon { flex: 0 0 54px; width: 54px; height: 54px; } .technology-card__icon svg { width: 32px; height: 32px; } .technology-card__visual { height: 230px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, rgba(255, 209, 0, 0.12), rgba(47, 72, 88, 0.12)), repeating-linear-gradient(135deg, transparent 0 11px, rgba(17, 24, 39, 0.06) 11px 12px); } .technology-card--image .technology-card__visual { width: 100%; height: auto; aspect-ratio: 162 / 270; border-radius: 8px; background: var(--white); } .technology-card--square .technology-card__visual { aspect-ratio: 162 / 270; background: var(--white); } .technology-card__visual img { width: auto; max-width: 100%; height: 100%; display: block; border-radius: 7px; object-fit: contain; } .technology-card--image .technology-card__visual img { width: 100%; max-width: none; height: 100%; border-radius: 8px; object-fit: cover; } .technology-card--square .technology-card__visual img { object-fit: contain; background: var(--white); } /* ============================== PRODUCT FILTER / FORM FIELD BASE Berhubungan dengan: - .product-controls - .product-count - -

- .field-error
   - .quote-form label
   Fungsi:
   Mengatur search dan filter produk, serta style dasar field form yang dipakai
   ulang di Product List dan Contact Form. .field-error dipakai JavaScript saat validasi gagal.
============================== */
.product-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(210px, 280px) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 26px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.product-controls label,
.quote-form label {
  display: grid;
  gap: 7px;
  color: var(--charcoal);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input,
select {
  min-height: 46px;
  padding: 0 13px;
}

textarea {
  min-height: 132px;
  padding: 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--safetoe-yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.12);
  outline: none;
}

.field-error {
  border-color: var(--danger);
}

.product-count {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

/* ==============================
   PRODUCT LIST / PRODUCT CARDS
   Berhubungan dengan:
   - <section id="products">
   - .product-grid
   - .product-card
   - .product-media
   - .product-boot
   - .product-badges
   - .badge
   - .product-card__body
   - .product-category
   - .feature-list
   - .spec-list
   - .product-meta
   Fungsi:
   Mengatur grid daftar produk, kartu produk, placeholder image sepatu, badge
   sertifikasi, daftar fitur, spesifikasi, varian, ukuran, dan tombol request quote.
============================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.product-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  border-color: rgba(255, 209, 0, 0.55);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.product-media {
  position: relative;
  min-height: 174px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, #fff9df, #eef2f6),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(17, 24, 39, 0.04) 13px 14px);
}

.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-boot {
  position: relative;
  width: 150px;
  height: 96px;
  transform: rotate(-4deg);
}

.product-boot::before,
.product-boot::after {
  content: "";
  position: absolute;
  border: 2px solid #354052;
  background: rgba(255, 255, 255, 0.78);
}

.product-boot::before {
  left: 15px;
  bottom: 26px;
  width: 112px;
  height: 46px;
  border-radius: 54px 28px 18px 24px;
}

.product-boot::after {
  left: 0;
  bottom: 10px;
  width: 138px;
  height: 24px;
  border-radius: 18px 14px 18px 28px;
  background: #dfe5ec;
}

.product-badges {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--safetoe-yellow-dark);
  background: var(--safetoe-yellow-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.product-card__body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.product-category {
  color: var(--safetoe-yellow-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.feature-list,
.spec-list,
.check-list,
.footer-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.feature-list li {
  padding: 5px 8px;
  border-radius: 8px;
  color: #344054;
  background: var(--steel);
  font-size: 0.78rem;
  font-weight: 800;
}

.spec-list {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.spec-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
}

.spec-list strong {
  color: var(--charcoal);
}

.product-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.product-card .btn {
  margin: 0 18px 18px;
}

/* ==============================
   PRODUCT CATALOGS SECTION
   Berhubungan dengan:
   - <section id="catalogs">
   - .catalog-grid
   - .catalog-card
   - .catalog-cover
   - .catalog-cover__logo
   - .catalog-cover__title
   - .catalog-cover__visual
   - .catalog-card__content
   - .catalog-language
   - .catalog-meta
   - .catalog-card__actions
   Fungsi:
   Mengatur tampilan kartu katalog ID/EN, cover visual berbasis CSS, label bahasa,
   metadata PDF, teks katalog, dan tombol download. Link PDF dirender dari JavaScript.
============================== */
.catalogs-section .section-title {
  max-width: 820px;
  margin-bottom: 38px;
}

.catalogs-section .eyebrow {
  color: var(--safetoe-yellow-dark);
}

.catalogs-section .eyebrow::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--safetoe-yellow);
}

.catalogs-section .section-title h2 {
  max-width: 720px;
  margin-top: 28px;
  color: #050505;
  font-size: clamp(3rem, 6.2vw, 4.75rem);
  line-height: 1.02;
}

.catalogs-section .section-title p {
  max-width: 660px;
  margin-top: 24px;
  color: #4b5563;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.catalog-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.86fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-height: 340px;
  padding: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-card:hover {
  border-color: rgba(255, 209, 0, 0.55);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.catalog-cover {
  position: relative;
  min-height: 300px;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(145deg, #111827 0%, #1f2937 52%, #030712 100%);
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.18);
}

.catalog-cover--en {
  background:
    linear-gradient(145deg, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.1)),
    linear-gradient(135deg, #0f3a5a 0%, #5fb4e6 50%, #0f172a 100%);
}

.catalog-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 54%, rgba(255, 255, 255, 0.24), transparent 20%),
    linear-gradient(120deg, transparent 0 60%, rgba(255, 255, 255, 0.1) 60% 62%, transparent 62% 100%);
  pointer-events: none;
}

.catalog-cover::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -18%;
  height: 42%;
  background: var(--safetoe-yellow);
  transform: skewY(-18deg);
}

.catalog-cover__logo,
.catalog-cover__title,
.catalog-cover__visual,
.catalog-cover__ribbon {
  position: relative;
  z-index: 1;
}

.catalog-cover__logo {
  width: 116px;
  height: auto;
  display: block;
  background: rgba(0, 0, 0, 0.88);
}

.catalog-cover__title {
  display: grid;
  color: var(--white);
  font-size: clamp(1.55rem, 2.7vw, 1.9rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.catalog-cover__title strong {
  color: var(--safetoe-yellow);
  font-size: clamp(1.9rem, 3.2vw, 2.35rem);
}

.catalog-cover__visual {
  min-height: 132px;
}

.catalog-cover__visual::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 6%;
  bottom: 10px;
  height: 86px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 80px 34px 24px 32px;
  transform: rotate(-5deg);
}

.catalog-cover__visual::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 2%;
  bottom: -6px;
  height: 34px;
  border-radius: 18px 18px 28px 34px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.62);
}

.catalog-cover--en .catalog-cover__visual::before {
  border-radius: 10px;
  transform: perspective(120px) rotateX(18deg) rotateZ(-2deg);
}

.catalog-cover__ribbon {
  align-self: end;
  color: var(--charcoal);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
}

/* ==============================
   EMPTY STATE
   Berhubungan dengan:
   - .empty-state
   Fungsi:
   Menampilkan pesan ketika hasil pencarian/filter produk kosong. Class ini
   dibuat lewat JavaScript, jadi pastikan tetap tersedia untuk elemen hasil kosong.
============================== */
.empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.catalog-card__content {
  display: grid;
  align-content: center;
  gap: 22px;
}

.catalog-card h3 {
  max-width: 360px;
  color: #050505;
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  line-height: 1.16;
}

.catalog-language {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--safetoe-yellow-dark);
  background: linear-gradient(135deg, var(--safetoe-yellow), #ffe886);
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(255, 209, 0, 0.28);
}

.catalog-title-line {
  display: block;
  width: 46px;
  height: 4px;
  margin: 18px 0 20px;
  border-radius: 999px;
  background: var(--safetoe-yellow);
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.98rem;
}

.catalog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.catalog-meta svg {
  width: 20px;
  height: 20px;
}

.catalog-card__actions .btn {
  min-width: 220px;
  justify-content: center;
  font-size: 1.08rem;
}

/* ==============================
   BLOGS / CERTIFICATE SHOWCASE SECTION
   Berhubungan dengan:
   - <section id="blogs">
   - .blogs-section
   - .certificate-showcase
   - .certificate-showcase__image
   - .certificate-showcase__image img
   Fungsi:
   Mengatur section Safety Notes/Blogs menjadi showcase sertifikasi Safetoe
   berbentuk visual besar dari PDF certificate. Gambar dibuat responsif agar
   tetap terbaca di desktop, tablet, dan mobile.
============================== */
.blogs-section {
  padding: 48px 0 64px;
  background: var(--white);
}

.certificate-showcase {
  overflow: hidden;
  border-radius: 8px;
  background: var(--white);
}

.certificate-showcase__image {
  width: 100%;
  overflow-x: auto;
}

.certificate-showcase__image img {
  width: 100%;
  min-width: 980px;
  display: block;
  border-radius: 8px;
}

/* ==============================
   ABOUT SECTION
   Berhubungan dengan:
   - <section id="about">
   - .about-panel
   - .about-collage
   - .about-video-trigger
   - .about-play
   - .about-content
   - .check-list
   - .video-modal
   Fungsi:
   Mengatur layout About Safetoe dua kolom, visual factory introduction di sisi kiri,
   modal video manufacture fullscreen, konten brand, poin kredibilitas, dan icon
   check pada daftar keunggulan.
============================== */
.about-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 42px;
  padding: 32px;
}

.about-collage {
  display: block;
  min-height: 430px;
}

.about-video-trigger {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 100%;
  min-height: 430px;
  display: block;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 8px;
  color: var(--white);
  background: var(--charcoal);
  box-shadow: var(--shadow-sm);
}

.about-video-trigger img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.about-video-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

.about-video-trigger:hover img,
.about-video-trigger:focus-visible img {
  filter: brightness(0.86);
  transform: scale(1.03);
}

.about-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--charcoal);
  background: var(--safetoe-yellow);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%);
}

.about-play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
}

.about-content {
  align-self: center;
}

body.video-open {
  overflow: hidden;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
}

.video-modal[hidden] {
  display: none;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.video-modal__content {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  max-height: calc(100vh - 56px);
}

.video-modal__player {
  width: 100%;
  max-height: calc(100vh - 56px);
  display: block;
  border-radius: 8px;
  background: #000000;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
}

.video-modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--white);
  background: rgba(0, 0, 0, 0.56);
}

.video-modal__close:hover {
  color: var(--charcoal);
  background: var(--safetoe-yellow);
}

.video-modal__close svg {
  width: 22px;
  height: 22px;
}

.about-content h3 {
  margin: 14px 0 18px;
  color: var(--charcoal);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.check-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.check-list li {
  position: relative;
  padding-left: 42px;
  color: var(--charcoal);
  font-weight: 800;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--safetoe-yellow-soft);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--safetoe-yellow-dark);
  border-bottom: 2px solid var(--safetoe-yellow-dark);
  transform: rotate(-45deg);
}

/* ==============================
   CONTACT / GET A QUOTE SECTION
   Berhubungan dengan:
   - <section id="contact">
   - .contact-grid
   - .quote-card
   - .contact-merged
   - .contact-intro
   - .quote-benefits
   - .quote-benefit
   - .quote-process
   - .process-steps
   - .contact-card
   - .contact-detail
   - .contact-note
   Fungsi:
   Mengatur layout intro quotation dan informasi kontak distributor dalam satu
   kotak gabungan tanpa form quotation.
============================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  max-width: none;
}

.quote-card,
.contact-card {
  padding: 30px;
}

.contact-merged {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
  align-items: start;
  gap: 44px;
  padding: 40px;
}

.contact-intro p:not(.eyebrow) {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.contact-accent {
  display: block;
  width: 72px;
  height: 4px;
  margin: 0 0 24px;
  border-radius: 999px;
  background: var(--safetoe-yellow-dark);
}

.quote-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.quote-benefit {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 226px;
  padding: 26px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  background: var(--white);
}

.quote-benefit__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--safetoe-yellow-dark);
  background: rgba(255, 209, 0, 0.16);
}

.quote-benefit__icon svg {
  width: 40px;
  height: 40px;
}

.quote-benefit h3,
.quote-process h3,
.process-step h4 {
  margin: 0;
  color: var(--charcoal);
  line-height: 1.2;
}

.quote-benefit h3 {
  font-size: 1.45rem;
}

.quote-benefit p,
.process-step p {
  margin: 0;
  color: var(--muted);
}

.quote-process {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.quote-process h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
}

.quote-process h3 svg {
  width: 24px;
  height: 24px;
  color: var(--safetoe-yellow-dark);
}

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.process-step {
  position: relative;
  display: grid;
  gap: 10px;
  padding-top: 42px;
}

.process-step::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.process-step__number {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0f8b5f;
  background: #d9f5e7;
  font-weight: 900;
  transform: translateX(-50%);
}

.contact-merged .contact-card {
  position: static;
  align-self: stretch;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: none;
}

.quote-form {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-message {
  display: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 800;
}

.form-message.is-success {
  display: block;
  color: #07553a;
  background: #dcfce7;
}

.form-message.is-error {
  display: block;
  color: #8f1f17;
  background: #fee4e2;
}

.contact-card {
  align-self: start;
  position: sticky;
  top: 100px;
  display: grid;
  gap: 22px;
}

.contact-card h3 {
  font-size: clamp(2rem, 4vw, 2.85rem);
}

.contact-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-detail {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.contact-detail__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--safetoe-yellow-dark);
}

.contact-detail__icon svg {
  width: 42px;
  height: 42px;
}

.contact-card dt {
  color: var(--safetoe-yellow-dark);
  font-weight: 900;
  font-size: 1.15rem;
}

.contact-card dd {
  margin: 4px 0 0;
  color: var(--ink);
}

.contact-note {
  position: relative;
  padding: 22px 22px 22px 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.contact-note::before {
  content: "i";
  position: absolute;
  left: 24px;
  top: 26px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #0f8b5f;
  border-radius: 50%;
  color: #0f8b5f;
  font-weight: 900;
}

/* ==============================
   FOOTER
   Berhubungan dengan:
   - <footer class="site-footer">
   - .site-footer
   - .footer-grid
   - .footer-brand
   - .footer-logo
   - .footer-contact-list
   - .footer-bottom
   Fungsi:
   Mengatur area footer, logo/brand, quick links, kategori produk, informasi kontak,
   warna background gelap, spacing, dan copyright di bagian paling bawah.
============================== */
.site-footer {
  color: #d1d5db;
  background: #000000;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
  padding: 48px 0;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  width: auto;
  height: 42px;
  object-fit: contain;
}

.footer-brand p {
  max-width: 360px;
  margin: 18px 0 0;
}

.footer-grid h2 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 1rem;
}

.footer-grid li + li {
  margin-top: 9px;
}

.footer-grid a {
  transition: color 0.2s ease;
}

.footer-grid a:hover {
  color: var(--safetoe-yellow);
}

.footer-contact-list li {
  display: grid;
  gap: 2px;
}

.footer-contact-list span {
  color: var(--safetoe-yellow);
  font-weight: 900;
}

.footer-contact-list strong {
  color: var(--white);
  font-weight: 500;
}

.footer-bottom {
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  margin: 0;
}

/* ==============================
   SCROLL REVEAL ANIMATION
   Berhubungan dengan:
   - .reveal
   - .reveal.is-visible
   Fungsi:
   Mengatur animasi masuk halus saat elemen terlihat di viewport. Class .is-visible
   ditambahkan lewat JavaScript, jadi pastikan .reveal digunakan pada elemen terkait.
============================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   RESPONSIVE DESIGN - DESKTOP KECIL / LAPTOP
   Berhubungan dengan:
   - @media (max-width: 1180px)
   - .technology-grid
   - .technology-carousel-track .technology-card
   - .product-grid
   Fungsi:
   Menyesuaikan lebar card carousel teknologi dan grid produk dari layout desktop
   besar ke ukuran yang lebih nyaman pada layar laptop atau desktop kecil.
============================== */
@media (max-width: 1180px) {
  .technology-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

.technology-carousel-track .technology-card {
    flex-basis: 196px;
  }

.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==============================
   RESPONSIVE DESIGN - TABLET
   Berhubungan dengan:
   - @media (max-width: 980px)
   - .navbar
   - .nav-toggle
   - .nav-panel
   - .hero__grid
   - .about-panel
   - .contact-grid
   - .product-controls
   - .product-grid
   - .catalog-grid
   Fungsi:
   Mengubah navigasi menjadi menu hamburger, menumpuk layout dua kolom menjadi
   satu kolom, dan menyesuaikan grid konten untuk layar tablet.
============================== */
@media (max-width: 980px) {
  body {
    padding-top: 68px;
  }

.section {
    padding: 72px 0;
  }

.navbar {
    min-height: 68px;
  }

.nav-toggle {
    display: inline-grid;
  }

.nav-panel {
    position: fixed;
    inset: 68px 0 auto;
    max-height: calc(100vh - 68px);
    display: none;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #000000;
    box-shadow: var(--shadow-md);
    overflow: auto;
  }

.nav-panel.is-open {
    display: grid;
    gap: 18px;
  }

.nav-links,
  .nav-actions {
    width: min(100%, 680px);
    margin: 0 auto;
  }

.nav-links {
    display: grid;
    gap: 6px;
  }

.nav-links a {
    min-height: 46px;
  }

.nav-actions {
    justify-content: space-between;
  }

.search {
    position: static;
  }

.search-panel {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 84px;
    width: auto;
  }

.hero {
    min-height: auto;
  }

.hero__grid,
  .about-panel,
  .contact-grid {
    grid-template-columns: 1fr;
  }

.hero__visual {
    min-height: 340px;
  }

.showcase-section .container {
    width: var(--container);
  }

.showcase-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

.showcase-header .carousel-actions {
    justify-content: flex-start;
  }

.technology-carousel-heading {
    align-items: flex-start;
  }

.product-controls {
    grid-template-columns: 1fr 1fr;
  }

.product-count {
    grid-column: 1 / -1;
  }

.product-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.catalog-grid {
    grid-template-columns: 1fr;
  }

.contact-card {
    position: static;
  }

.contact-merged {
    grid-template-columns: 1fr;
    padding: 32px;
  }

.contact-merged .contact-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
}

/* ==============================
   RESPONSIVE DESIGN - MOBILE
   Berhubungan dengan:
   - @media (max-width: 720px)
   - :root
   - .section
   - .hero
   - .trust-grid
   - .product-controls
   - .form-grid
   - .catalog-card
   - .about-collage
   - .quote-card
   - .contact-card
   - .technology-carousel-heading
   - .technology-carousel-track
   Fungsi:
   Mengatur tampilan mobile agar konten menjadi satu kolom, tombol melebar penuh,
   carousel lebih mudah digeser, hero lebih ringkas, dan spacing tetap nyaman.
============================== */
@media (max-width: 720px) {
  :root {
    --container: min(100% - 28px, 1180px);
  }

.section {
    padding: 58px 0;
    scroll-margin-top: 72px;
  }

.section-title--split,
  .carousel-heading,
  .showcase-header,
  .technology-carousel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

.brand__image {
    width: 112px;
  }

.brand__text {
    font-size: 1rem;
  }

.hero {
    padding: 56px 0 52px;
  }

.hero h1 {
    font-size: clamp(2.7rem, 13vw, 4.2rem);
  }

.trust-grid,
  .product-controls,
  .form-grid,
  .product-grid,
  .catalog-grid,
  .footer-grid,
  .technology-grid {
    grid-template-columns: 1fr;
  }

.trust-item {
    min-height: 76px;
  }

.trust-grid {
    grid-template-columns: minmax(168px, 1fr) minmax(168px, 1fr) minmax(220px, 1fr);
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }

.trust-item {
    scroll-snap-align: start;
  }

.certificate-showcase__image img {
    min-width: 760px;
  }

.hero__actions .btn,
  .section-title--split .btn,
  .quote-form .btn {
    width: 100%;
  }

.hero__visual {
    min-height: 260px;
  }

.shoe-placeholder__boot {
    width: 330px;
    height: 212px;
    transform: scale(0.72) rotate(-3deg);
  }

.hero-badge {
    right: 7%;
    bottom: 10%;
    width: 58px;
    height: 58px;
  }

.carousel-track,
  .carousel-track--wide {
    grid-auto-columns: minmax(76%, 1fr);
  }

.technology-carousel-heading .carousel-actions {
    justify-content: flex-start;
  }

.technology-carousel-track .technology-card {
    flex-basis: min(74vw, 230px);
  }

.carousel-block + .carousel-block {
    margin-top: 56px;
  }

.showcase-header h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

.showcase-card--industry {
    min-height: 330px;
  }

.showcase-card--protection {
    min-height: 285px;
  }

.catalog-card {
    grid-template-columns: 1fr;
  }

.catalog-cover {
    min-height: 300px;
  }

.about-panel,
  .quote-card,
  .contact-card {
    padding: 20px;
  }

.contact-merged {
    padding: 20px;
  }

.quote-benefits,
  .process-steps {
    grid-template-columns: 1fr;
  }

.quote-benefit {
    min-height: auto;
  }

.contact-merged .contact-card {
    padding: 20px;
  }

.contact-detail {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }

.contact-detail__icon {
    width: 40px;
    height: 40px;
  }

.contact-detail__icon svg {
    width: 34px;
    height: 34px;
  }

.about-collage {
    min-height: auto;
  }

.about-video-trigger {
    min-height: 230px;
  }

.about-play {
    width: 64px;
    height: 64px;
  }

.video-modal {
    padding: 14px;
  }

.spec-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ==============================
   ACCESSIBILITY - REDUCED MOTION
   Berhubungan dengan:
   - @media (prefers-reduced-motion: reduce)
   - semua elemen melalui selector *
   Fungsi:
   Mengurangi animasi dan transisi bagi pengguna yang mengaktifkan preferensi
   reduced motion di sistem/browser.
============================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}