/* Minted Signature Wordmark, "Nama by Minted" (drop-in, semua produk).
Ciri khas ByMinted: wordmark centered sejak frame pertama, interaksi pertama
membuat nama geser ke kiri dan "by Minted" fade+slide masuk.
CARA PASANG di halaman baru:
1. Nama by Minted
2. link css ini +
No JS / reduced-motion → lockup penuh tampil (fail-open).
Skala huruf default kalibrasi "Kelas"; produk lain boleh override font-size. */
/* Typography (dipindah dari kelas-market.css, 13 Sep 2026) */
.minted-wordmark {
font-size: 76px;
font-weight: 650;
line-height: 1;
margin: 0 0 14px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 14px;
}
.minted-wordmark > span { font-size: 17px; font-weight: 400; color: #5a6b60; }
.minted-wordmark b { font-weight: 550; color: #263c2d; }
@media (max-width: 1000px) {
.minted-wordmark { font-size: 76px; }
}
@media (max-width: 700px) {
.minted-wordmark { font-size: 63px; gap: 10px; margin-bottom: 18px; }
.minted-wordmark > span { font-size: 13px; }
}
@media (max-width: 360px) {
.minted-wordmark { font-size: 57px; }
}
@media (max-width: 700px) and (max-height: 760px) {
.minted-wordmark { font-size: 52px; margin-bottom: 12px; }
}
/* Reveal */
.js-wordmark .minted-wordmark {
animation: none;
--by-offset: 36px;
}
@media (min-width: 701px) {
.js-wordmark .minted-wordmark { --by-offset: 47px; }
}
@media (max-width: 360px) {
.js-wordmark .minted-wordmark { --by-offset: 32px; }
}
.js-wordmark .minted-wordmark {
transform: translateX(var(--by-offset, 36px));
transition: transform 250ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.js-wordmark .minted-wordmark > span {
opacity: 0;
transform: translateX(-8px);
transition: opacity 500ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)), transform 500ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.js-wordmark.wordmark-live .minted-wordmark {
transform: translateX(0);
transition: transform 600ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.js-wordmark.wordmark-live .minted-wordmark > span {
opacity: 1;
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.js-wordmark .minted-wordmark,
.js-wordmark.wordmark-live .minted-wordmark {
transform: none;
transition: none;
}
.js-wordmark .minted-wordmark > span,
.js-wordmark.wordmark-live .minted-wordmark > span {
opacity: 1;
transform: none;
transition: none;
}
}