/* ==========================================================================
   TeknikServis35 — design tokens + component styles
   Ported from the Claude Design handoff (teknikservis35 design system).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

:root {
  /* Base palette: Indigo (primary) */
  --indigo-50:#F4F3FE;--indigo-100:#E9E7FD;--indigo-200:#D3CFFB;--indigo-300:#A9A3F7;
  --indigo-400:#8C84F2;--indigo-500:#7A72EE;--indigo-600:#5B54D6;--indigo-700:#4740AC;
  --indigo-800:#2E2B72;--indigo-900:#171B3C;

  /* Base palette: Peach (secondary / warm surfaces) */
  --peach-50:#FDF1EA;--peach-100:#FCE6DA;--peach-200:#F9CDB4;--peach-300:#F9B79A;
  --peach-400:#F69B78;--peach-500:#F4845F;--peach-600:#DE6842;--peach-700:#B04E2E;

  /* Base palette: Sky (tertiary accent) */
  --sky-100:#DFF1FC;--sky-300:#A7DCF6;--sky-500:#6FC3F0;--sky-700:#2E8CC0;

  /* Neutrals */
  --ink-900:#12142B;--ink-800:#23264A;--ink-700:#3A3D5C;--ink-600:#54577A;
  --ink-500:#6A6D88;--ink-400:#8A8DA4;--ink-300:#A7A9BC;--ink-200:#D8D9E3;
  --ink-100:#ECEDF3;--ink-50:#F7F7FB;--white:#FFFFFF;

  /* Semantic status */
  --green-500:#2FA36B;--green-100:#DCF2E7;
  --amber-500:#E6A700;--amber-100:#FBEFCF;
  --red-500:#D8453F;--red-100:#FBE0DF;

  /* Semantic: text */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-600);
  --text-muted:var(--ink-400);
  --text-on-dark:var(--white);
  --text-on-dark-muted:#B9BBD2;
  --text-link:var(--indigo-600);
  --text-link-hover:var(--indigo-700);

  /* Semantic: surfaces */
  --surface-page:var(--white);
  --surface-subtle:var(--ink-50);
  --surface-card:var(--white);
  --surface-lavender:var(--indigo-50);
  --surface-lavender-strong:var(--indigo-100);
  --surface-dark:var(--indigo-900);
  --surface-inverse-card:#1E2246;

  /* Semantic: lines */
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-brand:var(--indigo-200);
  --border-on-dark:rgba(255,255,255,.12);

  /* Semantic: interactive */
  --action-primary:var(--indigo-900);
  --action-primary-hover:var(--indigo-800);
  --action-secondary:var(--indigo-600);
  --action-secondary-hover:var(--indigo-700);
  --focus-ring:var(--indigo-400);
  --whatsapp:#25D366;
  --whatsapp-hover:#1DA851;

  --gradient-hero:linear-gradient(160deg,#F7F6FE 0%,#FFFFFF 55%,#FDF3EE 100%);

  /* Shadows (indigo-tinted) */
  --shadow-xs:0 1px 2px rgba(23,27,60,.06);
  --shadow-sm:0 2px 8px rgba(23,27,60,.06);
  --shadow-md:0 10px 24px -8px rgba(23,27,60,.12);
  --shadow-lg:0 24px 48px -20px rgba(23,27,60,.18);
  --blur-glass:blur(14px);

  /* Radius */
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;
  --radius-xl:28px;--radius-2xl:40px;--radius-pill:999px;

  /* Spacing / layout */
  --gap-card:24px;--pad-card:28px;--pad-card-lg:40px;
  --section-y:96px;--section-y-tight:64px;
  --container-max:1200px;--container-pad:32px;--measure:62ch;

  /* Motion */
  --duration-fast:120ms;--duration-base:200ms;--duration-slow:360ms;
  --ease-standard:cubic-bezier(.2,.7,.3,1);--ease-out:cubic-bezier(0,.6,.3,1);

  /* Type */
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

  --text-display-lh:1.1;
  --text-h1-lh:1.14;--text-h1-ls:-1.2px;
  --text-h2-lh:1.2;--text-h2-ls:-0.8px;--text-h2-size:34px;--text-h2-weight:800;
  --text-h3-lh:1.28;--text-h3-ls:-0.4px;--text-h3-size:24px;--text-h3-weight:700;
  --text-h4-ls:-0.2px;--text-h4-size:19px;--text-h4-weight:700;
  --text-lead-size:17px;--text-lead-lh:1.65;
  --text-body-size:15px;--text-body-lh:1.7;
  --text-small-size:13.5px;--text-small-lh:1.6;
  --text-caption-size:12px;
  --text-eyebrow-size:12px;--text-eyebrow-ls:0.14em;--text-eyebrow-weight:700;
  --text-button-size:14.5px;--text-button-ls:-0.1px;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-strong)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
