/* What the site adds to the design (site.css and friends): the logo, the price section the server
   rewrites from the plans on sale (src/seo/landing-prices.ts), and the shared footer on this page. */

/* ── Logo ── */
header .wordmark{display:inline-flex;align-items:center;color:var(--cream)}
header nav a{white-space:nowrap}
header .wordmark .logo{display:block;height:32px;width:auto}
@media (max-width:640px){header .wordmark .logo{height:27px}}

/* ── Fiyatlar ──
   The server writes this section from the plans on sale (src/seo/landing-prices.ts): the designer's
   price cards (site.css) in a grid that takes any number of plans, and a yearly/monthly switch when a
   plan has both prices. Nothing of it is in the file while nothing is on sale. */
.pricing .f-switch{display:inline-flex;gap:0;margin:0 0 20px;border:1px solid var(--line-strong);background:var(--card)}
.pricing .f-opt{position:relative;display:flex;cursor:pointer}
.pricing .f-opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.pricing .f-opt-face{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:8px 18px;font:500 14px/1.2 var(--sans);color:var(--muted);transition:background-color .2s,color .2s}
.pricing .f-opt input:checked+.f-opt-face{background:var(--ink);color:var(--on-light)}
.pricing .f-opt input:focus-visible+.f-opt-face{outline:2px solid var(--copper);outline-offset:2px}
.pricing .f-badge{padding:2px 7px;font-size:11px;letter-spacing:.04em;background:#B9B990;color:#FFFDF4}
.pricing .f-opt input:checked+.f-opt-face .f-badge{background:#B9784A}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.f-grid .price-card:nth-child(3n+2) .price-head{--arrow:#999976;background:#B9B990}
.f-grid .price-card:nth-child(3n+3) .price-head{--arrow:#9A5728;background:#B9784A}
.price-head .price-badge{align-self:flex-start;margin-top:10px;padding:2px 8px;font:500 11px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:#FFFDF433;color:#FFFDF4}
.price-head .price-desc{margin-top:10px;max-width:26ch;font-size:15px;line-height:1.5;opacity:.82}
.price-head .f-prices{margin-top:auto}
.price-head .f-unit{font-size:14px;letter-spacing:0;opacity:.82}
.price-head .f-price.is-in{animation:f-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes f-in{from{opacity:0;transform:translateY(4px)}}
.pricing .f-foot{margin-top:24px;max-width:720px;font-size:14px;line-height:1.7;color:var(--muted)}
.pricing .f-foot a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
@media (max-width:640px){.pricing .f-switch{display:flex}.pricing .f-opt{flex:1}.pricing .f-opt-face{flex:1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.price-head .f-price.is-in{animation:none}}

/* SSS: the answers sit in .q-b, which the server reads. */
.faq-list details .q-b p{padding:0 56px 22px 26px;color:var(--muted);font-size:16px;line-height:1.8}
.faq-list details .q-b p a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
@media (max-width:640px){.faq-list details .q-b p{padding:0 20px 20px}}

/* ── The site's footer on this page: aligned to the sections, with the page's rails. ── */
.page .foot .wrap{max-width:none;padding-inline:var(--pad-x)}
.foot{isolation:isolate}
.foot:before{content:'';position:absolute;z-index:-1;inset:-1px 0 0;pointer-events:none;background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 6px) left top/var(--rail-x) 100% no-repeat,repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 6px) right top/var(--rail-x) 100% no-repeat}

/* ── Feature tour in motion ──
   The tabs play through on their own while the section is on screen (site.js): a copper line fills
   beside the active tab, and the next one opens when it is full. Hovering, focusing or choosing a tab
   stops it. Each panel arrives with a short rise and its screenshot settles into place. Nothing here runs with reduced motion. */
@keyframes tour-progress{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tour-progress-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tour-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes tour-settle{from{transform:scale(1.07);filter:grayscale(1) blur(3px)}}
@keyframes tour-sheen{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
@keyframes tour-in{from{opacity:0;transform:translateX(-14px)}}

.js .tour-list [role=tab]{position:relative;transition:background-color .35s}
.js .tour-list [role=tab]:after{content:'';position:absolute;z-index:1;top:0;bottom:0;right:-1px;width:2px;background:var(--copper);transform:scaleY(0);transform-origin:top}
.js .tour-list [aria-selected=true]:after{transform:scaleY(1);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.js .tour.is-auto .tour-list [aria-selected=true]:after{transition:none;animation:tour-progress var(--tour-ms,6500ms) linear both}
.js .tour.is-auto.is-paused .tour-list [aria-selected=true]:after{animation-play-state:paused}
.js .tour-list [aria-selected=true]{background:linear-gradient(90deg,transparent,#9A57280a)}
.js .tour-title{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1),color .3s}
.js .tour-list [aria-selected=true] .tour-title{transform:translateX(6px)}
.js .tour-num{transition:color .3s}
/* The description slides open instead of appearing. */
.js .tour-text{display:block;max-height:0;padding-top:0;opacity:0;overflow:hidden;transform:translateY(-4px);transition:max-height .5s cubic-bezier(.2,.7,.2,1),padding-top .5s cubic-bezier(.2,.7,.2,1),opacity .35s,transform .45s}
.js .tour-list [aria-selected=true] .tour-text{max-height:12em;padding-top:10px;opacity:1;transform:none;transition-delay:0s,0s,.12s,.12s}
/* The rows come in one after another the first time the section is seen. */
.js .tour:not(.is-seen) .tour-list [role=tab]{opacity:0}
.js .tour.is-seen .tour-list [role=tab]{animation:tour-in .6s cubic-bezier(.2,.7,.2,1) both}
.js .tour.is-seen .tour-list [role=tab]:nth-child(2){animation-delay:.06s}
.js .tour.is-seen .tour-list [role=tab]:nth-child(3){animation-delay:.12s}
.js .tour.is-seen .tour-list [role=tab]:nth-child(4){animation-delay:.18s}
.js .tour.is-seen .tour-list [role=tab]:nth-child(5){animation-delay:.24s}

/* A panel rises in, its screenshot settles from a soft zoom, and a light passes over it once. */
.js .tour-panel.is-active{animation:tour-rise .6s cubic-bezier(.2,.7,.2,1) both}
.js .tour-panel .shot{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.js .tour-panel.is-active .shot img{transform-origin:20% 0;animation:tour-settle 1.1s cubic-bezier(.2,.7,.2,1) both}
.js .tour-panel.is-active .shot:not(.shot-diagram):after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#FFFDF466 48%,transparent 66%);transform:translateX(-120%);animation:tour-sheen 1.3s .25s cubic-bezier(.4,0,.2,1) both}
.js .tour-panels:hover .tour-panel.is-active .shot{transform:translateY(-4px);box-shadow:0 30px 60px #29252918}
.js .tour-panel.is-active figcaption{animation:tour-rise .6s .2s cubic-bezier(.2,.7,.2,1) both}

@media (max-width:1050px){
  /* Stacked layout: the progress line runs under the active tab. */
  .js .tour-list [role=tab]:after{top:auto;left:0;right:0;bottom:-1px;width:auto;height:2px;transform:scaleX(0);transform-origin:left}
  .js .tour-list [aria-selected=true]:after{transform:scaleX(1)}
  .js .tour.is-auto .tour-list [aria-selected=true]:after{animation-name:tour-progress-x}
}
@media (prefers-reduced-motion:reduce){
  .js .tour-text,.js .tour-title,.js .tour-panel .shot{transition:none}
  .js .tour:not(.is-seen) .tour-list [role=tab]{opacity:1}
  .js .tour-panel.is-active,.js .tour-panel.is-active *,.js .tour-panel.is-active *:before,.js .tour-panel.is-active *:after,.js .tour.is-seen .tour-list [role=tab]{animation:none!important}
}

/* Clips from the app replica (scripts/landing-clips): the same frame as a screenshot, in its black and white. */
.tour-panel .shot-clip{aspect-ratio:16/10;background:#F6F1E8}
.tour-panel .shot-clip video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.js .tour-panel.is-active .shot-clip:after{content:none}

/* Two alternate bands meet when the Fiyatlar section between them is left out (nothing on sale): the second takes the light tone. */
.tone-alt+.tone-alt{background:var(--grain) #FFFDF4;box-shadow:0 -1px 0 #FFFDF4}