/* kirtara.com/smm — melengkapi media.css (md-hero, md-facts, md-head, md-story, md-plan, md-budget, md-faq). CSP: tanpa style inline. */

/* Adegan 1: video masuk */
.sm-scene--1 { display: grid; align-content: center; gap: 18px; }
.sm-scene--1[hidden] { display: none; }
.sm-s1__player { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 16 / 8; padding: 14px 16px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; animation: md-in-up .5s var(--ease) .1s both; }
.sm-s1__title { font: 600 13px/1.3 var(--text); opacity: .85; }
.sm-s1__play { position: absolute; left: 50%; top: 45%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 2px solid rgba(245, 241, 234, .7); }
.sm-s1__play::after { content: ''; position: absolute; left: 18px; top: 13px; border-left: 16px solid var(--paper); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sm-s1__track { position: relative; height: 6px; background: rgba(245, 241, 234, .2); }
.sm-s1__head { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--paper); transform-origin: left; animation: md-grow 3s linear .6s both; opacity: .55; }
.sm-s1__cut { position: absolute; top: -7px; width: 10%; height: 20px; border: 2px solid var(--accent); background: rgba(255, 91, 54, .35); animation: md-pop .35s var(--ease) both; }
.sm-s1__cut--1 { left: 17%; animation-delay: 1.3s; } .sm-s1__cut--2 { left: 42%; animation-delay: 2.1s; } .sm-s1__cut--3 { left: 72%; animation-delay: 2.9s; }
.sm-s1__time { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.sm-s1__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sm-s1__marks li { padding: 7px 10px; background: var(--white); border: 1.5px solid var(--accent); font-size: 13px; animation: md-in-up .4s var(--ease) both; }
.sm-s1__marks li b { color: var(--accent-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.sm-s1__marks li:nth-child(1) { animation-delay: 1.5s; } .sm-s1__marks li:nth-child(2) { animation-delay: 2.3s; } .sm-s1__marks li:nth-child(3) { animation-delay: 3.1s; }

/* Adegan 2: klip vertikal */
.sm-scene--2 { display: grid; align-content: center; gap: 16px; }
.sm-scene--2[hidden] { display: none; }
.sm-s2__clips { display: flex; justify-content: center; gap: 10px; }
.sm-s2__clips li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; width: 30%; max-width: 150px; aspect-ratio: 9 / 16; padding: 10px; background: var(--plum); color: var(--paper); animation: md-in-up .5s var(--ease) both; }
.sm-s2__clips li:nth-child(1) { animation-delay: .2s; } .sm-s2__clips li:nth-child(2) { animation-delay: .7s; } .sm-s2__clips li:nth-child(3) { animation-delay: 1.2s; }
.sm-s2__hook { position: absolute; left: 8px; right: 8px; top: 14px; padding: 6px; background: var(--paper); color: var(--ink); font: 700 12px/1.2 var(--display); text-align: center; animation: md-pop .4s var(--ease) both; }
.sm-s2__clips li:nth-child(1) .sm-s2__hook { animation-delay: 1.7s; } .sm-s2__clips li:nth-child(2) .sm-s2__hook { animation-delay: 2.1s; } .sm-s2__clips li:nth-child(3) .sm-s2__hook { animation-delay: 2.5s; }
.sm-s2__clips span { display: block; height: 5px; background: rgba(245, 241, 234, .75); transform-origin: left; animation: md-grow .4s var(--ease) both; }
.sm-s2__clips span:nth-of-type(2) { width: 70%; }
.sm-s2__clips li:nth-child(1) span { animation-delay: 2.9s; } .sm-s2__clips li:nth-child(2) span { animation-delay: 3.1s; } .sm-s2__clips li:nth-child(3) span { animation-delay: 3.3s; }
.sm-s2__clips small { font-size: 11px; opacity: .7; }
.sm-s2__note { text-align: center; font-size: 14px; color: var(--ink-2); animation: md-in-up .4s var(--ease) 3.6s both; }
.sm-s2__note b { color: var(--ink); }
@media (min-width: 760px) { .sm-s2__hook { font-size: 14px; } .sm-s2__clips { gap: 18px; } }

/* Adegan 3: grid akun */
.sm-scene--3 { display: grid; align-content: center; gap: 14px; }
.sm-scene--3[hidden] { display: none; }
.sm-s3__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: min(100%, 520px); margin: 0 auto; }
.sm-s3__p { position: relative; aspect-ratio: 9 / 13; border: 1.5px solid var(--line); background: var(--white); display: grid; place-items: center; animation: sm-on .35s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .13s); }
.sm-s3__p b { font: 700 11px/1 var(--text); color: var(--ink-2); }
.sm-s3__p i { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sm-s3__p--ig { border-color: #c13584; } .sm-s3__p--tt { border-color: var(--ink); } .sm-s3__p--yt { border-color: #e62117; } .sm-s3__p--fb { border-color: #1877f2; }
@keyframes sm-on { from { opacity: .25; transform: scale(.9); border-color: var(--line); } to { opacity: 1; transform: none; } }
.sm-s3__count { text-align: center; font-size: 14px; color: var(--ink-2); }
.sm-s3__count b { font: 600 26px/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 4px; }
.sm-s3__count span { display: block; font-size: 12.5px; margin-top: 4px; }
@media (min-width: 760px) { .sm-s3__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .sm-s3__p { aspect-ratio: 9 / 12; } }

/* Adegan 4: views */
.sm-scene--4 { display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; }
.sm-scene--4[hidden] { display: none; }
.sm-s4__label { font-size: 13px; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.sm-s4__num { font: 600 clamp(44px, 9vw, 84px)/1 var(--display); letter-spacing: -.04em; color: var(--plum); font-variant-numeric: tabular-nums; }
.sm-s4__goal { width: min(100%, 460px); height: 10px; background: var(--paper-2); }
.sm-s4__goal i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: md-grow 2.6s cubic-bezier(.3, .1, .2, 1) .3s both; }
.sm-s4__target { font-size: 14px; color: var(--ink-2); }
.sm-s4__target b { color: var(--accent-ink); animation: md-fade .3s ease 3s both; }
.sm-s4__plat { display: grid; gap: 6px; width: min(100%, 360px); margin-top: 8px; }
.sm-s4__plat li { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; font-size: 12.5px; text-align: left; color: var(--ink-2); }
.sm-s4__b { display: block; height: 7px; background: var(--plum-2); transform-origin: left; animation: md-grow .7s var(--ease) both; }
.sm-s4__b--1 { width: 92%; animation-delay: 3.2s; } .sm-s4__b--2 { width: 64%; animation-delay: 3.4s; } .sm-s4__b--3 { width: 41%; animation-delay: 3.6s; } .sm-s4__b--4 { width: 23%; animation-delay: 3.8s; }

/* Katalog layanan */
.sm-cat { padding: var(--s6) 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sm-cat__jump { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(var(--s3) * -1) 0 var(--s4); }
.sm-cat__jump a { padding: 9px 14px; border: 1.5px solid var(--line); font: 600 14px/1 var(--text); background: var(--paper); }
.sm-cat__jump a:hover { border-color: var(--ink); }
.sm-group + .sm-group { margin-top: var(--s5); }
.sm-group { scroll-margin-top: 90px; }
.sm-group__name { font: 600 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: var(--s3); }
.sm-cards { display: grid; gap: var(--s2); }
.sm-card { display: flex; flex-direction: column; gap: 10px; padding: var(--s3); background: var(--paper); border: 1px solid var(--line); scroll-margin-top: 90px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.sm-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.sm-card h3 { font-size: 21px; }
.sm-card__sum { color: var(--ink-2); font-size: 15.5px; }
.sm-card__price { padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sm-card__price small { font-size: 12.5px; color: var(--ink-2); }
.sm-card__price b { font: 600 24px/1.1 var(--display); color: var(--plum); letter-spacing: -.02em; }
.sm-card__price span { font-size: 13px; color: var(--ink-2); }
.sm-card__price .sm-card__ask { font-size: 18px; }
.sm-card__pts li { position: relative; padding-left: 20px; font-size: 14.5px; margin-top: 6px; }
.sm-card__pts li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.sm-card__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.sm-card__ask-btn { font: 600 14.5px/1 var(--text); color: var(--accent-ink); border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
@media (min-width: 680px) { .sm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kalkulator */
.sm-calc__box { display: grid; gap: var(--s3); padding: var(--s3); background: var(--paper); color: var(--ink); min-width: 0; }
.sm-calc__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-calc__tabs button { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); background: var(--white); font: 600 14px/1 var(--text); color: var(--ink); cursor: pointer; }
.sm-calc__tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sm-calc__pane { display: grid; gap: 10px; }
.sm-calc__pane[hidden] { display: none; }
.sm-calc__pane label, .sm-calc__lbl { font-size: 15px; }
.sm-calc__pane label b { color: var(--plum); }
.sm-calc__pane input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.sm-calc__pane select { width: 100%; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--line); background: var(--white); font: 500 16px var(--text); color: var(--ink); }
.sm-calc__row { display: grid; gap: 10px; }
.sm-calc__row label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.sm-calc__ticks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-top: -6px; }
.sm-calc__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-calc__seg button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); background: var(--white); font: 600 15px/1 var(--text); color: var(--ink); cursor: pointer; }
.sm-calc__seg button[aria-pressed="true"] { border-color: var(--accent); background: rgba(255, 91, 54, .1); }
.sm-calc__out { padding-top: var(--s2); border-top: 1px solid var(--line); }
.sm-calc__total { font: 600 clamp(30px, 4.6vw, 44px)/1.05 var(--display); letter-spacing: -.03em; color: var(--plum); font-variant-numeric: tabular-nums; }
.sm-calc__detail { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.sm-calc__box .btn { justify-self: start; }
@media (min-width: 600px) { .sm-calc__row { grid-template-columns: 1fr 1fr; } }

/* Tabel harga */
.sm-tables { padding: var(--s6) 0; }
.sm-tables__grid { display: grid; gap: var(--s4); }
.sm-table { min-width: 0; }
.sm-table h3 { margin-bottom: 6px; }
.sm-table__note { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; max-width: 520px; }
.sm-table__scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
.sm-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sm-table th, .sm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.sm-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); }
.sm-table tbody th { font-weight: 600; }
.sm-table td { font-variant-numeric: tabular-nums; }
.sm-table td small { color: var(--ink-2); }
.sm-table tbody tr:last-child th, .sm-table tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 1000px) { .sm-tables__grid { grid-template-columns: 1fr 1fr; } }

