@font-face{font-family:"Albert Sans";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/AlbertSans.woff2) format("woff2")}

/* ============================================================================
   ReplyRez — one file, no build step, no request to anyone else.
   Fonts: Inter for body text, Albert Sans for headlines. Both are local
   subsets under site/fonts/; their licences sit next to them.
   ========================================================================== */
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/Inter-700.woff2) format('woff2')}

/* --- what the browser shows before the web font arrives ------------------
   Both fonts load with `font-display:swap`, so the first paint uses whatever
   the system has and the text re-flows when the real font lands. Measured on
   2026-09-15 that re-flow was the whole of the home page's layout shift at
   768px (0.133, where 0.1 is the line between good and not): the hero's
   paragraph, its list and its buttons all moved.

   These two faces are the same fallback, stretched to set text at the width
   and height the web font will. Measured with the site's own Turkish sentence
   at 100px: Inter sets it at 10623.98px, Arial at 10088.09px, so the stand-in
   is scaled 105.31%; Albert Sans 10260.89px, so 101.71%. The ascent and
   descent come from the font files themselves (Inter 1984/-494 per 2048,
   Albert Sans 950/-250 per 1000) and are stated against the scaled em.

   If Arial is genuinely absent the rule's `src` finds nothing and the stack
   falls through to the next name, which is exactly today's behaviour. */
@font-face{font-family:"Inter alt";src:local("Arial"),local("Liberation Sans"),local("Helvetica");
  size-adjust:105.31%;ascent-override:91.99%;descent-override:22.90%;line-gap-override:0%}
@font-face{font-family:"Albert alt";src:local("Arial"),local("Liberation Sans"),local("Helvetica");
  size-adjust:101.71%;ascent-override:93.40%;descent-override:24.58%;line-gap-override:0%}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none;animation:none!important}
}
body{background:var(--bg);color:var(--fg);
  font-family:Inter,"Inter alt",'Noto Sans',system-ui,sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;position:relative;
  font-feature-settings:'kern' 1,'liga' 1;-webkit-font-smoothing:antialiased}
/* --- rhythm ---------------------------------------------------------------
   Sections are full-bleed so a band can change the ground colour; the column
   lives in .wrap inside each one. --- */
.wrap{max-width:72rem;margin:0 auto;padding:0 calc(var(--step)*3)}
section{position:relative;padding:calc(var(--step)*11) 0;
  scroll-margin-top:calc(var(--step)*15)}
section+section{border-top:1px solid var(--line-soft)}
.band{background:var(--bg-2)}
@media (max-width:640px){section{padding:calc(var(--step)*7) 0}
  .kicker{font-size:11px;letter-spacing:.14em;gap:var(--step)}
  .kicker .bar{width:calc(var(--step)*2.5)}}

/* --- type ---------------------------------------------------------------- */
h1,h2,.price,.logo span,.facts b,.kicker .num{font-family:Inter,"Inter alt",sans-serif}
h1 em{font-family:'Albert Sans',"Albert alt",system-ui,sans-serif}
h1{font-weight:500;font-size:clamp(32px,5.8vw,62px);line-height:1.14;
  letter-spacing:-.012em;max-width:19ch}
h1 em{font-style:normal;font-weight:500;color:var(--fg)}
h2{font-weight:500;font-size:clamp(25px,3.9vw,40px);line-height:1.2;
  letter-spacing:-.008em;max-width:25ch}
h3{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:calc(var(--step))}
p{max-width:62ch}
p+p{margin-top:calc(var(--step)*2)}
.lead{font-size:clamp(17px,2.1vw,20px);line-height:1.62;margin-top:calc(var(--step)*3);
  color:var(--fg)}
.fine{font-size:14px;line-height:1.6;color:var(--muted)}
a{color:var(--fg)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--fg);outline-offset:3px;border-radius:var(--r)}
.skip{position:absolute;left:-9999px;top:0;z-index:9}
.skip:focus{left:calc(var(--step)*2);top:calc(var(--step)*2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* the eyebrow above every headline: a serif index number, a hairline, a label */
.sechead{max-width:46rem;margin-bottom:calc(var(--step)*5)}
.kicker{display:flex;align-items:center;gap:calc(var(--step)*1.5);
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);margin-bottom:calc(var(--step)*2)}
.kicker .num{font-style:italic;font-weight:500;font-size:16px;letter-spacing:.02em}
.kicker .bar{display:block;width:calc(var(--step)*4);height:1px;background:var(--orange);
  flex:none}
.sechead p.fine{margin-top:calc(var(--step)*2)}

/* the ornament: a hairline, two dots and a diamond. Decorative, so it is
   stroked and filled directly — a `color:var(--orange)` here would trip
   test_a11y.py's check that the accent is never used for text. */
.orn{display:block;width:124px;height:16px;margin:0 0 calc(var(--step)*4)}
.orn path,.orn circle{stroke:var(--orange);stroke-width:1;fill:none}
.orn .gem{fill:var(--orange);stroke:none}
.orn.mid{margin-left:auto;margin-right:auto}

/* --- top bar ------------------------------------------------------------- */
/* The header used to stick on its own while the ribbon above it scrolled
   away underneath. The first click that moved the page therefore pulled the
   whole button row up by the ribbon's height -- 44px on a wide screen, 81px on
   a narrow one. Ribbon and header now sit in one sticky block, so scrolling
   moves neither of them. */
.sitetop{position:sticky;top:0;z-index:8;
  transition:box-shadow var(--motion-normal) var(--ease-brand)}
.top{position:relative;background:var(--bg);
  border-bottom:1px solid var(--line)}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--orange-edge);
  pointer-events:none}
.topin{display:flex;align-items:center;gap:calc(var(--step)*3);
  min-height:calc(var(--step)*9)}
.logo{display:flex;align-items:center;gap:calc(var(--step)*1.5);
  text-decoration:none;color:var(--fg);flex:0 0 auto}
.logo .mark{width:22px;height:22px;flex:none}

.logo span{font-size:22px;font-weight:500;letter-spacing:.005em;line-height:1}
.nav{display:none;gap:calc(var(--step)*3);margin-left:auto;font-size:15px}
.nav a{color:var(--muted);text-decoration:none;padding:10px 0}
.nav a:hover{color:var(--fg)}
.top .btn{margin-left:auto;padding:11px 18px;font-size:15px}
.nav-login{display:none;margin-left:auto;color:var(--muted);text-decoration:none;
  font-size:15px;padding:10px 0;white-space:nowrap}
.nav-login:hover{color:var(--fg)}
@media (min-width:520px){.nav-login{display:inline-block}
  .nav-login+.btn{margin-left:calc(var(--step)*3)}}
@media (min-width:1000px){.nav{display:flex}
  .nav-login{margin-left:calc(var(--step)*3)}}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;min-height:44px;border-radius:var(--r);
  background:var(--orange);color:var(--white);font-size:16px;font-weight:600;
  letter-spacing:.005em;text-decoration:none;border:0;cursor:pointer;
  text-align:center;box-shadow:none}
.btn:hover{background:var(--orange)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);
  box-shadow:none}
.btn.ghost:hover{border:1px solid var(--orange-edge)}
.btns{display:flex;flex-wrap:wrap;gap:calc(var(--step)*2);margin-top:calc(var(--step)*3)}

/* --- hero ---------------------------------------------------------------- */
#hero{padding-top:calc(var(--step)*8);overflow:hidden}
.hero{display:grid;gap:calc(var(--step)*6);grid-template-columns:minmax(0,1fr);
  align-items:start}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:calc(var(--step)*8)}}
.facts{display:grid;gap:0;margin-top:calc(var(--step)*4);max-width:34rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  box-shadow:none;overflow:hidden}
.facts li{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:calc(var(--step)*.5) calc(var(--step)*1.5);
  padding:calc(var(--step)*2) calc(var(--step)*3);font-size:15px;color:var(--muted)}
.facts li+li{border-top:1px solid var(--line-soft)}
.facts li::before{content:'';position:static;width:6px;height:6px;flex:none;
  background:var(--orange);transform:rotate(45deg);align-self:center}
