@charset "UTF-8";
/*!
 * Hızlı Servis — design system
 * =========================================================================
 * A standalone stylesheet. This REPLACES style-starter.css (220 KB of
 * Bootstrap 4 + w3layouts theme); it is not a skin on top of it.
 *
 * A class inventory of all 7,935 pages found 421 distinct classes, of which
 * ~80 carry the entire site. Those are implemented here from first
 * principles, so the markup never had to change but the visual language is
 * entirely new.
 *
 *  1  Reset
 *  2  Tokens
 *  3  Layout primitives (container / grid / utilities)
 *  4  Typography
 *  5  Icons
 *  6  Header & navigation
 *  7  Hero
 *  8  Article & content
 *  9  Buttons
 * 10  Cards, chips, contact
 * 11  Breadcrumbs
 * 12  CTA band
 * 13  Sticky conversion rail
 * 14  Footer
 * 15  Accessibility, motion, print
 * ========================================================================= */

/* ========================================================================= *
 * 1. RESET
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* SC 2.4.11 — keep focused elements clear of the fixed header and the
     fixed bottom conversion rail when tabbing or jumping to an anchor. */
  scroll-padding-top: calc(var(--h) + 1rem);
  scroll-padding-bottom: 7rem;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:target { scroll-margin-top: calc(var(--h) + 1.5rem); }

/* ========================================================================= *
 * 2. TOKENS
 * ========================================================================= */
:root {
  /* ---- Colour -------------------------------------------------------- *
   * Built around the brand mark's blue. One accent, deep neutrals, and a
   * single warm signal colour for urgency. No decorative colour anywhere. */
  --blue-50:  #eef6fb;
  --blue-100: #d6eaf6;
  --blue-200: #aed4ec;
  --blue-300: #7ab6dc;
  --blue-400: #4593c6;
  --blue-500: #2e7ba6;   /* brand mark */
  --blue-600: #1f6089;
  --blue-700: #1a4d6e;
  --blue-800: #163e57;
  --blue-900: #0f2b3d;

  --ink-950: #080d14;
  --ink-900: #0f1720;
  --ink-800: #1c2733;
  --ink-700: #33414f;
  --ink-600: #4d5c6b;
  /* Muted text sits on white, --bg-subtle AND --bg-sunken. Contrast must
     clear 4.5:1 on the DARKEST of those surfaces, not just on white:
     5.16 / 4.89 / 4.55. The old #6b7a89 managed only 4.40 / 4.17 / 3.88. */
  --ink-500: #606f7e;
  --ink-400: #94a2b0;
  --ink-300: #c2cbd4;
  --ink-200: #dfe5eb;
  --ink-100: #eef1f5;
  --ink-50:  #f7f9fb;

  /* Borders of interactive controls must reach 3:1 (WCAG 2.2 SC 1.4.11).
     --line stays light for decorative rules; controls use --line-control. */
  --line-control: #8f959b;   /* 3.03:1 on white */
  --placeholder:  #6a7886;   /* 4.52:1 on white — was #94a2b0 at 2.61:1 */

  --amber-500: #d97706;
  --amber-700: #b45309;   /* 5.02:1 on white — the shade to use for amber text */
  --amber-50:  #fffbeb;
  --green-500: #10a37f;
  --green-50:  #ecfdf5;
  --wa: #25d366;

  /* Semantic */
  --bg:        #ffffff;
  --bg-subtle: var(--ink-50);
  --bg-sunken: var(--ink-100);
  --fg:        var(--ink-900);
  --fg-soft:   var(--ink-600);
  --fg-muted:  var(--ink-500);
  --line:      var(--ink-200);
  --line-soft: var(--ink-100);
  --accent:    var(--blue-600);
  --accent-hi: var(--blue-500);

  /* ---- Type ---------------------------------------------------------- */
  /* System UI stack on purpose: no webfont request, no FOUT, no CLS.
     "Inter" used to head this list but was never actually loaded (no
     @font-face, no font file shipped), so it only made rendering
     inconsistent between machines that happened to have it installed. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  /* Fluid scale, 1.25 ratio, clamped so nothing gets silly on 4K */
  --t--2: clamp(.75rem,  .73rem + .10vw, .8125rem);
  --t--1: clamp(.875rem, .85rem + .12vw, .9375rem);
  --t-0:  clamp(1rem,    .97rem + .16vw, 1.0625rem);
  --t-1:  clamp(1.125rem,1.07rem + .28vw, 1.3125rem);
  --t-2:  clamp(1.375rem,1.28rem + .48vw, 1.6875rem);
  --t-3:  clamp(1.625rem,1.45rem + .88vw, 2.25rem);
  --t-4:  clamp(2rem,    1.70rem + 1.5vw, 3rem);
  --t-5:  clamp(2.5rem,  2.02rem + 2.4vw, 4rem);

  /* ---- Space: strict 8px system (4px only for optical nudges) -------- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.5rem; --s-8: 3rem;
  --s-9: 4rem;   --s-10: 5rem;  --s-11: 6rem;  --s-12: 8rem;

  /* ---- Radius -------------------------------------------------------- */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px;
  --r-pill: 999px;

  /* ---- Elevation: borders first, shadow sparingly ------------------- */
  --e-1: 0 1px 2px rgba(15,23,32,.05);
  --e-2: 0 1px 3px rgba(15,23,32,.06), 0 8px 16px -8px rgba(15,23,32,.10);
  --e-3: 0 2px 6px rgba(15,23,32,.06), 0 20px 32px -16px rgba(15,23,32,.16);
  --e-4: 0 4px 12px rgba(15,23,32,.08), 0 32px 56px -24px rgba(15,23,32,.22);

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: .15s; --mid: .25s; --slow: .4s;

  --h: 64px;              /* header height */
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--ink-950);
    --bg-subtle: var(--ink-900);
    --bg-sunken: var(--ink-800);
    --fg:        var(--ink-100);
    --fg-soft:   var(--ink-300);
    --fg-muted:  var(--ink-400);
    --line:      #1f2a36;
    --line-soft: #17202a;
    --accent:    var(--blue-300);
    --accent-hi: var(--blue-200);
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink-950); --bg-subtle: var(--ink-900); --bg-sunken: var(--ink-800);
  --fg: var(--ink-100); --fg-soft: var(--ink-300); --fg-muted: var(--ink-400);
  --line: #1f2a36; --line-soft: #17202a;
  --accent: var(--blue-300); --accent-hi: var(--blue-200);
}

/* ========================================================================= *
 * 3. LAYOUT PRIMITIVES
 * Bootstrap's grid API, reimplemented in ~60 lines instead of 190 KB.
 * ========================================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Same tie-break problem as #site-header. 73 pages carry an inline
   `.container { max-width: 1000px; padding: 10px }`, and on the 396 sampled
   pages whose <style> block sits AFTER the stylesheet link that copy wins the
   tie and the grid silently narrows by 200px against the rest of the site.
   One extra element makes this (0,1,1) so it wins regardless of load order.
   Only the two properties that drift are restated — nothing else is claimed,
   so utility classes like .py-5 keep their vertical spacing. */
body .container { max-width: 1200px; padding-inline: var(--gutter); }
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--s-4) * -1);
}
.row > * { padding-inline: var(--s-4); width: 100%; }

[class*="col-"] { flex: 0 0 auto; }
.col-6 { width: 50%; }

@media (min-width: 768px) {
  .col-md-3 { width: 25%; }  .col-md-5 { width: 41.6667%; }
  .col-md-6 { width: 50%; }  .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6667%; }
}
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }  .col-lg-6 { width: 50%; }
  .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; }
  .col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) { .col-xl-6 { width: 50%; } }