/* Persona */
.sm-persona { padding: var(--s6) 0; background: var(--ink); color: var(--paper); }
.sm-persona__in { display: grid; gap: var(--s4); }
.sm-persona .label { color: rgba(245, 241, 234, .65); }
.sm-persona h2 { margin: 12px 0 var(--s2); max-width: 18ch; }
.sm-persona__lede { color: rgba(245, 241, 234, .78); max-width: 560px; }
.sm-persona__list { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.sm-persona__list li { padding: 16px 18px 16px 46px; position: relative; background: var(--ink); font-size: 16px; }
.sm-persona__list li::before { content: '✓'; position: absolute; left: 18px; top: 15px; color: var(--accent); font-weight: 700; }
@media (min-width: 900px) { .sm-persona__in { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--s6); } .sm-persona__list { grid-template-columns: 1fr 1fr; } }

/* Aturan main */
.sm-rules { padding: var(--s6) 0; }
.sm-rules__list { display: grid; gap: var(--s3); }
.sm-rules__list li { padding-top: var(--s2); border-top: 2px solid var(--ink); color: var(--ink-2); font-size: 15.5px; }
.sm-rules__list b { display: block; margin-bottom: 6px; font: 600 19px/1.25 var(--display); color: var(--ink); }
@media (min-width: 900px) { .sm-rules__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sm-hero h1 { max-width: 16ch; }

@media (prefers-reduced-motion: reduce) {
  .sm-card { transition: none; }
}