.facts b{color:var(--fg);font-size:20px;font-weight:500;letter-spacing:.005em;
  flex:none}
.facts span{flex:1 1 12rem;min-width:0}
.trust{margin-top:calc(var(--step)*3);max-width:44ch}

/* Demo layout keeps the existing content and controls. */
.archwrap{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center}

/* the device is CSS, not a screenshot */
.phone{position:relative;z-index:1;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  padding:calc(var(--step)*2);max-width:23rem;width:100%;
  box-shadow:none}
.phone::before{content:'';position:absolute;inset:5px;border-radius:var(--r);
  border:1px solid var(--line-soft);pointer-events:none}
.phone .notch{width:74px;height:5px;border-radius:var(--r);background:var(--line);
  margin:4px auto calc(var(--step)*2)}
.phone .cap{display:flex;align-items:center;justify-content:center;
  gap:calc(var(--step));font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:calc(var(--step)*1.5)}
.phone .cap i{width:6px;height:6px;border-radius:var(--r);background:var(--orange);
  flex:none}
#demo-log{height:20rem;overflow-y:auto;display:flex;flex-direction:column;
  gap:calc(var(--step)*1.5);padding:calc(var(--step))}
/* a short conversation sits at the bottom of the box the way a chat does,
   without flex-end's unreachable-overflow bug */
#demo-log>:first-child{margin-top:auto}
#demo-log[data-preview] .bub{opacity:1}
/* While the box still holds the example conversation, the messages start at
   the top the way an opened chat does. Bottom-anchoring them there meant every
   bubble js/hero.js played pushed the one above it up the screen, which the
   browser counts -- correctly -- as the page moving under the reader. */
#demo-log[data-preview]>:first-child{margin-top:0}
.row{display:flex;gap:calc(var(--step)*1.5);margin-top:calc(var(--step)*2)}
#demo-input,#panel-code{flex:1;min-width:0;min-height:44px;padding:10px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;
  font-size:15px}
#demo-input:disabled,#panel-code:disabled{color:var(--muted)}
.row .btn{padding:12px 18px;font-size:15px}

/* --- bubbles: same shapes as the Instagram cards (build.py:109-121) ------- */
.chat{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.bub{max-width:82%;padding:13px 17px;border-radius:var(--r);font-size:15px;
  line-height:1.45;white-space:pre-line}
.bub.them{align-self:flex-end;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r)}
.bub.bot{align-self:flex-start;background:var(--orange-wash);
  border:1px solid var(--orange-edge);border-radius:var(--r)}
.bub .who{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bub.bot .who{color:var(--fg)}
#demo-log .bub.them{background:var(--bg)}
#ornek .thread{max-width:46rem;margin:0 auto}
#ornek .bub{font-size:16px}

/* --- cards, lists, steps ------------------------------------------------- */
.cols{display:grid;gap:calc(var(--step)*4);grid-template-columns:minmax(0,1fr)}
/* Two cards side by side only when there is room for two readable cards.
   At 820px each one was 355px wide and 2077px tall -- a column, not a card.
   1040px is the first width where the pair measures under twice its width. */
@media (min-width:1040px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.grid3{display:grid;gap:calc(var(--step)*3);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid4{display:grid;gap:calc(var(--step)*3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:calc(var(--step)*4);overflow:hidden}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--surface);box-shadow:none}
.card p{color:var(--muted);font-size:15px}
.card.wide{max-width:46rem;margin-top:calc(var(--step)*5)}

/* A card that is itself a link. The heading holds the only anchor and its
   stretched pseudo-element turns the whole card into the tap target, so there
   is one link per card rather than three pointing at the same page. */
.jump{display:flex;flex-direction:column}
.jump h3{margin-bottom:calc(var(--step)*1.5)}
.jump h3 a{color:inherit;text-decoration:none}
.jump h3 a::after{content:'';position:absolute;inset:0}
.jump:focus-within{outline:3px solid var(--fg);outline-offset:3px}
.jump h3 a:focus-visible{outline:none}
.jump .go{margin-top:auto;padding-top:calc(var(--step)*2.5);margin-bottom:0;
  color:var(--orange-hover);font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:calc(var(--step)*1)}
.jump .go::after{content:'\2192';
  transition:transform var(--motion-fast) var(--ease-brand)}
.jump:hover .go::after{transform:translateX(4px)}
#kimin .fine{margin-top:calc(var(--step)*4);max-width:46rem}
.card.wide p{color:var(--fg);font-size:16px}
.card.wide b{color:var(--fg);font-weight:600}
ul{list-style:none;display:flex;flex-direction:column;gap:calc(var(--step)*1.2)}
ul li{padding-left:1.5em;position:relative}
ul li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--orange);transform:rotate(45deg)}
.no li::before{background:none;content:'\00d7';color:var(--muted);
  transform:none;top:0;width:auto;height:auto;font-size:15px}
.inc li::before{top:.66em}

ol.steps{counter-reset:s;list-style:none;display:grid;gap:calc(var(--step)*4);
  grid-template-columns:1fr}
@media (min-width:820px){ol.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A full-width list of steps reads sideways; the same list inside a card does
   not. The card is 552px at its widest, so three columns left 141px per step
   and the headings wrapped to five lines. Inside a card the steps read down. */
.cols .card ol.steps{grid-template-columns:1fr}
ol.steps li{counter-increment:s;padding-left:0;padding-top:calc(var(--step)*3);
  border-top:1px solid var(--line)}
ol.steps li::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:Inter,"Inter alt",sans-serif;font-size:40px;font-weight:500;
  font-style:italic;color:var(--fg);line-height:1;
  margin-bottom:calc(var(--step)*1.5)}
ol.steps p{color:var(--muted);font-size:15px}

/* --- comparison table --------------------------------------------------- */
/* Two shapes, one markup. Above 860px it is a real table; below it every row
   becomes its own card, so a phone reads down instead of sideways. The ARIA
   roles on the markup keep the table meaning when `display` drops it. */
.tablewrap{border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);max-width:100%}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:calc(var(--step)*2) calc(var(--step)*2.5);
  border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
