/* Modül rehberi: aynı sahnede ihtiyaç → işlem → sonuç. Harici animasyon bağımlılığı yok. */
.modules-page { --mm-line: #e1dce7; --mm-radius: 22px; }
.modules-page svg { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.modules-page [hidden] { display: none !important; }
.modules-page :focus-visible { outline: 3px solid var(--pf-purple); outline-offset: 5px; }
.mm-hero { padding: 76px 0 58px; border-bottom: 1px solid var(--mm-line); }
.mm-hero h1 { max-width: 1000px; font-size: clamp(46px,6.3vw,84px); line-height: 1.03; margin: 0; }
.modules-page .mm-hero em { color: var(--pf-orange); }
.mm-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 32px; }
.mm-hero-bottom p { color: var(--pf-muted); font-size: 18px; line-height: 1.65; margin: 0; }
.mm-explore { display: inline-flex; gap: 24px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid #b8aaca; font-weight: 600; font-size: 15px; color: var(--pf-deep); text-decoration: none; white-space: nowrap; }
.mm-explore span { font-size: 24px; }
.mm-explorer-section { padding: 72px 0 68px; }
.mm-section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.modules-page .mm-section-top h2 { margin: 0; font-size: clamp(30px,3.1vw,44px); line-height: 1.1; }
.mm-section-top > p { margin: 0; color: var(--pf-muted); font-size: 15px; line-height: 1.65; }
.mm-explorer { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); align-items: start; gap: 42px; }
.mm-cards, .mm-viewer-home { min-width: 0; }
.mm-group-label { margin: 0 0 14px; font-size: 10px; font-weight: 650; letter-spacing: .14em; color: #77717d; }
.mm-group-planned { margin-top: 32px; }
.mm-card { border: 1px solid var(--mm-line); border-radius: 16px; background: #fff; margin-bottom: 10px; overflow-anchor: none; }
.mm-card[open] { border-color: #a08bb7; box-shadow: 0 8px 26px -20px #5b4b8a70; }
.mm-card summary { display: flex; align-items: center; gap: 14px; padding: 20px; list-style: none; cursor: pointer; border-radius: 15px; min-height: 88px; }
.mm-card summary::-webkit-details-marker { display: none; }
.mm-card summary::marker { content: ''; }
.mm-card summary:hover { background: #f8f6fb; }
.mm-card[open] summary { background: #f3eff8; border-radius: 15px 15px 0 0; }
.mm-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: var(--pf-purple); background: #eee8f5; }
.mm-card[open] .mm-card-icon { color: #fff; background: var(--pf-purple); }
.mm-card-label { display: grid; gap: 6px; min-width: 0; }
.mm-card-label strong { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
.mm-card-label > span { font-size: 12px; color: var(--pf-muted); line-height: 1.4; }
.mm-planned-badge { justify-self: start; font: 550 10px/1.3 var(--body); padding: 3px 7px; border: 1px solid #ddd4e8; border-radius: 5px; color: #6c5b81; }
.mm-expand { margin-left: auto; color: #7b6d8c; }
.mm-expand svg { width: 18px; height: 18px; transition: transform .2s; }
.mm-card[open] .mm-expand svg { transform: rotate(45deg); }
.mm-card-content { padding: 0 22px 24px 74px; }
.mm-card-content > p { font-size: 14px; line-height: 1.75; color: #68616e; margin: 18px 0; }
.mm-card-content ul { padding: 0; list-style: none; margin: 0 0 22px; }
.mm-card-content li { display: flex; gap: 9px; font-size: 12px; line-height: 1.6; margin-top: 8px; color: #4e4558; }
.mm-card-content li::before { content: '✓'; color: #65805a; }
.mm-card-content .pf-text-link { font-size: 13px; gap: 12px; line-height: 1.5; }
.mm-card-content .pf-text-link svg { width: 17px; height: 17px; }
.mm-viewer-home { position: sticky; top: 112px; }
.mm-viewer { width: 100%; }
.mm-preview { --mm-accent: #5b4b8a; --mm-wash: #eee7f6; --motion-loop: 12s; padding: 22px 24px 18px; border-radius: var(--mm-radius); background: var(--mm-wash); border: 1px solid #00000008; container-type: inline-size; }
.mm-preview.mm-tone-sage { --mm-accent: #4b6b49; --mm-wash: #e6eee1; }
.mm-preview.mm-tone-peach { --mm-accent: #9d573b; --mm-wash: #f3e8de; }
.mm-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.mm-preview-top > span { font-size: 8px; letter-spacing: .12em; font-weight: 650; color: #6a626f; }
.mm-preview .motion-toggle { position: static; flex-shrink: 0; min-height: 34px; font-size: 9px; padding: 8px 10px; border-color: #00000018; color: #554a60; background: #ffffff80; }
.modules-page .mm-preview h3 { max-width: 410px; font-size: clamp(23px,2.3vw,33px); line-height: 1.13; margin: 16px 0 6px; color: #302638; }
.mm-preview .motion-art { height: auto; }
.mm-canvas { position: relative; height: 384px; }
.mm-scene-drawing { position: relative; height: 100%; width: 100%; }
.mm-window { position: absolute; inset: 24px 10px 44px; border: 1px solid #ffffff; border-radius: 14px; background: #fff; box-shadow: 0 16px 32px -22px #30263850; overflow: hidden; line-height: 1.4; }
.mm-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 15px; min-height: 46px; border-bottom: 1px solid #ece8ef; }
.mm-window-bar > span { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 650; color: #45394f; }
.mm-window-bar img { object-fit: contain; }
.mm-window-bar > small { font-size: 8px; color: #766b7d; }
.mm-window-body { padding: 16px 18px; font-size: 11px; color: #554c5d; }
.mm-canvas .mm-window-body svg { width: 15px; height: 15px; }
.mm-mini-label { display: block; font-size: 8px; letter-spacing: .08em; color: #7b6c88; }
.mm-result { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 20px); min-height: 42px; padding: 11px 16px; border-radius: 11px; background: #fff; border: 1px solid #e8e2ec; box-shadow: 0 8px 24px -16px #4b3d5d60; font-size: 10px; color: #49623e; animation: mm-result 12s ease infinite; }
.mm-result svg { width: 16px; height: 16px; }
.mm-cursor { position: absolute; z-index: 3; top: 170px; left: 40%; color: var(--mm-accent); animation: mm-cursor 12s ease-in-out infinite; pointer-events: none; }
.mm-cursor svg { width: 23px; height: 23px; filter: drop-shadow(0 2px 2px #33224030); }
.mm-phase-two { animation: mm-phase-two 12s ease infinite; }
.mm-phase-three { animation: mm-phase-three 12s ease infinite; }
.mm-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mm-steps li { position: relative; padding-top: 15px; }
.mm-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #00000010; }
.mm-steps li::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mm-accent); transform-origin: left; animation: mm-step-progress 12s linear infinite; }
.mm-steps li:nth-child(2)::after { animation-delay: -8s; }
.mm-steps li:nth-child(3)::after { animation-delay: -4s; }
.mm-steps li > span { display: block; font: 500 10px/1.3 'JetBrains Mono',monospace; color: var(--mm-accent); }
.mm-steps li > p { font-size: 11px; line-height: 1.6; margin: 8px 0 0; color: #554d5c; }
.mm-preview-note { font-size: 9px; line-height: 1.6; color: #716877; margin: 20px 0 0; padding-top: 12px; border-top: 1px solid #0000000b; }
.mm-empty { min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; border: 1px dashed #ccc1d7; border-radius: var(--mm-radius); background: #f1edf6; }
.mm-empty > span { color: var(--pf-purple); }
.mm-empty > span svg { width: 40px; height: 40px; }
.mm-empty p { font-size: 22px; font-weight: 600; margin: 22px 0 12px; }
.mm-empty small { font-size: 13px; line-height: 1.6; color: var(--pf-muted); }
.mm-availability { margin: 36px 0 0; padding: 24px 28px; border: 1px solid var(--mm-line); border-radius: 14px; font-size: 13px; line-height: 1.8; color: #6b6173; }
.mm-availability b { margin-right: 6px; color: var(--pf-deep); font-weight: 650; }
.mm-worker-strip { padding: 72px 0; background: #e9eee4; }
.mm-worker-strip .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.modules-page .mm-worker-strip h2 { font-size: clamp(32px,3.5vw,47px); }
.mm-worker-strip .pf-eyebrow { color: #4b6b49; }
.mm-worker-strip p { font-size: 17px; line-height: 1.7; color: #56664e; margin-bottom: 22px; }
.mm-worker-strip .pf-text-link { color: #405a3e; }
.mm-cta { text-align: center; padding: 86px 0; }
.modules-page .mm-cta h2 { font-size: clamp(34px,4.5vw,58px); }
.mm-cta p { font-size: 17px; line-height: 1.7; color: var(--pf-muted); margin: 24px 0 30px; }
/* Sahne 1: konum kaydı → giriş/çıkış → süre. */
.mm-map { height: 145px; position: relative; border-radius: 9px; background: #eff3eb; overflow: hidden; }
.mm-map-road { position: absolute; height: 17px; width: 130%; background: #fff; border-block: 1px solid #dde5d7; }
.mm-map-road.road-a { top: 36px; left: -20px; transform: rotate(-25deg); }
.mm-map-road.road-b { top: 70px; left: -15px; transform: rotate(38deg); }
.mm-map-pin { position: absolute; top: 25px; left: 28%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #587b4c; color: #fff; box-shadow: 0 0 0 10px #587b4c12; animation: mm-location 12s ease infinite; }
.mm-map-label { position: absolute; top: 72px; left: 14%; font-size: 9px; color: #5f7553; }
.mm-map-person { position: absolute; right: 12px; bottom: 14px; display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; align-items: center; padding: 11px 12px; border-radius: 10px; background: #fff; border: 1px solid #e4e9df; }
.mm-map-person .mm-avatar { grid-row: span 2; }
.mm-map-person b { font-size: 10px; }
.mm-map-person small { font-size: 8px; color: #798170; }
.mm-timesheet { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.mm-timesheet > div { border-right: 1px solid #ece8ef; }
.mm-timesheet > div:last-child { border-right: 0; }
.mm-timesheet small { display: block; font-size: 9px; color: #796e81; }
.mm-timesheet b { display: block; margin-top: 5px; font-size: 15px; color: #414c3b; }
/* Sahne 2: filtre → personel kartı → ekip. */
.mm-avatar { display: inline-grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; background: #e8e0f0; font-size: 9px; font-weight: 650; color: #6a5086; }
.mm-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.mm-filters > span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e2d9ed; border-radius: 6px; padding: 6px 8px; font-size: 9px; }
.mm-filters .mm-filter-selected { color: #5c4675; background: #f2ecf8; }
.mm-person { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border: 1px solid #ebe7f0; border-radius: 8px; margin-top: 7px; }
.mm-person > span:nth-child(2) { min-width: 0; }
.mm-person b { display: block; font-size: 11px; }
.mm-person small { display: block; margin-top: 3px; font-size: 8px; color: #796f82; }
.mm-tag { margin-left: auto; font-size: 8px; padding: 4px 6px; color: #4e7044; background: #eef4e9; border-radius: 5px; white-space: nowrap; }
.mm-highlight { background: #f4eff9; border-color: #c6b4da; animation: mm-highlight 12s ease infinite; }
.mm-team-target { display: flex; align-items: center; gap: 7px; padding: 10px 8px 0; }
.mm-team-target > b { font-size: 10px; }
.mm-team-target > span { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; font-size: 8px; color: #5b794c; }
/* Sahne 3: tarih/saat → kişi → paylaşım. */
.mm-week-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.mm-week-header b { font-size: 12px; }
.mm-week-header > span { font-size: 8px; color: #827388; }
.mm-schedule { display: grid; grid-template-columns: 34px repeat(3,minmax(0,1fr)); grid-template-rows: 24px 91px 65px; gap: 4px; }
.mm-schedule > small { font-size: 8px; color: #7f7486; padding-top: 5px; }
.mm-schedule > div { border: 1px solid #f0eaf1; border-radius: 6px; background: #fcfbfd; }
.mm-schedule > .mm-shift { padding: 8px; background: #efe8f6; color: #634a7e; border-color: #e7dced; }
.mm-shift b { display: block; font-size: 10px; }
.mm-shift small { display: block; margin-top: 6px; font-size: 7px; }
.mm-shift > span { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 8px; }
.mm-shift .mm-avatar { width: 19px; height: 19px; font-size: 6px; flex-basis: 19px; background: #fff; }
.mm-schedule > .mm-shift-new { background: #f7e8da; color: #8c5134; border-color: #e7c3a9; animation: mm-highlight 12s ease infinite; }
.mm-share-plan { display: flex; align-items: center; gap: 6px; font-size: 8px; margin-top: 12px; }
.mm-share-plan b { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: #527149; font-size: 8px; }
/* Sahne 4: iş ihtiyacı → başvuru → ekip. */
.mm-opportunity { display: grid; gap: 7px; padding: 12px 13px; border-radius: 9px; background: #f1ecf7; }
.mm-opportunity > b { font-size: 14px; }
.mm-opportunity > span:last-child { font-size: 9px; color: #7a6989; }
.mm-applicants { margin-top: 13px; }
.mm-applicants > small { font-size: 8px; color: #8c7a99; }
.mm-applicants .mm-person { padding-block: 7px; }
.mm-applicants .mm-avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 8px; }
.mm-applicants .mm-person b { font-size: 10px; }
/* Sahne 5: hazırlık → saha → sonuç. */
.mm-project-heading { display: grid; gap: 6px; }
.mm-project-heading > b { font-size: 18px; color: #3f583e; }
.mm-project-heading small { font-size: 9px; color: #6d7e63; }
.mm-operation-flow { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 5px; margin: 22px 0; }
.mm-operation-flow > div { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 3px; border: 1px solid #dde7d6; border-radius: 9px; background: #f4f7f0; }
.mm-operation-flow > span { color: #8c9e80; }
.mm-operation-flow b { font-size: 10px; color: #4d6643; }
.mm-operation-flow div > span { font-size: 8px; color: #748469; }
.mm-operation-lines > span { display: flex; gap: 7px; align-items: center; font-size: 9px; border-top: 1px solid #ecefe6; padding-top: 10px; margin-top: 10px; }
.mm-operation-lines i { width: 5px; height: 5px; border-radius: 50%; background: #88a277; }
.mm-operation-lines b { margin-left: auto; }
/* Sahne 6: kaynak kayıtlar → hakediş → ödeme durumu. */
.mm-payee { display: flex; align-items: center; gap: 9px; }
.mm-payee b { display: block; font-size: 12px; }
.mm-payee small { display: block; margin-top: 4px; font-size: 8px; color: #8d7d88; }
.mm-payee .mm-tag { background: #f8ede2; color: #94674a; }
.mm-ledger { margin-top: 22px; display: grid; gap: 15px; }
.mm-ledger > span { display: flex; justify-content: space-between; font-size: 10px; color: #7d6975; }
.mm-ledger b { font-size: 12px; color: #604451; font-variant-numeric: tabular-nums; }
.mm-total { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; padding-top: 15px; border-top: 1px solid #e9ddd6; }
.mm-total > span { font-size: 10px; }
.mm-total > b { font-size: 25px; letter-spacing: -.05em; color: #8b5338; }
.mm-payment-status { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 8px; color: #876d54; }
.mm-payment-status > i { width: 5px; height: 5px; border-radius: 50%; background: #c08c4f; }
/* Sahne 7: form → belge → inceleme. */
.mm-form-title { display: grid; gap: 7px; margin-bottom: 18px; }
.mm-form-title > b { font-size: 18px; }
.mm-form-title > small { font-size: 9px; color: #887993; }
.mm-form-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; border-bottom: 1px solid #eee8f3; }
.mm-form-line > span { font-size: 10px; }
.mm-form-line > b { display: inline-flex; gap: 4px; align-items: center; color: #63814f; font-size: 8px; }
.mm-form-footer { display: flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 8px; color: #867094; }
/* Sahne 8: ihtiyaç → taahhüt → isimli liste (farklı kayıtlar). */
.mm-demand { display: grid; gap: 8px; text-align: center; margin: 1px 0 17px; }
.mm-demand > span { font-size: 9px; color: #718267; }
.mm-demand > b { font-size: 32px; letter-spacing: -.05em; color: #45613e; }
.mm-demand b small { font-size: 12px; letter-spacing: 0; }
.mm-supplier-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mm-supplier-grid > div { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 8px; border: 1px solid #e1e9d9; border-radius: 10px; background: #f7faf4; }
.mm-supplier-avatar { width: 25px; height: 25px; border-radius: 8px; background: #e5eddd; display: grid; place-items: center; color: #587346; font-size: 10px; }
.mm-supplier-grid b { font-size: 11px; }
.mm-supplier-grid div > span:not(.mm-supplier-avatar) { font-size: 9px; color: #7a896e; }
.mm-supplier-grid strong { color: #4f6940; font-weight: 650; }
.mm-supplier-grid small { font-size: 8px; color: #7b8a70; }
.mm-supplier-grid small > b { font-size: 9px; }
/* Sahne 9: talep → paylaşılan plan → müşteri görünümü. */
.mm-client-request { display: grid; gap: 8px; padding: 13px; background: #faf1e9; border-radius: 9px; }
.mm-client-request > b { font-size: 14px; color: #80563f; }
.mm-client-request > span:not(.mm-mini-label) { font-size: 9px; color: #8d7463; }
.mm-client-request > small { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #638050; }
.mm-client-plan { padding: 13px 0; display: grid; gap: 10px; }
.mm-client-plan > span:first-child { display: flex; gap: 6px; align-items: center; font-size: 9px; color: #846d5e; }
.mm-client-plan > b { display: flex; justify-content: space-between; font-size: 12px; }
.mm-client-plan b > small { font-size: 10px; color: #8e725f; }
.mm-client-plan > span:last-child { font-size: 8px; color: #8b7b81; }
.mm-client-review { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid #f0e6de; font-size: 9px; }
.mm-client-review > b { margin-left: auto; color: #7b694e; font-size: 8px; }
@keyframes mm-phase-two { 0%,17% { opacity: .22; transform: translateY(5px); } 32%,91% { opacity: 1; transform: translateY(0); } 100% { opacity: .22; transform: translateY(5px); } }
@keyframes mm-phase-three { 0%,46% { opacity: .18; transform: translateY(6px); } 62%,91% { opacity: 1; transform: translateY(0); } 100% { opacity: .18; transform: translateY(6px); } }
@keyframes mm-result { 0%,52% { opacity: 0; transform: translate(-50%,8px); } 66%,90% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,8px); } }
@keyframes mm-cursor { 0%,8% { opacity: 0; transform: translate(100px,80px); } 16%,26% { opacity: 1; transform: translate(0,0); } 35%,50% { opacity: 1; transform: translate(70px,50px); } 60%,72% { opacity: 1; transform: translate(10px,112px); } 82%,100% { opacity: 0; transform: translate(10px,112px); } }
@keyframes mm-location { 0%,15%,90%,100% { transform: scale(.93); } 30%,72% { transform: scale(1); } }
@keyframes mm-highlight { 0%,15% { opacity: .4; } 30%,90% { opacity: 1; } 100% { opacity: .4; } }
@keyframes mm-step-progress { 0% { transform: scaleX(0); opacity: 1; } 33.33% { transform: scaleX(1); opacity: 1; } 33.34%,100% { transform: scaleX(1); opacity: .2; } }
/* JS yoksa veya hareket azaltılmışsa tamamlanmış kayıtlar görünür. */
.mm-preview:not([data-motion-ready]) .mm-cursor { display: none; }
.mm-preview:not([data-motion-ready]) .mm-art *,
.mm-preview:not([data-motion-ready]) .mm-art *::after { animation: none; }
@media (max-width: 1000px) {
  .mm-hero { padding-top: 54px; }
  .mm-explorer { gap: 24px; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
  .mm-card summary { padding: 17px 15px; gap: 10px; }
  .mm-card-content { padding: 0 18px 22px; }
  .mm-card-label strong { font-size: 15px; }
  .mm-card-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .mm-preview { padding: 18px 16px; }
  .mm-window-body { padding: 15px 12px; }
  .mm-window { inset-inline: 0; }
}
@media (max-width: 760px) {
  .mm-hero { padding: 45px 0 36px; }
  .mm-hero h1 { font-size: clamp(37px,8vw,58px); }
  .mm-hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 22px; }
  .mm-hero-bottom p { font-size: 15px; }
  .mm-explore { font-size: 13px; gap: 18px; }
  .mm-explorer-section { padding: 40px 0; }
  .mm-section-top { display: block; margin-bottom: 28px; }
  .modules-page .mm-section-top h2 { font-size: 29px; }
  .mm-section-top > p { margin-top: 18px; font-size: 14px; }
  .mm-explorer { grid-template-columns: 1fr; gap: 0; }
  .mm-viewer-home { position: static; }
  [data-guide-enhanced] .mm-viewer-home { display: none; }
  .mm-card summary { padding: 18px 14px; gap: 10px; }
  .mm-card-label strong { font-size: 15px; }
  .mm-card-content { padding: 0 14px 18px; }
  .mm-card-content > p { font-size: 14px; }
  .mm-card-content li { font-size: 12px; }
  .mm-card-content > [data-guide-mobile-slot] { margin-top: 24px; }
  .mm-preview { padding: 16px 12px; border-radius: 13px; }
  .modules-page .mm-preview h3 { font-size: 24px; margin-top: 14px; }
  .mm-preview-top > span { font-size: 6px; letter-spacing: .08em; }
  .mm-preview .motion-toggle { font-size: 8px; padding: 8px; }
  .mm-canvas { height: 406px; }
  .mm-window { inset: 20px 0 44px; }
  .mm-window-bar { padding-inline: 10px; }
  .mm-window-bar > span { font-size: 10px; gap: 5px; }
  .mm-window-bar > small { display: none; }
  .mm-window-body { padding: 14px 10px; }
  .mm-steps { gap: 9px; }
  .mm-steps li > p { font-size: 10px; }
  .mm-result { font-size: 9px; padding-inline: 9px; max-width: 100%; }
  .mm-availability { font-size: 12px; margin-top: 24px; padding: 18px; }
  .mm-worker-strip { padding: 48px 0; }
  .mm-worker-strip .wrap { grid-template-columns: 1fr; gap: 24px; }
  .mm-worker-strip p { margin-top: 0; font-size: 15px; }
  .mm-cta { padding: 55px 0; }
  .mm-cta p { font-size: 15px; }
}
@container (max-width: 300px) {
  .mm-canvas .mm-window-body { padding-inline: 9px; }
  .mm-canvas .mm-window-bar { padding-inline: 9px; }
  .mm-canvas .mm-window-bar > small { display: none; }
  .mm-canvas .mm-timesheet b { font-size: 12px; }
  .mm-canvas .mm-schedule { grid-template-columns: 26px repeat(3,minmax(0,1fr)); gap: 3px; }
  .mm-canvas .mm-schedule > .mm-shift { padding: 7px 4px; }
  .mm-canvas .mm-shift b { font-size: 8px; }
  .mm-canvas .mm-shift small { font-size: 6px; }
  .mm-canvas .mm-schedule > small { font-size: 6px; }
  .mm-canvas .mm-payee .mm-tag { display: none; }
  .mm-canvas .mm-map-person { right: 7px; padding: 10px 8px; }
  .mm-canvas .mm-map-person b { font-size: 9px; }
  .mm-canvas .mm-operation-flow { gap: 3px; }
  .mm-canvas .mm-operation-flow b { font-size: 8px; }
  .mm-canvas .mm-operation-flow div > span { font-size: 7px; }
  .mm-canvas .mm-client-review { font-size: 8px; gap: 3px; }
  .mm-canvas .mm-client-review > b { font-size: 7px; }
  .mm-canvas .mm-supplier-grid > div { padding-inline: 4px; gap: 8px; }
  .mm-canvas .mm-supplier-grid b { font-size: 10px; }
  .mm-canvas .mm-supplier-grid strong { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-preview .mm-art *, .mm-preview .mm-art *::after { animation: none !important; }
  .mm-preview .mm-cursor { display: none; }
  .mm-expand svg { transition: none; }
}
/* Diagram içindeki yoğun kayıtlar, metni kesmeden aynı pencereye sığar. */
.mm-window-body, .mm-window-body * { line-height: 1.3; }
.mm-schedule { grid-template-rows: 22px 80px 52px; }
.mm-applicants .mm-person { padding-block: 4px; }
.mm-applicants .mm-person small { margin-top: 2px; }

.mm-window-body { padding-block: 12px; }
/* Kısa kart, tek tıklama, doğrudan kullanım görseli. */
.mm-hero { padding: 48px 0 38px; }
.mm-hero h1 { font-size: clamp(42px,5.2vw,66px); }
.mm-hero-bottom { margin-top: 22px; }
.mm-hero-bottom p { font-size: 16px; }
.mm-explorer-section { padding-top: 40px; }
.mm-section-top { margin-bottom: 26px; align-items: center; }
.modules-page .mm-section-top h2 { font-size: clamp(25px,2.5vw,32px); }
.mm-section-top > p { font-size: 13px; }
.mm-explorer { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 32px; max-width: 1080px; margin-inline: auto; }
.mm-group-label { margin-bottom: 10px; font-size: 9px; }
.mm-group-planned { margin-top: 24px; }
.mm-card { margin-bottom: 8px; border-radius: 12px; }
.mm-card summary { min-height: 66px; padding: 13px 15px; gap: 10px; border-radius: 11px; }
.mm-card[open] summary { border-radius: 11px 11px 0 0; }
.mm-card-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }
.mm-card-icon svg { width: 18px; height: 18px; }
.mm-card-label { gap: 4px; }
.mm-card-label strong { font-size: 14px; }
.mm-card-label > span { font-size: 11px; }
.mm-planned-badge { font-size: 8px; padding: 2px 5px; }
.mm-card-content { padding: 0 16px 15px 56px; }
.mm-card-content > p { font-size: 12px; line-height: 1.6; margin: 12px 0; }
.mm-card-content .pf-text-link { font-size: 12px; }
.mm-preview { padding: 15px 16px; border-radius: 16px; }
.mm-preview-top { min-height: 30px; gap: 8px; }
.mm-preview-top > span { font-size: 13px; line-height: 1.4; letter-spacing: -.02em; text-transform: none; color: var(--mm-accent); }
.modules-page .mm-preview h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mm-preview .motion-toggle { font-size: 8px; min-height: 30px; padding: 6px 8px; }
.mm-preview .mm-canvas { height: 304px; }
.mm-preview .mm-scene-drawing { width: 125%; height: 380px; transform: scale(.8); transform-origin: top left; }
.mm-steps { gap: 10px; margin-top: 4px; }
.mm-steps li { padding-top: 10px; }
.mm-steps li > span { font-size: 8px; }
.mm-steps li > p { font-size: 10px; line-height: 1.45; margin-top: 5px; }
.mm-preview-note { font-size: 8px; margin-top: 12px; padding-top: 8px; }
.mm-empty { min-height: 360px; }
@media (max-width: 760px) {
  .mm-hero { padding: 32px 0 28px; }
  .mm-hero h1 { font-size: clamp(35px,7.7vw,52px); }
  .mm-hero-bottom { margin-top: 18px; gap: 16px; }
  .mm-hero-bottom p { font-size: 14px; }
  .mm-explorer-section { padding-top: 30px; }
  .mm-section-top > p { margin-top: 10px; font-size: 12px; }
  .mm-explorer { grid-template-columns: 1fr; gap: 0; }
  .mm-card summary { padding: 13px 12px; }
  .mm-card-content { padding: 0 12px 14px; }
  .mm-card-content > [data-guide-mobile-slot] { margin-top: 16px; }
  .mm-preview { padding: 12px 10px; }
  .mm-preview-top > span { font-size: 11px; }
  .mm-preview .mm-canvas { height: 304px; }
  .mm-preview .mm-scene-drawing { height: 380px; }
}