/* Utility subset — only what the pages actually use. */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.text-center { text-align: center; }
.ml-auto, .ml-lg-auto { margin-left: auto; }
.mr-1 { margin-right: var(--s-1); }
.mr-2 { margin-right: var(--s-2); }
.mt-4 { margin-top: var(--s-5); }
.mt-5 { margin-top: var(--s-6); }
.py-2 { padding-block: var(--s-2); }
.py-3 { padding-block: var(--s-4); }
.py-5 { padding-block: var(--s-9); }
.pt-5 { padding-top: var(--s-9); }
.p-4, .p-sm-5 { padding: var(--s-5); }
@media (min-width: 768px) {
  .py-md-4 { padding-block: var(--s-7); }
  .py-md-5 { padding-block: var(--s-10); }
  .mt-md-0 { margin-top: 0; }
  .mt-md-5 { margin-top: var(--s-6); }
  .text-md-right { text-align: right; }
  .float-rt { margin-left: auto; }
}
@media (min-width: 992px) {
  .py-lg-4 { padding-block: var(--s-7); }
  .mt-lg-0 { margin-top: 0; }
  .pr-lg-5 { padding-right: var(--s-7); }
}
@media (min-width: 576px) { .p-sm-5 { padding: var(--s-7); } }

.img-responsive { width: 100%; height: auto; }

/* ========================================================================= *
 * 4. TYPOGRAPHY
 * ========================================================================= */
/* `html body` rather than `body`: 3,752 pages carry an inline
   `body { font-family: 'Montserrat', sans-serif }`, and Montserrat is not
   loaded anywhere on this site — no @font-face, no font file — so on the
   pages whose <style> block follows the stylesheet link the whole document
   silently drops to the generic `sans-serif` fallback instead of the tuned
   system stack. (0,0,2) keeps the intended stack everywhere. */
html body {
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--fg-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); letter-spacing: -.032em; }
/* Fourth of the same family (see #site-header, .container, body > footer).
   71 pages carry an inline `h1 { font-size: 52px }` and 20 of those add
   `text-align: center`, both at (0,0,1) — a straight tie with the rule above,
   so on any page whose <style> block follows the stylesheet link the page
   title jumps to a fixed 52px and sometimes centres, while every other page
   uses the fluid --t-4 ramp. (0,0,2) settles it in the design system's favour.
   .banner-left h1 and .hs-page__head h1 are (0,1,1) and still win, so the
   hero keeps its larger --t-5 size. */
body h1 { font-size: var(--t-4); text-align: start; }
h2 { font-size: var(--t-3); letter-spacing: -.026em; margin-block: var(--s-9) var(--s-4); }
h3 { font-size: var(--t-2); margin-block: var(--s-7) var(--s-3); }
h4 { font-size: var(--t-1); margin-block: var(--s-6) var(--s-3); }
h5, h6 { font-size: var(--t-0); margin-block: var(--s-5) var(--s-2); }
:is(h1,h2,h3,h4) + * { margin-top: 0; }

p { margin-block: 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--t-1); line-height: 1.55; color: var(--fg-soft); }

a { color: var(--accent); text-decoration: none; }
main a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
main a:not(.btn):hover { color: var(--accent-hi); text-decoration-color: currentColor; }

/* The legacy pages hard-code inline link colour/size. Neutralise it so the
   type system stays consistent — but not when the inline style also paints a
   background. Those are deliberate buttons whose colour pair was chosen
   together; forcing --accent on top of one left a blue label on orange at
   2.38:1. Links that only set a colour are still normalised. */
main a[style]:not([style*="background"]) {
  color: var(--accent) !important; font-size: inherit !important;
}
main a[style*="background"] { font-size: inherit !important; }
/* The same legacy inline colours also appear on links sitting directly in a
   page-local <header>/<footer> bar, outside <main>, where the rule above
   cannot reach them: black on the dark surface reads 1.16:1. !important is
   what lets an author rule outrank an inline declaration. */
:is(header, footer) a[style]:not([style*="background"]) {
  color: var(--accent) !important;
}

strong, b { font-weight: 650; color: var(--fg); }
/* …but never inside a control or a coloured surface. An inherited colour
   always loses to a rule that matches the element directly, so the line above
   was pinning <b>/<strong> to the page foreground wherever a container had
   set its own text colour: 2.66:1 for the floating call button's label on
   ~7,177 pages, and 1.08:1 for "WhatsApp:" in the dark footer. Emphasis has
   to take the colour of whatever it is sitting on. Keep this list in step
   with every rule that sets background and color together.
   Class selectors only: :is() takes the specificity of its most specific
   argument, so a single id in the list would inflate the whole rule to
   (1,0,1) and outrank almost every component rule. This stays at (0,1,1). */
:is(.btn, [class*="btn-"], .whatsapp-button, .hs-fab, .hs-fab--call,
    .w3l-call-to-action-6, .call-sec-style, .w3l-footer-29-main,
    .w3l-copyright, .hs-error, .hs-eyebrow, .hs-count, .skip-link)
  :is(b, strong) { color: inherit; }
/* Same rule for the legacy buttons, which carry their colour pair inline
   rather than through a class. 3,588 pages wrap the WhatsApp label in <b>,
   which was taking --fg instead of the anchor's own white. */
[style*="background"] :is(b, strong) { color: inherit; }
small { font-size: var(--t--1); }
::selection { background: var(--blue-200); color: var(--ink-900); }

/* ========================================================================= *
 * 5. ICONS
 * The theme ships 821 `.fa-*` rules but no webfont and no @font-face; Font
 * Awesome was CDN-linked on 3 of 7,935 pages, so every icon rendered blank.
 * CSS masks instead: inherit currentColor, zero network requests.
 * ========================================================================= */
.fa, .fas, .far, .fab {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
  flex: none;
}
.fa-phone, .fa-phone-alt, .fa-volume-control-phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 15.5a11.4 11.4 0 0 1-3.57-.57 1 1 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.59l2.2-2.2a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 15.5a11.4 11.4 0 0 1-3.57-.57 1 1 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.59l2.2-2.2a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}
.fa-map-marker, .fa-map-marker-alt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.fa-bars, .icon-expand {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 6.2h18v2H3zm0 4.8h18v2H3zm0 4.8h18v2H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 6.2h18v2H3zm0 4.8h18v2H3zm0 4.8h18v2H3z'/%3E%3C/svg%3E");
}
.fa-times, .icon-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
}
.fa-whatsapp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.4 14.1c-.2.6-1.3 1.2-1.8 1.3-.5.1-1.1.1-1.8-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8s.7-2 .9-2.3c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5s.8 1.9.9 2.1c.1.2.1.3 0 .5s-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.7 1.2 1.5 1.9 1 .9 1.9 1.2 2.2 1.3.2.1.4.1.5-.1.2-.2.6-.8.8-1 .2-.3.4-.2.6-.1.2.1 1.5.7 1.8.9.2.1.4.2.5.3.1.2.1.7-.1 1.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.4 14.1c-.2.6-1.3 1.2-1.8 1.3-.5.1-1.1.1-1.8-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8s.7-2 .9-2.3c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5s.8 1.9.9 2.1c.1.2.1.3 0 .5s-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.7 1.2 1.5 1.9 1 .9 1.9 1.2 2.2 1.3.2.1.4.1.5-.1.2-.2.6-.8.8-1 .2-.3.4-.2.6-.1.2.1 1.5.7 1.8.9.2.1.4.2.5.3.1.2.1.7-.1 1.2z'/%3E%3C/svg%3E");
}
.fa-comments {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v4l4.5-4H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v4l4.5-4H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}
.fa-user-circle, .fa-users {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 13a8 8 0 0 1-5.7-2.4c.6-1.8 2.9-3 5.7-3s5.1 1.2 5.7 3A8 8 0 0 1 12 20z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 13a8 8 0 0 1-5.7-2.4c.6-1.8 2.9-3 5.7-3s5.1 1.2 5.7 3A8 8 0 0 1 12 20z'/%3E%3C/svg%3E");
}
.fa-headphones {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H5v-1a7 7 0 0 1 14 0v1h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H5v-1a7 7 0 0 1 14 0v1h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z'/%3E%3C/svg%3E");
}
.fa-bullhorn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 3 8 8H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1l1.2 6h3L8 15l11 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 3 8 8H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1l1.2 6h3L8 15l11 5z'/%3E%3C/svg%3E");
}
.fa-thumbs-o-up, .fa-thumbs-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 10h4v11H2zm19.6.6A2 2 0 0 0 20 10h-5l.8-3.9a1.5 1.5 0 0 0-2.6-1.3L8 10v11h9.5a2 2 0 0 0 2-1.6l2-7a2 2 0 0 0-.4-1.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 10h4v11H2zm19.6.6A2 2 0 0 0 20 10h-5l.8-3.9a1.5 1.5 0 0 0-2.6-1.3L8 10v11h9.5a2 2 0 0 0 2-1.6l2-7a2 2 0 0 0-.4-1.8z'/%3E%3C/svg%3E");
}
.fa-handshake-o, .fa-angellist {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 9h4v7H2zm16 0h4v7h-4zM7 9l3-2h4l3 2v6l-3 3-2-2-2 2-3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 9h4v7H2zm16 0h4v7h-4zM7 9l3-2h4l3 2v6l-3 3-2-2-2 2-3-3z'/%3E%3C/svg%3E");
}