tbody th{font-weight:600;color:var(--fg)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.us,thead th.us{color:var(--fg);font-weight:600;background:var(--orange-wash)}
thead th.us{border-top:3px solid var(--orange);color:var(--fg)}
tbody tr:last-child td.us{border-bottom:3px solid var(--orange)}

/* The state of a cell is carried three ways at once: a shape, a colour and the
   word itself. Colour alone never says anything here. */
.mk{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;margin-right:calc(var(--step)*1);
  vertical-align:-5px;flex:none}
.mk svg{width:14px;height:14px;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.mk.ok{background:var(--success-soft)}
.mk.ok svg{stroke:var(--success)}
.mk.mid{background:var(--warning-soft)}
.mk.mid svg{stroke:var(--warning)}
.mk.no{background:var(--bg-2)}
.mk.no svg{stroke:var(--muted)}
.legend{list-style:none;margin:calc(var(--step)*3) 0 0;padding:0;display:flex;
  flex-direction:row;flex-wrap:wrap;gap:calc(var(--step)*1) calc(var(--step)*3);
  color:var(--muted);font-size:14px}
.legend li{display:flex;align-items:center;padding-left:0}
.legend li::before{content:none}
.legend .mk{vertical-align:0}

/* --- what happens to the appointment: one chip, four states --------------
   The status tokens existed but lived in four unrelated rules, and --danger
   was used nowhere, so a cancelled appointment looked the same as one waiting
   for approval. Every state card now prints its state the same way: a shape,
   a colour and the word, together. The word carries the meaning -- cover the
   colour and the card still reads, which is the point. */
.st{display:inline-flex;align-items:center;gap:calc(var(--step)*.75);
  margin:0 0 calc(var(--step)*1.5);padding:4px 11px 4px 8px;
  border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em}
/* .card p sets 15px body text; the chip is a label, not a sentence. */
.card p.st{font-size:13px}
.st svg{width:15px;height:15px;flex:none;fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.st.ok{background:var(--success-soft);color:var(--success)}
.st.ok svg{stroke:var(--success)}
.st.info{background:var(--info-soft);color:var(--info)}
.st.info svg{stroke:var(--info)}
.st.wait{background:var(--warning-soft);color:var(--warning)}
.st.wait svg{stroke:var(--warning)}
.st.off{background:var(--danger-soft);color:var(--danger)}
.st.off svg{stroke:var(--danger)}

@media (min-width:861px){
  table{min-width:46rem}
  .tablewrap{overflow-x:auto}
}
@media (max-width:860px){
  .tablewrap{border:0;border-radius:0;background:transparent}
  table,tbody,tbody tr,tbody th,tbody td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  tbody tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:calc(var(--step)*3);
    margin-bottom:calc(var(--step)*2)}
  tbody tr:last-child{margin-bottom:0}
  tbody th{padding:0 0 calc(var(--step)*1.5);border-bottom:1px solid var(--line);
    font-size:17px;line-height:1.35}
  tbody td{padding:calc(var(--step)*1.5) 0 0;border-bottom:0;
    display:flex;align-items:flex-start;gap:calc(var(--step)*1)}
  tbody td::before{content:attr(data-label) ": ";color:var(--muted);
    font-size:14px;flex:none;width:9.5rem}
  tbody td.us{background:transparent;margin-top:calc(var(--step)*1.5);
    padding-top:calc(var(--step)*2);border-top:2px solid var(--orange)}
  tbody td.us::before{color:var(--orange-hover);font-weight:600}
  tbody tr:last-child td.us{border-bottom:0}
  .mk{margin-right:0}
}
/* On the narrowest phone the label no longer fits beside the answer, so it
   moves above it. The mark stays glued to the word it belongs to. */
@media (max-width:560px){
  tbody td{display:block}
  tbody td::before{content:attr(data-label);display:block;max-width:none;
    font-size:13px;margin-bottom:calc(var(--step)*.5)}
  .mk{margin-right:calc(var(--step)*1)}
}

/* --- panel shots -------------------------------------------------------- */
.shots{display:grid;gap:calc(var(--step)*4);grid-template-columns:1fr}
@media (min-width:820px){.shots{grid-template-columns:1fr 1fr}}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);box-shadow:none}
.shot figcaption{margin-top:calc(var(--step)*1.5);font-size:14px;color:var(--muted);
  padding-left:calc(var(--step)*1.5);border-left:1px solid var(--orange-edge)}

/* --- the offer band and the price ticket -------------------------------- */
#teklif{background:var(--bg-2)}

#teklif .wrap{position:relative}
.offer{border:1px solid var(--orange-edge);border-radius:var(--r);
  background:var(--surface);
  padding:calc(var(--step)*5);box-shadow:none;max-width:52rem;
  margin:0 auto}
.offer b{color:var(--fg)}
.offer .slots{display:inline-flex;align-items:center;gap:calc(var(--step));
  margin-top:calc(var(--step)*3);padding:8px 14px;border-radius:var(--r);
  border:1px solid var(--orange-edge);background:var(--orange-wash);font-size:14px}

.ticket{position:relative;max-width:34rem;border:1px solid var(--orange-edge);
  border-radius:var(--r);padding:calc(var(--step)*5);overflow:hidden;
  background:var(--surface);
  box-shadow:none}
.price{font-weight:500;font-size:clamp(46px,8.4vw,86px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:lining-nums}
.price .per{font-family:Inter,"Inter alt",'Noto Sans',sans-serif;font-size:18px;font-weight:500;
  color:var(--muted);letter-spacing:0}
.price small{display:block;font-family:Inter,"Inter alt",'Noto Sans',sans-serif;font-size:15px;
  font-weight:500;color:var(--muted);letter-spacing:0;margin-top:calc(var(--step)*1.5)}
.ticket .cut{margin:calc(var(--step)*3) 0;border:0;border-top:1px dashed var(--line);
  position:relative}

.ticket ul{font-size:15px}
.priceblocks{display:grid;gap:calc(var(--step)*4);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.priceblocks{grid-template-columns:minmax(0,34rem) minmax(0,1fr);
  align-items:start}}

/* --- faq ---------------------------------------------------------------- */
.faq{max-width:50rem}
details{border-bottom:1px solid var(--line-soft);padding:calc(var(--step)*1.5) 0}
details:first-of-type{border-top:1px solid var(--line-soft)}
details[open]{background:var(--surface);font-size:17px;font-weight:600;min-height:44px;display:flex;
  align-items:center;gap:calc(var(--step)*2);justify-content:space-between;
  padding:calc(var(--step)) 0}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';display:grid;place-items:center;width:30px;height:30px;
  flex:none;border:1px solid var(--orange-edge);border-radius:var(--r);
  color:var(--fg);font-family:Inter,"Inter alt",'Noto Sans',sans-serif;font-size:17px;
  font-weight:600}
details[open] summary::after{content:'\2212'}
details p{margin-top:calc(var(--step)*1.5);margin-bottom:calc(var(--step)*2);
  color:var(--muted)}

/* --- contact, footer, phone dock ---------------------------------------- */
#iletisim .btns{margin-top:calc(var(--step)*4)}
footer{font-size:14px}
.footmark{display:flex;align-items:center;gap:calc(var(--step)*1.5);
  margin-bottom:calc(var(--step))}
.footmark svg{width:18px;height:18px;flex:none}

.footmark span{font-family:Inter,"Inter alt",sans-serif;font-size:19px;color:var(--fg)}

/* --- phone-only bottom bar; hidden above 960px, so it is not a .btn
       (tests measure every .btn and a display:none one has no height) --- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;
  gap:calc(var(--step)*1.5);padding:calc(var(--step)*1.5);
  background:var(--bg);border-top:1px solid var(--line)}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:var(--r);font-size:15px;font-weight:600;
  text-decoration:none;background:var(--orange);color:var(--white);text-align:center}
.dock a.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
body{padding-bottom:calc(var(--step)*9)}
@media (min-width:1000px){.dock{display:none}body{padding-bottom:0}}
@media (max-width:640px){.offer,.ticket{padding:calc(var(--step)*3)}}

/* Approved lively system: actual demo and evidence remain untouched. */
.wrap{max-width:1200px;padding-inline:32px}
h1,h2,h3,.price,.facts b,ol.steps li::before{font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;font-weight:700}
h1{font-size:clamp(44px,6vw,76px);line-height:1.06;letter-spacing:-.04em;max-width:13ch}
h1 em{color:var(--orange);font-weight:750}
h2{font-size:clamp(32px,4vw,44px);letter-spacing:-.035em;line-height:1.15}
h3{font-size:24px}.lead{color:var(--muted);font-size:18px;line-height:1.75}
.logo span{letter-spacing:-.045em}.logo .mark{width:32px;height:32px}
.btn{border-radius:var(--r);box-shadow:var(--shadow-sm);transition:background var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
.btn:hover{background:var(--orange-hover);box-shadow:var(--shadow-md)}
.btn.ghost{border-color:var(--control-line)}.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
a:not(.btn):not(.logo):not(.nav a):not(.nav-login):not(.dock a):not(footer a):not(.band-navy a):not(.ribbon a):not(.crumbs a){color:var(--orange);text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.hero{align-items:center}.archwrap{padding:32px 22px;border-radius:var(--r-feature);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));isolation:isolate}
.archwrap::before{content:'';position:absolute;right:-30px;top:-20px;width:180px;height:180px;border:24px solid rgb(242 120 69 / 18%);border-radius:50%;z-index:-1;pointer-events:none}
.phone{border-radius:32px;box-shadow:var(--shadow-md);padding:22px}.phone::before{border-radius:28px}.phone .notch{border-radius:999px}.phone .cap i{border-radius:50%}
#demo-input,#panel-code{border-color:var(--control-line);border-radius:var(--r)}
.bub{border-radius:20px}.bub.them{border-radius:20px 20px 6px 20px}.bub.bot{border-radius:20px 20px 20px 6px}
.bub .who{font-size:12px;letter-spacing:.08em}.bub.bot{background:var(--orange-wash)}
.card,.facts,.offer,.ticket,.tablewrap{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card{padding:32px}.facts b{font-size:22px}.facts li::before,ul li::before{border-radius:50%;transform:none}
ol.steps li{background:var(--surface);padding:28px;border:1px solid var(--line);border-radius:var(--r-lg)}
ol.steps li::before{color:var(--orange);font-style:normal;font-size:44px}
.shot img{border-radius:20px;box-shadow:var(--shadow-md)}
#panel{background:var(--fg);color:var(--bg)}#panel h2,#panel .kicker,#panel .fine,#panel figcaption{color:var(--bg)}
#panel .shot img{border-color:transparent}
.offer{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));border-color:var(--line)}
.ticket{border-color:var(--orange-edge)}.price{color:var(--orange);font-variant-numeric:tabular-nums}
details[open]{display:block;font-weight:400;padding:12px 16px;border-radius:var(--r)}
summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-weight:600}
summary::after{border-radius:10px;min-width:30px}summary:focus-visible{outline-offset:3px}
.dock a{border-radius:var(--r)}.dock a.ghost{border-color:var(--control-line)}
@media(max-width:767px){.wrap{padding-inline:20px}.hero{gap:32px}.archwrap{padding:22px 12px}.phone{padding:18px}.card{padding:24px}.topin{gap:12px}.top .btn{padding:11px 14px}.logo span{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- multi-page additions ------------------------------------------------ */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:calc(var(--step)*3)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--fg)}
#giris{padding-top:calc(var(--step)*8)}
#giris h1{margin-bottom:calc(var(--step)*2)}

