/* ========================================================================== Naata (PT Natakarya Loka Makmur) Bill payment aggregator website ========================================================================== */ /* --------------------------------------------------------------- Tokens */ :root { --navy: #1F2E69; --navy-deep: #16214C; --navy-soft: #33448A; --navy-tint: #EEF1F9; --red: #EE4A2D; --red-deep: #D33C21; --red-tint: #FDEEEA; --ink: #131A2E; --body: #56607A; --muted: #7B8499; --line: #E5E9F2; --line-soft: #F0F3F9; --surface: #FFFFFF; --surface-alt: #F6F8FC; --card: #FFFFFF; --card-line: #DDE3EF; --header-bg: rgba(255, 255, 255, .90); --logo-ink: #1F2E69; /* peran "latar gelap", dipakai section navy, footer, dan blok CTA. Dipisah dari --navy karena --navy berperan sebagai warna teks/aksen. */ --invert: #1F2E69; --invert-deep: #16214C; --invert-far: #101B44; --font-display: "Poppins", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(19, 26, 46, .06), 0 4px 12px rgba(19, 26, 46, .04); --shadow: 0 2px 6px rgba(19, 26, 46, .06), 0 18px 40px rgba(19, 26, 46, .08); --shadow-lg: 0 30px 70px rgba(31, 46, 105, .16); --wrap: 1180px; --nav-h: 76px; } /* ------------------------------------------------------- Tokens: gelap Default mengikuti setelan sistem; tombol di header menimpanya lewat atribut data-theme pada . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --navy: #9BB0F0; --navy-deep: #0A101E; --navy-soft: #7C93E0; --navy-tint: #1E2946; --red: #FF5C3D; --red-deep: #FF7358; --red-tint: #33160F; --ink: #EEF2FA; --body: #A3AEC6; --muted: #7C879E; --line: #253048; --line-soft: #1B2338; --surface: #0E1424; --surface-alt: #131A2C; --card: #161E33; --card-line: #33405E; --header-bg: rgba(14, 20, 36, .88); --logo-ink: #EEF2FA; --invert: #18223F; --invert-deep: #0A0F1C; --invert-far: #070B15; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .26); --shadow: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .34); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { color-scheme: dark; --navy: #9BB0F0; --navy-deep: #0A101E; --navy-soft: #7C93E0; --navy-tint: #1E2946; --red: #FF5C3D; --red-deep: #FF7358; --red-tint: #33160F; --ink: #EEF2FA; --body: #A3AEC6; --muted: #7C879E; --line: #253048; --line-soft: #1B2338; --surface: #0E1424; --surface-alt: #131A2C; --card: #161E33; --card-line: #33405E; --header-bg: rgba(14, 20, 36, .88); --logo-ink: #EEF2FA; --invert: #18223F; --invert-deep: #0A0F1C; --invert-far: #070B15; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .26); --shadow: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .34); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5); } /* --------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--body); background: var(--surface); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6em; font-weight: 600; } h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); } h3 { font-size: clamp(1.1rem, .98rem + .45vw, 1.3rem); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } /* --------------------------------------------------------------- Layout */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .section { padding: clamp(64px, 8vw, 108px) 0; } .section--tight { padding: clamp(48px, 5vw, 72px) 0; } .section--alt { background: var(--surface-alt); } .section--navy { background: var(--invert); color: rgba(255,255,255,.78); } .section--navy h2, .section--navy h3 { color: #fff; } .head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); } .head--center { margin-inline: auto; text-align: center; } .head p { font-size: 1.05rem; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--red); background: var(--red-tint); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } .section--navy .eyebrow { color: #FFB9A7; background: rgba(238,74,45,.16); } .lead { font-size: 1.08rem; color: var(--body); } .accent { color: var(--red); } /* --------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--red); color: #fff; box-shadow: 0 10px 22px rgba(238,74,45,.28); } .btn--primary:hover { background: var(--red-deep); } .btn--navy { background: var(--invert); color: #fff; box-shadow: 0 10px 22px rgba(31,46,105,.24); } .btn--navy:hover { background: var(--invert-deep); } .btn--outline { border-color: var(--line); color: var(--ink); background: var(--card); } .btn--outline:hover { border-color: var(--navy); color: var(--navy); } .btn--light { background: #fff; color: var(--navy); } .btn--ghost-light { border-color: rgba(255,255,255,.35); color: #fff; } .btn--ghost-light:hover { background: rgba(255,255,255,.1); } .btn--sm { padding: 10px 20px; font-size: .88rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* --------------------------------------------------------------- Header */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(19,26,46,.05); } .nav { display: flex; align-items: center; gap: 28px; height: var(--nav-h); } .logo { display: inline-flex; align-items: center; gap: 11px; } .logo svg { height: 30px; width: auto; } .logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; color: var(--logo-ink); line-height: 1; } .logo--light .logo__word { color: #fff; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__links a { font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--body); padding: 9px 16px; border-radius: 999px; transition: color .18s ease, background-color .18s ease; } .nav__links a:hover { color: var(--navy); background: var(--navy-tint); } .nav__links a.is-active { color: var(--navy); font-weight: 600; } /* Tombol di dalam nav: .nav__links a lebih spesifik daripada .btn, jadi properti tombol perlu ditegaskan ulang di sini. */ .nav__links .btn { padding: 11px 24px; font-weight: 600; } .nav__links .btn--primary { color: #fff; background: var(--red); } .nav__links .btn--primary:hover { color: #fff; background: var(--red-deep); } .nav__cta { margin-left: 10px; } .nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); align-items: center; justify-content: center; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--logo-ink); transition: transform .2s ease, opacity .2s ease; } .nav__toggle span::before { transform: translateY(-6px); } .nav__toggle span::after { transform: translateY(4px); } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(-1px); } @media (max-width: 900px) { .nav__toggle { display: inline-flex; } .nav__links { position: absolute; inset: var(--nav-h) 0 auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 16px 24px 26px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); margin-left: 0; display: none; } .nav__links.is-open { display: flex; } .nav__links a { padding: 12px 14px; border-radius: 12px; } .nav__cta { margin: 10px 0 0; justify-content: center; } .nav__links li:last-child { display: flex; } .nav__links li:last-child .btn { flex: 1; } } /* --------------------------------------------------------------- Hero */ .hero { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 6vw, 92px); } .hero::before { content: ""; position: absolute; z-index: -1; inset: -220px -10% auto 45%; height: 620px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(31,46,105,.10), transparent 62%); } .hero::after { content: ""; position: absolute; z-index: -1; left: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(238,74,45,.10), transparent 65%); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .hero h1 { margin-bottom: .5em; } .hero .lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); max-width: 32em; } .hero__actions { margin-top: 30px; } .hero__note { margin-top: 26px; font-size: .9rem; color: var(--muted); } @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } } /* Page hero (inner pages) */ .pagehero { background: var(--surface-alt); border-bottom: 1px solid var(--line); padding: clamp(46px, 5vw, 76px) 0; } .pagehero .head { margin-bottom: 0; } .crumb { font-size: .85rem; color: var(--muted); margin-bottom: 14px; } .crumb a:hover { color: var(--navy); } /* --------------------------------------------------------------- Logo strip */ .strip { border-block: 1px solid var(--line); padding: 28px 0; } .strip__label { text-align: center; font-size: .84rem; color: var(--muted); margin-bottom: 18px; } .strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 52px; } .strip__logo { width: auto; opacity: .78; filter: saturate(.85); transition: opacity .2s ease, filter .2s ease, transform .2s ease; } .strip__logo:hover { opacity: 1; filter: none; transform: translateY(-2px); } .strip__logo--telkomsel { height: 22px; } .strip__logo--aeon { height: 30px; } .strip__logo--transmart { height: 24px; } .strip__logo--agi { height: 34px; } @media (max-width: 620px) { .strip__row { gap: 20px 32px; } .strip__logo--telkomsel { height: 18px; } .strip__logo--aeon { height: 25px; } .strip__logo--transmart { height: 20px; } .strip__logo--agi { height: 28px; } } /* --------------------------------------------------------------- Cards */ .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--card-line); } .card h3 { margin-bottom: .5em; } .card p { font-size: .96rem; } .card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); margin-bottom: 20px; } .card__icon svg { width: 24px; height: 24px; } .card__icon--red { background: var(--red-tint); color: var(--red); } .card__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--navy); } .card__link svg { width: 15px; height: 15px; transition: transform .18s ease; } .card__link:hover svg { transform: translateX(3px); } /* Feature list inside cards */ .ticks { display: grid; gap: 11px; margin-top: 4px; } .ticks li { display: flex; gap: 11px; font-size: .96rem; } .ticks svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; color: var(--red); } .section--navy .ticks li { color: rgba(255,255,255,.8); } .section--navy .ticks svg { color: #FF8E76; } /* --------------------------------------------------------------- Stats */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .stat { background: var(--card); padding: 32px 26px; text-align: center; } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); color: var(--navy); line-height: 1.05; letter-spacing: -.03em; } .stat__num small { font-size: .42em; font-weight: 600; margin-left: 3px; color: var(--red); } .stat__label { margin-top: 8px; font-size: .9rem; color: var(--muted); } .section--navy .stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16); } .section--navy .stat { background: var(--invert); } .section--navy .stat__num { color: #fff; } .section--navy .stat__label { color: rgba(255,255,255,.68); } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------------- Product tiles */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } /* Varian untuk daftar produk di beranda: jumlah kolom dikunci agar barisnya rata, dan sisa item di baris terakhir ditengahkan, bukan menggantung di kiri. */ .tiles--center { display: flex; flex-wrap: wrap; justify-content: center; } .tiles--center .tile { flex: 0 1 calc((100% - 4 * 14px) / 5); } @media (max-width: 1000px) { .tiles--center .tile { flex-basis: calc((100% - 2 * 14px) / 3); } } @media (max-width: 620px) { .tiles--center .tile { flex-basis: calc((100% - 14px) / 2); } } .tile { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .tile:hover { transform: translateY(-2px); border-color: var(--card-line); box-shadow: var(--shadow-sm); } .tile svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--navy); } .tile span { font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: var(--ink); } /* --------------------------------------------------------------- Split */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 68px); align-items: center; } .split--reverse .split__media { order: -1; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-sm); } /* --------------------------------------------------------------- Steps */ .steps { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: -1px; left: 0; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; color: var(--red); background: var(--surface-alt); padding-right: 12px; } .section:not(.section--alt) .step::before { background: var(--surface); } .step h3 { font-size: 1.05rem; margin-bottom: .45em; } .step p { font-size: .93rem; } /* --------------------------------------------------------------- Flow */ .flow { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .flow__node { flex: 1 1 0; min-width: 148px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; } .flow__node strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); } .flow__node span { font-size: .85rem; color: var(--muted); } .flow__arrow { align-self: center; flex: 0 0 auto; color: var(--red); } .flow__arrow svg { width: 18px; height: 18px; } @media (max-width: 760px) { .flow__arrow { display: none; } .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); } } /* --------------------------------------------------------------- Accordion */ .faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: none; border: 0; padding: 22px 4px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); } .faq__q:hover { color: var(--navy); } .faq__icon { flex: 0 0 24px; width: 24px; height: 24px; position: relative; margin-top: 3px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% 3px auto; height: 2px; border-radius: 2px; background: var(--red); transition: transform .25s ease; } .faq__icon::after { transform: rotate(90deg); } .faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); } .faq__a { overflow: hidden; height: 0; transition: height .28s ease; } .faq__a > div { padding: 0 4px 24px; font-size: .98rem; max-width: 68ch; } /* --------------------------------------------------------------- CTA */ .cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--invert) 0%, var(--invert-deep) 62%, var(--invert-far) 100%); border-radius: clamp(20px, 3vw, 32px); padding: clamp(38px, 5vw, 66px); color: rgba(255,255,255,.8); display: grid; grid-template-columns: minmax(0,1.6fr) auto; gap: 32px; align-items: center; } .cta::after { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(238,74,45,.32), transparent 62%); } .cta > * { position: relative; z-index: 1; } .cta h2 { color: #fff; margin-bottom: .4em; } .cta p { max-width: 48ch; } @media (max-width: 820px) { .cta { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- Contact */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 60px); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .contact-card:hover { transform: translateY(-2px); border-color: var(--card-line); box-shadow: var(--shadow-sm); } .contact-card__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); } .contact-card__icon svg { width: 21px; height: 21px; } .contact-card strong { display: block; font-family: var(--font-display); font-size: .97rem; color: var(--ink); } .contact-card span { font-size: .92rem; color: var(--muted); } .form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field label { font-family: var(--font-display); font-weight: 500; font-size: .88rem; color: var(--ink); } .field input, .field select, .field textarea { font: inherit; font-size: .96rem; color: var(--ink); padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .18s ease, box-shadow .18s ease; width: 100%; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-soft); box-shadow: 0 0 0 3px rgba(31,46,105,.1); } .field--split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } @media (max-width: 560px) { .field--split { grid-template-columns: 1fr; } } .form__note { font-size: .85rem; color: var(--muted); } /* --------------------------------------------------------------- Footer */ .site-footer { background: var(--invert-deep); color: rgba(255,255,255,.65); padding: clamp(48px, 5vw, 72px) 0 32px; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; } @media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 40px; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .site-footer p { font-size: .93rem; max-width: 38ch; } .footer__title { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .footer__list { display: grid; gap: 11px; font-size: .93rem; } .footer__list a:hover { color: #fff; } .footer__address { font-style: normal; font-size: .93rem; line-height: 1.75; max-width: 30ch; } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .86rem; } .socials { display: flex; gap: 10px; margin-top: 20px; } .socials a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background-color .18s ease, transform .18s ease; } .socials a:hover { background: var(--red); transform: translateY(-2px); } .socials svg { width: 18px; height: 18px; } /* --------------------------------------------------------------- Reveal */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn:hover, .card:hover, .tile:hover, .contact-card:hover { transform: none; } } /* --------------------------------------------------------------- Utilities */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: clamp(32px, 4vw, 48px); } /* --------------------------------------------------- Partner card row */ .partner-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .partner { flex: 1 1 200px; max-width: 240px; margin: 0; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 22px 22px; display: flex; flex-direction: column; align-items: center; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--card-line); } .partner img { width: auto; max-width: 100%; height: 36px; object-fit: contain; } .partner img[alt="Telkomsel"] { height: 24px; } .partner figcaption { margin-top: 18px; font-size: .87rem; color: var(--muted); line-height: 1.5; } /* ------------------------------------------------------- Tombol tema */ .theme-toggle { order: 3; flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--body); transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .theme-toggle:hover { color: var(--navy); border-color: var(--navy-soft); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } .nav__links { order: 2; } @media (max-width: 900px) { .theme-toggle { order: 2; margin-left: auto; } .nav__toggle { order: 3; margin-left: 10px; } .nav__links { order: 4; } } /* ---------------------------- Solusi ringkas (beranda), nama saja */ .briefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .briefs { grid-template-columns: 1fr; } } .brief { display: flex; align-items: center; gap: 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .brief:hover { transform: translateY(-2px); border-color: var(--card-line); box-shadow: var(--shadow-sm); } .brief__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); } .brief__icon svg { width: 20px; height: 20px; } .brief__icon--red { background: var(--red-tint); color: var(--red); } .brief h3 { margin: 0; font-size: .98rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.35; } /* Logo mitra di tema gelap: tanpa alas, hanya dicerahkan sedikit supaya warna merek tetap terbaca di atas latar gelap. */ :root[data-theme="dark"] .strip__logo { opacity: 1; filter: brightness(1.42) saturate(1.12); } :root[data-theme="dark"] .strip__logo:hover { opacity: 1; filter: brightness(1.6) saturate(1.2); } :root[data-theme="dark"] .partner img { filter: brightness(1.35) saturate(1.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strip__logo { opacity: 1; filter: brightness(1.42) saturate(1.12); } :root:not([data-theme="light"]) .strip__logo:hover { opacity: 1; filter: brightness(1.6) saturate(1.2); } :root:not([data-theme="light"]) .partner img { filter: brightness(1.35) saturate(1.12); } } /* -------------------------------------------------- Visi & Misi */ .vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } @media (max-width: 820px) { .vm { grid-template-columns: 1fr; } } .vm__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); position: relative; overflow: hidden; } .vm__item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--red); } .vm__item:nth-child(1)::before { background: var(--navy-soft); } .vm__label { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .vm__item:nth-child(1) .vm__label { color: var(--navy); } .vm__item p { font-size: 1.02rem; color: var(--body); } .vm__item .ticks { margin-top: 4px; } /* ------------------------------------------------ Perjalanan Kami */ .journey { position: relative; margin-top: clamp(30px, 4vw, 44px); max-width: 720px; margin-inline: auto; } .journey::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--navy-soft), var(--red)); opacity: .35; } .journey__item { position: relative; padding: 0 0 34px 40px; } .journey__item:last-child { padding-bottom: 0; } .journey__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--navy-soft); } .journey__item:last-child::before { border-color: var(--red); } .journey__year { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .08em; color: var(--red); background: var(--red-tint); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; } .journey__item h3 { font-size: 1.08rem; margin-bottom: .4em; } .journey__item p { font-size: .97rem; max-width: 62ch; } /* Kartu kontak non-tautan (alamat kantor) */ .contact-card--static { cursor: default; } .contact-card--static:hover { transform: none; border-color: var(--line); box-shadow: none; } .contact-card--static span span { line-height: 1.65; } /* Daftar channel di dalam panel: dua kolom, sisa item di baris terakhir ditengahkan */ .tiles--panel { display: flex; flex-wrap: wrap; justify-content: center; } .tiles--panel .tile { flex: 0 1 calc((100% - 14px) / 2); } @media (max-width: 620px) { .tiles--panel .tile { flex-basis: 100%; } } /* Panel channel butuh ruang lebih lebar daripada kartu biasa: di bawah 900px panelnya ditumpuk agar isinya tetap dua kolom, bukan memaksa satu kolom sempit. */ @media (max-width: 900px) { .grid--channels { grid-template-columns: 1fr; } } /* --------------------------------------------------------- reCAPTCHA */ .captcha { display: grid; gap: 10px; } .captcha[hidden] { display: none; } /* Widget Google berukuran tetap 304px, dibuat menyusut di layar sempit */ #recaptcha-widget { transform-origin: 0 0; } @media (max-width: 400px) { #recaptcha-widget { transform: scale(.86); height: 68px; } } .form__error { margin: 0; font-size: .87rem; color: var(--red); font-weight: 500; } .form__error[hidden] { display: none; }