/* ============================================================
   BantuASN mid-page sections: the shared browser-frame component,
   the "Kenapa pilih" promo animation, and the "Begini cara kerjanya"
   numbered step flow. Behavior lives in assets/js/sections.js.
   Same contract as hero.css: with JS off everything renders visible
   and static (the step connector line shows fully drawn).
   ============================================================ */

/* ---------- Shared browser frame ---------- */

.bframe {
    background: #fff;
    border: 1px solid #E3EAF4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.06),
        0 26px 60px -22px rgba(15, 23, 42, 0.32);
}

.bframe_bar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(180deg, #fbfcfe, #f2f5fa);
    border-bottom: 1px solid #E8EDF5;
}

.bframe_dots {
    display: flex;
    gap: 6px;
    flex: 1;
}

.bframe_dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bframe_dots i:nth-child(1) { background: #FF5F57; }
.bframe_dots i:nth-child(2) { background: #FEBC2E; }
.bframe_dots i:nth-child(3) { background: #28C840; }

.bframe_url {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border-radius: 8px;
    background: #EDF1F8;
    color: #5B6B84;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.bframe_url i {
    font-size: 9px;
    color: #22A55D;
}

.bframe_spacer {
    flex: 1;
}

/* The zoom viewport: a fixed-ratio window that crops into the large
   screenshot so the UI is actually legible. Per-shot classes below
   choose which region to show. */
.bframe_zoom {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #fff;
}

.bframe_zoom img {
    position: absolute;
    display: block;
    width: 100%;
    /* The template clamps imgs to max-width 100% in some containers, which
       silently breaks the >100% zoom crops; lift it inside the zoom window. */
    max-width: none;
}

/* Per-shot crops. The captures are whole app pages, and a crop landing in the
   middle of the sidebar or the top bar reads as a broken screenshot, so every
   shot starts at the right edge of the sidebar and just under the top bar and
   runs to the right edge of the image. The img is positioned absolutely, so
   `left` is a percentage of the frame width and `top` of the frame height:
       width = 100 / (1 - fx)            fx = crop left, fraction of image width
       left  = -fx * width
       top   = -(py * width * A) / Wpx   py = crop top in image pixels,
                                         Wpx = image width in pixels, A = 16/9
   In the BantuASN app the sidebar ends at fx 0.172 and the top bar 86px down
   (172px on the 2x kredensial capture), which is where the three shots below
   start. Keep these in sync when landing/tools/capture_shots.py is re-run. */
.shot_input img,
.shot_autoskp img,
.shot_kred img { width: 120.8%; left: -20.8%; top: -9.6%; }

/* SRIKANDI is a different app: floating sidebar card, no top bar of its own. */
.shot_srikandi img { width: 118.2%; left: -18.2%; top: -1.1%; }

/* The surat preview capture is a scrolled page, no sidebar in frame. */
.shot_surat img { width: 106%; left: -3%; top: -7.1%; }

/* ---------- "Kenapa pilih BantuASN" (promo) ---------- */

.promo_frame {
    position: relative;
    will-change: transform;
}

@media (min-width: 992px) {
    .promo_frame { margin-right: 20px; }
}

/* The template gives .promo_tab_image a blue gradient + 40px padding;
   inside the browser frame that reads as a weird colored mat, so flatten it. */
.promo_frame .promo_tab_image {
    background: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    margin-right: 0;
}

/* custom.js flips .active/.show synchronously, so transitions never get
   a start frame; a CSS animation replays on every re-display instead. */
#pills-tabContent-one .tab-pane { position: relative; }

#pills-tabContent-one .tab-pane.active {
    animation: paneIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes paneIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* Floating callout chip over the screenshot, pops in per tab switch. */
.promo_callout {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 999px;
    box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.45);
    font-size: 13px;
    font-weight: 600;
    color: #33517a;
    white-space: nowrap;
}

.promo_callout i {
    color: #1665D8;
    font-size: 14px;
}

#pills-tabContent-one .tab-pane.active .promo_callout {
    animation: calloutIn 0.5s 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes calloutIn {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}

/* ---------- "Begini cara kerjanya" step flow ---------- */

.steps_flow {
    max-width: 1160px;
    margin: 0 auto;
}

.steps_rows {
    position: relative;
}

/* Center connector line (desktop only). The fill is scrubbed by
   ScrollTrigger; without JS it stays fully drawn (scaleY 1 default). */
.steps_line {
    position: absolute;
    left: 50%;
    top: 30px;
    bottom: 30px;
    width: 2px;
    margin-left: -1px;
    background: #E3EAF4;
    border-radius: 2px;
}

.steps_line_fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1665D8, #22A55D);
    border-radius: 2px;
    transform-origin: top center;
}

.step_row {
    position: relative;
    padding: 44px 0;
}

/* Dot marker on the line, lights up when the row activates. */
.step_dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #C9D8EE;
    z-index: 2;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.step_row.is-active .step_dot {
    border-color: #1665D8;
    box-shadow: 0 0 0 5px rgba(22, 101, 216, 0.14);
}

.step_content {
    padding: 0 44px 0 12px;
}

.step_row_rev .step_content {
    padding: 0 12px 0 44px;
}

.step_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #E8F0FE;
    color: #1665D8;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.step_content h3 {
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.6px;
    color: #0f172a;
    margin-bottom: 14px;
}

.step_content p {
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.step_content .saas_list li {
    padding: 4px 0;
    color: #374151;
    font-size: 15px;
}

.step_content .saas_list li i {
    color: #22A55D;
    margin-right: 9px;
}

.step_media {
    padding: 0 12px;
}

.steps_cta {
    text-align: center;
    padding-top: 34px;
}

.steps_cta .saas_btn {
    background: #1665D8;
    box-shadow: 0 10px 26px -8px rgba(22, 101, 216, 0.55);
}

.steps_cta .saas_btn:hover {
    background: #0F4CA8;
}

.steps_cta .cta_note {
    margin: 14px 0 0;
    font-size: 14px;
    color: #6B7280;
}

/* ---------- "Untuk setiap pegawai dan instansi" feature grid ---------- */

/* The template sizes each card to its own text, so a three-line card leaves
   its two neighbours visibly short. The columns are already stretched by the
   flex row, so filling the column height levels every card in a row against
   the tallest one. The 30px keeps the template's gap between rows. */
#fitur .service_item {
    height: calc(100% - 30px);
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .steps_line,
    .step_dot { display: none; }
    .step_row { padding: 26px 0; }
    .step_content,
    .step_row_rev .step_content { padding: 0 4px; }
    .step_media { padding: 22px 4px 0; }
    .step_content h3 { font-size: 25px; }
    .promo_callout { right: 10px; bottom: 10px; font-size: 12px; padding: 8px 13px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    #pills-tabContent-one .tab-pane.active,
    #pills-tabContent-one .tab-pane.active .promo_callout {
        animation: none !important;
    }
    .step_dot { transition: none; }
}