.fit{display:grid;gap:calc(var(--step)*4);max-width:760px}
.fit fieldset{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:calc(var(--step)*3);margin:0;background:var(--surface)}
.fit legend{padding:0 calc(var(--step));font-weight:600;color:var(--fg)}
.fit label{display:flex;align-items:flex-start;gap:calc(var(--step)*1.5);
  padding:10px 0;min-height:44px;cursor:pointer;line-height:1.5}
.fit input[type=radio]{margin-top:4px;width:20px;height:20px;flex:none;
  accent-color:var(--orange)}
.fitout{background:var(--orange-wash);border:1px solid var(--orange-edge);
  border-radius:var(--r-lg);padding:calc(var(--step)*3);color:var(--fg);margin:0}

/* ============================================================================
   2026-09-14 revision — bands, obvious controls, packages, navy footer.
   The rules above stay as the base; this block is the one that decides what
   the visitor actually sees. Colours come from tokens.css only.
   ========================================================================== */

/* --- nothing may push the page sideways --------------------------------- */
.hero>*,.cols>*,.grid4>*,.pkgs>*,.flow>*,.shots>*,.footin>*,.foot-top>*,.foot-cols>*{min-width:0}
img,svg{max-width:100%}
h1,h2{text-wrap:balance}
p,h1,h2,h3,h4,li,a,summary{overflow-wrap:break-word}

/* --- three grounds, used on purpose ------------------------------------- */
.band-warm{background:var(--bg-2)}
.band-navy{background:var(--fg);color:var(--bg)}
.band-navy h2,.band-navy h3,.band-navy p,.band-navy li,.band-navy .fine,
.band-navy .kicker,.band-navy figcaption{color:var(--bg)}
.band-navy .kicker .bar{background:var(--bright)}
.band-navy a{color:var(--orange-wash)}
.band-navy a:hover{color:var(--white)}
.band-warm,.band-navy{border-top:0}
.band-warm+section,.band-navy+section{border-top:0}
.hair{border-top:1px solid var(--line-soft)}

/* Four numbers about how the assistant works. The band carries no section
   number on purpose: it interrupts the numbered rhythm rather than extending
   it, and the line under it says what the numbers are and are not. */
.strip{padding-top:calc(var(--step)*8);padding-bottom:calc(var(--step)*8)}
.tally{display:grid;gap:calc(var(--step)*4);margin:0;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.tally{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.tally{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tally li{display:block;padding-left:0}
.tally li::before{content:none}
.tally b{display:block;font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;
  font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.01em;
  color:var(--fg)}
/* The warm tint reads as the accent on navy and measures 11.87 against it;
   bright orange is decorative only and never becomes text. */
.band-navy .tally b{color:var(--orange-wash)}
.tally span{display:block;margin-top:calc(var(--step)*1.5);font-size:15px}
#sayilar .fine{margin-top:calc(var(--step)*5);max-width:52rem}
@media (min-width:1000px){.tally b{font-size:44px}}

/* --- salon owner cards -------------------------------------------------- */
/* Four written examples, printed from site/data/reviews.json. The stars are
   drawn rather than typed so a screen reader hears one label instead of five
   glyphs, and the avatar is the owner's initials: the site has no photograph
   of these people because these people are examples. */
.review{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.review blockquote{margin:0}
.review blockquote p{color:var(--fg);font-size:16px;margin:0}
.review .stars{display:flex;gap:calc(var(--step)*.5);margin:0}
.review .stars span{display:inline-flex;width:18px;height:18px}
.review .stars svg{width:18px;height:18px}
.review .stars .on svg{fill:var(--orange);stroke:none}
.review .stars .off svg{fill:var(--line);stroke:none}
.review .who{display:flex;align-items:center;gap:calc(var(--step)*2);
  margin-top:auto;padding-top:calc(var(--step)*2.5);
  border-top:1px solid var(--line-soft)}
.review .ava{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--orange-wash);color:var(--orange-hover);
  font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em}
.review .whotext{display:block;font-size:15px;line-height:1.35}
.review .whotext b{display:block;color:var(--fg)}
.review .role{display:block;color:var(--muted);font-size:14px;
  margin-top:calc(var(--step)*.5)}
#yorum .lead{max-width:52rem}

/* --- today / with the assistant ----------------------------------------- */
/* The two lists face each other, so the same mark set as the comparison table
   is used: an amber wave for the way a day runs now, a green tick for the way
   it runs with the assistant. The sentence carries the meaning; the mark only
   repeats it. */
.vs{gap:calc(var(--step)*2)}
.vs li{padding-left:0;display:flex;align-items:flex-start;
  gap:calc(var(--step)*1.25);color:var(--fg);font-size:16px}
.vs li::before{content:none}
.vs .mk{margin-right:0;margin-top:1px}
/* The accent strip is painted inside the card rather than added to its border,
   so the two headings stay on the same line as each other. */
.sideus{border-color:var(--orange)}
.sideus::before{height:4px;background:var(--orange)}
#fark .lead{max-width:54rem}

/* --- setup timeline ----------------------------------------------------- */
/* A sequence in time, so it reads downwards with a line through it rather than
   across in equal boxes like every other list on the page. The heading stays
   on the left on a wide screen and the steps run beside it. */
.pathrow{display:grid;gap:calc(var(--step)*5);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.pathrow{gap:calc(var(--step)*8);
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:start}
  .pathrow .sechead{position:sticky;top:calc(var(--step)*14);margin:0}}
.path{counter-reset:k;list-style:none;display:flex;flex-direction:column;
  gap:calc(var(--step)*3);margin:0;padding:0}
.path li{counter-increment:k;position:relative;padding-left:calc(var(--step)*7);
  padding-bottom:calc(var(--step)*2)}
.path li:last-child{padding-bottom:0}
.path li::before{content:counter(k);position:absolute;left:0;top:-2px;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--orange-wash);color:var(--orange-hover);
  font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;font-weight:700;font-size:17px;
  transform:none}
/* The thread between the discs. It stops at the last step rather than running
   off the end of the list. */
.path li::after{content:'';position:absolute;left:18px;top:42px;bottom:0;
  width:2px;background:var(--line)}
.path li:last-child::after{content:none}
.path b{display:block;font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;
  font-weight:700;font-size:20px;line-height:1.3;
  margin-bottom:calc(var(--step)*1)}
.path p{margin:0;font-size:15px}
.band-navy .path li::after{background:rgb(255 255 255 / 22%)}
#kurulum .sechead .fine{margin-top:calc(var(--step)*3)}

/* Each channel card closes with the one limit that belongs to that channel.
   It is set apart from the paragraph above it so the reader sees a boundary
   rather than a second sales line. */
.limit{margin-top:calc(var(--step)*2);padding-top:calc(var(--step)*2);
  border-top:1px solid var(--line-soft);font-size:14px}
.band-navy .limit{border-top-color:rgb(255 255 255 / 22%)}
section{padding-block:clamp(56px,7vw,96px)}

/* --- launch ribbon: part of the shared shell, same bytes on every page --- */
.ribbon{background:var(--fg);color:var(--bg);font-size:14px;line-height:1.35}
.ribbonin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:calc(var(--step)) calc(var(--step)*2);min-height:44px;
  padding-block:calc(var(--step))}
.ribbon p{margin:0;max-width:none;text-align:center}
.ribbon b{background:var(--bright);color:var(--fg);padding:2px 9px;border-radius:999px;font-weight:700}
.ribbon a{color:var(--orange-wash);text-underline-offset:4px;
  text-decoration-thickness:2px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.ribbon a:hover{color:var(--white)}
@media (max-width:767px){.ribbon{font-size:13px}
  .ribbonin{gap:calc(var(--step)*.5) calc(var(--step)*1.5);min-height:0;
    padding-block:calc(var(--step)*.75)}
  .ribbon b{padding:1px 7px}}

/* --- controls the eye cannot miss --------------------------------------- */
.btn{min-height:48px;font-weight:700;border:2px solid var(--orange);
  box-shadow:0 4px 0 var(--fg);
  transition:background var(--motion-fast) ease,box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease}
.btn:hover{background:var(--orange-hover);border-color:var(--orange-hover);
  box-shadow:0 6px 0 var(--fg)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--fg)}
.btn.ghost{background:var(--bg);color:var(--fg);border:2px solid var(--fg);
  box-shadow:0 4px 0 var(--line)}
.btn.ghost:hover{background:var(--surface-2);color:var(--fg);
  border-color:var(--fg);box-shadow:0 6px 0 var(--line)}
.band-navy .btn.ghost{background:transparent;color:var(--bg);
  border-color:var(--orange-wash);box-shadow:0 4px 0 var(--bright)}
.band-navy .btn.ghost:hover{background:var(--orange-hover);color:var(--white);
  border-color:var(--orange-hover)}
.btns{margin-bottom:calc(var(--step))}
.dock a{min-height:48px;font-weight:700;border:2px solid var(--orange)}
.dock a.ghost{border:2px solid var(--fg)}

/* --- the proof strip that replaced the long transcript ------------------ */
.flow{display:grid;gap:calc(var(--step)*2);align-items:stretch;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}}
.flowstep{display:flex;flex-direction:column;gap:calc(var(--step)*1.5);
  background:var(--surface);border:1px solid var(--line);
  border-top:6px solid var(--bright);border-radius:var(--r-lg);
  padding:calc(var(--step)*3);box-shadow:var(--shadow-sm)}
