/* turutmengundang.com landing (index.html) and Kontak Admin (kontak.html).
   Built from the designer's PSDs: phone = 720px artboard, desktop = 1440px artboard.
   Sizes are written in design pixels / 10 (1rem = 10 design px); html font-size scales the page
   so the layout matches the artboard at any width: phone up to 720px, desktop from 900px. */

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --u: calc(min(100vw, 720px) / 720);
  --ink: #000;
  --ink-2: #111;
  --grey: #5f5f5f;
  --muted: #8c8c8c;
  --pill: #d5d5d5;
  --card: #f3f3f3;
  --line: #e2e2e2;
}
@media (min-width: 900px) {
  :root { --u: calc(min(100vw, 1440px) / 1440); }
}

html { font-size: calc(var(--u) * 10); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 2rem;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p { margin: 0; font-weight: 600; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; }
[id] { scroll-margin-top: 2rem; }
.ph { display: inline; }
.dk { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; width: 72rem; margin: 0 auto; overflow: hidden; background: #fff; }

/* soft "tm" watermark behind the hero: grey shadows only, so it multiplies into the white page */
.orn { position: absolute; pointer-events: none; mix-blend-mode: multiply; max-width: none; z-index: 0; }
.orn-phone { left: 11.3rem; top: 0; width: 85.8rem; }
.orn-desktop { display: none; left: 9.2rem; top: 0; width: 170rem; }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: 8.6rem; border-radius: 4.3rem;
  background: var(--ink); color: #fff;
  font-size: 2.8rem; font-weight: 600; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { opacity: .86; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-white { background: #fff; color: var(--ink); }

/* ---------- navigation ---------- */
.nav { position: relative; z-index: 20; height: 17.6rem; }
.nav .logo { position: absolute; left: 3.7rem; top: 4.4rem; display: block; width: 32.8rem; height: 8.8rem; }
.nav .logo img { width: 100%; height: 100%; }
.nav .logo .logo-wide { display: none; }
.nav .links, .nav .nav-cta { display: none; }
.burger {
  position: absolute; right: 5.2rem; top: 6.24rem;
  width: 3.8rem; height: 2.65rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 0.55rem; border-radius: 0.28rem; background: var(--ink); }

/* full-screen menu (phone) */
.menu {
  position: fixed; inset: 0; z-index: 100; background: #fff;
  display: none; overflow-y: auto;
}
.menu.open { display: block; }
.menu-in { position: relative; width: 72rem; min-height: 100%; margin: 0 auto; }
.menu .logo { position: absolute; left: 3.7rem; top: 4.4rem; width: 32.8rem; height: 8.8rem; display: block; }
.menu .logo img { width: 100%; height: 100%; }
.menu-close {
  position: absolute; right: 4.8rem; top: 5.4rem; width: 4.2rem; height: 4.2rem;
  background: none; border: 0; cursor: pointer;
}
.menu-close::before, .menu-close::after {
  content: ''; position: absolute; left: -0.4rem; top: 1.7rem; width: 5rem; height: 0.8rem; border-radius: 0.4rem; background: var(--ink);
  transform: rotate(45deg);
}
.menu-close::after { transform: rotate(-45deg); }
.menu-list { position: absolute; left: 3.7rem; right: 3.7rem; top: 24rem; }
.menu-list a {
  position: relative; display: flex; align-items: baseline; justify-content: space-between;
  height: 14rem; padding-top: 3.4rem; border-bottom: 0.25rem solid var(--line);
  font-size: 6.4rem; line-height: 8.3rem; font-weight: 600;
}
.menu-list a small { font-size: 2.4rem; font-weight: 500; color: var(--muted); }
.menu-list a.on::after { content: ''; position: absolute; left: -0.2rem; bottom: -0.25rem; width: 9.3rem; height: 0.8rem; background: var(--ink); }
.menu-copy { position: absolute; left: 0; right: 0; bottom: 3.4rem; text-align: center; font-size: 2.1rem; font-weight: 400; color: var(--muted); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; padding: 0 3.6rem; margin-top: 0.6rem; height: 31.2rem; }
.hero h1 { font-size: 6.4rem; line-height: 6.4rem; letter-spacing: 0; }

/* ---------- design thumbnails ---------- */
.designs { position: relative; z-index: 1; margin-top: 0; }
.grid-wrap { position: relative; margin: 0 2rem 0 2.8rem; overflow: hidden; }
.grid-wrap.collapsed { max-height: 101.6rem; -webkit-mask-image: linear-gradient(#000 58%, transparent 99%); mask-image: linear-gradient(#000 58%, transparent 99%); }
.grid { display: grid; grid-template-columns: repeat(2, 32.9rem); column-gap: 1.4rem; row-gap: 1.6rem; }
.tpl {
  --k: calc(32.9rem / 720); /* one PSD pixel of the 720px thumbnail */
  position: relative; display: block; width: 32.9rem; height: 32.9rem; padding: 0; border: 0;
  border-radius: 3.2rem; overflow: hidden; background: var(--pill); cursor: pointer;
}
.tpl-in { position: absolute; inset: 0; transition: transform .45s ease; }
.tpl:hover .tpl-in { transform: scale(1.04); }
.tpl-in img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* the template name: live text placed like the thumbnail PSD's text layer, one word per line */
.tpl-name {
  position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--top) * var(--k));
  transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none;
  font-size: calc(var(--fs) * var(--k)); line-height: calc(var(--lead) * var(--k)); font-weight: 400;
}
.tpl-name span { display: block; }
.tpl:disabled { cursor: wait; opacity: .6; }
.see-all { margin: 1.1rem 2.9rem 0; width: calc(100% - 5.8rem); }
.see-all[hidden] { display: none; }

/* ---------- why ---------- */
.why { position: relative; z-index: 1; padding-top: 8.7rem; }
.why h2, .features h2 { font-size: 6.4rem; line-height: 7rem; padding: 0 3.7rem; }
.why-grid { margin: 2.4rem 2.8rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.2rem; }
.why-card { position: relative; background: var(--card); border-radius: 3.2rem; padding: 0 3.6rem; height: 32.9rem; }
.why-card .no { display: block; padding-top: 3.9rem; font-size: 6rem; line-height: 6rem; font-weight: 500; color: var(--muted); }
.why-card h3 { margin-top: 1.7rem; font-size: 3.4rem; line-height: 3.6rem; white-space: nowrap; }
.why-card p { margin-top: 1.4rem; font-size: 2rem; line-height: 2.7rem; font-weight: 400; color: var(--grey); }
.why-card.wide { grid-column: 1 / -1; height: 23.9rem; display: grid; grid-template-columns: 33.4rem 1fr; column-gap: 0; align-content: start; }
.why-card.wide .no { grid-column: 1 / -1; }
.why-card.wide h3 { margin-top: 1.7rem; }
.why-card.wide p { margin-top: 1.4rem; margin-left: 0; align-self: start; }

/* ---------- live edit (black card) ---------- */
.edit { position: relative; z-index: 1; margin: 1.4rem 2.9rem 0; height: 92.6rem; border-radius: 4rem; background: var(--ink-2); color: #fff; overflow: hidden; }
.edit h2 { position: absolute; left: 4.1rem; top: 5.6rem; font-size: 5.6rem; line-height: 6.4rem; }
.edit p { position: absolute; left: 4.1rem; top: 22.4rem; font-size: 2.4rem; line-height: 3.4rem; font-weight: 400; color: #b8b8b8; }
.phone { position: absolute; left: 50%; top: 34.7rem; width: 59.5rem; margin-left: -29.75rem; aspect-ratio: 1314 / 2661; }
.phone .scr { position: absolute; left: 5.4795%; top: 2.405%; width: 89.041%; height: 95.15%; overflow: hidden; }
.phone .scr img { display: block; width: 100%; margin-top: -15.1%; }
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- features ---------- */
.features { position: relative; z-index: 1; padding-top: 9.9rem; }
.features .sub { margin: 3.1rem 0 0; padding: 0 3.8rem; font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; color: var(--ink); }
.feat-grid { margin: 6rem 2.9rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.2rem; }
.feat { height: 19.2rem; padding: 4.6rem 0 0 2.9rem; background: var(--card); border-radius: 3.2rem; }
.feat h3 { font-size: 2.8rem; line-height: 3.6rem; }
.feat p { margin-top: 2rem; font-size: 2.1rem; line-height: 2.9rem; font-weight: 400; color: var(--grey); }
.feat:nth-child(1) { order: 2; } .feat:nth-child(2) { order: 1; }
.feat:nth-child(3) { order: 4; } .feat:nth-child(4) { order: 3; }
.feat:nth-child(5) { order: 5; } .feat:nth-child(6) { order: 6; } .feat:nth-child(7) { order: 7; } .feat:nth-child(8) { order: 8; }
.request {
  margin: 1.5rem 2.9rem 0; height: 14.5rem; border-radius: 3.2rem; background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 5.6rem 0 5.4rem;
}
.request h3 { font-size: 2.8rem; white-space: nowrap; }
.request .btn { width: 32.2rem; height: 8.2rem; font-size: 2.4rem; flex: none; }

/* ---------- price ---------- */
.price { position: relative; z-index: 1; margin: 12.1rem 2.8rem 0; border-radius: 4rem; background: var(--card); padding: 2.9rem 3.6rem 5.6rem; }
.price .old { position: relative; display: inline-block; font-size: 4.16rem; line-height: 5.4rem; font-weight: 600; color: var(--muted); margin-left: 0.8rem; }
.price .old::after { content: ''; position: absolute; left: -1.2rem; right: -1.7rem; top: 2.6rem; height: 0.35rem; background: var(--ink); }
.price .now { display: block; margin-top: 0.2rem; font-size: 8.04rem; line-height: 8.2rem; letter-spacing: -0.01em; }
.price .per { margin-top: 1.8rem; font-size: 2.6rem; line-height: 3.4rem; font-weight: 400; color: var(--grey); }
.price hr { margin: 3.1rem 0 0; border: 0; border-top: 0.25rem solid var(--line); }
.price ul { list-style: none; margin: 3rem 0 0; padding: 0; }
.price li { position: relative; padding-left: 3.2rem; font-size: 2.6rem; line-height: 3.4rem; color: var(--ink-2); font-weight: 400; }
.price li + li { margin-top: 2rem; }
.price li::before { content: ''; position: absolute; left: 0; top: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); }
.price .btn { margin-top: 5.8rem; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; margin: 11.1rem 2.8rem 0; border-top: 0.25rem solid var(--line); padding: 4.1rem 0 4rem 0.9rem; }
.foot .logo { display: block; width: 32.7rem; height: 8.8rem; }
.foot .logo img { width: 100%; height: 100%; }
.foot nav { display: flex; gap: 0; margin-top: 6.1rem; font-size: 2.6rem; line-height: 3.4rem; font-weight: 500; }
.foot nav a { display: block; }
.foot nav a:nth-child(1) { width: 13rem; }
.foot nav a:nth-child(2) { width: 23rem; }
.foot nav a.dk-only { display: none; }
.foot .copy { margin-top: 4.1rem; font-size: 2.1rem; line-height: 2.7rem; font-weight: 400; color: var(--muted); }

/* ---------- Kontak Admin ---------- */
.contact-head { position: relative; z-index: 1; padding: 0 3.9rem; }
.contact-head h1 { font-size: 6.4rem; line-height: 7.6rem; }
.contact-head p { margin-top: 3rem; font-size: 2.8rem; line-height: 3.8rem; font-weight: 400; color: var(--ink-2); }
.contact-list { position: relative; margin: 7.5rem 3rem 0; display: grid; gap: 1.3rem; }
.c-card { position: relative; height: 17.3rem; padding: 4.4rem 4rem 0; background: var(--card); border-radius: 3.2rem; }
.c-card .lbl { display: block; font-size: 2.2rem; line-height: 2.9rem; font-weight: 500; color: var(--muted); }
.c-card .val { display: block; margin-top: 1.9rem; font-size: 3.2rem; line-height: 4.2rem; font-weight: 600; white-space: nowrap; }
.c-card.mail .val { font-size: 2.8rem; line-height: 3.6rem; }
.c-card .btn { position: absolute; right: 3.6rem; top: 5.3rem; width: 13.7rem; height: 6.7rem; font-size: 2.4rem; }
.c-card.hours .val { font-size: 2.8rem; line-height: 3.6rem; }

.faq { position: relative; z-index: 1; margin: 19.3rem 3rem 0; }
.faq h2 { font-size: 6.4rem; line-height: 7rem; margin-bottom: 4rem; }
.faq-list { border-top: 0.25rem solid var(--line); }
.faq-item { border-bottom: 0.25rem solid var(--line); }
.faq-item button {
  position: relative; display: block; width: 100%; padding: 4.2rem 8rem 3.1rem 0.9rem; text-align: left;
  background: none; border: 0; cursor: pointer; font-size: 3rem; line-height: 3.9rem; font-weight: 600;
}
.faq-item button::before, .faq-item button::after {
  content: ''; position: absolute; right: 1.2rem; top: 5rem; width: 3.5rem; height: 0.7rem; border-radius: 0.2rem; background: var(--ink);
}
.faq-item button::after { transform: rotate(90deg); transition: transform .2s ease, opacity .2s ease; }
.faq-item.open button::after { transform: rotate(0); opacity: 0; }
.faq-a { display: none; padding: 0 0 3.4rem 0.9rem; max-width: 50rem; font-size: 2.6rem; line-height: 3.6rem; font-weight: 400; color: var(--grey); }
.faq-item.open .faq-a { display: block; }

.cta { position: relative; z-index: 1; margin: 10rem 3rem 0; height: 33.3rem; border-radius: 4rem; background: var(--ink-2); color: #fff; padding: 7.4rem 4rem 0; }
.cta h2 { font-size: 4.8rem; line-height: 5.6rem; }
.cta .btn { position: absolute; left: 3.8rem; top: 21.4rem; width: 32.3rem; height: 8.3rem; font-size: 2.4rem; }
.contact-page .foot { margin-top: 10rem; }

/* ================= desktop ================= */
@media (min-width: 900px) {
  .page { width: 100%; max-width: 144rem; }
  .ph { display: none; }
  .dk { display: inline; }
  .orn-phone { display: none; }
  .orn-desktop { display: block; }
  .btn { height: 8.6rem; border-radius: 4.3rem; }

  .nav { position: sticky; top: 0; height: 12rem; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(1.2rem); backdrop-filter: blur(1.2rem); }
  .nav .logo { left: 5.8rem; top: 2.5rem; width: 39.2rem; height: 7.3rem; }
  .nav .logo .logo-std { display: none; }
  .nav .logo .logo-wide { display: block; }
  .burger { display: none; }
  .menu { display: none !important; }
  .nav .links { display: flex; position: absolute; left: 47.6rem; top: 2.8rem; gap: 0.2rem; }
  .nav .links a { display: block; height: 6.3rem; padding: 0 2.4rem; border-radius: 3.15rem; font-size: 2.4rem; line-height: 6.3rem; font-weight: 500; transition: background .2s ease; }
  .nav .links a.on { background: var(--pill); }
  .nav .nav-cta { display: flex; position: absolute; right: 11.9rem; top: 2.8rem; width: 20.3rem; height: 6.3rem; border-radius: 3.15rem; font-size: 2.4rem; }
  [id] { scroll-margin-top: 12rem; }

  .hero { margin-top: 0; height: 47.8rem; padding: 0; text-align: center; }
  .hero h1 { padding-top: 16.1rem; font-size: 9rem; line-height: 9.75rem; }
  .grid-wrap { margin: 0 11.8rem; }
  .grid-wrap.collapsed { max-height: 41.3rem; -webkit-mask-image: linear-gradient(#000 20%, transparent 100%); mask-image: linear-gradient(#000 20%, transparent 100%); }
  .grid { grid-template-columns: repeat(4, 28.5rem); column-gap: 2.1rem; row-gap: 1.6rem; }
  .tpl { --k: calc(28.5rem / 720); width: 28.5rem; height: 28.5rem; }
  .see-all { margin: 0 auto; width: 44.2rem; }

  .why { padding-top: 12rem; }
  .why h2, .features h2 { font-size: 7.2rem; line-height: 9.4rem; padding: 0 12rem; }
  .why-grid { margin: 4.3rem 11.8rem 0; grid-template-columns: repeat(2, 1fr); gap: 2.1rem; }
  .why-card, .why-card.wide { display: block; height: 35.1rem; padding: 0 4.6rem; grid-column: auto; }
  .why-card .no { padding-top: 4.9rem; font-size: 2.4rem; line-height: 3.1rem; }
  .why-card h3 { margin-top: 2.1rem; font-size: 4.4rem; line-height: 5.2rem; }
  .why-card p { margin-top: 3.2rem; font-size: 2.4rem; line-height: 3.4rem; }
  .why-card.wide h3 { margin-top: 2.1rem; }
  .why-card.wide p { margin-top: 3.2rem; }

  .edit { margin: 8.1rem 11.8rem 0; height: 70.3rem; border-radius: 4rem; }
  .edit h2 { left: 8.6rem; top: 18rem; font-size: 8rem; line-height: 8.8rem; }
  .edit p { left: 8.6rem; top: 40.2rem; font-size: 2.8rem; line-height: 4rem; }
  .phone .scr img { margin-top: 0; }
  .phone { left: auto; right: 15.6rem; margin-left: 0; top: 4.8rem; width: 31rem; }

  .features { padding-top: 14rem; }
  .features .sub { margin-top: 0.8rem; padding: 0 12rem; }
  .feat-grid { margin: 7.1rem 11.8rem 0; grid-template-columns: repeat(4, 1fr); gap: 2.1rem; }
  .feat { height: 25.3rem; padding: 5.4rem 0 0 3.4rem; }
  .feat p { margin-top: 1.9rem; font-size: 2rem; line-height: 3rem; }
  .feat:nth-child(n) { order: 0; }
  .request { margin: 2.1rem 11.8rem 0; height: 17.3rem; padding: 0 4.8rem 0 5rem; }
  .request h3 { font-size: 4.4rem; line-height: 5.7rem; }
  .request .btn { width: 26.3rem; height: 7.5rem; }

  .price { margin: 7.9rem 11.8rem 0; height: 52.3rem; padding: 0; display: grid; grid-template-columns: 59.4rem 1fr; grid-template-rows: auto 1fr; }
  .price .left { padding: 7.6rem 0 0 8.6rem; }
  .price .old { font-size: 3.2rem; line-height: 4.2rem; margin-left: 0; font-weight: 500; }
  .price .old::after { left: -0.2rem; right: -0.2rem; top: 1.8rem; height: 0.4rem; }
  .price .now { margin-top: 1.6rem; font-size: 8rem; line-height: 8.4rem; }
  .price .per { position: absolute; left: 8.6rem; top: 36.1rem; margin: 0; width: 40rem; font-size: 2.8rem; line-height: 3.6rem; }
  .price .right { padding: 9rem 0 0 0; }
  .price hr { display: none; }
  .price ul { margin: 0; }
  .price li { padding-left: 4.2rem; font-size: 2.6rem; }
  .price li + li { margin-top: 3rem; }
  .price li::before { top: 0.6rem; width: 2.2rem; height: 2.2rem; left: 0; }
  .price .btn { margin-top: 10.9rem; width: 36.2rem; }

  .foot { margin: 12.7rem 11.8rem 0; padding: 5.4rem 0 0 0.2rem; height: 24.1rem; }
  .foot .logo { width: 16.4rem; height: 4.4rem; }
  .foot nav { position: absolute; left: 35.8rem; top: 6.8rem; margin: 0; gap: 0; font-size: 2.4rem; }
  .foot nav a { padding: 0 2.4rem; }
  .foot nav a:nth-child(1), .foot nav a:nth-child(2) { width: auto; }
  .foot nav a.dk-only { display: block; }
  .foot .copy { position: absolute; left: 0.2rem; top: 16rem; margin: 0; }

  /* Kontak Admin */
  .contact-head { text-align: center; padding: 0; margin-top: 0; }
  .contact-head h1 { padding-top: 8rem; font-size: 11.2rem; line-height: 12rem; }
  .contact-head p { margin-top: 3.8rem; font-size: 3.4rem; line-height: 4.6rem; color: var(--grey); }
  .contact-list { margin: 11rem 12rem 0; grid-template-columns: repeat(3, 1fr); gap: 2.1rem; }
  .c-card { height: 30.3rem; padding: 4.9rem 4.2rem 0; }
  .c-card .lbl { font-size: 2.4rem; line-height: 3.1rem; }
  .c-card .val { margin-top: 4rem; font-size: 2.2rem; line-height: 2.9rem; }
  .c-card.mail .val { font-size: 2.2rem; line-height: 2.9rem; }
  .c-card .btn { right: auto; left: 4rem; top: 19.6rem; width: 16.3rem; height: 6.7rem; }
  .c-card.hours { grid-column: 1 / -1; height: 15.3rem; padding-top: 3.8rem; }
  .c-card.hours .val { margin-top: 1.2rem; font-size: 3.8rem; line-height: 4.9rem; }

  .faq { margin: 12.2rem 12rem 0; }
  .faq h2 { font-size: 7.2rem; line-height: 9.4rem; margin-bottom: 3.6rem; }
  .faq .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .faq-item button { padding: 3.6rem 8rem 3.15rem 0; font-size: 3.2rem; line-height: 4.2rem; }
  .faq-item button::before, .faq-item button::after { right: 1.4rem; width: 3.1rem; top: 5.2rem; }
  .faq-a { padding: 0 0 1.55rem; margin-top: -1.5rem; max-width: 72rem; line-height: 3.8rem; }

  .cta { margin: 10rem 12rem 0; height: 38.3rem; padding: 8.7rem 0 0 8.6rem; }
  .cta h2 { font-size: 7.2rem; line-height: 8rem; }
  .cta .btn { left: auto; right: 8.4rem; top: 14.8rem; width: 36.3rem; height: 8.7rem; font-size: 2.8rem; }
  .contact-page .foot { margin-top: 11.7rem; }
}