button{font:inherit}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 var(--container-pad)}
.section{padding:var(--section-y) 0}
.section-tight{padding:var(--section-y-tight) 0}
.on-dark{background:var(--surface-dark)}
.on-lavender{background:var(--surface-lavender)}
.on-subtle{background:var(--surface-subtle)}

/* ---- Scroll reveal / motion ---- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:var(--rd,0ms)}
[data-reveal].is-in{opacity:1;transform:none}
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-parallax]{transform:none}
  .marquee-track{animation:none !important}
}

/* ---- Decorative background shapes ---- */
.section-decor{position:relative;overflow:clip}
.decor-shape{position:absolute;pointer-events:none}

/* ---- Marquee ---- */
.marquee{background:var(--surface-dark);overflow:hidden;padding:10px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-item{display:inline-flex;align-items:center;gap:24px;padding-right:24px;font-size:var(--text-caption-size);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-muted);white-space:nowrap}
.marquee-dot{width:3px;height:3px;border-radius:999px;background:var(--peach-500)}

/* ---- Header ---- */
.site-header-wrap{position:sticky;top:0;z-index:40}
.site-header{background:rgba(255,255,255,.82);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
.site-header-inner{max-width:1600px;margin:0 auto;padding:14px var(--container-pad);display:flex;align-items:center;gap:36px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:34px;height:34px;border-radius:var(--radius-md);background:var(--surface-lavender-strong);color:var(--indigo-600);display:inline-flex;align-items:center;justify-content:center}
.brand-word{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:19px;letter-spacing:-.5px;color:var(--text-strong)}
.brand-word b{color:var(--indigo-600);font-weight:var(--weight-extrabold)}

.desknav{display:flex;align-items:center;gap:28px}
.navlink{font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--text-body);white-space:nowrap}
.navlink:hover{color:var(--indigo-600)}
.navlink.is-active{color:var(--indigo-600)}

.navmenu{position:relative;display:inline-flex;padding:10px 0;margin:-10px 0}
.navmenu-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--text-body)}
.navmenu-btn.is-active{color:var(--indigo-600)}
.navmenu-btn .chev{display:inline-flex;transition:transform var(--duration-base) var(--ease-standard)}
.navmenu.is-open .navmenu-btn .chev{transform:rotate(180deg)}
.navmenu-panel{position:absolute;top:calc(100% + 14px);left:-20px;width:460px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;display:none;grid-template-columns:1fr 1fr;gap:4px;z-index:10}
.navmenu.is-open .navmenu-panel{display:grid}
.navmenu-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);color:var(--text-strong)}
.navmenu-item:hover{background:var(--surface-lavender);color:var(--text-strong)}
.navmenu-item-icon{width:32px;height:32px;flex:none;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.navmenu-item-name{font-size:var(--text-small-size);font-weight:var(--weight-semibold);line-height:1.3}

.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-caption-size);font-weight:var(--weight-semibold);color:var(--text-body);white-space:nowrap}
.status-dot{width:7px;height:7px;border-radius:999px;background:var(--green-500)}
.status.is-closed .status-dot{background:var(--peach-500)}

.header-cta{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--indigo-900);border-radius:var(--radius-pill);padding:10px 18px;min-height:44px;font-size:var(--text-button-size);font-weight:var(--weight-semibold);letter-spacing:var(--text-button-ls);color:var(--indigo-900);white-space:nowrap;flex:none;transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.header-cta:hover{background:var(--indigo-900);color:var(--white)}

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-strong);cursor:pointer}

.drawer{border-top:1px solid var(--border-subtle);background:var(--surface-card);padding:16px var(--container-pad) 24px;max-height:70svh;overflow-y:auto;display:none}
.drawer.is-open{display:block}
.drawer-links{display:grid;gap:2px;margin-bottom:18px}
.drawer-links a{padding:13px 4px;font-size:var(--text-body-size);font-weight:var(--weight-semibold);color:var(--text-body)}
.drawer-links a.is-active{color:var(--indigo-600)}
.drawer-eyebrow{margin:0 0 10px;font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-ls);text-transform:uppercase;color:var(--text-muted)}
.drawer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px}

