/* cozumler.html + nasil-calisir.html. Built on the tokens in site-pages-v2.css (header, footer,
   .button, .eyebrow, .closing, theme variables). Logical properties throughout so ?lang=fa (RTL) mirrors for free. */
.pp-page main{padding-bottom:20px}
.pp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding:78px 0 70px;min-height:620px}
.pp-hero h1{font-size:clamp(40px,5.6vw,66px);line-height:1.06;letter-spacing:-2px;font-weight:600;margin-top:22px}
.pp-hero .hero-description{max-width:470px}
.pp-hero .hero-actions{margin-top:30px}
.pp-section{padding:72px 0 8px;border-top:1px solid var(--line)}
.pp-section-head{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:end;margin-bottom:38px}
.pp-section-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-1.1px;font-weight:600;margin-top:16px}
.pp-section-head p{font-size:14.5px;line-height:1.85;color:var(--muted);max-width:520px}

/* maturity badge — same palette as the pricing page (.fp-st-*) */
.pp-status{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.pp-status i{width:8px;height:8px;border-radius:50%;background:#8a8f9c;flex:none}
.pp-status.is-available{color:#5fd08b}.pp-status.is-available i{background:#1f9d55}
.pp-status.is-partial{color:#f0b84a}.pp-status.is-partial i{background:#d99500}
.pp-status.is-unverified{color:#8fa8f0}.pp-status.is-unverified i{background:#5b7bd5}
.pp-status.is-planned{color:var(--quiet)}
:root.xf-light .pp-status.is-available{color:#1f7a45}
:root.xf-light .pp-status.is-partial{color:#9a6a00}
:root.xf-light .pp-status.is-unverified{color:#3f5fb8}
.pp-legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}

/* ── hub: how the modules hang together ─────────────────────────── */
.pp-hub-wrap{position:relative}
.pp-hub-wrap::before{content:"";position:absolute;inset:-40px -10px;z-index:-1;background:radial-gradient(ellipse,#7970d41f,transparent 66%)}
.pp-hub{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;margin-inline:auto;direction:ltr}
.pp-hub svg.pp-lines{position:absolute;inset:0;width:100%;height:100%}
.pp-lines line{stroke:var(--strong);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:3 5}
.pp-lines circle{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.pp-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--strong);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px var(--shadow);font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;direction:inherit}
[dir=rtl] .pp-node{direction:rtl}
.pp-node svg{width:18px;height:18px;color:var(--accent);flex:none}
.pp-node small{display:block;font-size:9.5px;font-weight:500;color:var(--quiet);margin-top:1px}
.pp-node .pp-status{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--surface);border-radius:50%;padding:2px}
.pp-node .pp-status span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pp-node.is-core{padding:18px 22px;border-color:var(--accent);background:linear-gradient(135deg,var(--raised),var(--surface));font-size:14px;box-shadow:0 0 0 6px var(--soft),0 18px 50px var(--shadow)}
.pp-node.is-core svg{width:24px;height:24px}

/* ── journey of one sale ────────────────────────────────────────── */
.pp-journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:j}
.pp-journey li{position:relative;padding:24px 22px 26px;border:1px solid var(--strong);background:var(--surface);counter-increment:j}
.pp-journey li:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
.pp-journey li:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
.pp-journey li+li{margin-inline-start:-1px}
.pp-journey li::after{content:"";position:absolute;top:50%;inset-inline-end:-8px;width:15px;height:15px;background:var(--surface);border-top:1px solid var(--strong);border-right:1px solid var(--strong);transform:translateY(-50%) rotate(45deg);z-index:2}
[dir=rtl] .pp-journey li::after{transform:translateY(-50%) rotate(-135deg)}
.pp-journey li:last-child::after{display:none}
.pp-journey-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent);margin-bottom:18px}
.pp-journey-top span{font-size:10.5px;letter-spacing:1px;color:var(--quiet)}
.pp-journey-top svg{width:22px;height:22px}
.pp-journey h3{font-size:15px;font-weight:600;margin-bottom:8px}
.pp-journey p{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:14px}
.pp-note{margin-top:20px;font-size:12px;color:var(--quiet);max-width:760px}

/* ── module cards ───────────────────────────────────────────────── */
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pp-card{display:flex;flex-direction:column;padding:26px 24px 22px;border:1px solid var(--strong);border-radius:12px;background:var(--surface);transition:border-color .18s,transform .18s}
.pp-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.pp-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pp-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--soft);color:var(--accent);border:1px solid var(--line)}
.pp-icon svg{width:20px;height:20px}
.pp-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.pp-card p{font-size:12.5px;line-height:1.75;color:var(--muted)}
.pp-card .pp-state{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--quiet);line-height:1.65}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.pp-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;font-size:10.5px;color:var(--muted);background:var(--soft)}
.pp-chip svg{width:11px;height:11px;color:var(--accent)}
[dir=rtl] .pp-chip svg{transform:scaleX(-1)}