/* ========================================================================= *
 * 6. HEADER & NAVIGATION
 * ========================================================================= */
#site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  /* Declared, not defaulted. 7,847 pages still carry a page-level <style>
     block from the old theme, and the guide template's says
     `header, footer { padding: 30px; text-align: center }` followed by
     `header { padding: 20px }`. hs.css only set `background` here, so those
     two properties had no competitor and won by default: the fixed bar
     measured 171px tall at 1280px and 231px at 375px, centred, and buried the
     first 19–79px of the page under itself. #site-header is (1,0,0) and beats
     the bare `header` at (0,0,1) whichever file loads first — which matters,
     because the block sits before the stylesheet link on 570 sampled pages
     and after it on 396. */
  padding: 0; text-align: start;
  background: color-mix(in srgb, var(--bg) 82%, transparent);

  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}
#site-header.is-scrolled { border-bottom-color: var(--line); }
@supports not (backdrop-filter: blur(1px)) { #site-header { background: var(--bg); } }

.navbar {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--h);
}
.navbar-brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-1); font-weight: 680; letter-spacing: -.03em;
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.navbar-brand a { color: inherit; text-decoration: none; }
/* The brand link used to be wrapped in an <h1>, which had to be neutralised
   here. It is a plain link now — the <h1> belongs to the page, not the header
   — so no reset is needed. */
.navbar-brand::before {
  content: ""; flex: none;
  width: 34px; height: 26px;
  background: url("../../assets2/logo-mark.webp") center / contain no-repeat;
  border-radius: var(--r-1);
}

.navbar-nav { display: flex; align-items: center; gap: var(--s-1); }
/* Fifth of the legacy-override family. The guide template's inline block styles
   `header a` and `nav a` with their own margins; measured on
   bosch-bulasik-makinesi-arizalari, every nav link carried margin-left AND
   margin-right of 20px. Six links × 40px is 240px of phantom width, which
   pushed the row onto a second line and doubled the fixed bar to 131px — so
   the guide pages wore a header twice as tall as the rest of the site.
   Spacing here comes from the flex `gap` above; the margins are noise.
   #site-header .nav-link is (1,1,0) and settles it whatever the load order. */
#site-header .nav-link,
#site-header .navbar-brand { margin: 0; }
/* The brand is a <div class="navbar-brand"> wrapping a bare <a>, and that <a>
   is what `header a { padding: 20px 30px; margin: 20px }` in the page-level
   block actually hits — measured 70px tall inside a 110px brand cell, which is
   what pushed the guide template's bar to 131px against everyone else's 65px.
   Scoped to #site-header so the same inline rules keep styling body links. */
#site-header .navbar-brand a { margin: 0; padding: 0; }
/* And `.container { padding: 10px }` from the same block adds 20px of vertical
   padding the bar never asked for. The site-wide `body .container` override
   deliberately restates only padding-inline, so utility classes like .py-5 keep
   their vertical rhythm in the page body; inside the header there is no such
   utility to protect, so the block axis can be zeroed here. */
#site-header .container { padding-block: 0; }
/* Same block also sets `nav li { display: inline; margin-right: 30px }` on
   3,677 pages. Inside the flex row above, `display: inline` is blockified and
   harmless, but the 30px is not — it stacks on top of the gap. */
#site-header .navbar-nav > li { margin: 0; }
.nav-link {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t--1); font-weight: 550;
  color: var(--fg-soft); border-radius: var(--r-1);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-link:hover { color: var(--fg); background: var(--bg-subtle); }
.nav-item.active > .nav-link { color: var(--accent); font-weight: 600; }

.navbar-toggler {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-left: auto;
  color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg);
  transition: background-color var(--fast) var(--ease);
}
.navbar-toggler:hover { background: var(--bg-subtle); }
.navbar-toggler .fa { font-size: 1.25rem; }
.navbar-toggler .icon-close { display: none; }
.navbar-toggler:not(.collapsed) .icon-close { display: inline-block; }
.navbar-toggler:not(.collapsed) .icon-expand { display: none; }

@media (max-width: 991.98px) {
  .navbar-toggler { display: inline-flex; }
  /* Plain display toggle. Both the 0fr->1fr grid trick and an animated
     max-height proved unreliable here (the fr row collapses to the child's
     zeroed min-content contribution under overflow:hidden). The drawer
     opening is not worth risking; the fade below supplies the motion. */
  .navbar-collapse { display: none; flex-basis: 100%; }
  .navbar-collapse.show {
    display: block;
    max-height: 70vh;
    overflow-y: auto;
    animation: hs-drawer var(--mid) var(--ease-out) both;
  }
}
@keyframes hs-drawer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 991.98px) {
  .navbar-nav {
    flex-direction: column; align-items: stretch;
    gap: 0; padding-block: var(--s-2);
    border-top: 1px solid var(--line);
  }
  /* Full-bleed rows in the drawer: the whole strip is the tap target. */
  .nav-link {
    display: flex; width: 100%;
    padding: var(--s-3) var(--s-2); font-size: var(--t-0);
  }
  .navbar-nav > li { width: 100%; }
  .navbar { flex-wrap: wrap; }
}

/* ========================================================================= *
 * 7. HERO
 * Replaces the photographic banner: a typographic hero on a soft gradient.
 * No hero image at all, so LCP is text — the fastest possible.
 * ========================================================================= */
.w3l-banner {
  position: relative;
  /* District heroes hold three short lines and a call button — about 180px of
     content. The old fixed --s-10 block padding grew that to 418px, so on a
     700px-tall viewport more than half the fold was empty gradient before the
     visitor reached the breadcrumb or the h1. Fluid padding keeps the airiness
     on a large screen and gives the fold back on a laptop or phone. The top
     value still clears the fixed header (--h) in every case. */
  padding-block: calc(var(--h) + clamp(var(--s-6), 6vh, var(--s-10)))
                 clamp(var(--s-6), 5vh, var(--s-10));
  background:
    radial-gradient(120% 100% at 15% 0%, var(--blue-50) 0%, transparent 60%),
    radial-gradient(90% 80% at 95% 10%, color-mix(in srgb, var(--blue-100) 55%, transparent) 0%, transparent 55%),
    var(--bg);
  overflow: hidden;
}
.w3l-banner::after {                 /* hairline grid, barely there */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent);
  opacity: .7;
}
.w3l-banner > .container { position: relative; z-index: 1; }

.banner-left { max-width: 46rem; }
.banner-left h1, .banner-left h2 {
  font-size: var(--t-5); letter-spacing: -.04em; line-height: 1.05;
  color: var(--fg); margin-bottom: var(--s-5);
}
/* The theme paints hero copy white for a dark photo that no longer exists. */
.w3l-banner .text-white { color: var(--fg) !important; }
.banner-left .lead { font-size: var(--t-1); color: var(--fg-muted); max-width: 42ch; }
.banner-left .lead b { color: var(--fg); font-weight: 650; }
.banner-left .mt-5 {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7);
}
.banner-left .mt-5 > * { margin: 0 !important; }

/* ========================================================================= *
 * 8. ARTICLE & CONTENT
 * ========================================================================= */
main.icerik-yeri {
  max-width: 74ch;
  margin-inline: auto;
  padding: var(--s-9) var(--gutter) var(--s-11);
}
body:not(:has(.w3l-banner)) main.icerik-yeri { padding-top: calc(var(--h) + var(--s-8)); }