@media (max-width:1023px){
  .desknav{display:none}
  .burger{display:inline-flex}
}
@media (max-width:640px){
  .site-header-inner{gap:14px}
}
@media (max-width:560px){
  .status,.cta-label{display:none}
}

/* ---- Buttons / badges / chips ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-button-size);letter-spacing:var(--text-button-ls);white-space:nowrap;cursor:pointer;border:0;transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.btn-lg{padding:15px 26px;min-height:52px}
.btn-md{padding:12px 22px;min-height:44px}
.btn-primary{background:var(--action-primary);color:var(--white)}
.btn-primary:hover{background:var(--action-primary-hover);color:var(--white)}
.btn-secondary{background:transparent;color:var(--white);border:1.5px solid var(--border-on-dark)}
.btn-secondary:hover{background:rgba(255,255,255,.08);color:var(--white)}
.btn-whatsapp{background:var(--whatsapp);color:var(--white)}
.btn-whatsapp:hover{background:var(--whatsapp-hover);color:var(--white)}
.btn-whatsapp svg{flex:none;display:block}

.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);font-size:var(--text-small-size);font-weight:var(--weight-semibold)}
.badge-accent{background:var(--peach-100);color:var(--peach-700)}
.badge-brand{background:var(--surface-lavender-strong);color:var(--indigo-700)}
.badge-brand.on-dark-badge{background:rgba(255,255,255,.12);color:var(--white)}
.badge-success{background:var(--green-100);color:var(--green-500)}
.badge-warning{background:var(--peach-100);color:var(--peach-700)}
.badge-neutral{background:var(--ink-100);color:var(--ink-600)}
.badge.uppercase{text-transform:uppercase;letter-spacing:.06em}

.icon-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}
.icon-chip-sm{width:36px;height:36px}
.icon-chip-md{width:48px;height:48px}
.icon-chip-lavender{background:var(--surface-lavender-strong);color:var(--indigo-600)}

/* ---- Section heading ---- */
.section-heading-eyebrow{margin:0 0 12px;font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-ls);text-transform:uppercase;color:var(--indigo-600)}
.section-heading.on-dark .section-heading-eyebrow{color:var(--peach-300)}
.section-heading-title{margin:0;font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls);line-height:1.2;color:var(--text-strong)}
.section-heading.on-dark .section-heading-title{color:var(--white)}
.section-heading-desc{margin:14px 0 0;font-size:var(--text-lead-size);line-height:var(--text-lead-lh);color:var(--text-body);max-width:var(--measure)}
.section-heading.on-dark .section-heading-desc{color:var(--text-on-dark-muted)}

/* ---- Hero ---- */
.hero{position:relative;background:var(--gradient-hero);overflow:clip}
.hero-home{min-height:min(1024px,100svh);display:flex;align-items:center;padding:64px 0}
.hero-inner{position:relative;width:100%;max-width:1600px;margin:0 auto;padding:0 var(--container-pad);display:grid;gap:72px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:center}
.hero-copy{max-width:660px}
.hero-title{margin:20px 0 18px;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:var(--text-display-lh);letter-spacing:-1.8px;color:var(--text-strong)}
.hero-lead{margin:0 0 40px;font-size:var(--text-lead-size);line-height:var(--text-lead-lh);color:var(--text-body);max-width:var(--measure)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-media{position:relative;justify-self:end;width:100%;max-width:620px}
.hero-media-frame{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;max-height:760px}
.hero-media-badge{position:absolute;left:-16px;bottom:40px;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:16px 20px;display:flex;align-items:center;gap:14px}
.hero-media-badge p{margin:0}
.hero-media-badge .t{font-size:var(--text-small-size);font-weight:var(--weight-bold);color:var(--text-strong)}
.hero-media-badge .s{font-size:var(--text-caption-size);color:var(--text-muted);margin-top:2px}

.hero-page{padding:56px 0 44px}
.hero-page .wrap{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center}
.crumb{margin:0 0 16px;font-size:var(--text-caption-size);color:var(--text-muted)}
.hero-h1{margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,5.6vw,44px);line-height:var(--text-h1-lh);letter-spacing:var(--text-h1-ls);color:var(--text-strong)}
.hero-bullets{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px}
.hero-bullet{display:flex;align-items:center;gap:8px;font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--text-body)}
.hero-bullet-dot{width:20px;height:20px;flex:none;border-radius:999px;background:var(--green-100);color:var(--green-500);display:inline-flex;align-items:center;justify-content:center}
.hero-device-media{justify-self:end;width:100%;max-width:520px;aspect-ratio:16/11;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg)}