.flowstep b{font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;font-size:19px}
.flowstep p{color:var(--muted);font-size:15px;margin:0}
.flowarrow{display:grid;place-items:center;color:var(--orange);font-size:26px;
  font-weight:700;line-height:1}
@media (max-width:819px){.flowarrow{transform:rotate(90deg)}}
.icon-disc{width:52px;height:52px;display:grid;place-items:center;flex:none;
  border-radius:50%;background:var(--orange-wash);color:var(--fg)}
.icon-disc svg{width:26px;height:26px;stroke:var(--fg);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.band-navy .icon-disc{background:var(--orange-hover)}
.band-navy .icon-disc svg{stroke:var(--white)}

/* --- the live box in the hero: wider, framed, obviously alive ----------- */
@media (min-width:960px){.hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4vw,64px)}}
.archwrap{padding:clamp(18px,2.4vw,32px);overflow:clip}
.phone{max-width:560px;border:2px solid var(--fg);padding:clamp(16px,2vw,24px);
  box-shadow:var(--shadow-lg)}
.phone::before{inset:6px;border-color:var(--line-soft)}
.demohead{display:flex;align-items:center;gap:calc(var(--step)*1.5);
  padding-bottom:calc(var(--step)*2);margin-bottom:calc(var(--step)*2);
  border-bottom:1px solid var(--line)}
.demohead .mark{width:26px;height:26px;flex:none}
.demohead .who{display:block;font-weight:700;font-size:16px;line-height:1.2}
.demohead .sub{display:block;font-size:13px;color:var(--muted)}
.livetag{margin-left:auto;display:inline-flex;align-items:center;
  gap:calc(var(--step)*.75);padding:5px 11px;border-radius:999px;
  background:var(--success-soft);color:var(--success);border:1px solid var(--success);
  font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.livetag i{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
#demo-log{height:clamp(320px,40vh,440px)}
.row{gap:calc(var(--step)*1.5);flex-wrap:wrap}
#demo-input{min-height:48px;border-width:2px;border-color:var(--fg);
  background:var(--white);flex:1 1 11rem}
.row .btn{min-height:48px;padding:12px 20px;flex:0 0 auto}
@media (max-width:420px){.row .btn,.row #demo-input{flex:1 1 100%}}
.phone .btns{margin-top:calc(var(--step)*2)}
.phone .btns .btn{width:100%}

/* --- panel band: one big screen, three supporting ones ------------------ */
.shots.lead{grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.shots.lead{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shots.lead .shot.big{grid-column:1 / -1}}
.shot.small img{max-height:320px;object-fit:cover;object-position:top center}

/* --- packages ----------------------------------------------------------- */
/* The three cards stretch to the tallest of them, so the buttons finish on one
   line and the eye compares prices rather than card lengths. */
.pkgs{display:grid;gap:calc(var(--step)*3);grid-template-columns:minmax(0,1fr);
  align-items:stretch}
@media (min-width:900px){.pkgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pkg{position:relative;display:flex;flex-direction:column;
  gap:calc(var(--step)*2);background:var(--surface);border:1px solid var(--line);
  border-top:6px solid var(--line);border-radius:var(--r-lg);
  padding:calc(var(--step)*4);box-shadow:var(--shadow-sm)}
.pkg h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0}
.pkg .amount{font-family:'Albert Sans',"Albert alt",system-ui,sans-serif;font-weight:700;
  font-size:clamp(38px,4.6vw,52px);line-height:1;color:var(--orange);
  font-variant-numeric:tabular-nums}
.pkg .amount span{font-family:Inter,"Inter alt",sans-serif;font-size:17px;font-weight:600;
  color:var(--muted)}
.pkg .who{font-size:15px;color:var(--fg);font-weight:600;margin:0}
.pkg ul{font-size:15px;gap:calc(var(--step)*1.4)}
/* Included lines are ticked rather than bulleted: every line in this list is
   something the package contains, and the tick says so at a glance. The mark is
   decoration -- the sentence next to it carries the meaning on its own, so a
   reader who cannot see the colour loses nothing. */
.pkg ul.inc li{color:var(--fg);padding-left:2.1em}
.pkg ul.inc li::before{content:'';position:absolute;left:0;top:0;width:21px;
  height:21px;border-radius:50%;background:var(--success-soft);transform:none}
.pkg ul.inc li::after{content:'';position:absolute;left:6px;top:7px;width:9px;
  height:5px;border-left:2px solid var(--success);
  border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.pkg .btn{margin-top:auto;width:100%}
/* .now is the package that can be bought today; .soon is published but not yet
   open. The difference is carried by the border and the badge, not by hiding
   anything: the price list stays complete. */
.pkg.now{border-color:var(--orange);border-top-color:var(--orange);
  box-shadow:var(--shadow-lg)}
/* The open package is lifted by the same amount it grows, so the three cards
   still finish on one line and the buttons stay level. */
@media (min-width:900px){.pkg.now{margin-top:calc(var(--step)*-2);
  padding-block:calc(var(--step)*5) calc(var(--step)*4)}}
.pkg.soon{background:var(--bg-2)}
/* The badge names the state of the package, not its popularity: nobody has
   bought anything yet, so "en popüler" would be a number we do not have.
   "Bugün alınabilir" is the same signpost and it is true. */
.pkg .tag{position:absolute;top:calc(var(--step)*-1.75);left:calc(var(--step)*4);
  display:inline-flex;align-items:center;gap:calc(var(--step)*.75);
  padding:6px 15px;border-radius:999px;background:var(--orange);color:var(--white);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:var(--shadow-sm)}
.pkg .tag::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--white)}
.pkg .tag.soon{background:var(--fg);color:var(--white)}
.pkg .tag.soon::before{background:var(--orange-wash)}
.setupline{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--step)*1.5);
  margin-top:calc(var(--step)*4);padding:calc(var(--step)*2) calc(var(--step)*3);
  border:1px solid var(--warning);border-radius:var(--r-lg);
  background:var(--warning-soft);font-size:15px}