/* Same clearance for a bare <main>. #site-header is `position: fixed`, so it
   reserves no space; .icerik-yeri above and .hs-page below each pay for the
   64px bar themselves, but the hand-built pages have an unclassed <main> and
   never did — they had no site header at all until it was added. Measured
   after adding it, at 375px and 1280px: firin-arizalari and
   vestel-buzdolabi-arizalari put their first link at y=20 under a 65px bar
   (45px of it unreachable), and the district pages left a 5px hairline where
   the built templates leave 47–50px. Excluded: pages with a hero, which
   already open with `padding-block: calc(var(--h) + …)`. */
body:has(> #site-header) > main:not(.icerik-yeri):not(.hs-page):not(:has(.w3l-banner)) {
  padding-top: calc(var(--h) + var(--s-8));
}

main.icerik-yeri > article + article { margin-top: var(--s-4); }
main.icerik-yeri h1 { margin-bottom: var(--s-5); }

figure { margin-block: var(--s-8); }
figure img {
  width: 100%; border-radius: var(--r-4);
  border: 1px solid var(--line); box-shadow: var(--e-2);
}
figcaption {
  margin-top: var(--s-3); font-size: var(--t--1);
  color: var(--fg-muted); text-align: center;
}

/* ========================================================================= *
 * 9. BUTTONS
 * ========================================================================= */
.btn, .btn-style-white, .btn-style-primary, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font-size: var(--t--1); font-weight: 600; letter-spacing: -.01em;
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pill);
  text-decoration: none !important;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary — the single strongest action on any page. */
.btn-style-primary, .btn-primary {
  background: var(--blue-600); color: #fff;
  box-shadow: var(--e-1), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-style-primary:hover, .btn-primary:hover {
  background: var(--blue-700); color: #fff; box-shadow: var(--e-2);
}

/* Secondary — bordered, quiet. */
.btn-style-white {
  background: var(--bg); color: var(--fg);
  border-color: var(--line); box-shadow: var(--e-1);
}
.btn-style-white:hover {
  background: var(--bg-subtle); border-color: var(--ink-300); color: var(--fg);
}
/* When both appear together the white one is the secondary, so let the
   primary keep visual priority. */
.banner-left .btn-style-white:first-child {
  background: var(--blue-600); color: #fff; border-color: transparent;
}
.banner-left .btn-style-white:first-child:hover { background: var(--blue-700); }

/* ========================================================================= *
 * 10. CARDS, CHIPS, CONTACT
 * ========================================================================= */
.services-single {
  display: flex; gap: var(--s-4); height: 100%;
  padding: var(--s-6);
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-4);
  transition: border-color var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.services-single:hover {
  border-color: var(--blue-200); box-shadow: var(--e-3);
  transform: translateY(-2px);
}
.service-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; font-size: 1.15rem;
  color: var(--blue-600); background: var(--blue-50);
  border-radius: var(--r-2);
}
.services-content h5 { margin: 0 0 var(--s-2); font-size: var(--t-1); }
.services-content h5 a { color: var(--fg); }
.services-content p { margin: 0; font-size: var(--t--1); color: var(--fg-muted); }

/* Related-services chips on district pages */
#brand-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  background: none !important; padding: 0 !important;
  margin-top: var(--s-8) !important; justify-content: flex-start !important;
}
#brand-nav a {
  padding: var(--s-2) var(--s-4) !important; margin: 0 !important;
  font-size: var(--t--1); font-weight: 550;
  color: var(--fg-soft) !important; background: var(--bg-subtle) !important;
  border: 1px solid var(--line); border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
#brand-nav a:hover {
  color: var(--blue-700) !important; background: var(--blue-50) !important;
  border-color: var(--blue-200);
}

.contact-info {
  margin-top: var(--s-9); padding: var(--s-6);
  background: var(--bg-subtle);
  border: 1px solid var(--line); border-radius: var(--r-4);
}
.contact-info h2 { margin-top: 0; font-size: var(--t-2); }
.contact-info address a { font-weight: 600; }

/* ========================================================================= *
 * 11. BREADCRUMBS
 * ========================================================================= */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-6); padding: 0;
  font-size: var(--t--1); color: var(--fg-muted);
}
.breadcrumb-item a { color: var(--fg-muted); text-decoration: none !important; }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/"; margin-right: var(--s-2); color: var(--ink-300);
}
.breadcrumb-item[aria-current="page"] { color: var(--fg); font-weight: 550; }

/* ========================================================================= *
 * 12. CTA BAND
 * ========================================================================= */
.w3l-call-to-action-6 .call-sec-style {
  background: var(--blue-900);
  background-image: radial-gradient(90% 140% at 0% 0%, var(--blue-800), transparent 60%);
  color: var(--blue-100);
  border-radius: var(--r-5);
  margin-block: var(--s-10);
}
.w3l-call-to-action-6 .container { max-width: 1100px; }
.title-big { color: #fff; font-size: var(--t-3); margin-bottom: var(--s-2); }
.w3l-call-to-action-6 p { color: var(--blue-200); margin: 0; }
.w3l-call-to-action-6 .buttons {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: var(--s-4);
}
.phone-sec { display: inline-flex; align-items: center; gap: var(--s-2); color: #fff; }
.call-style-w3 { color: #fff; font-size: var(--t-2); font-weight: 680; letter-spacing: -.02em; }
.call-style-w3:hover { color: var(--blue-200); }
.w3l-call-to-action-6 .green { color: var(--blue-300); font-size: var(--t--2); letter-spacing: .08em; }
.w3l-call-to-action-6 .btn-style-primary { background: #fff; color: var(--blue-900); }
.w3l-call-to-action-6 .btn-style-primary:hover { background: var(--blue-100); color: var(--blue-900); }
@media (max-width: 767.98px) {
  .w3l-call-to-action-6 .buttons { justify-content: flex-start; }
  .call-sec-style { border-radius: var(--r-4); }
}

/* ========================================================================= *
 * 13. STICKY CONVERSION RAIL
 * One row on mobile, floating pills on desktop. Never overlaps content.
 * ========================================================================= */
.fixed-side-menu .whatsapp-button,
body > a[href^="tel:"] .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font-size: var(--t--1); font-weight: 600;
  border-radius: var(--r-pill); text-decoration: none;
  box-shadow: var(--e-3);
}
/* Brand green kept; the label is dark because #fff on --wa is 1.98:1 and
   fails WCAG 2.2 AA 1.4.3. Dark-on-green measures 9.44:1. */
.fixed-side-menu .whatsapp-button {
  position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 60px);
  z-index: 900; background: var(--wa); color: var(--ink-950);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.fixed-side-menu .whatsapp-button:hover { color: var(--ink-950); transform: translateY(-2px); box-shadow: var(--e-4); }

/* The call button used to carry `style="position:fixed; bottom:150px;
   right:50px"` inline on 7,177 pages — overridden here anyway, so it was dead
   weight in every response. It is `.hs-fab--call` now and positioned only from
   this file. The attribute selector stays as a fallback for any page that still
   has the old markup. */
body > a[href^="tel:"], .hs-fab--call {
  position: fixed !important;
  right: var(--s-5) !important; bottom: var(--s-5) !important;
  left: auto !important; top: auto !important; z-index: 901;
}
body > a[href^="tel:"] .btn, .hs-fab--call .btn {
  background: var(--blue-600) !important; color: #fff;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
body > a[href^="tel:"]:hover .btn,
.hs-fab--call:hover .btn { background: var(--blue-700) !important; transform: translateY(-2px); }

@media (max-width: 575.98px) {
  /* Thumb zone: two full-width stacked bars. `left` AND `right` are set, so
     the width is derived — never also set width:100% here or the element
     overflows its own insets. The call CTA sits lowest (primary action). */
  body > a[href^="tel:"], .hs-fab--call {
    right: var(--s-3) !important; left: var(--s-3) !important;
    bottom: var(--s-3) !important;
  }
  .fixed-side-menu .whatsapp-button {
    right: var(--s-3); left: var(--s-3);
    bottom: calc(var(--s-3) + 56px);
  }
  body > a[href^="tel:"] .btn, .hs-fab--call .btn { width: 100%; }
  /* Clear the fixed rail so it never covers the end of the content. */
  body { padding-bottom: 128px; }
}

/* ========================================================================= *
 * 14. FOOTER
 * ========================================================================= */
/* Third of the same family as #site-header and .container above. 79 pages
   carry an inline `footer { padding: 30px; text-align: center;
   background-color: var(--bg-subtle); font-size: 18px }`. .footer-29 paints
   its own dark surface, so that padding renders as a 30px light band framing
   the footer, and the centring and 18px size leak into every line inside it —
   a visibly different footer from the other 7,800 pages. (0,0,2) beats the
   bare element selector regardless of which file loads first. Only the three
   properties that drift are restated; background is left alone because with
   the padding gone it has no visible area, and claiming it could strip the
   surface off any page whose footer is not .w3l-footer-29-main. */
body > footer { padding: 0; text-align: start; font-size: inherit; }

.w3l-footer-29-main { margin-top: var(--s-11); }
.w3l-footer-29-main .footer-29 {
  background: var(--ink-950); color: var(--ink-400);
  border-top: 1px solid var(--line);
}
.w3l-footer-29-main h3,
.w3l-footer-29-main .footer-title-29,
.w3l-footer-29-main h6 {
  margin: 0 0 var(--s-4);
  font-size: var(--t--2); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-400) !important;   /* 7.47:1 on --ink-950 */
}
.w3l-footer-29-main li { margin-bottom: var(--s-3); font-size: var(--t--1); }
.w3l-footer-29-main a { color: var(--ink-300); }
.w3l-footer-29-main a:hover { color: #fff; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: var(--s-2); }
.footer-contact-list .fa { margin-top: .35em; color: var(--ink-500); }

.w3l-copyright {
  padding-block: var(--s-5);
  background: var(--ink-950);
  border-top: 1px solid var(--ink-800);
  color: var(--ink-400); font-size: var(--t--2);   /* 7.47:1, was 4.43:1 */
}
.bottom-copies { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ========================================================================= *
 * 14b. HOMEPAGE COMPOSITIONS
 * Each section deliberately uses a different rhythm — a 2:1:1 card grid, a
 * counter-numbered ordered list, a three-column link index, an asymmetric
 * split — so the page never reads as one card layout repeated.
 * ========================================================================= */
.hs-section { padding-block: var(--s-11); }
.hs-section--sunken {
  background: var(--bg-subtle);
  border-block: 1px solid var(--line);
}
.hs-section__head { max-width: 60ch; margin-bottom: var(--s-8); }
.hs-section__head h2 { margin-top: 0; }
.hs-section__head .lead { margin-bottom: 0; }
.hs-narrow { max-width: 760px; }

/* --- hero extras --- */
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-5); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  font-size: var(--t--2); font-weight: 550; letter-spacing: .01em;
  color: var(--fg-soft);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
.hs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 22%, transparent);
}
.hs-trustbar {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8); padding: 0; list-style: none;
}
.hs-trustbar li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--t--1); color: var(--fg-muted);
}
.hs-trustbar li::before {           /* drawn check — no icon dependency */
  content: ""; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green-500);
  border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}