.hero-simple{padding:64px 0 48px}
.hero-simple .wrap{position:relative}
.hero-simple .hero-h1{margin:18px 0 16px}

/* ---- Image slot placeholder ---- */
.img-slot{position:relative;width:100%;height:100%;background:var(--surface-subtle);display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img-slot img.fit-contain{object-fit:contain;object-position:bottom}
.hero-media-frame.is-cutout{background:transparent;box-shadow:none;border-radius:0}
.hero-media-frame.is-cutout .img-slot{background:transparent}
.hero-media-frame.is-cutout .img-slot::before{display:none}
.img-slot::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--indigo-200) 1.4px,transparent 1.4px);background-size:16px 16px;opacity:.5}
.img-slot-cap{position:relative;max-width:80%;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-400);font-weight:var(--weight-semibold)}
.img-slot-icon{position:relative;width:40px;height:40px;margin:0 auto 10px;border-radius:999px;background:var(--surface-card);color:var(--indigo-400);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs)}

/* ---- Feature strip (on dark) ---- */
.feature-strip{background:var(--surface-dark);padding:36px 0}
.feature-strip .wrap{max-width:1024px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.feature-item{display:flex;gap:16px;align-items:center}
.feature-icon{width:46px;height:46px;flex:none;border-radius:var(--radius-md);background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center}
.feature-title{margin:0 0 3px;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--white)}
.feature-desc{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-on-dark-muted)}

/* ---- Device / other-device cards ---- */
.card-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--gap-card)}
.device-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);color:var(--text-strong);transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.device-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:var(--text-strong)}
.device-card-media{aspect-ratio:16/10;background:var(--surface-subtle)}
.device-card-body{padding:var(--pad-card);display:flex;flex-direction:column;gap:12px;flex:1}
.device-card-head{display:flex;align-items:center;gap:12px}
.device-card-chip{width:38px;height:38px;flex:none;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.device-card-title{margin:0;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--text-strong)}
.device-card-desc{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-body)}
.device-card-more{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:8px;font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--indigo-600)}

.chip-tone-0{background:var(--indigo-100);color:var(--indigo-700)}
.chip-tone-1{background:var(--peach-100);color:var(--peach-700)}
.chip-tone-2{background:var(--sky-100);color:var(--sky-700)}

/* ---- Process steps ---- */
.step-grid{margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap-card)}
.step-card{background:var(--surface-inverse-card);border:1px solid var(--border-on-dark);border-radius:var(--radius-lg);padding:var(--pad-card)}
.step-card-no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--peach-500);color:var(--white);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:15px}
.step-card-title{margin:16px 0 4px;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--white)}
.step-card-time{margin:0 0 10px;font-size:var(--text-caption-size);font-weight:var(--weight-semibold);color:var(--peach-300)}
.step-card-short{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-on-dark-muted)}
.step-cta-card{border:1px solid var(--border-on-dark);border-radius:var(--radius-lg);padding:var(--pad-card);display:flex;flex-direction:column;justify-content:center;gap:16px}
.step-cta-card h3{color:var(--white)}
.step-cta-card p{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-on-dark-muted)}

/* ---- Reasons ---- */
.reasons-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap-card)}
.reason-card{background:var(--surface-card);border-radius:var(--radius-lg);padding:var(--pad-card);box-shadow:var(--shadow-sm);border-top:4px solid var(--indigo-600)}
.reason-stat{margin:0;font-family:var(--font-display);font-size:clamp(44px,5vw,60px);font-weight:var(--weight-extrabold);line-height:1;letter-spacing:-2px}
.reason-title{margin:14px 0 8px;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls)}
.reason-text{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-body)}

