/* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
  
    /* ── SSS accordion. Artboard statik, o yuzden JS degil <details>.
          Ikon acikken artiden eksiye doner.                        ── */
    .qa { list-style:none; }
    .qa > summary { list-style:none; cursor:pointer; display:flex;
      align-items:flex-start; justify-content:space-between; gap:24px; }
    .qa > summary::-webkit-details-marker { display:none; }
    .qa .ico { flex:none; width:34px; height:34px; border-radius:999px; background:rgba(16,125,123,.10);
      display:grid; place-items:center; }
    .qa .ico .minus { display:none; }
    .qa[open] .ico .plus { display:none; }
    .qa[open] .ico .minus { display:block; }
    /* ── Sakin SSS (10 Eylul) ──────────────────────────────────────
       Dolu renkli kartlar yerine sac cizgisiyle ayrilan satirlar. */
    .faqlist { border-bottom: 1px solid rgba(2,27,52,.10); }
    .faqlist > details { border-top: 1px solid rgba(2,27,52,.10); }
    .qq { font-family: Inter, system-ui, sans-serif; font-size: 19px; font-weight: 600;
          line-height: 1.35; letter-spacing: -.011em; color: #021B34; text-wrap: balance; }
    .qa-ans { color: #5A6B78; }
    .qa > summary:hover .qq { color: #107D7B; }

/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }


    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
  
    /* ── SSS accordion (bkz. HowItWorks): JS yok, <details> ile. ── */
    .qa { list-style:none; }
    .qa > summary { list-style:none; cursor:pointer; display:flex;
      align-items:flex-start; justify-content:space-between; gap:24px; }
    .qa > summary::-webkit-details-marker { display:none; }
    .qa .ico { flex:none; width:38px; height:38px; border-radius:999px; background:#fff;
      display:grid; place-items:center; }
    .qa .ico .minus { display:none; }
    .qa[open] .ico .plus { display:none; }
    .qa[open] .ico .minus { display:block; }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }


    /* ── Dental sayfasi (15 Eylul, anasayfa dilinde) ─────────────── */
    .dn-head   { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:48px; align-items:end; }
    .dn-cards  { margin-top:36px; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; }
    .dn-card   { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#F5F7F7; overflow:hidden; }
    .dn-img    { display:block; height:180px; }
    .dn-img img { width:100%; height:180px; object-fit:cover; display:block; }
    .dn-body   { display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }
    .dn-prob   { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#107D7B; }
    .dn-t      { display:block; margin-top:8px; font-size:21px; }
    .dn-p      { display:block; margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--muted); }
    .dn-card .tlink { margin-top:auto; padding-top:16px; }
    .dn-why    { display:grid; grid-template-columns:360px minmax(0, 1fr); gap:72px; align-items:start; }
    .dn-ben    { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 32px; }
    .dn-b      { padding:22px 0 26px; border-top:1px solid rgba(2,27,52,.10); }
    .dn-ic     { width:40px; height:40px; border-radius:999px; background:#F2F8F8; display:grid; place-items:center; }
    .dn-bt     { margin:14px 0 0; font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:#12293C; }
    .dn-bp     { margin-top:6px; font-size:14.5px; line-height:1.55; color:#5A6B78; }
    .dn-sthead { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
    .dn-steps  { list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 28px; }
    .dn-steps li { padding-top:22px; border-top:2px solid rgba(16,125,123,.16); }
    .dn-steps li:first-child { border-top-color:#107D7B; }
    .dn-n      { width:32px; height:32px; border-radius:999px; background:#107D7B; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; }
    .dn-ask    { display:grid; grid-template-columns:480px minmax(0, 1fr); gap:64px; align-items:center; }
    .dn-askimg { height:460px; overflow:hidden; }
    .dn-askimg img { width:100%; height:100%; object-fit:cover; display:block; }
    .dn-checks { list-style:none; margin:24px 0 0; padding:0; display:grid; }
    .dn-checks li { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid rgba(2,27,52,.08); font-size:16px; line-height:1.45; color:#12293C; }
    .dn-checks li svg { flex:none; margin-top:2px; }
  

    .dn-trust  { margin-top:36px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
    .dn-tc     { background:#F5F7F7; padding:30px 30px 32px; display:flex; flex-direction:column; }
    .dn-tk     { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#107D7B; }
    .dn-tt     { margin-top:10px; font-size:21px; }
    .dn-tp     { margin-top:10px; font-size:15px; line-height:1.6; color:#5A6B78; }
    .dn-tl     { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
    .dn-tl li  { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:#12293C; }
    .dn-tl li svg { flex:none; margin-top:1px; }
    .dn-tc .dn-go { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:#107D7B; text-decoration:none; cursor:pointer; }
    @media (max-width:1024px){ .dn-trust{ grid-template-columns:minmax(0,1fr) !important; } }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
  
    /* ── SSS accordion (bkz. HowItWorks): JS yok, <details> ile. ── */
    .qa { list-style:none; }
    .qa > summary { list-style:none; cursor:pointer; display:flex;
      align-items:flex-start; justify-content:space-between; gap:24px; }
    .qa > summary::-webkit-details-marker { display:none; }
    .qa .ico { flex:none; width:38px; height:38px; border-radius:999px; background:#fff;
      display:grid; place-items:center; }
    .qa .ico .minus { display:none; }
    .qa[open] .ico .plus { display:none; }
    .qa[open] .ico .minus { display:block; }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }


    .bl-hero   { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:64px; align-items:end; }
    .bl-feat   { margin-top:44px; display:grid; grid-template-columns:560px minmax(0,1fr); gap:0; background:#F5F7F7; text-decoration:none; color:inherit; overflow:hidden; }
    .bl-feat .zoom { height:440px; }
    .bl-feat .zoom img { object-position:center 30%; }
    .bl-fbody  { padding:48px 52px; display:flex; flex-direction:column; }
    .bl-meta   { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; color:#5A6B78; }
    .bl-meta .tag { background:#fff; }
    .bl-ft     { margin-top:18px; font-size:34px; }
    .bl-fx     { margin-top:14px; font-size:16px; line-height:1.6; color:#5A6B78; max-width:52ch; }
    .bl-feat .tlink2 { margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#107D7B; }
    .bl-feat:hover .tlink2 svg { transform:translateX(4px); }
    .tlink2 svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .bl-topics { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .bl-topics span.lab { font-size:13px; color:#5A6B78; margin-right:4px; }
    .bl-chip   { padding:9px 16px; border-radius:999px; border:1px solid rgba(2,27,52,.12); font-size:13.5px; font-weight:500; color:#12293C; background:#fff; text-decoration:none; }
    .bl-chip.on{ background:#021B34; border-color:#021B34; color:#fff; }

    /* article */
    .ar-head   { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:64px; align-items:center; }
    .ar-crumb  { display:flex; gap:8px; align-items:center; font-size:13.5px; color:#5A6B78; }
    .ar-crumb a{ color:#107D7B; text-decoration:none; font-weight:500; }
    .ar-img    { height:500px; }
    .ar-img img{ object-position:center 25%; }
    .ar-grid   { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:88px; align-items:start; }
    .ar-body   { max-width:700px; }
    .ar-body > p { font-size:17px; line-height:1.72; color:#2A3D4E; margin-top:18px; }
    .ar-body > p.ar-intro { font-size:20px; line-height:1.6; color:#12293C; margin-top:0; }
    .ar-body h2 { font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32; font-weight:400; font-size:32px; line-height:1.25; letter-spacing:-.035em; color:#12293C; margin:56px 0 0; scroll-margin-top:130px; }
    .ar-body h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; color:#12293C; margin:0; }
    .ar-list   { list-style:none; margin:22px 0 0; padding:0; display:grid; }
    .ar-list li{ padding:16px 0; border-top:1px solid rgba(2,27,52,.09); }
    .ar-list li:last-child{ border-bottom:1px solid rgba(2,27,52,.09); }
    .ar-list li p { margin-top:5px; font-size:15.5px; line-height:1.6; color:#5A6B78; }
    .ar-types  { margin-top:24px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
    .ar-type   { background:#F5F7F7; padding:22px 24px; }
    .ar-type p { margin-top:6px; font-size:14.5px; line-height:1.55; color:#5A6B78; }
    .ar-steps  { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0; counter-reset:st; }
    .ar-steps li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:16px; padding:14px 0; }
    .ar-steps li p { margin-top:4px; font-size:15px; line-height:1.55; color:#5A6B78; }
    .ar-ex + p { margin-top:24px !important; } .ar-head .bl-meta .tag { background:#F2F8F8; }
    .ar-ex     { margin-top:28px; background:#021B34; padding:32px 34px; }
    .ar-ex .row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:15px; color:rgba(255,255,255,.78); }
    .ar-ex .row b { font-weight:500; color:#fff; }
    .ar-ex .row.big { border-bottom:none; padding-top:16px; align-items:baseline; }
    .ar-ex .row.big b { font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32; font-size:34px; font-weight:400; letter-spacing:-.03em; color:#75CED4; }
    .ar-checks { list-style:none; margin:20px 0 0; padding:0; display:grid; }
    .ar-checks li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(2,27,52,.08); font-size:16px; line-height:1.5; color:#12293C; }
    .ar-checks li svg { flex:none; margin-top:3px; }
    .ar-note   { margin-top:26px; padding:22px 24px; border-left:3px solid #107D7B; background:#F2F8F8; font-size:15px; line-height:1.6; color:#12293C; }
    .ar-aside  { position:sticky; top:128px; display:grid; gap:14px; }
    .ar-toc    { padding:26px 28px; border:1px solid rgba(2,27,52,.10); }
    .ar-toc ol { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px; counter-reset:toc; }
    .ar-toc li a { display:flex; gap:10px; padding:7px 0; font-size:14.5px; line-height:1.4; color:#12293C; text-decoration:none; cursor:pointer; }
    .ar-toc li a:hover { color:#107D7B; }
    .ar-toc li a::before { counter-increment:toc; content:counter(toc, decimal-leading-zero); font-size:12px; font-weight:600; color:#107D7B; padding-top:2px; }
    .ar-cta    { background:#107D7B; padding:28px 28px 30px; }
    .ar-by     { margin-top:56px; padding-top:22px; border-top:1px solid rgba(2,27,52,.10); font-size:13px; line-height:1.6; color:#5A6B78; }

    @media (max-width:1280px){ .bl-feat{ grid-template-columns:460px minmax(0,1fr) !important; } .ar-grid{ gap:48px !important; grid-template-columns:minmax(0,1fr) 300px !important; } }
    @media (max-width:1024px){
      .bl-hero, .ar-head, .ar-grid { grid-template-columns:minmax(0,1fr) !important; gap:32px !important; }
      .bl-feat { grid-template-columns:minmax(0,1fr) !important; }
      .bl-feat .zoom { height:360px !important; }
      .ar-img { height:420px !important; }
      .ar-aside { position:static !important; }
      .ar-toc { display:none; }
    }
    @media (max-width:760px){
      .bl-fbody { padding:28px 24px 30px !important; }
      .bl-ft { font-size:26px !important; }
      .bl-feat .zoom, .ar-img { height:260px !important; }
      .ar-types { grid-template-columns:minmax(0,1fr) !important; }
      .ar-body > p.ar-intro { font-size:18px !important; }
      .ar-body h2 { font-size:26px !important; margin-top:44px !important; }
      .ar-ex { padding:24px 22px !important; }
      .ar-ex .row.big b { font-size:28px !important; }
    }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
  
    /* ── SSS accordion (bkz. HowItWorks): JS yok, <details> ile. ── */
    .qa { list-style:none; }
    .qa > summary { list-style:none; cursor:pointer; display:flex;
      align-items:flex-start; justify-content:space-between; gap:24px; }
    .qa > summary::-webkit-details-marker { display:none; }
    .qa .ico { flex:none; width:38px; height:38px; border-radius:999px; background:#fff;
      display:grid; place-items:center; }
    .qa .ico .minus { display:none; }
    .qa[open] .ico .plus { display:none; }
    .qa[open] .ico .minus { display:block; }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }


    .bl-hero   { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:64px; align-items:end; }
    .bl-feat   { margin-top:44px; display:grid; grid-template-columns:560px minmax(0,1fr); gap:0; background:#F5F7F7; text-decoration:none; color:inherit; overflow:hidden; }
    .bl-feat .zoom { height:440px; }
    .bl-feat .zoom img { object-position:center 30%; }
    .bl-fbody  { padding:48px 52px; display:flex; flex-direction:column; }
    .bl-meta   { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; color:#5A6B78; }
    .bl-meta .tag { background:#fff; }
    .bl-ft     { margin-top:18px; font-size:34px; }
    .bl-fx     { margin-top:14px; font-size:16px; line-height:1.6; color:#5A6B78; max-width:52ch; }
    .bl-feat .tlink2 { margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#107D7B; }
    .bl-feat:hover .tlink2 svg { transform:translateX(4px); }
    .tlink2 svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .bl-topics { margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    .bl-topics span.lab { font-size:13px; color:#5A6B78; margin-right:4px; }
    .bl-chip   { padding:9px 16px; border-radius:999px; border:1px solid rgba(2,27,52,.12); font-size:13.5px; font-weight:500; color:#12293C; background:#fff; text-decoration:none; }
    .bl-chip.on{ background:#021B34; border-color:#021B34; color:#fff; }

    /* article */
    .ar-head   { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:64px; align-items:center; }
    .ar-crumb  { display:flex; gap:8px; align-items:center; font-size:13.5px; color:#5A6B78; }
    .ar-crumb a{ color:#107D7B; text-decoration:none; font-weight:500; }
    .ar-img    { height:500px; }
    .ar-img img{ object-position:center 25%; }
    .ar-grid   { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:88px; align-items:start; }
    .ar-body   { max-width:700px; }
    .ar-body > p { font-size:17px; line-height:1.72; color:#2A3D4E; margin-top:18px; }
    .ar-body > p.ar-intro { font-size:20px; line-height:1.6; color:#12293C; margin-top:0; }
    .ar-body h2 { font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32; font-weight:400; font-size:32px; line-height:1.25; letter-spacing:-.035em; color:#12293C; margin:56px 0 0; scroll-margin-top:130px; }
    .ar-body h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; color:#12293C; margin:0; }
    .ar-list   { list-style:none; margin:22px 0 0; padding:0; display:grid; }
    .ar-list li{ padding:16px 0; border-top:1px solid rgba(2,27,52,.09); }
    .ar-list li:last-child{ border-bottom:1px solid rgba(2,27,52,.09); }
    .ar-list li p { margin-top:5px; font-size:15.5px; line-height:1.6; color:#5A6B78; }
    .ar-types  { margin-top:24px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
    .ar-type   { background:#F5F7F7; padding:22px 24px; }
    .ar-type p { margin-top:6px; font-size:14.5px; line-height:1.55; color:#5A6B78; }
    .ar-steps  { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0; counter-reset:st; }
    .ar-steps li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:16px; padding:14px 0; }
    .ar-steps li p { margin-top:4px; font-size:15px; line-height:1.55; color:#5A6B78; }
    .ar-ex + p { margin-top:24px !important; } .ar-head .bl-meta .tag { background:#F2F8F8; }
    .ar-ex     { margin-top:28px; background:#021B34; padding:32px 34px; }
    .ar-ex .row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:15px; color:rgba(255,255,255,.78); }
    .ar-ex .row b { font-weight:500; color:#fff; }
    .ar-ex .row.big { border-bottom:none; padding-top:16px; align-items:baseline; }
    .ar-ex .row.big b { font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32; font-size:34px; font-weight:400; letter-spacing:-.03em; color:#75CED4; }
    .ar-checks { list-style:none; margin:20px 0 0; padding:0; display:grid; }
    .ar-checks li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(2,27,52,.08); font-size:16px; line-height:1.5; color:#12293C; }
    .ar-checks li svg { flex:none; margin-top:3px; }
    .ar-note   { margin-top:26px; padding:22px 24px; border-left:3px solid #107D7B; background:#F2F8F8; font-size:15px; line-height:1.6; color:#12293C; }
    .ar-aside  { position:sticky; top:128px; display:grid; gap:14px; }
    .ar-toc    { padding:26px 28px; border:1px solid rgba(2,27,52,.10); }
    .ar-toc ol { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px; counter-reset:toc; }
    .ar-toc li a { display:flex; gap:10px; padding:7px 0; font-size:14.5px; line-height:1.4; color:#12293C; text-decoration:none; cursor:pointer; }
    .ar-toc li a:hover { color:#107D7B; }
    .ar-toc li a::before { counter-increment:toc; content:counter(toc, decimal-leading-zero); font-size:12px; font-weight:600; color:#107D7B; padding-top:2px; }
    .ar-cta    { background:#107D7B; padding:28px 28px 30px; }
    .ar-by     { margin-top:56px; padding-top:22px; border-top:1px solid rgba(2,27,52,.10); font-size:13px; line-height:1.6; color:#5A6B78; }

    @media (max-width:1280px){ .bl-feat{ grid-template-columns:460px minmax(0,1fr) !important; } .ar-grid{ gap:48px !important; grid-template-columns:minmax(0,1fr) 300px !important; } }
    @media (max-width:1024px){
      .bl-hero, .ar-head, .ar-grid { grid-template-columns:minmax(0,1fr) !important; gap:32px !important; }
      .bl-feat { grid-template-columns:minmax(0,1fr) !important; }
      .bl-feat .zoom { height:360px !important; }
      .ar-img { height:420px !important; }
      .ar-aside { position:static !important; }
      .ar-toc { display:none; }
    }
    @media (max-width:760px){
      .bl-fbody { padding:28px 24px 30px !important; }
      .bl-ft { font-size:26px !important; }
      .bl-feat .zoom, .ar-img { height:260px !important; }
      .ar-types { grid-template-columns:minmax(0,1fr) !important; }
      .ar-body > p.ar-intro { font-size:18px !important; }
      .ar-body h2 { font-size:26px !important; margin-top:44px !important; }
      .ar-ex { padding:24px 22px !important; }
      .ar-ex .row.big b { font-size:28px !important; }
    }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  
    /* ── Participating clinics, 17 Eylul ── */
    .pc-hero { display:grid; grid-template-columns:minmax(0,1fr) 516px; gap:64px; align-items:center; padding-top:56px; padding-bottom:88px; }
    .pc-cta { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .pc-facts { margin-top:34px; display:flex; gap:0; border-top:1px solid rgba(2,27,52,.10); max-width:520px; }
    .pc-facts div { flex:1; padding:16px 20px 0 0; display:flex; gap:12px; align-items:baseline; }
    .pc-facts div + div { padding-left:20px; border-left:1px solid rgba(2,27,52,.10); }
    .pc-facts b { font:400 40px/1 Inter,system-ui,sans-serif; font-variation-settings:"opsz" 32; letter-spacing:-.03em; color:#107D7B; }
    .pc-facts span { font-size:14px; line-height:1.4; color:#5A6B78; }
    .pc-mos { display:grid; grid-template-columns:repeat(3,172px); grid-auto-rows:172px; }
    .pc-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
    .pc-grid { margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .pc-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(2,27,52,.10); border-radius:0 32px 0 0; overflow:hidden; text-decoration:none; min-height:300px; }
    .pc-card:nth-child(2n) { border-radius:0 0 32px 0; }
    .pc-logo { height:112px; display:flex; align-items:center; justify-content:center; background:#F5F7F7; padding:0 24px; }
    .pc-logo img { max-width:170px; width:auto; }
    .pc-body { padding:20px 22px 0; display:flex; flex-direction:column; gap:8px; flex:1; }
    .pc-name { font:600 19px/1.25 Inter,system-ui,sans-serif; color:#12293C; }
    .pc-city { display:flex; align-items:center; gap:6px; font-size:14px; color:#5A6B78; }
    .pc-city svg { color:#107D7B; flex:none; }
    .pc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
    .pc-tag { padding:4px 10px; border-radius:999px; background:rgba(16,125,123,.10); color:#107D7B; font-size:12.5px; font-weight:600; }
    .pc-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 22px 18px; margin-top:16px; border-top:1px solid rgba(2,27,52,.08); font-size:13.5px; color:#5A6B78; }
    .pc-foot svg { color:#107D7B; flex:none; }
    .pc-card.lift:hover .pc-name { color:#107D7B; }
    .pc-ask { background:#021B34; border-color:#021B34; padding-bottom:24px; justify-content:space-between; }
    .pc-ask .pc-body { padding-top:26px; }
    .pc-ask .btn { margin:0 22px; }
    .pc-askp { font-size:14px; line-height:1.55; color:rgba(255,255,255,.72); }
    .pc-steps { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
    .pc-step { background:#F5F7F7; padding:34px 32px 36px; }
    .pc-n { display:block; font:400 44px/1 Inter,system-ui,sans-serif; font-variation-settings:"opsz" 32; letter-spacing:-.03em; color:#107D7B; }
    .pc-step h3 { margin-top:26px; }
    .pc-step p { margin-top:10px; font-size:15px; line-height:1.6; color:#5A6B78; }
    .pc-check { background:rgba(16,125,123,.08); padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
    .pc-list { margin-top:26px; display:grid; gap:14px; list-style:none; padding:0; }
    .pc-list li { display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5; color:#12293C; }
    .pc-list svg { flex:none; margin-top:4px; }
    .pc-note { background:#fff; padding:34px 34px 36px; border-radius:0 32px 0 0; }
    .pc-note p { margin-top:12px; font-size:15px; line-height:1.65; color:#5A6B78; }
    @media (max-width:1280px){ .pc-grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:1024px){
      .pc-hero { grid-template-columns:1fr; gap:40px; }
      .pc-mos { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; max-width:516px; }
      .pc-mos > div { aspect-ratio:1/1; }
      .pc-steps { grid-template-columns:1fr; }
      .pc-check { grid-template-columns:1fr; padding:40px 32px; gap:32px; }
    }
    @media (max-width:760px){
      .pc-hero h1 { font-size:38px !important; }
      .pc-facts { flex-direction:column; }
      .pc-facts div + div { padding-left:0; border-left:0; border-top:1px solid rgba(2,27,52,.10); margin-top:14px; }
      .pc-mos { max-width:100%; }
      .pc-grid { gap:12px; }
      .pc-card { min-height:0; }
      .pc-logo { height:84px; }
      .pc-hero { padding-top:28px !important; padding-bottom:56px !important; }
      .pc-check { padding:32px 20px; }
      .pc-note { padding:26px 22px; }
      .pc-step { padding:28px 24px; }
    }


    /* ═══════════════════════════════════════════════════════════════
       REMEDI · For clinics (15 Eylul 2026, B2B yeniden kurgu)
       Akis Erdem Bey'in referansi sunbit.com/merchant-benefits/dental:
       hero + alinti, klinik yorumlari, fayda, rakam, hasta faydasi,
       karsilastirma, baslangic, kurumsal bilgi, basvuru, SSS.
       Metin ve gorsel Sunbit'ten degil; icerik kopya deseti, musterinin
       kendi ForClinicsPage.tsx'i ve Trustpilot'taki iki klinik yorumu.
       Sakin dil: dolu marka rengi sadece basvuru bandinda. Kalan her sey
       beyaz zemin, #F5F7F7 kart, sac cizgisi, teal vurgu.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --soft:#F5F7F7;
      --line:rgba(2,27,52,.10); --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }
    a { color:#107D7B; } a:hover { color:#0B5F5D; }

    .d1x,.d2x { font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .eyebrow.dark { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }
    .eyebrow.dark i { background:#75CED4; }

    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1), transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em; white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none; display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal { background:var(--teal); box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal .lbl{color:#fff} .btn-teal .sq{background:var(--navy)}
    .btn-white { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost .lbl{color:var(--ink)}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn.onNavy .sq{background:var(--bright)}
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }

    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }

    /* ── Hero ─────────────────────────────────────────────────────── */
    .fchero  { display:grid; grid-template-columns:560px 496px; gap:48px; align-items:center; }
    .ticks   { display:flex; flex-wrap:wrap; gap:10px 22px; }
    .ticks li { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink); }
    .fcshot  { position:relative; height:560px; }
    .fcshot img { width:100%; height:100%; object-fit:cover; display:block; border-radius:0 72px 0 0; }
    .fcquote { position:absolute; left:-56px; bottom:36px; width:312px; background:#fff;
               padding:22px 24px; border-radius:0 0 0 32px;
               box-shadow:0 18px 44px rgba(2,27,52,.16); }
    .fcquote p { font-size:15.5px; line-height:1.55; color:var(--ink); letter-spacing:-.004em; }
    .fcquote .who { margin-top:14px; display:flex; align-items:center; gap:10px; }

    /* ── Yorumlar: anasayfadaki kart ailesi ────────────────────────── */
    .trustpill { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px;
                 text-decoration:none; border:1px solid rgba(2,27,52,.12); background:#fff;
                 transition:border-color .3s cubic-bezier(0.22,1,0.36,1); }
    .trustpill:hover { border-color:rgba(16,125,123,.40); }
    .tpstars { height:19px; width:auto; display:block; }
    .trustscore { font-size:13.5px; font-weight:600; color:#12293C; white-space:nowrap; }
    .trustsep { width:1px; height:14px; background:rgba(2,27,52,.16); }
    .trustmeta { font-size:13px; color:#5A6B78; white-space:nowrap; }
    .tplogo { height:15px; width:auto; display:block; margin-left:2px; }
    .rvcard { margin:0; background:var(--soft); padding:26px 28px 26px; display:flex; flex-direction:column; }
    .rvhead { display:flex; align-items:center; gap:10px; }
    .rvav   { flex:none; width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
              background:rgba(16,125,123,.12); color:#107D7B; font-size:12.5px; font-weight:600; }
    .rvwho  { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
    .rvname { font-size:14px; font-weight:600; letter-spacing:-.011em; color:#021B34; }
    .rvrole { font-size:12.5px; color:#5A6B78; }
    .rvstars { margin-left:auto; flex:none; height:15px; width:auto; display:block; }
    .rvtext { margin:16px 0 0; font-size:15px; line-height:1.62; color:#12293C;
              display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
    .rvcard { position:relative; }
    .rvx    { position:absolute; top:0; left:0; margin:0; opacity:0; width:1px; height:1px;
              clip-path:inset(50%); appearance:none; pointer-events:none; }
    .rvx:checked ~ .rvtext { display:block; -webkit-line-clamp:unset; }
    .rvmore { align-self:flex-start; margin-top:10px; cursor:pointer; font-size:13px; font-weight:600; color:#107D7B; }
    .rvmore .less { display:none; }
    .rvx:checked ~ .rvmore .more { display:none; }
    .rvx:checked ~ .rvmore .less { display:inline; }

    /* Klinik logo seridi, anasayfadakiyle ayni. */
    .trustband { background:var(--soft); padding:30px 0 32px; border-radius:0 0 72px 0; }
    .tblabel   { text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.14em;
                 text-transform:uppercase; color:#5A6B78; }
    .trustmq   { margin-top:22px; overflow:hidden;
                 -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
                 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
    .trustmq-track { display:flex; width:max-content; gap:16px; animation:trustmq 52s linear infinite; }
    .trustmq:hover .trustmq-track { animation-play-state:paused; }
    @keyframes trustmq { to { transform:translateX(-50%); } }
    .tbmark { flex:none; display:grid; place-items:center; width:196px; height:84px; padding:0 24px;
              border-radius:16px; background:#fff; border:1px solid rgba(2,27,52,.08);
              transition:border-color .3s cubic-bezier(0.22,1,0.36,1), transform .3s cubic-bezier(0.22,1,0.36,1); }
    .tbmark img { max-width:134px; max-height:40px; width:auto; height:auto; object-fit:contain;
                  filter:grayscale(1); opacity:.78;
                  transition:filter .3s cubic-bezier(0.22,1,0.36,1), opacity .3s cubic-bezier(0.22,1,0.36,1); }
    .tbmark img.tall { max-height:56px; }
    .tbmark:hover { border-color:rgba(16,125,123,.40); transform:translateY(-3px); }
    .tbmark:hover img { filter:none; opacity:1; }
    .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
          clip-path:inset(50%); white-space:nowrap; }

    /* ── Faydalar: dort sutun, sac cizgisiyle ayrilan ────────────────── */
    .gains { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
             border-top:1px solid var(--line); }
    .gain  { padding:32px 28px 8px 0; }
    .gain + .gain { padding-left:28px; border-left:1px solid var(--line); }
    .gico  { width:46px; height:46px; border-radius:999px; background:rgba(16,125,123,.10);
             display:grid; place-items:center; }
    .gt    { margin-top:20px; font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.011em; color:#021B34; }
    .gb    { margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--muted); }

    /* ── Rakamlar (yer tutucu) ──────────────────────────────────────── */
    .figs  { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
    .fig   { background:var(--soft); padding:28px 30px 30px; display:flex; align-items:center; gap:22px; }
    .fignum { flex:none; font-family:Inter,system-ui,sans-serif; font-variation-settings:'opsz' 32;
              font-weight:400; font-size:52px; line-height:1; letter-spacing:-.04em; color:#107D7B; }
    .figlbl { font-size:15px; line-height:1.45; color:var(--ink); }
    .figlbl b { display:block; font-weight:600; color:#021B34; margin-bottom:2px; }

    /* ── Tik listesi ────────────────────────────────────────────────── */
    .chk li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.6;
              color:var(--ink); padding:13px 0; border-top:1px solid var(--line); }
    .chk li:last-child { border-bottom:1px solid var(--line); }
    .chk svg { flex:none; margin-top:4px; }

    /* ── Karsilastirma tablosu ──────────────────────────────────────── */
    .cmp { width:100%; border-collapse:separate; border-spacing:0; }
    .cmp th, .cmp td { text-align:left; vertical-align:top; padding:18px 22px;
                       border-bottom:1px solid var(--line); font-size:15px; line-height:1.5; }
    .cmp thead th { border-bottom:1px solid rgba(2,27,52,.16); padding-top:22px; padding-bottom:20px;
                    font-size:14px; font-weight:600; color:#021B34; }
    .cmp tbody th { width:250px; padding-left:0; font-size:14.5px; font-weight:500; color:var(--muted); }
    .cmp td { color:var(--ink); width:calc((100% - 250px) / 3); }
    .cmp .us { background:rgba(16,125,123,.06); color:#021B34; font-weight:500; }
    .cmp thead .us { border-radius:24px 24px 0 0; box-shadow:inset 0 3px 0 #107D7B; color:#107D7B; }
    .cmp tbody tr:last-child .us { border-radius:0 0 24px 24px; border-bottom-color:transparent; }
    .cmp .us span { display:flex; gap:10px; align-items:flex-start; }
    .cmp .us svg { flex:none; margin-top:3px; }

    /* ── Akordeon ve SSS: kart yok, satir var ───────────────────────── */
    .acc details { border-top:1px solid var(--line); }
    .acc details:last-child { border-bottom:1px solid var(--line); }
    .acc summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start;
                   justify-content:space-between; gap:24px; padding:22px 0; }
    .acc summary::-webkit-details-marker { display:none; }
    .acc .qq { font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-.011em; color:#021B34; }
    .acc summary:hover .qq { color:#107D7B; }
    .acc .plus { flex:none; width:34px; height:34px; border-radius:999px; background:rgba(16,125,123,.10);
                 display:grid; place-items:center; transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    .acc details[open] .plus { transform:rotate(45deg); }
    .acc .qa { margin-top:-6px; padding-bottom:24px; max-width:60ch; font-size:15px; line-height:1.62; color:var(--muted); }
    .acc .num { display:inline-block; width:30px; color:#107D7B; font-variant-numeric:tabular-nums; }

    /* ── Sorumluluk kartlari ────────────────────────────────────────── */
    .roles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
    .role  { background:var(--soft); padding:30px 32px; }
    .role .d4x { font-size:16px; }
    .role ul { margin-top:16px; display:grid; gap:10px; }
    .role li { display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.6; color:var(--ink); }
    .role svg { flex:none; margin-top:5px; }

    /* ── Kurumsal bilgi seridi ──────────────────────────────────────── */
    .creds { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
             border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .cred  { padding:26px 28px; text-align:center; }
    .cred + .cred { border-left:1px solid var(--line); }
    .cred b { display:block; font-size:15px; font-weight:600; color:#021B34; letter-spacing:-.011em; }
    .cred span { display:block; margin-top:4px; font-size:13.5px; color:var(--muted); }

    /* ── Basvuru bandi: sayfanin tek dolu blogu ─────────────────────── */
    .enq   { background:#021B34; padding:56px; display:grid; grid-template-columns:392px 1fr; gap:56px;
             border-radius:0 72px 0 72px; }
    .steps3 { margin-top:30px; display:grid; gap:0; }
    .steps3 li { display:flex; gap:14px; align-items:baseline; padding:13px 0;
                 border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.86); }
    .steps3 li span { flex:none; width:22px; font-weight:600; color:#75CED4; }
    .form  { background:#fff; padding:34px; border-radius:0 32px 0 0; }
    .fgrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .fl    { font-size:13px; font-weight:500; color:var(--muted); }
    .fi    { margin-top:8px; height:50px; border:1px solid rgba(2,27,52,.14); border-radius:12px; background:#fff; }
    .fi.ta { height:112px; }

    @media (prefers-reduced-motion: reduce) {
      .rise,.trustmq-track { animation:none!important; opacity:1!important; transform:none!important; }
      .lift,.btn svg,.acc .plus { transition:none!important; }
    }

/* HDRSHELL */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px; border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px; font-weight:500; white-space:nowrap;
                text-decoration:none; color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1), background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); color:#12293C; }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C; text-decoration:underline;
                text-underline-offset:3px; text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { color:#12293C; text-decoration-color:#107D7B; }
  /* ── For clinics basvuru formu: gercek alanlar (15 Eylul) ───────── */
.enq .ff { display:block; }
.enq .fo { font-weight:400; opacity:.75; }
.enq input.fi, .enq textarea.fi { display:block; width:100%; padding:0 14px; font:inherit; font-size:15px; color:#12293C; outline:none;
  transition:border-color .2s; }
.enq textarea.fi { padding:12px 14px; resize:vertical; }
.enq .fi:focus { border-color:#107D7B; box-shadow:0 0 0 3px rgba(16,125,123,.14); }
.enq .fi.bad { border-color:#C0392B; }
.enq-err { margin-top:14px; font-size:13px; color:#C0392B; }
.enq-done { padding:40px 8px; text-align:center; }
.enq-done .ok { width:64px; height:64px; margin:0 auto; border-radius:999px; background:rgba(16,125,123,.12); display:grid; place-items:center; }


.gs-stage{position:relative;background:#EEF6F6} .gs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s cubic-bezier(0.22,1,0.36,1)} .gs-img.on{opacity:1}

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

/* ── Eligibility sayfasi (27 Eylul) ── */
.ep-hero{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:64px;align-items:start;}
.ep-left{position:sticky;top:128px;}
/* 29 Eylul musteri notu: sonuc ekraninda ust metinler (breadcrumb, H1, maddeler) yok, kart tek basina ortada */
.ep-hero.ep-result{grid-template-columns:minmax(0,640px);justify-content:center;}
.ep-result .ep-left{display:none;}
.ep-steps{margin:36px 0 0;padding:0;list-style:none;display:grid;max-width:360px;}
.ep-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0;font-size:15.5px;color:#5A6B78;transition:color .3s;}
.ep-steps li+li::before{content:"";position:absolute;left:15px;top:-9px;width:2px;height:18px;background:rgba(2,27,52,.10);}
.ep-steps li.done+li::before{background:#107D7B;}
.ep-n{width:32px;height:32px;flex:none;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:600;background:#fff;border:1.5px solid rgba(2,27,52,.16);color:#5A6B78;transition:background .3s,border-color .3s,color .3s;}
.ep-steps li.on{color:#12293C;font-weight:600;}
.ep-steps li.on .ep-n{background:#021B34;border-color:#021B34;color:#fff;}
.ep-steps li.done{color:#12293C;cursor:pointer;}
.ep-steps li.done .ep-n{background:#107D7B;border-color:#107D7B;color:#fff;font-size:0;}
.ep-steps li.done .ep-n::after{content:"";width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);}
.ep-trust{margin:30px 0 0;padding:22px 0 0;list-style:none;display:grid;gap:10px;border-top:1px solid rgba(2,27,52,.10);max-width:360px;}
.ep-trust li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:#12293C;}
.ep-trust li svg{margin-top:3px;flex:none;}
.ep-safe{margin:-4px 40px 22px auto;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:999px;background:#F5F7F7;width:max-content;max-width:calc(100% - 80px);}
.ep-safe-ico{flex:none;width:38px;height:38px;border-radius:999px;background:#fff;display:grid;place-items:center;}
.ep-safe b{display:block;font-size:13.5px;font-weight:600;color:#12293C;}
.ep-safe span{font-size:12.5px;color:#5A6B78;}

.ep-card{position:relative;background:#fff;border:1px solid rgba(2,27,52,.10);border-radius:0 48px 0 0;box-shadow:0 24px 60px rgba(2,27,52,.08);overflow:hidden;}
.ep-card [hidden]{display:none!important;}
.ep-bar{height:4px;background:#F2F8F8;}
.ep-bar i{display:block;height:100%;width:25%;background:#107D7B;transition:width .5s cubic-bezier(0.22,1,0.36,1);}
.ep-head{padding:32px 40px 0;}
.ep-count{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#107D7B;}
.ep-title{margin-top:8px!important;font-size:32px!important;}
.ep-restore{margin:18px 40px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:12px;background:#F2F8F8;font-size:13.5px;color:#12293C;}
.ep-restore button{flex:none;border:0;background:none;padding:0;font:inherit;font-weight:600;color:#107D7B;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.ep-form{display:block;}
.ep-step{position:relative;border:0;margin:0;padding:28px 40px 8px;min-width:0;}
.ep-sub{float:left;width:100%;padding:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#12293C;}
.ep-sub+*{clear:both;}
.ep-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}
.ep-chip{position:relative;cursor:pointer;}
.ep-chip input{position:absolute;opacity:0;pointer-events:none;}
.ep-chip span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;border:1.5px solid rgba(2,27,52,.14);font-size:14px;font-weight:500;color:#12293C;background:#fff;transition:border-color .2s,background .2s,color .2s;}
.ep-chip span::before{content:"";width:14px;height:14px;border-radius:999px;border:1.5px solid rgba(2,27,52,.28);box-sizing:border-box;transition:border .2s;}
.ep-chip:hover span{border-color:rgba(16,125,123,.5);}
.ep-chip input:checked+span{background:#021B34;border-color:#021B34;color:#fff;}
.ep-chip input:checked+span::before{border:4px solid #14AFC0;background:#fff;}
.ep-chip input:focus-visible+span{box-shadow:0 0 0 3px rgba(16,125,123,.25);}
.ep-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ep-grid3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ep-grid1{grid-template-columns:1fr;gap:22px;}
.ep-full{grid-column:1/-1;}
.epf{display:flex;flex-direction:column;gap:7px;min-width:0;}
.epf label,.ep-glabel{font-size:13.5px;font-weight:500;color:#12293C;}
.ep-card em{font-style:normal;color:#C0392B;}
.ep-hint{display:block;font-size:13px;line-height:1.5;color:#5A6B78;}
.epf input,.epf select,.ep-money{font:400 15px/1.4 Inter,system-ui,sans-serif;color:#12293C;height:48px;padding:0 14px;border:1px solid rgba(2,27,52,.16);border-radius:10px;background:#fff;width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;}
.epf input::placeholder{color:rgba(90,107,120,.62);}
.epf input:focus,.epf select:focus,.ep-money:focus-within{outline:none;border-color:#107D7B;box-shadow:0 0 0 3px rgba(16,125,123,.15);}
.ep-money{display:flex;align-items:center;gap:8px;padding:0 0 0 14px;}
.ep-money span{color:#5A6B78;font-weight:500;}
.ep-money input{border:0!important;box-shadow:none!important;height:46px;padding:0 14px 0 0;}
.epf.bad input,.epf.bad select,.epf.bad .ep-money{border-color:#C0392B;}
.ep-group{margin-top:18px;}
.ep-group .ep-glabel{margin-bottom:10px;}
.ep-group.bad .epf input{border-color:#C0392B;}
.epf .ep-err{margin-top:0;}
.ep-err{margin-top:6px;font-size:12.5px;line-height:1.45;color:#C0392B;}
.ep-link{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;color:#107D7B;cursor:pointer;}
.ep-link:hover{text-decoration:underline;text-underline-offset:3px;}
.ep-inline{font-size:inherit;text-decoration:underline;text-underline-offset:2px;}
.ep-sep{height:1px;background:rgba(2,27,52,.10);margin:28px 0 22px;}
.ep-review{margin:0;display:grid;border-top:1px solid rgba(2,27,52,.10);}
.ep-review div{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(2,27,52,.10);}
.ep-review dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5A6B78;}
.ep-review dd{margin:0;font-size:15px;color:#12293C;word-break:break-word;}
.ep-consent{margin-top:22px;display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:0 24px 0 24px;background:#F2F8F8;font-size:13.5px;line-height:1.6;color:#12293C;}
.ep-consent label{cursor:pointer;}
.ep-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#107D7B;cursor:pointer;}
.ep-consent.bad{box-shadow:inset 0 0 0 1.5px #C0392B;}
.ep-req{margin-top:14px;font-size:12.5px;color:#5A6B78;}
.ep-actions{margin-top:22px;padding:18px 40px;border-top:1px solid rgba(2,27,52,.10);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ep-btn{border:0;cursor:pointer;font:inherit;}
.ep-btn.btn-ghost{border:1.5px solid rgba(2,27,52,.16);background:#fff;}
.ep-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;}
.ep-note{padding:0 40px 26px;font-size:12.5px;line-height:1.55;color:#5A6B78;}
.ep-body{font-size:15px;line-height:1.6;color:#5A6B78;}
.ep-body b{font-weight:600;color:#12293C;}
.ep-wait{padding:88px 48px 96px;text-align:center;}
.ep-wait .ep-body{margin-top:10px;}
.ep-badge{position:relative;width:76px;height:76px;margin:0 auto 26px;}
.ep-badge span{position:absolute;inset:0;border-radius:999px;}
.ep-badge .r1{border:2px solid rgba(16,125,123,.25);animation:ep-ping 1.8s cubic-bezier(0.22,1,0.36,1) infinite;}
.ep-badge .r2{border:2px solid rgba(20,175,192,.35);animation:ep-ping 1.8s cubic-bezier(0.22,1,0.36,1) .6s infinite;}
.ep-badge .dot{inset:22px;background:#107D7B;}
@keyframes ep-ping{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.25);opacity:0}}
.ep-track{margin:30px auto 0;width:220px;height:4px;border-radius:999px;background:#F2F8F8;overflow:hidden;}
.ep-track i{display:block;height:100%;width:0;background:#107D7B;border-radius:999px;}
.ep-wait.go .ep-track i{width:100%;transition:width 3.4s cubic-bezier(0.4,0,0.2,1);}
.ep-done{padding:56px 48px 52px;}
.ep-ok{width:64px;height:64px;border-radius:999px;background:#107D7B;display:grid;place-items:center;}
.ep-next{margin-top:26px;padding:24px 26px;border-radius:0 24px 0 24px;background:#F2F8F8;display:grid;gap:10px;}
.ep-next h3{margin:0 0 2px;font-size:17px;font-weight:600;color:#12293C;}
.ep-fine{margin-top:18px;font-size:12.5px;line-height:1.55;color:#5A6B78;}
.ep-score{margin-top:26px;padding:26px 28px 24px;border:1px solid rgba(2,27,52,.10);border-radius:0 24px 0 24px;background:#fff;}
.ep-score-k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#107D7B;}
.ep-score-v{margin-top:6px;font-size:64px;line-height:1;font-weight:400;font-variation-settings:'opsz' 32;letter-spacing:-.04em;color:#021B34;font-variant-numeric:tabular-nums;}
.ep-score-v small{font-size:.5em;margin-left:2px;letter-spacing:-.02em;color:#5A6B78;}
.ep-meter{position:relative;margin-top:22px;height:10px;}
.ep-meter-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#D4674A 0%,#E59A45 28%,#E3C457 50%,#7FBF86 74%,#107D7B 100%);}
.ep-meter-dot{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:999px;background:#fff;border:4px solid #021B34;box-shadow:0 4px 12px rgba(2,27,52,.22);transition:left 1.1s cubic-bezier(0.22,1,0.36,1);}
.ep-meter-ends{margin-top:10px;display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#5A6B78;font-variant-numeric:tabular-nums;}
.ep-score-p{margin-top:16px;font-size:14px;line-height:1.6;color:#5A6B78;}

.ep-dlg{width:640px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);padding:0;border:0;border-radius:0 32px 0 32px;color:#12293C;font-family:Inter,system-ui,sans-serif;box-shadow:0 30px 80px rgba(2,27,52,.28);}
.ep-dlg[open]{display:flex;flex-direction:column;}
.ep-dlg-sm{width:480px;}
.ep-dlg::backdrop{background:rgba(2,27,52,.55);}
.ep-dh{margin:0;padding:30px 34px 0;font-size:24px;font-weight:600;letter-spacing:-.02em;}
.ep-dlg-sm .ep-body{padding:0 34px;margin-top:12px;}
.ep-amt{padding:0 34px;margin-top:16px;}
.ep-amt b{font-size:34px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ep-amt span{font-size:15px;color:#5A6B78;}
.ep-dbody{margin-top:16px;padding:0 34px;overflow:auto;font-size:14px;line-height:1.6;color:#5A6B78;}
.ep-dbody h3{margin:18px 0 6px;font-size:14.5px;font-weight:600;color:#12293C;}
.ep-dbody p{margin:0 0 8px;}
.ep-dbody ul{margin:0 0 8px;padding-left:20px;list-style:disc;}
.ep-dbody a{color:#107D7B;}
.ep-dbody hr{border:0;border-top:1px solid rgba(2,27,52,.10);margin:18px 0;}
.ep-dact{display:flex;gap:10px;padding:20px 34px 26px;border-top:1px solid rgba(2,27,52,.10);margin-top:20px;}
.ep-dact .btn{padding:0 24px;}

@media (max-width:1024px){
  .ep-hero{grid-template-columns:1fr;gap:36px;}
  .ep-left{position:static;}
  .ep-steps{display:none;}
  .ep-trust{border-top:0;padding-top:0;margin-top:24px;}
}
@media (max-width:760px){
  .ep-hero{padding-top:20px!important;gap:28px!important;}
  .ep-hero h1{font-size:30px!important;margin-top:14px!important;}
  .ep-eyebrow{display:none;}
  .ep-trust{margin-top:18px!important;gap:8px;}
  .ep-head{padding:26px 20px 0;}
  .ep-step{padding:22px 20px 6px;}
  .ep-restore{margin:16px 20px 0;flex-direction:column;align-items:flex-start;}
  .ep-actions{padding:16px 20px;}
  .ep-note{padding:0 20px 22px;}
  .ep-grid,.ep-grid3{grid-template-columns:1fr;}
  .ep-grid3{grid-template-columns:1fr 1fr;}
  .ep-group .ep-grid3{grid-template-columns:1fr;}
  .ep-title{font-size:26px!important;}
  .ep-review div{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;}
  .ep-review dt{grid-column:1/-1;}
  .ep-wait{padding:64px 24px 72px;}
  .ep-done{padding:40px 22px 40px;}
  .ep-score{padding:22px 20px 20px;}
  .ep-score-v{font-size:52px;}
  .ep-dh{padding:24px 22px 0;}
  .ep-dbody,.ep-amt,.ep-dlg-sm .ep-body{padding-left:22px;padding-right:22px;}
  .ep-dact{padding:16px 22px 22px;flex-direction:column;}
  .ep-actions .btn-teal{flex:1;justify-content:space-between;}
  .ep-safe{margin:0 20px 20px;max-width:calc(100% - 40px);border-radius:22px;}
  .ep-actions > span:empty{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .ep-badge span{animation:none!important;}
  .ep-bar i,.ep-wait.go .ep-track i,.ep-meter-dot{transition:none!important;}
}


    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
  
    /* ── SSS accordion (bkz. HowItWorks): JS yok, <details> ile. ── */
    .qa { list-style:none; }
    .qa > summary { list-style:none; cursor:pointer; display:flex;
      align-items:flex-start; justify-content:space-between; gap:24px; }
    .qa > summary::-webkit-details-marker { display:none; }
    .qa .ico { flex:none; width:34px; height:34px; border-radius:999px; background:rgba(16,125,123,.10);
      display:grid; place-items:center; }
    .qa .ico .minus { display:none; }
    .qa[open] .ico .plus { display:none; }
    .qa[open] .ico .minus { display:block; }
    /* ── Sakin SSS (10 Eylul) ──────────────────────────────────────
       Dolu renkli kartlar yerine sac cizgisiyle ayrilan satirlar. */
    /* ── SSS iki sutun (10 Eylul) ─────────────────────────────────
       Anasayfadaki onizlemeyle ayni olcu: 480 + 576, arada 48px.
       Sol ray yapiskan, liste sayfanin ortasindan asagi akiyor. */
    .faqgrid { display: grid; grid-template-columns: 480px 576px; gap: 48px;
               align-items: start; }
    .faqrail { position: sticky; top: 128px; padding-top: 8px; }
    .faqlist { border-bottom: 1px solid rgba(2,27,52,.10); }
    .faqlist > details { border-top: 1px solid rgba(2,27,52,.10); }
    .qq { font-family: Inter, system-ui, sans-serif; font-size: 19px; font-weight: 600;
          line-height: 1.35; letter-spacing: -.011em; color: #021B34; text-wrap: balance; }
    .qa-ans { color: #5A6B78; }
    .qa > summary:hover .qq { color: #107D7B; }

/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }


    /* SSS: remedifinance.com sorulari, gruplu (17 Eylul) */
    .fq-nav { margin-top:22px; display:grid; gap:2px; max-width:340px; }
    .fq-aud { margin:14px 0 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5A6B78; }
    .fq-aud:first-child { margin-top:0; }
    .fq-link { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:#12293C; background:#F5F7F7; text-decoration:none!important; }
    .fq-link span { font-size:12.5px; color:#5A6B78; }
    .fq-link:hover { background:rgba(16,125,123,.10); color:#107D7B; }
    .fq-group { scroll-margin-top:120px; }
    .fq-group + .fq-group { margin-top:64px; }
    .faqgrid { grid-template-columns:320px minmax(0,1fr) !important; gap:96px !important; align-items:start; }
    .faqrail { top:120px; }
    .fq-kicker { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#107D7B; margin:0 0 10px; }
    .fq-h { margin:0 0 14px; font:500 30px/1.15 Inter,system-ui,sans-serif; font-variation-settings:"opsz" 32; letter-spacing:-.02em; color:#12293C; }
    .fq-group .faqlist details { padding:20px 0 !important; }
    .fq-group .qa-ans { max-width:68ch; }
    .fq-ans p + p, .fq-ans ul + p, .fq-ans p + ul { margin-top:10px; }
    .fq-ans { margin-top:14px; }
    .fq-ans ul { padding-left:20px; list-style:disc; }
    .fq-ans li { margin-top:4px; }
    .fq-ans a { color:#107D7B; text-decoration:underline; }
    @media (max-width:1024px){ .faqgrid { grid-template-columns:1fr !important; gap:40px !important; } .faqrail { position:static; } .fq-nav { max-width:none; } }
    @media (max-width:760px){ .fq-h { font-size:24px; } }

    /* SSS: remedifinance.com sorulari, gruplu (17 Eylul) */
    .fq-nav { margin-top:22px; display:grid; gap:2px; max-width:340px; }
    .fq-aud { margin:14px 0 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5A6B78; }
    .fq-aud:first-child { margin-top:0; }
    .fq-link { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:#12293C; background:#F5F7F7; text-decoration:none!important; }
    .fq-link span { font-size:12.5px; color:#5A6B78; }
    .fq-link:hover { background:rgba(16,125,123,.10); color:#107D7B; }
    .fq-group { scroll-margin-top:120px; }
    .fq-group + .fq-group { margin-top:64px; }
    .faqgrid { grid-template-columns:320px minmax(0,1fr) !important; gap:96px !important; align-items:start; }
    .faqrail { top:120px; }
    .fq-kicker { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#107D7B; margin:0 0 10px; }
    .fq-h { margin:0 0 14px; font:500 30px/1.15 Inter,system-ui,sans-serif; font-variation-settings:"opsz" 32; letter-spacing:-.02em; color:#12293C; }
    .fq-group .faqlist details { padding:20px 0 !important; }
    .fq-group .faqlist details { max-width:none !important; width:100%; }
    .fq-group .qa-ans { max-width:68ch; }
    .fq-ans p + p, .fq-ans ul + p, .fq-ans p + ul { margin-top:10px; }
    .fq-ans { margin-top:14px; }
    .fq-ans ul { padding-left:20px; list-style:disc; }
    .fq-ans li { margin-top:4px; }
    .fq-ans a { color:#107D7B; text-decoration:underline; }
    @media (max-width:1024px){ .faqgrid { grid-template-columns:1fr !important; gap:40px !important; } .faqrail { position:static; } .fq-nav { max-width:none; } }
    @media (max-width:760px){ .fq-h { font-size:24px; } }

    /* SSS: remedifinance.com sorulari, gruplu (17 Eylul) */
    .fq-nav { margin-top:22px; display:grid; gap:2px; max-width:340px; }
    .fq-aud { margin:14px 0 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#5A6B78; }
    .fq-aud:first-child { margin-top:0; }
    .fq-link { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:#12293C; background:#F5F7F7; text-decoration:none!important; }
    .fq-link span { font-size:12.5px; color:#5A6B78; }
    .fq-link:hover { background:rgba(16,125,123,.10); color:#107D7B; }
    .fq-group { scroll-margin-top:120px; }
    .fq-group + .fq-group { margin-top:64px; }
    .faqgrid { grid-template-columns:320px minmax(0,1fr) !important; gap:96px !important; align-items:start; }
    .faqrail { top:120px; }
    .fq-kicker { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#107D7B; margin:0 0 10px; }
    .fq-h { margin:0 0 14px; font:500 30px/1.15 Inter,system-ui,sans-serif; font-variation-settings:"opsz" 32; letter-spacing:-.02em; color:#12293C; }
    .fq-group .faqlist details { padding:20px 0 !important; }
    .fq-group .faqlist details { max-width:none !important; width:100%; }
    .fq-group .qa-ans { max-width:68ch; }
    .fq-ans p + p, .fq-ans ul + p, .fq-ans p + ul { margin-top:10px; }
    .fq-ans { margin-top:14px; }
    .fq-ans ul { padding-left:20px; list-style:disc; }
    .fq-ans li { margin-top:4px; }
    .fq-ans a { color:#107D7B; text-decoration:underline; }
    @media (max-width:1024px){ .faqgrid { grid-template-columns:1fr !important; gap:40px !important; } .faqrail { position:static; } .fq-nav { max-width:none; } }
    @media (max-width:760px){ .fq-h { font-size:24px; } }


    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }
  

    /* ═══════════════════════════════════════════════════════════════
       REMEDI — design system lifted from fincare.framer.ai:
         · display Inter Display (opsz 32) 60 / 38px, weight 400, tracking -.04em
         · body sans 16px / 1.5
         · the signature device: ONE 72px corner on an otherwise square
           card (48px on FAQ rows, 999px for circles)
         · solid colour cards, white type, no borders, no shadows
         · 1200 container, 48px padding, 1104 inner, 16px card gaps
       Only the palette is Remedi's own.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --teal:#107D7B; --bright:#14AFC0; --navy:#021B34;
      --tealT:rgba(16,125,123,.28); --brightT:rgba(20,175,192,.26); --tealT2:rgba(16,125,123,.14);
      --ink:#12293C; --muted:#5A6B78; --paper:#FFFFFF; --R:72px;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink);
           font-family:Inter,system-ui,"Helvetica Neue",Arial,sans-serif; font-size:16px;
           line-height:1.5; -webkit-font-smoothing:antialiased; }
    p { margin:0; text-wrap:pretty; }
    ul { margin:0; padding:0; list-style:none; }

    /* Inter Display (opsz 32) for h1/h2 only. h3 and below are the sans, as on the
       real site — card titles there are Inter semibold, never display serif. */
    .d1x,.d2x { font-family:Inter,system-ui,sans-serif;font-variation-settings:'opsz' 32; font-weight:400;
      margin:0; text-wrap:balance; color:var(--ink); }
    .d1x { font-size:60px; line-height:1.25em; letter-spacing:-.04em; }
    .d2x { font-size:38px; line-height:1.25em; letter-spacing:-.04em; }
    .d3x,.d4x { font-family:Inter,system-ui,sans-serif; font-weight:600;
      margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.011em; }
    .d3x { font-size:21px; line-height:1.3em; }
    .d4x { font-size:17px; line-height:1.35em; }
    .lead { font-size:17px; line-height:1.6; color:var(--muted); }
    .body { font-size:15px; line-height:1.62; }
    .small{ font-size:13px; line-height:1.55; }
    .tiny { font-size:12px; line-height:1.6; }
    .on { color:#fff; } .onm { color:rgba(255,255,255,.80); }

    .wrap { width:1200px; margin:0 auto; padding:0 48px; }
    .sec  { padding:72px 48px; }

    .rTL{border-radius:var(--R) 0 0 0} .rTR{border-radius:0 var(--R) 0 0}
    .rBR{border-radius:0 0 var(--R) 0} .rBL{border-radius:0 0 0 var(--R)}
    .rTRBL{border-radius:0 var(--R) 0 var(--R)} .rTLBR{border-radius:var(--R) 0 var(--R) 0}
    .rCirc{border-radius:999px}

    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
      border-radius:999px; border:1px solid rgba(2,27,52,.12); background:#fff;
      font-size:13px; font-weight:500; color:var(--ink); }
    .eyebrow i { width:6px; height:6px; border-radius:999px; background:var(--teal); display:block; }
    .tag { display:inline-flex; align-items:center; align-self:flex-start; padding:5px 12px;
      border-radius:6px; background:#fff; color:var(--ink); font-size:13px; font-weight:500;
      letter-spacing:-.005em; }

    /* ── Buttons — drawn from the mark itself ───────────────────────
       The Remedi mark is three open arcs: a circle, a stroke 20% of its
       diameter, flat radial cuts, nothing square anywhere. So the button
       is a full 999px pill and the arrow rides in a disc whose diameter
       is the pill height minus a 6px margin, giving one shared centre.
       No offset shadow — a hard 3px corner shadow is a square device. */
    .btn { display:inline-flex; align-items:center; gap:14px; height:52px;
      padding:0 6px 0 24px; border-radius:999px; text-decoration:none;
      transition:box-shadow .4s cubic-bezier(0.22,1,0.36,1),
                 transform .4s cubic-bezier(0.22,1,0.36,1); }
    .btn .lbl { font-size:15px; font-weight:500; letter-spacing:-.006em;
      white-space:nowrap; }
    .btn .sq { width:40px; height:40px; border-radius:999px; flex:none;
      display:grid; place-items:center; }
    .btn:hover { transform:translateY(-2px); }
    .btn-teal   { background:var(--teal);   box-shadow:0 6px 20px rgba(16,125,123,.26); }
    .btn-teal   .lbl{color:#fff} .btn-teal   .sq{background:var(--navy)}
    .btn-bright { background:var(--bright); box-shadow:0 6px 20px rgba(20,175,192,.28); }
    .btn-bright .lbl{color:#fff} .btn-bright .sq{background:var(--navy)}
    .btn-white  { background:#fff; box-shadow:0 6px 20px rgba(2,27,52,.14); }
    .btn-white  .lbl{color:var(--ink)} .btn-white .sq{background:var(--teal)}
    .btn-ghost  { border:1.5px solid rgba(2,27,52,.16); padding:0 24px; }
    .btn-ghost  .lbl{color:var(--ink)}
    .btn-ghostD { border:1.5px solid rgba(255,255,255,.30); padding:0 24px; }
    .btn-ghostD .lbl{color:#fff}
    .btn-ghost:hover { border-color:var(--teal); }
    .btn-ghostD:hover{ border-color:rgba(255,255,255,.62); }
    /* A navy disc disappears on a navy surface — switch it to bright teal. */
    .btn.onNavy .sq{background:var(--bright)}

    /* ── Motion — the Fincare vocabulary, one easing curve throughout ── */
    @keyframes rise { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
    @keyframes mLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes mRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .rise { animation:rise .78s cubic-bezier(0.22,1,0.36,1) both; }
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}

    /* ── Trust cards. The empty half of each card carries the mark's
          open ring, turning once every 44 seconds. Hover lifts the
          card, brightens the ring and closes the gap to the text. ── */
    .tcard { position:relative; overflow:hidden;
             transition:transform .5s cubic-bezier(0.22,1,0.36,1),
                        box-shadow .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard .tag, .tcard p { position:relative; z-index:1; }
    .tcard-ring { position:absolute; right:-34px; top:-34px; width:138px; height:138px;
                  opacity:.11; pointer-events:none; z-index:0;
                  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
                             transform .5s cubic-bezier(0.22,1,0.36,1); }
    .tcard-ring svg { animation:turn 44s linear infinite; }
    .tcard:nth-child(even) .tcard-ring svg { animation-direction:reverse; }
    .tcard:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(2,27,52,.20); }
    .tcard:hover .tcard-ring { opacity:.24; transform:scale(1.14); }
    .tcard:hover .tcard-body { transform:translateY(-5px); }
    .tcard-body { transition:transform .5s cubic-bezier(0.22,1,0.36,1); }
    @keyframes turn { to { transform:rotate(360deg); } }
    .lift { transition:transform .45s cubic-bezier(0.22,1,0.36,1); }
    .lift:hover { transform:translateY(-6px); }
    .zoom { overflow:hidden; }
    .zoom img { display:block; width:100%; height:100%; object-fit:cover;
      transition:transform .8s cubic-bezier(0.22,1,0.36,1); }
    .zoom:hover img { transform:scale(1.055); }
    .btn svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
    .btn:hover svg { transform:translateX(4px); }
    .mq { overflow:hidden; }
    .mqT { display:flex; width:max-content; }
    .mqT.l{animation:mLeft 44s linear infinite} .mqT.r{animation:mRight 44s linear infinite}
    .mq:hover .mqT{animation-play-state:paused}
    .plus { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
    @media (prefers-reduced-motion: reduce) {
      .rise,.mqT{animation:none!important;opacity:1!important;transform:none!important}
      .lift,.zoom img,.btn svg,.plus,.tcard,.tcard-ring,.tcard-body{transition:none!important}
      .tcard-ring svg{animation:none!important}
    }

    /* ── Treatment showcase ────────────────────────────────────────
       The site's own TreatmentShowcase: three panels sharing a row,
       one expanded, the others collapsed to a spine with the treatment
       name set vertically. Driven purely by :hover here (the live
       component uses React state) so it works in a static artboard —
       the first panel is open until a sibling is hovered. */
    .tshow { display:flex; gap:12px; height:380px; }
    .tshow > .pan { position:relative; overflow:hidden; display:block; text-decoration:none;
      flex:1 1 0; min-width:88px;
      transition:flex-grow .55s cubic-bezier(0.22,1,0.36,1), min-width .55s cubic-bezier(0.22,1,0.36,1); }
    .tshow > .pan.on { flex-grow:6; min-width:280px; }
    .tshow:hover > .pan.on { flex-grow:1; min-width:88px; }
    .tshow > .pan:hover { flex-grow:6; min-width:280px; }
    .pan img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      opacity:.62; transition:opacity .5s cubic-bezier(0.22,1,0.36,1); }
    .pan.on img { opacity:.92; }
    .tshow:hover > .pan.on img { opacity:.62; }
    .tshow > .pan:hover img { opacity:.92; }
    .pan-veil { position:absolute; inset:0;
      background:linear-gradient(to top, rgba(2,27,52,.97) 0%, rgba(2,27,52,.86) 26%,
                 rgba(2,27,52,.45) 58%, rgba(2,27,52,.12) 100%); }
    .pan-spine { position:absolute; inset:0; display:grid; place-items:center;
      transition:opacity .3s ease; }
    .pan-spine span { writing-mode:vertical-rl; white-space:nowrap; font-size:14px;
      font-weight:600; letter-spacing:.02em; color:#fff; }
    .pan-body { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
      justify-content:flex-end; padding:32px; opacity:0; transition:opacity .3s ease; }
    .pan.on .pan-body { opacity:1; transition-delay:.16s; }
    .pan.on .pan-spine { opacity:0; }
    .tshow:hover > .pan.on .pan-body { opacity:0; transition-delay:0s; }
    .tshow:hover > .pan.on .pan-spine { opacity:1; }
    .tshow > .pan:hover .pan-body { opacity:1; transition-delay:.16s; }
    .tshow > .pan:hover .pan-spine { opacity:0; }
    .pan-go { display:inline-flex; align-items:center; gap:7px; margin-top:14px;
      font-size:14px; font-weight:600; color:#75CED4; }
    .pan:hover .pan-go svg { transform:translateX(4px); }
    .pan-go svg { transition:transform .35s cubic-bezier(0.22,1,0.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .tshow > .pan, .pan img, .pan-body, .pan-spine, .pan-go svg { transition:none !important; }
    }
/* HDRSHELL */
    /* ── Header kabugu (10 Eylul) ──────────────────────────────────
       Genis hap kapsayici, icinde hap nav cipleri, sagda tek dolu CTA.
       Headerdaki butun kutular ayni geometriyi paylasiyor. */
    /* Kabuk icerik sutunuyla ayni genislikte: .wrap gibi 1200px kutu,
       48px yan bosluk, yani hap tam olarak metin sutunu hizasinda
       (168px - 1272px). eyerod.com'da da header hapinin dis kenari
       H1'in soluyla ayni yerde bitiyor.

       Kabuk yapiskan: sayfa kayarken header yukarida kaliyor, icerik
       hapin altindan geciyor (yine eyerod.com'daki gibi). Iki not:
       · Yapiskan serit tam genislikte ve beyaz. Seffaf birakilinca hapin
         ustundeki 20px'lik boslugun icinden alttaki metin gorunuyordu,
         yani yazi headeri geciyordu.
       · Sayfa sarmalayicisindaki overflow:hidden, overflow:clip'e cevrildi;
         hidden kaydirma kabi yarattigi icin sticky'yi oldururdu, clip
         yaratmadan ayni kirpmayi yapiyor. */
    .hdrwrap  { position:sticky; top:0; z-index:60; background:#fff; }
    .hdrbar   { width:1200px; margin:0 auto; padding:20px 48px 8px; }
    .hdrshell { display:flex; align-items:center; justify-content:space-between;
                gap:28px; height:76px; padding:0 28px;
                border-radius:999px; background:#F2F8F8; }
    .hdrnav   { display:flex; align-items:center; gap:6px; }
    .navlink  { padding:10px 17px; border-radius:999px; font-size:13.5px;
                font-weight:500; white-space:nowrap; text-decoration:none;
                color:#12293C; background:#fff; border:1px solid rgba(2,27,52,.10);
                transition:border-color .3s cubic-bezier(0.22,1,0.36,1),
                           background .3s cubic-bezier(0.22,1,0.36,1),
                           color .3s cubic-bezier(0.22,1,0.36,1); }
    .navlink:hover { border-color:rgba(16,125,123,.45); }
    .navlink.on    { background:#021B34; border-color:#021B34; color:#fff; }
    .hdrend   { display:flex; align-items:center; gap:20px; }
    .hdrtext  { font-size:15px; font-weight:500; color:#12293C;
                text-decoration:underline; text-underline-offset:3px;
                text-decoration-color:rgba(2,27,52,.30); white-space:nowrap; }
    .hdrtext:hover { text-decoration-color:#107D7B; }
    /* Kabuk 76px, 52px buton icinde sismis duruyordu — ayni hap, bir beden kucuk. */
    .btn-sm { height:44px; padding:0 5px 0 20px; gap:11px; }
    .btn-sm .lbl { font-size:14px; }
    .btn-sm .sq  { width:34px; height:34px; }