/* --- service grid: one lead card, two supporting --- */
.hs-svc-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .hs-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .hs-svc-grid { grid-template-columns: 1.35fr 1fr 1fr; }
}
.hs-svc {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  color: inherit; text-decoration: none !important;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-4);
  transition: border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.hs-svc:hover {
  border-color: var(--blue-300); box-shadow: var(--e-3);
  transform: translateY(-3px);
}
/* --blue-400 on the card surface is 3.36:1 — below the 4.5:1 this text needs
   at --t--2. --blue-700 clears it in light mode; dark mode keeps the light
   tint, which is already well past threshold on the dark surface. */
.hs-svc__kicker {
  font-size: var(--t--2); font-weight: 650; letter-spacing: .12em;
  color: var(--blue-700);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-svc__kicker { color: var(--blue-400); }
}
:root[data-theme="dark"] .hs-svc__kicker { color: var(--blue-400); }
/* Optional card thumbnail. aspect-ratio reserves the box before the image
   arrives, so a lazy-loaded thumbnail cannot cause layout shift. */
.hs-svc__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-3);
  margin-bottom: var(--s-4);
  background: var(--bg-subtle);
}
.hs-svc:has(.hs-svc__thumb) { padding: var(--s-4); }
.hs-svc:has(.hs-svc__thumb) .hs-svc__kicker,
.hs-svc:has(.hs-svc__thumb) h3,
.hs-svc:has(.hs-svc__thumb) p,
.hs-svc:has(.hs-svc__thumb) .hs-svc__go { padding-inline: var(--s-2); }
.hs-svc h3 { margin: var(--s-3) 0 var(--s-3); font-size: var(--t-2); }
.hs-svc p { flex: 1; margin-bottom: var(--s-5); font-size: var(--t--1); color: var(--fg-muted); }
.hs-svc__go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); font-weight: 600; color: var(--accent);
}
.hs-svc__go::after {
  content: "→"; transition: transform var(--fast) var(--ease);
}
.hs-svc:hover .hs-svc__go::after { transform: translateX(3px); }
.hs-svc--lead { background: linear-gradient(165deg, var(--blue-50), var(--bg) 55%); }
@media (min-width: 1000px) { .hs-svc--lead h3 { font-size: var(--t-3); } }

/* --- process: counter-numbered, connected --- */
.hs-steps {
  counter-reset: step; list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .hs-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }
@media (min-width: 1050px) { .hs-steps { grid-template-columns: repeat(4, 1fr); } }
.hs-steps > li { counter-increment: step; padding-top: var(--s-6); border-top: 2px solid var(--line); }
.hs-steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: var(--s-3);
  font-size: var(--t--2); font-weight: 650; letter-spacing: .12em;
  color: var(--blue-500);
}
.hs-steps h3 { margin: 0 0 var(--s-2); font-size: var(--t-1); }
.hs-steps p  { margin: 0; font-size: var(--t--1); color: var(--fg-muted); }

/* --- fault index: three plain columns, deliberately not cards --- */
.hs-faults {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .hs-faults { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .hs-faults { grid-template-columns: repeat(3, 1fr); } }
.hs-faults__col h3 {
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  font-size: var(--t--2); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
  border-bottom: 1px solid var(--line);
}
.hs-faults__col ul { list-style: none; padding: 0; margin: 0; }
.hs-faults__col li + li { border-top: 1px solid var(--line-soft); }
.hs-faults__col a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 48px; padding-block: var(--s-2);
  font-size: var(--t--1); color: var(--fg-soft); text-decoration: none !important;
  transition: color var(--fast) var(--ease);
}
.hs-faults__col a::after { content: "→"; color: var(--ink-300); transition: transform var(--fast) var(--ease), color var(--fast) var(--ease); }
.hs-faults__col a:hover { color: var(--accent); }
.hs-faults__col a:hover::after { color: var(--accent); transform: translateX(3px); }
.hs-more { margin-top: var(--s-7); }
.hs-more a { font-weight: 600; }

/* Full index variant: taller columns, category counts, balanced across the
   page rather than three fixed tracks. */
.hs-faults--index { align-items: start; }
@media (min-width: 940px) {
  .hs-faults--index { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}
@media (min-width: 1200px) {
  .hs-faults--index { grid-template-columns: repeat(3, 1fr); }
}
/* h2 OR h3 — the correct heading level depends on whether the surrounding
   section already owns an h2, so the count-badge layout must not be bound to
   one tag. Binding it to h2 alone left the .hs-count pill unaligned wherever
   the document structure required h3. */
.hs-faults__col :is(h2, h3) {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  font-size: var(--t--2); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
  border-bottom: 1px solid var(--line);
}
.hs-count {
  padding: 2px var(--s-2);
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0;
  color: var(--blue-600); background: var(--blue-50);
  border-radius: var(--r-pill);
}
.hs-faults--index a { align-items: flex-start; padding-block: var(--s-3); }
.hs-faults--index a::after { margin-top: .15em; }

/* --- asymmetric split with a highlighted note --- */
.hs-split {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hs-split { grid-template-columns: 1.15fr .85fr; gap: var(--s-9); align-items: start; } }
.hs-split h2 { margin-top: 0; }
.hs-note {
  padding: var(--s-6);
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--r-3);
}
.hs-note h3 { margin: 0 0 var(--s-3); font-size: var(--t-1); }
.hs-note p { font-size: var(--t--1); color: var(--fg-muted); }
.hs-note p:last-child { margin-bottom: 0; }