.setupline b{color:var(--fg)}
.offer .slots{background:var(--white);border-width:2px;font-weight:700;
  font-size:16px}
.offer .slots b{font-size:20px}
.stage2{margin-top:calc(var(--step)*3);padding:calc(var(--step)*2) calc(var(--step)*3);
  border-left:4px solid var(--info);background:var(--info-soft);
  border-radius:var(--r);font-size:15px}

/* --- footer: its own ground, contact in plain sight --------------------- */
/* Three rows, not five ragged columns. The old row left a column-deep hole
   under the brand on a wide screen and an eighteen-link scroll on a phone;
   worse, the phone number sat in the fifth column where nobody looked. Now the
   page ends with who we are and how to reach us, then the site map, then the
   one legal line -- each separated by a rule so the eye knows it arrived. */
footer{background:var(--fg);color:var(--bg);border-top:0;
  padding:calc(var(--step)*7) 0 calc(var(--step)*8)}
footer a{color:var(--orange-wash);text-decoration:none;
  border-bottom:2px solid transparent;align-self:flex-start}
footer a:hover,footer a:focus-visible{color:var(--white);
  border-bottom-color:var(--bright)}
footer .footmark span{color:var(--bg)}
footer .footmark path{stroke:var(--bg)}
footer .footmark rect{fill:var(--bright)}
.footin{display:grid;gap:calc(var(--step)*5)}
.foothead{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-wash);
  margin-bottom:calc(var(--step)*1.5)}

.foot-top{display:grid;gap:calc(var(--step)*5);
  padding-bottom:calc(var(--step)*4);border-bottom:1px solid var(--muted)}
@media (min-width:820px){.foot-top{grid-template-columns:1fr auto;
  gap:calc(var(--step)*8);align-items:start}}
.foot-brand p{color:var(--bg);max-width:38ch;margin-top:calc(var(--step)*2)}
.foot-contact{display:flex;flex-direction:column;color:var(--bg)}
.foot-contact a{padding:calc(var(--step)*1.5) 0;font-weight:500}
.foot-note{color:var(--bg);opacity:.8;margin-top:calc(var(--step)*1.5)}

/* Two columns on a phone rather than one: eighteen links in a single file is a
   scroll, not a site map. */
.foot-cols{display:grid;gap:calc(var(--step)*3) calc(var(--step)*4);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot-cols div{display:flex;flex-direction:column}
.foot-cols a{padding:calc(var(--step)*1.5) 0}

.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:calc(var(--step)*2);color:var(--bg);opacity:.85;
  padding-top:calc(var(--step)*3.5);border-top:1px solid var(--muted)}

/* --- motion ---------------------------------------------------------------
   Enough to make the page feel answered rather than printed, and no more:
   a card rises into place once, a pointer lifts it, the header casts a shadow
   when it starts overlapping the page. Nothing loops, nothing floats, nothing
   animates a property that moves the rest of the layout.

   Everything here is opt-in from JavaScript. `.reveal` only hides while
   `html.js-reveal` is set, which reveal.js sets on load — so with JavaScript
   off nothing is hidden and the page reads exactly as it does now. */
html.js-reveal .reveal{opacity:0;transform:translateY(12px);
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand)}
html.js-reveal .reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand),
             translate var(--motion-normal) var(--ease-brand),
             box-shadow var(--motion-normal) var(--ease-brand)}

/* The lift a pointer gets for hovering a card. It is written in `translate`
   rather than `transform` on purpose: the reveal above owns `transform` on
   these very elements and wins on specificity, so a hover written in
   `transform` was being cancelled outright -- measured on 2026-09-15, the
   cards did not move at all and only their shadow changed, with no transition
   on it. `translate` is a transform component with its own cascade, so the
   two compose: the reveal slides the card in over 420ms, the pointer lifts it
   over 180ms, and neither overwrites the other. */
@media (hover:hover) and (pointer:fine){
  .card,.pkg,.lift{transition:translate var(--motion-normal) var(--ease-brand),
                   box-shadow var(--motion-normal) var(--ease-brand)}
  .card:hover,.pkg:hover,.lift:hover{translate:0 -3px;box-shadow:var(--shadow-lg)}
  @media (prefers-reduced-motion:reduce){
    .card:hover,.pkg:hover,.lift:hover{translate:none}
  }
}

/* --- the rest of the hovers, measured 2026-09-15 ------------------------- */
/* Every colour change below already existed; none of them was transitioned,
   so a link snapped from one colour to another under the pointer. The page
   read as a picture of a page. These are paint-only properties -- colour and
   border colour -- so nothing here moves the layout. */
.nav a,.nav-login,.crumbs a,.toc a,.ribbon a,.band-navy a:not(.btn),footer a,
.post-card h3 a,.legend a{
  transition:color var(--motion-fast) var(--ease-brand),
             border-color var(--motion-fast) var(--ease-brand)}
/* The button changes its border with its background; only the background and
   the shadow were in the list. */
.btn{transition:background var(--motion-fast) var(--ease-brand),
                border-color var(--motion-fast) var(--ease-brand),
                box-shadow var(--motion-fast) var(--ease-brand),
                transform var(--motion-fast) var(--ease-brand)}
/* A question in the list answered nothing until it was clicked: no hover at
   all, while the marker beside it carried a transition for a colour change
   that never came. Now the row and its marker light together. */
summary{transition:color var(--motion-fast) var(--ease-brand)}
summary:hover{color:var(--orange-hover)}
summary:hover::after{background:var(--orange-wash);border-color:var(--orange)}

summary::after{transition:background var(--motion-fast) var(--ease-brand),
                          color var(--motion-fast) var(--ease-brand)}
html.js-reveal details[open] > :not(summary){animation:answer var(--motion-dialog)
  var(--ease-brand) both}
@keyframes answer{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* The header is sticky. Until the page scrolls under it there is nothing to
   separate it from, so the shadow only appears once there is. */
.top.is-stuck{box-shadow:var(--shadow-md)}

/* A package or feature that is published but not open yet. Same card, muted
   surface: the reader sees it exists without being invited to buy it. */
.card.soon{background:var(--orange-wash);border-style:dashed;
  border-color:var(--orange-edge)}
.card.soon::before{background:transparent}

/* Blog. A post is one column of running text with its own headings listed
   beside it; the index is the same card grid every other page uses. */
.meta{font-size:14px;color:var(--muted);margin-top:calc(var(--step)*2)}
.post-wrap{display:grid;gap:calc(var(--step)*5)}
@media (min-width:1000px){.post-wrap{grid-template-columns:15rem minmax(0,1fr);
  align-items:start}
  .toc{position:sticky;top:calc(var(--step)*14)}}
.toc ol{list-style:none;margin:calc(var(--step)*2) 0 0;padding:0;
  display:flex;flex-direction:column;gap:calc(var(--step)*1.5)}
.toc a{color:var(--muted);font-size:15px;text-decoration:none;
  border-left:2px solid var(--line);padding-left:calc(var(--step)*2);display:block}
.toc a:hover{color:var(--fg);border-left-color:var(--orange)}
.post{max-width:42rem}
.post h2{font-size:clamp(22px,2.4vw,28px);margin-top:calc(var(--step)*6);
  margin-bottom:calc(var(--step)*2)}
.post h2:first-child{margin-top:0}
.post p{margin-bottom:calc(var(--step)*3);line-height:1.7}
.post p:last-child{margin-bottom:0}
.post-card h3{font-size:20px;margin:calc(var(--step)) 0 calc(var(--step)*2)}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline}
.post-card .meta{margin-top:0}