/* ---- District band ---- */
.district-band{margin-top:36px;background:var(--surface-dark);border-radius:var(--radius-xl);padding:var(--pad-card-lg);position:relative;overflow:clip}
.district-band-text{position:relative;margin:0 0 24px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-on-dark-muted);max-width:var(--measure)}
.district-chips{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.district-chip{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-small-size);font-weight:var(--weight-semibold);padding:9px 16px 9px 11px;border-radius:var(--radius-pill)}
.district-chip-0{background:rgba(122,114,238,.20);color:var(--indigo-300)}
.district-chip-1{background:rgba(244,132,95,.20);color:var(--peach-300)}
.district-chip-2{background:rgba(111,195,240,.18);color:var(--sky-300)}
.district-list-light{display:flex;flex-wrap:wrap;gap:8px}
.district-pill-light{background:var(--surface-card);color:var(--text-strong);font-size:var(--text-small-size);font-weight:var(--weight-semibold);padding:9px 16px;border-radius:var(--radius-pill)}

/* ---- Accordion / FAQ ---- */
.accordion{display:grid;gap:10px}
.accordion-item{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card)}
.accordion-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:0;padding:18px 20px;cursor:pointer;font-size:var(--text-body-size);font-weight:var(--weight-bold);color:var(--text-strong)}
.accordion-q .chev{flex:none;color:var(--indigo-600);transition:transform var(--duration-base) var(--ease-standard)}
.accordion-item.is-open .accordion-q .chev{transform:rotate(180deg)}
.accordion-a{display:none;padding:0 20px 20px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body)}
.accordion-item.is-open .accordion-a{display:block}
.faq-more{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1.5px solid var(--border-brand);border-radius:var(--radius-lg);padding:24px 28px;color:var(--text-strong);transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.faq-more:hover{background:var(--surface-lavender);border-color:var(--indigo-400);color:var(--text-strong)}
.faq-more-title{display:block;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--text-strong)}
.faq-more-sub{display:block;margin-top:4px;font-size:var(--text-small-size);color:var(--text-body)}
.faq-more-arrow{flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-lavender-strong);color:var(--indigo-600);display:inline-flex;align-items:center;justify-content:center}

/* ---- SEO link list (about section) ---- */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:start}
.about-kicker{border-top:3px solid var(--indigo-600);padding-top:24px}
.about-eyebrow{margin:0 0 14px;font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-ls);text-transform:uppercase;color:var(--indigo-600)}
.about-title{margin:0;font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.15;letter-spacing:-1px;color:var(--text-strong)}
.about-copy{display:grid;gap:18px}
.about-copy p:first-child{font-size:var(--text-lead-size);line-height:var(--text-lead-lh);color:var(--text-strong)}
.about-copy p:last-child{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body)}
.seo-list{margin-top:64px}
.seo-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--ink-200)}
.seo-list-title{margin:0;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--text-strong)}
.seo-list-hint{margin:0;font-size:var(--text-caption-size);color:var(--text-muted)}
.seo-row{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:1px solid var(--border-subtle);color:var(--text-strong);transition:padding var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.seo-row:hover{padding-left:12px;color:var(--indigo-600)}
.seo-row-no{font-family:var(--font-display);font-size:13px;font-weight:var(--weight-extrabold);color:var(--indigo-400);min-width:26px}
.seo-row-name{flex:1;font-size:var(--text-body-size);font-weight:var(--weight-semibold)}
.seo-row-tag{font-size:var(--text-small-size);color:var(--text-muted)}

/* ---- Symptom / work-item cards (device pages) ---- */
.symptom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-card)}
.symptom-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--pad-card);box-shadow:var(--shadow-sm);display:grid;gap:12px;align-content:start}
.symptom-title{margin:0;font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);letter-spacing:var(--text-h4-ls);color:var(--text-strong)}
.symptom-copy{margin:0;font-size:var(--text-small-size);line-height:var(--text-small-lh);color:var(--text-body)}
.symptom-badges{display:flex;flex-wrap:wrap;gap:8px}

.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.work-item{display:flex;align-items:center;gap:12px;border-radius:var(--radius-md);padding:14px 16px}
.work-dot{width:32px;height:32px;flex:none;border-radius:999px;color:var(--white);display:inline-flex;align-items:center;justify-content:center}
.work-name{font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--text-strong)}
.work-tone-0{background:var(--indigo-50)}
.work-tone-0 .work-dot{background:var(--indigo-600)}
.work-tone-1{background:var(--peach-100)}
.work-tone-1 .work-dot{background:var(--peach-500)}
.work-tone-2{background:var(--sky-100)}
.work-tone-2 .work-dot{background:var(--sky-500)}