/* --- FAQ: native <details>, zero JS, fully keyboard accessible --- */
.hs-faq { border-bottom: 1px solid var(--line); }
.hs-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding-block: var(--s-4);
  /* The chevron below is a 10px square rotated 45°, so its painted corners
     reach 10×√2 ≈ 14.1px — about 4px past its own border box on the right.
     `transform` is ignored for layout but NOT for the scrollable overflow
     area, so without this padding every page carrying an FAQ scrolled 4px
     sideways at every viewport width. Measured: body scrollWidth 1269 vs
     clientWidth 1265. Reserve the corner instead of clipping it. */
  padding-inline-end: 4px;
  font-size: var(--t-1); font-weight: 600; color: var(--fg);
  cursor: pointer; list-style: none;
}
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.hs-faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.hs-faq summary:hover { color: var(--accent); }
.hs-faq__body { padding-bottom: var(--s-5); }
.hs-faq__body p { margin: 0; color: var(--fg-muted); max-width: 68ch; }

/* --- Brand technical block. The audit measured the indexable pool collapsing
   to ~202 content units: pages in one district differed only by the brand name
   substituted into shared prose (Jaccard 0.989). This block is what makes two
   brands in the same district genuinely different documents.

   Its content is a SYNTHESIS of the site's own verified fault guides, never a
   copy of them — the guides list error codes linearly, this groups them by
   subsystem, which is information the source pages do not carry. --- */
.hs-marka-teknik { margin-block: var(--s-8); }
.hs-marka-teknik > p:first-of-type { max-width: var(--measure); }
.hs-kod-grup { margin: var(--s-5) 0 0; }
.hs-kod-grup > div {
  padding-block: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.hs-kod-grup > div:first-child { border-top: 0; }
.hs-kod-grup dt {
  font-weight: 650; color: var(--fg);
  margin-bottom: var(--s-1);
}
/* The codes are the scannable key — a reader with an F28 on the display looks
   for "F28" before reading anything. Tabular figures keep the list aligned. */
.hs-kod-grup .hs-kodlar {
  display: block; margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  font-size: var(--t--1); font-weight: 600; color: var(--accent);
}
.hs-kod-grup dd { margin: 0; color: var(--fg-soft); max-width: var(--measure); }
/* The diagnostic rows route to the detailed guides, so their links are the
   point of the block, not incidental prose. Measured at 375px they came out
   11–13px short of the 2.5.8 minimum — the earlier rule only covered
   `li > a:only-child` and these sit in a <dd>. The branch-selection block
   puts its links in the <dt> instead, so both sides are named here; that one
   measured 21px. Sized like the list chips. */
.hs-kod-grup dd a,
.hs-kod-grup dt a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: var(--s-1);
}
.hs-marka-teknik .hs-uyari {
  margin-top: var(--s-5); padding: var(--s-4);
  border-left: 3px solid var(--amber-500);
  background: var(--bg-subtle);
  font-size: var(--t--1); color: var(--fg-soft);
}
@media (prefers-color-scheme: dark) {
  /* Paired foreground — a surface darkened without its text cost 1.43:1 here once. */
  :root:not([data-theme="light"]) .hs-marka-teknik .hs-uyari { color: var(--ink-300); }
}

/* --- District coverage block: the geographic axis of the same duplication.
   Two pages of one brand in different districts were Jaccard 0.983 — identical
   once the district name was masked. The real neighbourhood list is the honest
   differentiator: it comes from the mahalle→ilçe canonical map already in the
   site, and it answers a question visitors actually ask. --- */
.hs-bolge-kapsam { margin-block: var(--s-8); }
.hs-mahalle {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
}
.hs-mahalle li { margin: 0; }
.hs-mahalle a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t--1); text-decoration: none;
  background: var(--bg-subtle);
}
.hs-mahalle a:hover { border-color: var(--accent); background: var(--bg); }

/* --- District link list: same native <details> pattern as the FAQ above.
   These 226 lists used to be a bare <button> plus a display:none container
   opened by a 428-byte script, so they needed JS to reach and told assistive
   tech nothing about their state. <details> gives the expanded/collapsed
   announcement and keyboard behaviour for free. --- */
.hs-bolge {
  margin-block: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-subtle);
}
.hs-bolge > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 48px; padding: var(--s-3) var(--s-4);
  font-size: var(--t-0); font-weight: 600; color: var(--fg);
  cursor: pointer; list-style: none;
}
.hs-bolge > summary::-webkit-details-marker { display: none; }
.hs-bolge > summary::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.hs-bolge[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.hs-bolge > summary:hover { color: var(--accent); }
.hs-bolge > :not(summary) { padding: 0 var(--s-4) var(--s-2); }
/* No colour rule for the links themselves: on all 226 pages the list sits
   inside #linkler, so the page-local `#linkler a { color: black }` keeps light
   mode as it was, and the dark-mode rescue block at the end of this file
   already hands `#linkler a` back to --accent. */

/* --- In-page section menu, same treatment. On 540 pages this was a <button>
   plus a `hidden` <div> driven by an inline script that flipped style.display
   but never removed the `hidden` attribute — so assistive tech was told the
   panel was hidden while it was plainly on screen. <details> makes the state
   real and drops the script. The red bar and link styling still come from each
   page's own .menu-toggle / .menu-content rules. --- */
.mobile-nav-menu > summary { cursor: pointer; list-style: none; }
.mobile-nav-menu > summary::-webkit-details-marker { display: none; }
.mobile-nav-menu > summary::after {
  content: "";
  display: inline-block; margin-left: var(--s-2);
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--fast) var(--ease);
}
.mobile-nav-menu[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

/* --- HTML site haritası: 2.601 bağlantıyı okunur tutan çok sütunlu liste --- */
.hs-sitemap-list {
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
  columns: 22rem; column-gap: var(--s-7);
}
.hs-sitemap-list > li { break-inside: avoid; margin-bottom: var(--s-2); }
.hs-sitemap-list > li > a {
  display: block; min-height: 32px; padding: var(--s-1) 0;
  font-size: var(--t--1); line-height: 1.45;
}
/* Telif çubuğundaki yardımcı bağlantılar (site haritası, RSS). Çubuk her
   sayfada var, o yüzden tarama derinliği için en güvenilir yer orası. */
.hs-copy-link {
  display: inline-block; margin-left: var(--s-4);
  font-size: var(--t--2); color: var(--ink-300);
}
.hs-copy-link:hover { color: #fff; }

/* ------------------------------------------------------------------------- *
 * Guide pages: fault jump list + the answers themselves.
 *
 * These answers used to live in JavaScript strings and only appeared after the
 * visitor picked from a <select> — so search engines, which index the page as
 * loaded, never saw them. They are static markup now, and the chooser became a
 * jump list that works with JavaScript switched off.
 * ------------------------------------------------------------------------- */
.hs-fault-nav { margin: 0 0 var(--s-8); }
.hs-fault-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.hs-fault-nav a {
  display: flex; align-items: baseline; gap: var(--s-3);
  /* 44px min target (WCAG 2.2 SC 2.5.8) without relying on the text height */
  min-height: 44px; padding: var(--s-3) var(--s-4);
  /* --line-control, not --line: these read as buttons, and a control's own
     boundary has to clear 3:1 (WCAG 2.2 SC 1.4.11). */
  border: 1px solid var(--line-control); border-radius: var(--r-2);
  background: var(--bg-subtle);
  color: var(--fg); text-decoration: none; font-weight: 550;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.hs-fault-nav a::before { content: "→"; color: var(--ink-300); flex: none; }
.hs-fault-nav a:hover {
  border-color: var(--accent); background: var(--bg); transform: translateY(-1px);
}
.hs-fault-nav a:hover::before { color: var(--accent); }

.hs-fault {
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--s-7);
  scroll-margin-top: calc(var(--h) + var(--s-6));
}
.hs-fault:first-of-type { border-top: 0; margin-top: 0; }
.hs-fault h2 { margin-bottom: var(--s-4); }
.hs-fault :is(p, ul, ol) { max-width: 72ch; }
.hs-fault :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--s-4); }
.hs-fault li + li { margin-top: var(--s-2); }