/* ── sector adaptation + XORA bands ─────────────────────────────── */
.pp-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pp-sector-list{display:grid;gap:12px}
.pp-sector-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--strong);border-radius:10px;background:var(--surface)}
.pp-sector-row strong{font-size:13px;font-weight:600}
.pp-steps-inline{display:flex;flex-wrap:wrap;gap:6px}
.pp-steps-inline span{padding:3px 9px;border-radius:20px;border:1px solid var(--line);background:var(--soft);font-size:10.5px;color:var(--muted)}
.pp-steps-inline span.is-opt{border-style:dashed;color:var(--quiet)}
.pp-mock{border:1px solid var(--strong);border-radius:12px;background:var(--surface);box-shadow:0 20px 60px var(--shadow);overflow:hidden}
.pp-mock .window-toolbar{height:42px}
.pp-mock-body{padding:22px 22px 20px;display:grid;gap:12px}
.pp-msg{max-width:86%;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.65}
.pp-msg.is-x{background:var(--raised);border:1px solid var(--line);border-end-start-radius:4px}
.pp-msg.is-me{margin-inline-start:auto;background:var(--button);color:var(--ink);border-end-end-radius:4px}
.pp-msg small{display:block;font-size:9.5px;letter-spacing:.8px;color:var(--accent);font-weight:600;margin-bottom:3px}
.pp-caption{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10.5px;color:var(--quiet);margin-top:16px;text-align:center}

/* ── how it works: steps ───────────────────────────────────────── */
.pp-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pp-step{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.05fr);gap:40px;padding:56px 0;border-top:1px solid var(--line);align-items:start}
.pp-step:first-child{border-top:0;padding-top:20px}
.pp-step-no{font-size:40px;font-weight:300;letter-spacing:-1px;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.pp-step h2{font-size:clamp(24px,2.8vw,32px);line-height:1.18;letter-spacing:-.9px;font-weight:600;margin-bottom:14px}
.pp-step-copy p{font-size:13.5px;line-height:1.85;color:var(--muted);margin-bottom:14px;max-width:470px}
.pp-bullets{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pp-bullets li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.65;color:var(--text)}
.pp-bullets svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:3px}
.pp-toggle-list{display:grid;gap:0}
.pp-toggle-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.pp-toggle-row:last-child{border-bottom:0}
.pp-toggle-row svg{width:18px;height:18px;color:var(--accent);flex:none}
.pp-toggle-row b{font-weight:600;flex:1}
.pp-switch{position:relative;width:34px;height:20px;border-radius:12px;background:var(--strong);flex:none}
.pp-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .2s}
.pp-switch.is-on{background:var(--accent)}
.pp-switch.is-on::after{background:#fff;transform:translateX(14px)}
[dir=rtl] .pp-switch.is-on::after{transform:translateX(-14px)}
.pp-day{display:grid;gap:0}
.pp-day-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.pp-day-row:last-child{border-bottom:0}
.pp-day-row time{font-size:10.5px;letter-spacing:.9px;color:var(--quiet);font-weight:600}
.pp-day-row strong{display:block;font-size:13px;font-weight:600}
.pp-day-row span.pp-sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.55}
.pp-fieldrow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.pp-fieldrow:last-child{border-bottom:0}
.pp-fieldrow b{color:var(--text);font-weight:600}
.pp-closing-links{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center}

/* ── how-it-works hero: jump list ───────────────────────────────── */
.pp-jump{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:480px;margin-inline:auto}
.pp-jump li{border:1px solid var(--strong);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px var(--shadow);transition:border-color .18s,transform .18s}
.pp-jump li:hover{border-color:var(--accent);transform:translateY(-2px)}
.pp-jump a{display:flex;gap:14px;align-items:center;min-height:64px;padding:12px 18px}
.pp-jump-text{flex:1;min-width:0}
.pp-jump strong{display:block;font-size:14px;font-weight:600}
.pp-jump small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.pp-jump-arrow{width:18px;height:18px;color:var(--accent);flex:none}
[dir=rtl] .pp-jump-arrow{transform:scaleX(-1)}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:1100px){
  .pp-hero,.pp-section-head,.pp-split{gap:44px}
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .pp-journey li,.pp-journey li:first-child,.pp-journey li:last-child{border-radius:12px;margin:0}
  .pp-journey li::after{display:none}
  .pp-step{grid-template-columns:56px minmax(0,1fr);gap:28px}
  .pp-step .pp-mock{grid-column:2}
}
@media(max-width:850px){
  .pp-hero{grid-template-columns:1fr;min-height:0;padding:48px 0 50px}
  .pp-section-head,.pp-split{grid-template-columns:1fr;gap:22px}
  .pp-section{padding-top:54px}
}
@media(max-width:650px){
  .pp-hero h1{letter-spacing:-1.3px}
  .pp-grid{grid-template-columns:1fr}
  .pp-journey{grid-template-columns:1fr}
  .pp-step{grid-template-columns:1fr;gap:18px;padding:40px 0}
  .pp-step .pp-mock{grid-column:auto}
  .pp-step-no{font-size:30px}
  .pp-sector-row{grid-template-columns:1fr;gap:10px}
  .pp-node{font-size:10.5px;padding:7px 9px;gap:6px}
  .pp-node small{display:none}
  .pp-node svg{width:15px;height:15px}
  .pp-node.is-core{padding:11px 14px;font-size:12px}
  .pp-day-row{grid-template-columns:62px minmax(0,1fr);}
  .pp-day-row .pp-status{grid-column:2}
}
@media(prefers-reduced-motion:no-preference){
  .pp-lines line{animation:pp-flow 14s linear infinite}
}
@keyframes pp-flow{to{stroke-dashoffset:-80}}
@media(prefers-reduced-motion:reduce){.pp-lines line{animation:none}.pp-card{transition:none}}