/* === the hero: one cycling line, a real messenger, three arriving notices ==
   Item [1] of the 2026-09-15 revision. Three rules govern this block:

   * Nothing here depends on JavaScript to be readable. With the script off the
     four phrases stack as a list, the conversation shows the two bubbles the
     generator committed, and the notices simply sit where they are.
   * The messenger colours below are WhatsApp's and Instagram's, not ours, so
     they are written here as literals rather than added to tokens.json -- a
     third party's brand does not belong in our palette file.
   * Instagram's own outgoing blue (#3797F0) carries white text at 3.07:1 and
     fails the contrast floor this site keeps, so it is darkened to #2A6FBA
     (5.14:1). Everything else is the real shade.                            */

/* --- the line that cycles under the headline ---------------------------- */
/* The four phrases share one grid cell wherever the script is free to cycle
   them, so the box is always as tall as the longest of them and nothing below
   it ever moves: collapsing a four-line stack into one line once JavaScript
   arrived measured 0.13 of layout shift at 768px. */
.cycline{margin-top:calc(var(--step)*2.5);margin-bottom:calc(var(--step)*2)}
.cyc{display:grid;font-size:clamp(17px,1.9vw,20px);line-height:1.4}
.cyc>b{grid-area:1 / 1;font-weight:600;color:var(--orange);opacity:0}
.cyc>b:first-child{opacity:1}
.js-hero .cyc>b{opacity:0;transform:translateY(.3em);
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand)}
.js-hero .cyc>b.is-on{opacity:1;transform:none}

/* Asked for less motion, the script stops before it sets the class above
   (js/hero.js returns on the line before it), so the stack would leave three
   of the four phrases at zero opacity and only the first one readable --
   measured on 2026-09-15, the only three hidden blocks on the whole site.
   Here they un-stack into the list they read as, and it costs nothing: with
   no script left to collapse them, four lines at the first paint stay four
   lines, so there is nothing to shift. */
@media (prefers-reduced-motion:reduce){
  .cyc,.js-hero .cyc{gap:calc(var(--step)*.5)}
  .cyc>b,.js-hero .cyc>b{grid-area:auto;opacity:1;transform:none}
}

/* --- which messenger the phone is showing ------------------------------- */
.chans{display:flex;gap:calc(var(--step));margin-bottom:calc(var(--step)*2)}
.chan{flex:1 1 0;min-height:44px;padding:10px 12px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  gap:calc(var(--step));border:2px solid var(--line);background:var(--surface);
  color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color var(--motion-normal) var(--ease-brand),
             color var(--motion-normal) var(--ease-brand),
             border-color var(--motion-normal) var(--ease-brand)}
.chan i{width:10px;height:10px;border-radius:50%;flex:none;background:#25D366}
.chan[data-chan="ig"] i{background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7)}
.chan.is-on{border-color:var(--fg);background:var(--fg);color:var(--white)}