/* ------------------------------------------------------------------------- *
 * Customer reviews — static, no database.
 *
 * The site stores nothing: there is no backend to accept a submission, so a
 * visitor's words reach the owner through WhatsApp and are published here by
 * hand, as markup, only with that customer's permission. The empty state says
 * so plainly rather than filling the space with sample text.
 * ------------------------------------------------------------------------- */
.hs-reviews__policy { max-width: 68ch; color: var(--fg-muted); }
.hs-reviews__list {
  display: grid; gap: var(--s-4); margin-block: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.hs-reviews__empty {
  grid-column: 1 / -1;
  padding: var(--s-6);
  border: 1px dashed var(--line-control); border-radius: var(--r-2);
  background: var(--bg-subtle); color: var(--fg-muted); text-align: center;
}
.hs-review {
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg-subtle);
}
.hs-review blockquote { margin: 0; }
.hs-review p { margin: 0; color: var(--fg-soft); }
.hs-review footer {
  margin-top: var(--s-4); font-size: var(--t--1); color: var(--fg-muted);
}
.hs-review cite { font-style: normal; font-weight: 600; color: var(--fg); }
.hs-reviews__cta {
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}
.hs-reviews__cta h3 { margin-bottom: var(--s-3); }

/* ========================================================================= *
 * 14c. INNER PAGES: cards, forms, contact
 * ========================================================================= */
.hs-page { padding: calc(var(--h) + var(--s-8)) 0 var(--s-11); }
.hs-page__head { max-width: 62ch; margin-bottom: var(--s-8); }
.hs-page__head h1 { margin-bottom: var(--s-4); }
.hs-page__head .lead { margin-bottom: 0; }

.hs-card {
  padding: var(--s-6);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
}
.hs-card + .hs-card { margin-top: var(--s-4); }
.hs-card h2 { margin: 0 0 var(--s-4); font-size: var(--t-2); }
.hs-card__note { font-size: var(--t--1); color: var(--fg-muted); }
.hs-card__note--tight { margin-bottom: 0; margin-top: var(--s-4); }
.hs-card--muted { background: var(--bg-subtle); }
.hs-card--muted p { margin-bottom: 0; font-size: var(--t--1); color: var(--fg-muted); }

/* --- empty / error state --- */
.hs-empty {
  max-width: 56ch;
  padding-block: var(--s-6) var(--s-10);
}
.hs-empty__code {
  margin: 0 0 var(--s-3);
  font-size: var(--t-2);
  font-weight: 680;
  letter-spacing: .18em;
  /* 27px/680 counts as large text, so the bar is 3:1 — --blue-300 gave 2.20:1
     in light mode. --blue-500 clears it without losing the tint. */
  color: var(--blue-500);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-empty__code { color: var(--blue-300); }
}
:root[data-theme="dark"] .hs-empty__code { color: var(--blue-300); }
.hs-empty h1 { margin-bottom: var(--s-4); }
.hs-empty .lead { color: var(--fg-muted); }
.hs-empty__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7);
}

.hs-contact { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .hs-contact { grid-template-columns: 1.25fr .75fr; align-items: start; gap: var(--s-6); }
}

/* --- form controls --- */
.hs-field { margin-bottom: var(--s-5); }
.hs-field label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--t--1); font-weight: 600; color: var(--fg);
}
/* --amber-500 is a border/accent shade: 3.19:1 as text, below the 4.5:1 the
   required-field marker needs. --amber-700 carries the same meaning at 5.02:1. */
.hs-req { color: var(--amber-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-req { color: #fbbf24; }
}
.hs-field input,
.hs-field select,
.hs-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-0);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-control);
  border-radius: var(--r-2);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.hs-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.hs-field select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.hs-field :is(input, select, textarea):hover { border-color: var(--ink-300); }
.hs-field :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.hs-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .16);
}
.hs-field ::placeholder { color: var(--placeholder); }
.hs-hint { margin: var(--s-2) 0 0; font-size: var(--t--2); color: var(--fg-muted); }
.hs-error {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t--1); font-weight: 550;
  color: #7f1d1d; background: #fef2f2;
  border: 1px solid #fecaca; border-radius: var(--r-2);
}
/* Never signal state with colour alone (WCAG 1.4.1). */
.hs-error::before { content: "⚠ "; }

/* --- direct channels --- */
.hs-channels { list-style: none; margin: 0; padding: 0; }
.hs-channels li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-3);
}
.hs-channels li + li { border-top: 1px solid var(--line-soft); }
.hs-channels__label { font-size: var(--t--1); color: var(--fg-muted); }
.hs-channels__value {
  font-size: var(--t-1); font-weight: 650; letter-spacing: -.01em;
  text-decoration: none !important;
}
.hs-card address { margin-bottom: var(--s-4); line-height: 1.7; }

/* ========================================================================= *
 * 15. ACCESSIBILITY, MOTION, PRINT
 * ========================================================================= */
.hs-skip-link {
  position: absolute; left: var(--s-4); top: -120px; z-index: 2000;
  padding: var(--s-3) var(--s-5);
  background: var(--blue-700); color: #fff; font-weight: 600;
  border-radius: 0 0 var(--r-2) var(--r-2); text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.hs-skip-link:focus-visible { top: 0; color: #fff; }

:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* Target size. WCAG 2.2 AA (2.5.8) requires 24x24 CSS px; standalone
   controls here clear 44x44. Inline links inside prose are exempt under the
   "inline" exception and are deliberately left at their text size so reading
   rhythm is not wrecked. */
/* NB: set min-height only — never `display` — because .navbar-toggler is
   display:none above 992px and a blanket display rule here would re-show it. */
.nav-link, .btn, .navbar-toggler, #brand-nav a, .whatsapp-button { min-height: 44px; }
.nav-link, #brand-nav a { display: inline-flex; align-items: center; }
.w3l-footer-29-main li > a,
.footer-list-29 a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.w3l-footer-29-main li { margin-bottom: 0; }
.footer-contact-list li { min-height: 44px; align-items: center; }
.breadcrumb-item a {
  display: inline-flex; align-items: center;
  min-height: 24px; padding-block: var(--s-1);
}
/* Content link lists — the district, brand and "ilgili rehberler" lists that
   carry most of the internal linking. Measured at 375px these anchors were
   21px tall: under the 24px minimum, and stacked so tightly that neighbouring
   rows were easy to hit by mistake.

   `:only-child` is the whole point of the selector. An anchor that IS the
   list item is a navigation target and must meet 2.5.8; an anchor sitting in
   a sentence inside an <li> keeps the inline exception and must stay at text
   size, or the line rhythm of every prose list breaks. Scoped away from the
   header, footer and breadcrumb, which set their own sizes above. */
:where(main, .icerik-yeri, article) li > a:only-child {
  display: inline-block;
  min-height: 24px;
  padding-block: var(--s-1);
}
@media (max-width: 575.98px) {
  /* Thumb input: go past the AA floor to the 44px AAA figure, and open the
     gap between rows so the targets do not merely meet the size rule while
     still sitting flush against each other. */
  :where(main, .icerik-yeri, article) li > a:only-child {
    min-height: 44px;
    display: flex; align-items: center;
    padding-block: var(--s-2);
  }
  :where(main, .icerik-yeri, article) li:has(> a:only-child) + li:has(> a:only-child) {
    margin-top: var(--s-1);
  }
}

.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hs-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-contrast: more) {
  :root { --line: var(--ink-400); --fg-soft: var(--ink-800); --fg-muted: var(--ink-700); }
}

/* ------------------------------------------------------------------------- *
 * Long-form guide pages: diagram figures, wide tables, inline CTA rows.
 * ------------------------------------------------------------------------- */
.hs-figure {
  margin: var(--s-7) 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--bg-subtle);
}
.hs-figure img {
  display: block; width: 100%; height: auto;
  max-width: 46rem; margin-inline: auto;
}
.hs-figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--t--1); color: var(--fg-muted);
  text-align: center; max-width: 60ch; margin-inline: auto;
}