.price-panel{margin-top:56px;background:var(--surface-lavender);border-radius:var(--radius-xl);padding:var(--pad-card-lg)}
.price-panel h2{margin:0 0 14px;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:var(--text-h3-ls);color:var(--text-strong)}
.price-panel p{margin:0 0 14px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);max-width:var(--measure)}
.price-panel p:last-child{margin-bottom:0}

/* ---- Other-devices rail ---- */
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.rail-nav{display:flex;gap:10px}
.rail-btn{width:46px;height:46px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);color:var(--text-strong);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-base) var(--ease-standard)}
.rail-btn:hover{background:var(--surface-lavender)}
.rail{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--ink-200) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:999px}
.rail-card{scroll-snap-align:start;flex:none;width:300px}

/* ---- Süreç page: step navigator ---- */
.step-nav-list{display:grid;gap:10px}
.step-nav-btn{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 18px;min-height:60px;cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.step-nav-btn.is-active{background:var(--surface-lavender);border-color:transparent}
.step-nav-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:var(--radius-sm);background:var(--surface-subtle);color:var(--text-body);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:14px}
.step-nav-btn.is-active .step-nav-dot{background:var(--indigo-600);color:var(--white)}
.step-nav-copy{display:grid;gap:2px}
.step-nav-title{font-weight:var(--weight-bold);font-size:var(--text-body-size);color:var(--text-strong)}
.step-nav-time{font-size:var(--text-caption-size);color:var(--text-muted)}
.step-detail{background:var(--surface-lavender);border-radius:var(--radius-xl);padding:var(--pad-card-lg)}
.step-detail h2{margin:0 0 6px;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:var(--text-h3-ls);color:var(--text-strong)}
.step-detail-time{margin:0 0 24px;font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--indigo-600)}
.step-detail h3{margin:0 0 6px;font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-ls);text-transform:uppercase;color:var(--text-muted)}
.step-detail p{margin:0 0 20px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body)}
.step-detail p:last-of-type{margin-bottom:0}
.price-box,.warranty-grid{margin-top:26px}
.price-box{background:var(--surface-card);border-radius:var(--radius-md);padding:24px}
.warranty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.warranty-card{background:var(--surface-card);border-radius:var(--radius-md);padding:24px}
.warranty-card h3{margin:0 0 10px;font-size:var(--text-small-size);font-weight:var(--weight-bold)}
.warranty-card.good h3{color:var(--green-500)}
.warranty-card.bad h3{color:var(--red-500)}
.warranty-card ul{padding-left:18px;font-size:var(--text-small-size);line-height:1.9;color:var(--text-body);list-style:disc}
.step-panel{display:none}
.step-panel.is-active{display:block}

/* ---- SSS page ---- */
.sss-search{display:block;font-size:var(--text-small-size);font-weight:var(--weight-semibold);color:var(--text-strong);margin-bottom:8px}
.sss-input{width:100%;font-family:var(--font-sans);font-size:15px;padding:14px 16px;border:1px solid var(--border-default);border-radius:var(--radius-md);min-height:50px;background:var(--surface-card);color:var(--text-strong)}
.faq-groups{display:grid;gap:40px}
.faq-group-cat{margin:0 0 16px;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:var(--text-h3-ls);color:var(--text-strong)}
.no-results{background:var(--surface-lavender);border-radius:var(--radius-lg);padding:var(--pad-card)}
.no-results p{margin:0 0 16px;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body)}