/* --- the screen: header bar and conversation are one clipped surface ----- */
.screen{border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.demohead{margin-bottom:0;border-bottom:0;
  padding:calc(var(--step)*1.5) calc(var(--step)*2)}
.demohead .mark{width:34px;height:34px;padding:4px;border-radius:50%;
  background:var(--white);box-sizing:border-box}
[data-chan] .chat{padding:calc(var(--step)*2)}
/* The speaker label is what a screen reader needs and what a messenger never
   prints. It stays in the document and leaves the picture. */
[data-chan] .bub .who{position:absolute;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-chan] .bub{color:var(--fg)}
/* The clock is real: js/hero.js and js/demo.js write the actual time a bubble
   appeared. It is set through an attribute so it stays out of textContent. */
.bub[data-time]::after{content:attr(data-time);display:block;margin-top:6px;
  font-size:11px;font-weight:600;letter-spacing:.02em;text-align:right;
  color:#37474F}
.bub.them[data-time]::after{padding-right:22px;background-repeat:no-repeat;
  background-position:right 0 top 1px;background-size:18px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6.6 4.3 10 10.4 2' fill='none' stroke='%232A6FBA' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.2 6.6 10.5 10 16.6 2' fill='none' stroke='%232A6FBA' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* WhatsApp */
[data-chan="wa"] .demohead{background:#075E54}
[data-chan="wa"] .demohead .who{color:#FFFFFF}
[data-chan="wa"] .demohead .sub{color:#CFE3DF}
[data-chan="wa"] .livetag{background:rgb(255 255 255 / 16%);color:#FFFFFF;
  border-color:rgb(255 255 255 / 45%)}
[data-chan="wa"] .livetag i{background:#25D366}
[data-chan="wa"] .chat{background:#ECE5DD}
[data-chan="wa"] .bub.them,[data-chan="wa"] #demo-log .bub.them{
  background:#DCF8C6;border-color:#CBE8B2}
[data-chan="wa"] .bub.bot{background:#FFFFFF;border-color:#E4E1DC}

/* Instagram */
[data-chan="ig"] .demohead{background:var(--white);
  border-bottom:1px solid var(--line)}
[data-chan="ig"] .chat{background:var(--white)}
[data-chan="ig"] .bub.them,[data-chan="ig"] #demo-log .bub.them{
  background:#2A6FBA;border-color:#2A6FBA;color:#FFFFFF}
[data-chan="ig"] .bub.them[data-time]::after{color:#FFFFFF;
  background-image:none;padding-right:0}
[data-chan="ig"] .bub.bot{background:#EFEFEF;border-color:#E2E2E2}

/* --- "yazıyor…" ---------------------------------------------------------- */
@keyframes dotfade{0%,100%{opacity:.25}50%{opacity:1}}
.bub.typing{display:flex;align-items:center;gap:9px}
.bub.typing::after{content:'';width:32px;height:8px;flex:none;
  background:radial-gradient(circle 4px at 4px 4px,currentColor 96%,transparent 0),
    radial-gradient(circle 4px at 16px 4px,currentColor 96%,transparent 0),
    radial-gradient(circle 4px at 28px 4px,currentColor 96%,transparent 0);
  animation:dotfade 1.3s var(--ease-brand) 12}

/* --- what the salon's own panel says while all this happens --------------
   The brief asked for notices arriving at the left and right, "araya
   girmeden, üst üste binmeden". The hero's right column is 586px wide at
   1280px and the conversation fills it, so a card floating over the phone
   would land on the message it is describing. They sit under it instead,
   alternating left and right so they read as notices rather than as a list,
   and they arrive one after another. Each carries an icon, a colour and a
   sentence: the colour alone never says which kind of notice it is. */
.pops{list-style:none;margin:calc(var(--step)*3) 0 0;padding:0;
  display:none;flex-direction:column;gap:calc(var(--step)*1.5);width:100%;
  max-width:560px}
.pop{display:grid;align-items:center;width:min(21rem,90%);
  grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--step)*1.5);
  padding:11px 15px;border-radius:16px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  font-size:13px;line-height:1.35}
/* The page's own list bullet is drawn on every `ul li`; a notice card
   carries its own icon instead. */
.pop::before{display:none}
.pop b{grid-column:2;color:var(--fg);font-weight:700}
.pop span{grid-column:2;color:var(--muted)}
.pop i{grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:16px}
.pop.ok i{background-color:var(--success-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6 8 14.5 16 5.5' fill='none' stroke='%23237553' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pop.info i{background-color:var(--info-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.2v7.4M10 10.6l4.3 2.6' fill='none' stroke='%232457A6' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='7.2' fill='none' stroke='%232457A6' stroke-width='1.8'/%3E%3C/svg%3E")}
.pop.off i{background-color:var(--danger-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.4 6.4l7.2 7.2M13.6 6.4l-7.2 7.2' fill='none' stroke='%23B52A35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.pop.info{align-self:flex-end}
/* On a phone the hero is already a headline, a list, two buttons and a
   conversation before these would appear. They are not drawn there. */
@media (min-width:768px){.pops{display:flex}}
.js-hero .pop{opacity:0;transform:translateY(14px);
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand)}
.js-hero .pop.is-in{opacity:1;transform:none}

.phone-note{margin-top:calc(var(--step)*2)}

/* === the conversation on /nasil-calisir/ ==================================
   Item [16] of the 2026-09-15 revision. The page used to print the booking as
   a column of plain boxes, which is a transcript, not a demonstration. It now
   runs in the same messenger skin the hero uses -- the block above is keyed on
   [data-chan], so both pages share one set of colours -- and the reader can
   put the same conversation in either app.

   The bubbles arrive as the reader reaches them rather than on a timer. The
   thread is twenty-two messages long: played end to end on a clock it would
   take half a minute, and anyone scrolling at their own pace would meet an
   empty box. Tied to the scroll it is always full behind the reader and always
   moving in front of them.                                                  */
.thread .screen{box-shadow:var(--shadow-md)}
.thread .chat{gap:calc(var(--step)*1.5)}
.thread .bub{max-width:86%}

/* Hidden only once the script is running: `data-flow` is set by js/thread.js,
   so with no JavaScript, or with reduced motion asked for, every bubble is
   simply there. */
.chat[data-flow] .bub{opacity:0;transform:translateY(12px);
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand)}
.chat[data-flow] .bub.is-in{opacity:1;transform:none}

/* An answer is written before it is read. The bubble arrives at its finished
   size holding three dots, then the dots leave and the sentence takes their
   place. Both halves are opacity on elements that were already laid out, so
   the bubble never changes height and the page never moves under the reader. */
.bub>.say{transition:opacity 240ms var(--ease-brand)}
.bub.is-wait{position:relative}
.bub.is-wait>.say{opacity:0}
.bub.is-wait::after{content:'';position:absolute;left:17px;top:20px;
  width:32px;height:8px;
  background:radial-gradient(circle 4px at 4px 4px,currentColor 96%,transparent 0),
    radial-gradient(circle 4px at 16px 4px,currentColor 96%,transparent 0),
    radial-gradient(circle 4px at 28px 4px,currentColor 96%,transparent 0);
  animation:dotfade 1.3s var(--ease-brand) 4}

/* The centred section head, written four times as three inline declarations
   before this. The other three move to the class in the closing pass. */
.sechead.mid{margin-left:auto;margin-right:auto;text-align:center}
.sechead.mid .kicker{justify-content:center}
/* A centred section heading is always followed by its own paragraph, so the
   heading needs less air under it than one that opens a grid. */
.sechead.mid h2{margin-bottom:calc(var(--step)*2)}

/* A heading and the drawing of what it says, side by side. The drawing is one
   inline SVG per section: geometry and class names only, every colour taken
   from the tokens below so a band can restate them without touching the body
   file. Below 900px the drawing moves under the sentence it illustrates. */
.headrow{display:grid;gap:calc(var(--step)*3);align-items:center;
  margin-bottom:calc(var(--step)*5)}
.headrow .sechead{margin-bottom:0}
@media (min-width:900px){
  .headrow{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:calc(var(--step)*6)}
}

.depict{margin:0;--paper:var(--white);--edge:var(--line);--quiet:var(--bg-2);
  --soft:var(--orange-wash);--accent:var(--orange);--accent-2:var(--bright);
  --on-accent:var(--white)}
/* On the navy band the same drawing is restated in transparencies of white:
   no new colour enters the palette, and the orange stays the bright token
   that navy is meant to carry. */
.band-navy .depict{--paper:rgb(255 255 255 / 7%);--edge:rgb(255 255 255 / 30%);
  --quiet:rgb(255 255 255 / 13%);--soft:rgb(255 255 255 / 21%);
  --accent:var(--bright);--accent-2:rgb(255 255 255 / 55%);
  --on-accent:var(--fg)}
.depict svg{display:block;width:100%;height:auto}
.depict .dp-paper{fill:var(--paper);stroke:var(--edge);stroke-width:1.5}
.depict .dp-quiet,.depict .dp-chip,.depict .dp-grid rect{fill:var(--quiet)}
.depict .dp-soft{fill:var(--soft)}
.depict .dp-accent{fill:var(--accent)}
.depict .dp-accent-soft{fill:var(--accent-2)}
.depict .dp-edge-bar,.depict .dp-edge-dot{fill:var(--edge)}
.depict .dp-track,.depict .dp-arrow,.depict .dp-track-quiet,.depict .dp-tick{
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.depict .dp-track,.depict .dp-arrow{stroke:var(--accent);stroke-width:2.5}
.depict .dp-track{stroke-dasharray:5 6}
.depict .dp-track-quiet{stroke:var(--edge);stroke-width:1.5}
.depict .dp-tick{stroke:var(--on-accent);stroke-width:2.4}

/* The parts arrive in the order the sentence reads them. Same rule as every
   other reveal on the site: hidden only while JavaScript is running and the
   reader has not asked for less motion. */
html.js-reveal .depict [data-at]{opacity:0;transform:translateY(8px)}
html.js-reveal .depict [data-slide]{transform:translateX(-12px)}
html.js-reveal .depict.is-in [data-at]{opacity:1;transform:none;
  transition:opacity var(--motion-reveal) var(--ease-brand),
             transform var(--motion-reveal) var(--ease-brand)}
html.js-reveal .depict.is-in [data-at="1"]{transition-delay:80ms}
html.js-reveal .depict.is-in [data-at="2"]{transition-delay:260ms}
html.js-reveal .depict.is-in [data-at="3"]{transition-delay:440ms}
html.js-reveal .depict.is-in [data-at="4"]{transition-delay:620ms}

/* The feature rail. The only box on the site allowed to scroll sideways: the
   page itself never does. Cards keep a real reading width, so the rail is a
   rail on a phone too rather than nine cards stacked into a column. */
.rail{position:relative}
.railtrack{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(16rem,18rem);gap:calc(var(--step)*2);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:calc(var(--step)*1) calc(var(--step)*.5) calc(var(--step)*3);
  margin:0 calc(var(--step)*-.5)}
.railtrack>.rcard{height:100%}
.railtrack:focus-visible{outline:3px solid var(--fg);outline-offset:3px;
  border-radius:var(--r-lg)}
.railtrack.is-held{cursor:grabbing}
.rcard h3{margin-top:calc(var(--step)*1.5)}
.rtag{display:inline-block;margin:0;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--orange-hover);background:var(--orange-wash);
  /* The deep shade, not --orange: 13px text on the wash needs 4.5:1 and
     --orange reaches only 4.42. This pair measures 5.55. */
  border-radius:999px;padding:4px 12px}
.railnav{display:flex;flex-wrap:wrap;gap:calc(var(--step)*1.5);
  align-items:center;margin-top:calc(var(--step)*1)}
.railbtn{display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0;border-radius:999px;
  border:1px solid var(--control-line);background:var(--surface);
  color:var(--fg);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background var(--motion-fast) ease}
.railbtn.wide{min-width:0;padding:0 calc(var(--step)*2.5)}
.railbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.railbtn:hover{background:var(--orange-wash)}
.railbtn[disabled]{opacity:.45;cursor:default}
.railbtn[disabled]:hover{background:var(--surface)}

/* The two message boxes the assistant is actually connected to, and the panel.
   The marks are the channels' own, in the darkened shades the hero already
   uses: a white glyph on WhatsApp's own green would sit at 1.9:1. */
.chanmark{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;color:var(--white);
  margin-bottom:calc(var(--step)*2)}
.chanmark svg{width:26px;height:26px}
.chanmark.wa{background:#075E54}
.chanmark.ig{background:#2A6FBA}
.chanmark.pn{background:var(--orange-hover)}
#baglanti .fine{margin-top:calc(var(--step)*4);max-width:46rem}

/* A card on the navy band belongs to the band. Left white it would take the
   band's light text on a white surface and the writing would disappear, so
   the surface is the band lifted a little instead. */
.band-navy .card{background:rgb(255 255 255 / 7%);
  border-color:rgb(255 255 255 / 24%)}
.band-navy .card::before{background:transparent}