/* A wide table must scroll inside its own box — the page itself must never
   scroll sideways. tabindex+role make the scroll box keyboard reachable, which
   SC 2.1.1 requires once a region scrolls. */
.hs-table-wrap { overflow-x: auto; margin: var(--s-6) 0; }
.hs-table-wrap table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.hs-table-wrap caption {
  caption-side: top; text-align: left;
  font-size: var(--t--1); color: var(--fg-muted); padding-bottom: var(--s-3);
}
.hs-table-wrap :is(th, td) {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.hs-table-wrap thead th {
  border-bottom: 2px solid var(--line-control);
  font-size: var(--t--1); letter-spacing: .01em;
}
.hs-table-wrap tbody th { font-weight: 600; color: var(--fg); }
.hs-table-wrap tbody tr:last-child :is(th, td) { border-bottom: 0; }

.hs-cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}
.hs-cta-row .btn { flex: 0 1 auto; }

/* ========================================================================= *
 * 16. DARK-MODE RESCUE FOR LEGACY INLINE CSS
 *
 * 4,628 pages still carry the theme's original <style> blocks in <head>. They
 * load before this file, so for equal specificity this file already wins — but
 * a handful of their selectors are MORE specific and pin colours to literal
 * black, which the design tokens can then no longer reach:
 *
 *   nav a                              { color: black }   ~3,752 pages
 *   #linkler a                         { color: black }   ~3,734 pages
 *   .icerik-yeri table a               { color: #000 }    ~3,742 pages
 *   .breadcrumb-item[aria-current]     { color: #000000 } ~3,454 pages
 *   .icerik-yeri td                    { border: … #000 } ~3,742 pages
 *   .mobile-nav-menu .menu-content     { background: #f7f7f7 }  730 pages
 *   #menu-container                    { background: white }  3,019 pages
 *
 * In light mode that is fine. On a device set to dark it is black text on
 * #080d14 — a contrast ratio of 1.08, i.e. invisible. These overrides hand the
 * colour back to the tokens in dark mode only, so light mode is untouched.
 * !important is needed because #linkler a carries an id and cannot otherwise
 * be outranked without editing 95 distinct inline blocks across 4,628 files.
 * ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(nav a, #linkler a, .icerik-yeri table a),
  :root:not([data-theme="light"]) .breadcrumb-item a { color: var(--accent) !important; }
  :root:not([data-theme="light"]) .breadcrumb-item[aria-current="page"] { color: var(--fg-muted) !important; }
  /* --ink-700, not --line: these are data-table grid lines, and --line on the
     dark background reads at 1.34 — the price tables lose their structure. */
  :root:not([data-theme="light"]) :is(.icerik-yeri td, .icerik-yeri th, .icerik-yeri table) { border-color: var(--ink-700) !important; }
  :root:not([data-theme="light"]) .mobile-nav-menu .menu-content { background-color: var(--bg-subtle) !important; }
  /* The line above darkened the panel but left `.mobile-nav-menu li a { color:
     #333 }` alone, so the links sat at 1.43:1 on 540 pages — darkening a
     surface without its foreground is worse than leaving both alone. The panel
     is a <div> outside <main>, so neither `nav a` above nor `main a` reaches it. */
  :root:not([data-theme="light"]) .mobile-nav-menu a { color: var(--accent) !important; }
  /* A hard-white bar carrying nav links: in dark mode the links resolve to
     --accent and land on it at 2.2:1. Light mode keeps the white. */
  :root:not([data-theme="light"]) #menu-container { background-color: var(--bg) !important; }
  :root:not([data-theme="light"]) .icerik-yeri table a:hover { color: var(--accent-hi) !important; }
}
:root[data-theme="dark"] :is(nav a, #linkler a, .icerik-yeri table a),
:root[data-theme="dark"] .breadcrumb-item a { color: var(--accent) !important; }
:root[data-theme="dark"] .breadcrumb-item[aria-current="page"] { color: var(--fg-muted) !important; }
:root[data-theme="dark"] :is(.icerik-yeri td, .icerik-yeri th, .icerik-yeri table) { border-color: var(--ink-700) !important; }
:root[data-theme="dark"] .mobile-nav-menu .menu-content { background-color: var(--bg-subtle) !important; }
:root[data-theme="dark"] .mobile-nav-menu a { color: var(--accent) !important; }
:root[data-theme="dark"] #menu-container { background-color: var(--bg) !important; }
:root[data-theme="dark"] .icerik-yeri table a:hover { color: var(--accent-hi) !important; }

@media print {
  #site-header, .fixed-side-menu, body > a[href^="tel:"],
  .w3l-footer-29-main, .w3l-copyright, .navbar-toggler, #brand-nav { display: none !important; }
  main.icerik-yeri { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ========================================================================= *
 * 16. RESMÎ KAYIT SORGULAMA KARTI
 * Kullanıcıyı e-Devlet'teki SERBİS sorgusuna götüren yönlendirme kartı.
 * Kart bir "kayıtlı firma" iddiası TAŞIMAZ — doğrulama aracı sunar; iddia
 * ancak sahibin gerçek kayıt bilgisiyle eklenebilir (bkz. servis-sorgulama).
 * Renkler yalnızca semantik değişkenlerden gelir; koyu temada zemin ve
 * metin çifti değişkenlerle birlikte döner, ayrı bir kurtarma kuralı gerekmez.
 * ========================================================================= */
.hs-sorgu {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  margin-block: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-3);
}
.hs-sorgu__ikon {
  flex: none; width: 44px; height: 44px; padding: 9px;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.hs-sorgu__icerik { flex: 1 1 26ch; min-width: 0; }
.hs-sorgu__kurum { margin: 0; font-weight: 680; font-size: var(--t-0); color: var(--fg); }
.hs-sorgu__metin { margin: var(--s-1) 0 0; font-size: var(--t--1); color: var(--fg-soft); }
.hs-sorgu > .btn { flex: none; }
@media (max-width: 575.98px) {
  .hs-sorgu > .btn { flex: 1 1 100%; text-align: center; }
}

/* ========================================================================= *
 * 17. GÜVEN ŞERİDİ + DÖNÜŞÜM
 * Beş taahhüt (fatura, garanti, uzman, aynı gün, resmî kayıt) + arama ve
 * WhatsApp CTA'sı. Taahhüt metinleri sahibin beyanıdır; sertifika/istatistik
 * içermez. Yalnız semantik değişkenler — koyu tema çifti kendiliğinden.
 * ========================================================================= */
.hs-guven__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block: var(--s-6);
}
.hs-guven__oge {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.hs-guven__oge svg {
  width: 26px; height: 26px; color: var(--accent);
}
.hs-guven__oge b { font-size: var(--t-0); color: var(--fg); }
.hs-guven__oge span { font-size: var(--t--1); color: var(--fg-soft); }
.hs-guven__oge a { color: inherit; }
.hs-guven__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-5);
}
.hs-guven__cta .btn { min-height: 44px; }
.hs-guven__not {
  flex: 1 1 30ch; margin: 0;
  font-size: var(--t--1); color: var(--fg-soft);
}
/* WhatsApp'ın koyu kurumsal yeşili: beyaz metinle ~7:1, iki temada da yeter.
   Parlak --wa (#25d366) metin zemini olarak 2:1'de kalır — burada kullanılmaz. */
.btn--wa { background: #075e54; color: #fff; }
.btn--wa:hover, .btn--wa:focus-visible { background: #0a6e62; color: #fff; }
@media (max-width: 575.98px) {
  .hs-guven__cta .btn { flex: 1 1 100%; text-align: center; }
}