/* weplay template (14): small fixes + text-page layout + FAQ section. Written for this pipeline (tools/make_weplay_template.py). */

/* the brand logo is a square tile here (the desktop copy had a wide wordmark picture) */
body.yp-studio .site-header .brand{flex:0 1 auto!important;width:auto!important;max-width:calc(100% - 70px)!important;min-width:0;justify-content:flex-start}
body.yp-studio .brand-image{display:block;height:38px!important;width:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain}
body.yp-studio .footer-brand-image{display:block;height:48px!important;width:auto!important;max-width:240px!important;max-height:none!important;object-fit:contain}
body.yp-studio .footer-columns{--footer-column-count:1!important}

/* FAQ block on the home page */
.yp-faq .section-label{margin-bottom:26px}
.yp-faq h2{max-width:18ch;margin:0 0 34px}
.yp-faq-list{display:grid;gap:0;max-width:860px;border-top:1px solid var(--studio-rule,#d5d7cf)}
.yp-faq-list details{border-bottom:1px solid var(--studio-rule,#d5d7cf);padding:2px 0}
.yp-faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font-weight:800;font-size:clamp(17px,1.6vw,20px);line-height:1.35;color:var(--cream)}
.yp-faq-list summary::-webkit-details-marker{display:none}
.yp-faq-list summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--studio-rule,#d5d7cf);font-size:20px;line-height:1;font-weight:500;color:var(--orange)}
.yp-faq-list details[open] summary::after{content:"\2212"}
.yp-faq-list details p{margin:0 0 22px;max-width:70ch;color:var(--muted);line-height:1.75;font-size:17px}
.yp-faq-list a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}

/* text pages (download / login / ios / keamanan-apk / about / privacy / contact / disclaimer / keyword pages) */
.yp-article{padding:clamp(118px,13vw,150px) 0 clamp(56px,8vw,96px);min-height:60vh}
.yp-article-body{max-width:820px;margin:0 auto;color:var(--cream)}
.yp-article-body .mg-h1{font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.03em;font-weight:900;margin:0 0 20px}
.yp-article-body .mg-lead{font-size:clamp(18px,2vw,21px);line-height:1.7;color:var(--muted);margin:0 0 30px}
.yp-article-body .mg-sec{padding:6px 0 10px}
.yp-article-body .mg-sec h2{font-size:clamp(23px,3vw,31px);line-height:1.2;letter-spacing:-.02em;font-weight:800;margin:34px 0 10px;max-width:none}
.yp-article-body p{font-size:17px;line-height:1.78;margin:0 0 14px}
.yp-article-body ul,.yp-article-body ol{margin:.6em 0 1em;padding-left:24px}
.yp-article-body li{margin:.5em 0;line-height:1.7;font-size:17px}
.yp-article-body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.yp-article-body strong{font-weight:800}
.yp-article-body .mg-table{overflow-x:auto;margin:16px 0}
.yp-article-body .mg-table table{width:100%;border-collapse:collapse;font-size:16px}
.yp-article-body .mg-table th,.yp-article-body .mg-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--studio-rule,#d5d7cf);vertical-align:top}
.yp-article-body .mg-table th{font-weight:800}
.yp-article-body .mg-faq{border-top:1px solid var(--studio-rule,#d5d7cf);margin-top:10px}
.yp-article-body .mg-faq details{border-bottom:1px solid var(--studio-rule,#d5d7cf);padding:2px 0}
.yp-article-body .mg-faq summary{cursor:pointer;font-weight:800;padding:16px 0;font-size:18px;line-height:1.4}
.yp-article-body .mg-faq details p{color:var(--muted)}
.yp-article-body .mg-rel{margin:38px 0 8px;padding-top:20px;border-top:1px solid var(--studio-rule,#d5d7cf)}
.yp-article-body .mg-rel-h{font-weight:800;margin:0 0 8px}
.yp-article-body .mg-rel ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.yp-article-body .mg-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
.yp-article-body .mg-cta a,.yp-article-cta a,.yp-article-body a.mg-dl{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:800;font-size:17px;text-decoration:none;background:var(--orange);color:#ffffff;box-shadow:0 14px 40px rgba(var(--orange-rgb,216,95,11),.22)}
.yp-article-body .mg-cta a.appstore{background:transparent;color:var(--cream);border:1px solid var(--studio-rule,#d5d7cf);box-shadow:none}
.yp-article-cta{margin:38px 0 0}
.yp-article-cta a.mg-dl{color:#ffffff;text-decoration:none}

@media (max-width:700px){
  .yp-faq-list summary{padding:17px 0}
  .yp-article-body .mg-table table{font-size:15px}
}