/* ---- Bottom CTA band ---- */
.cta-band{position:relative;background:var(--sky-100);border-radius:var(--radius-xl);padding:var(--pad-card-lg);display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;overflow:clip}
.cta-band h2{margin:0 0 8px;font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls)}
.cta-band p{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--ink-700)}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Footer ---- */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark-muted);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-brand-mark{width:34px;height:34px;border-radius:var(--radius-md);background:rgba(255,255,255,.10);color:var(--white);display:inline-flex;align-items:center;justify-content:center}
.footer-brand-word{font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:19px;letter-spacing:-.5px;color:var(--white)}
.footer-brand-word b{color:var(--indigo-300)}
.footer-desc{margin:0 0 20px;font-size:var(--text-small-size);line-height:1.7}
.footer-contact{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--white);font-size:var(--text-body-size);font-weight:var(--weight-bold)}
.footer-contact.mail{color:var(--indigo-300);font-size:var(--text-small-size);font-weight:400}
.footer-contact-icon{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:rgba(255,255,255,.10);display:inline-flex;align-items:center;justify-content:center}
.footer-h{margin:0 0 16px;font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-ls);text-transform:uppercase;color:var(--white)}
.footer-hours{border:1px solid var(--border-on-dark);border-radius:var(--radius-md);padding:18px 20px;display:grid;gap:12px}
.footer-hours-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.footer-hours-row .day{font-size:var(--text-small-size);color:var(--text-on-dark-muted)}
.footer-hours-row .time{font-size:var(--text-body-size);font-weight:var(--weight-bold);color:var(--white);white-space:nowrap}
.footer-hours-row.emphasis .time{color:var(--peach-300)}
.footer-list{display:grid;gap:10px}
.footer-list a{color:var(--text-on-dark-muted);font-size:var(--text-small-size)}
.footer-list a:hover{color:var(--peach-300)}
.footer-districts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.footer-districts li{font-size:var(--text-small-size)}
.footer-bottom{max-width:var(--container-max);margin:36px auto 0;padding:24px var(--container-pad) 0;border-top:1px solid var(--border-on-dark)}
.footer-legal{margin:0 0 12px;font-size:var(--text-caption-size);line-height:1.8;color:#8E92B4;max-width:90ch}
.footer-bottom-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.footer-copy{margin:0;font-size:var(--text-caption-size);color:#8E92B4}
.to-top-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--border-on-dark);border-radius:var(--radius-pill);padding:11px 20px;min-height:44px;font-family:var(--font-sans);font-size:var(--text-button-size);font-weight:var(--weight-semibold);color:var(--white);cursor:pointer;transition:background var(--duration-base) var(--ease-standard)}
.to-top-btn:hover{background:rgba(255,255,255,.08)}

/* ---- Progress rail (desktop only) ---- */
.progress-rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.progress-pct{font-family:var(--font-display);font-size:11px;font-weight:var(--weight-extrabold);letter-spacing:.06em;color:var(--indigo-600)}
.progress-track{position:relative;width:3px;height:180px;border-radius:999px;background:var(--ink-200);overflow:hidden}
.progress-fill{position:absolute;inset:0 0 auto 0;height:0%;border-radius:999px;background:var(--indigo-600)}
.progress-dot{width:8px;height:8px;border-radius:999px;background:var(--peach-500)}
.progress-top{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);color:var(--indigo-600);box-shadow:var(--shadow-sm);cursor:pointer;pointer-events:auto;transition:background var(--duration-base) var(--ease-standard)}
.progress-top:hover{background:var(--surface-lavender)}
.progress-top.is-visible{display:inline-flex}
@media (max-width:1279px){.progress-rail{display:none}}

/* ---- Sticky CTA (bottom-right) ---- */
.sticky-cta{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end;padding-bottom:env(safe-area-inset-bottom)}
.sticky-call{display:inline-flex;align-items:center;gap:10px;background:var(--action-primary);color:var(--white);font-size:var(--text-button-size);font-weight:var(--weight-semibold);padding:14px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);min-height:52px;white-space:nowrap;transition:background var(--duration-base) var(--ease-standard)}
.sticky-call:hover{background:var(--action-primary-hover);color:var(--white)}
.sticky-wa{display:inline-flex;align-items:center;gap:10px;background:var(--whatsapp);color:var(--white);font-size:var(--text-button-size);font-weight:var(--weight-semibold);padding:14px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);min-height:52px;white-space:nowrap;transition:background var(--duration-base) var(--ease-standard)}
.sticky-wa:hover{background:var(--whatsapp-hover);color:var(--white)}
@media (max-width:640px){
  .sticky-cta{right:10px}
  .cta-label{display:none}
}

/* ---- Responsive tweaks ---- */
@media (max-width:640px){
  :root{--container-pad:20px;--section-y:64px;--section-y-tight:44px;--pad-card:22px;--pad-card-lg:28px}
  .navmenu-panel{width:calc(100vw - 40px);left:-14px}
}