/* Shared styles for every page of semihturna.com. Colours are tokens; dark mode only redefines them. */
/* This file keeps its name across redeploys, so every page links it as site.css?v=<content hash> (written by
   tools/build.mjs). Cloudflare stretches any short max-age on css to 4 h, so a new address per change is what
   makes browsers fetch a new design; because of that the file itself can be cached for a year (see _headers). */
/* Inter cut down to what the site can show: Basic Latin, all of Latin-1 (for whatever a visitor types) and common
   punctuation in one file, the Turkish letters outside Latin-1 in a 3 KB second one. Anything else uses the system font. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-turkish.v2.woff2) format("woff2");unicode-range:U+011E-011F,U+0130,U+015E-015F,U+20BA}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.v2.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+2009,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2191,U+2193,U+2212}

:root{
  --bg:#fcfcfb; --surface:#ffffff; --surface-2:#f4f4f1; --surface-3:#eeeeea;
  --text:#15151a; --muted:#5d5d68; --faint:#686873;
  --line:#e4e4df; --line-soft:#efefeb;
  --accent:#4338ca; --accent-strong:#3730a3; --accent-soft:#eef0fe; --on-accent:#ffffff;
  --ok:#15803d; --ok-soft:#e7f6ec; --ok-text:#166534;
  --warn-soft:#fdf1d3; --warn-text:#8a3b0a;
  --info-soft:#eef0fe; --info-text:#3730a3;
  --mark:#fde2e2;
  --band:linear-gradient(135deg,#f3f2ff 0%,#fcfcfb 55%,#f1f6ff 100%);
  --shadow:0 1px 2px rgba(16,16,24,.04), 0 8px 24px -12px rgba(16,16,24,.12);
  --shadow-lift:0 1px 2px rgba(16,16,24,.05), 0 18px 40px -18px rgba(16,16,24,.24);
  --header-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-bottom:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
@media (max-width:560px){.wrap{padding:0 16px}}
.visually-hidden,.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
[id]{scroll-margin-top:calc(var(--header-h) + 14px)}

/* header: brand, the four main links and the language switch; sticky on wide screens only, so phones keep the whole screen */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.header-bar{display:flex;align-items:center;gap:18px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.mark{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.brand-role{font-size:12.5px;color:var(--muted);font-weight:500}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{padding:8px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .15s,background .15s}
.site-nav a:hover{color:var(--text);background:var(--surface-2)}
.site-nav a[aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);border-radius:9px 9px 0 0}
.site-nav .nav-contact{background:var(--accent);color:var(--on-accent);margin-left:6px}
.site-nav .nav-contact:hover{background:var(--accent-strong);color:var(--on-accent)}
.site-nav .nav-contact[aria-current]{box-shadow:none;border-radius:9px;color:var(--on-accent)}
.lang-link{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;letter-spacing:.04em;background:var(--surface);text-decoration:none;color:var(--muted);flex:none}
.lang-link:hover{color:var(--text);border-color:var(--accent)}
@media (max-width:760px){
  .site-header{position:static}
  [id]{scroll-margin-top:12px}
  .header-bar{flex-wrap:wrap;gap:8px 12px;padding-top:10px;padding-bottom:8px;min-height:0}
  .lang-link{margin-left:auto}
  .site-nav{order:3;width:100%;margin:0;justify-content:space-between;gap:2px;border-top:1px solid var(--line-soft);padding-top:6px}
  .site-nav a{padding:8px 9px;font-size:14px}
  .site-nav .nav-contact{margin-left:0}
}
@media (max-width:350px){.site-nav a{padding:7px 6px;font-size:13px}.brand-role{font-size:11.5px}}

/* language suggestion for visitors whose browser language differs from the page */
.langbar{display:none;background:var(--accent-soft);color:var(--text);font-size:14px;border-bottom:1px solid var(--line-soft)}
.langbar.show{display:block}
.langbar .wrap{display:flex;gap:12px;align-items:center;justify-content:center;min-height:42px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.langbar a{color:var(--accent);font-weight:600}
.langbar button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;padding:4px 6px}

/* type and buttons */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
h1{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:650;margin:0 0 16px;max-width:22ch}
h2{font-size:clamp(23px,2.8vw,30px);line-height:1.2;letter-spacing:-.025em;font-weight:650;margin:0 0 14px;max-width:34ch}
h3{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:0 0 8px}
.lead{font-size:clamp(16px,1.7vw,18px);line-height:1.6;color:var(--muted);max-width:62ch;margin:0 0 22px}
.label{font-size:12.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.section-lead{color:var(--muted);max-width:66ch;margin:0 0 28px;font-size:16px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;text-decoration:none;font:inherit;font-size:15px;font-weight:650;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.tool .btn[disabled]{cursor:not-allowed}
.btn-block{width:100%;justify-content:center}
.btn .arw{transition:transform .15s}
.btn:hover .arw{transform:translateX(3px)}
.more{color:var(--accent);font-weight:650;text-decoration:none}
.more:hover{text-decoration:underline}

/* status labels: what a work is, never more than it is. Shape and text carry the meaning, colour only helps. */
.status{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.status::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
.status--kullanimda{background:var(--ok-soft);color:var(--ok-text)}
.status--kullanimda::before{border-radius:50%}
.status--demo{background:var(--warn-soft);color:var(--warn-text)}
.status--demo::before{border-radius:1px}
.status--cikti{background:var(--info-soft);color:var(--info-text)}
.status--cikti::before{transform:rotate(45deg);border-radius:1px}

/* sections */
main > section{padding:60px 0;border-top:1px solid var(--line-soft)}
@media (max-width:760px){main > section{padding:44px 0}}

/* thin top strip: a one-line pitch and a few short links, above the wide white menu */
.topbar{background:var(--text);color:color-mix(in srgb,var(--on-accent) 82%,transparent);font-size:12.5px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;min-height:36px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar-links{display:flex;flex:1;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-links a{color:inherit;text-decoration:none;font-weight:500;opacity:.88}
.topbar-links a:hover{opacity:1;text-decoration:underline}
.topbar-mail{white-space:nowrap;margin-left:auto}
.topbar .lang-link{border-color:color-mix(in srgb,var(--on-accent) 30%,transparent);background:transparent;color:inherit;opacity:1}
.topbar .lang-link:hover{border-color:var(--on-accent)}
@media (max-width:900px){.topbar-inner{justify-content:flex-end}}
@media (max-width:560px){.topbar-links a:not(.lang-link):not(.topbar-mail):not(.topbar-call):not(.topbar-wa){display:none}}
/* phone and WhatsApp as two small icons in the strip, on screens where the fixed pair is not shown */
.topbar-call,.topbar-wa{display:none}
@media (max-width:900px){
  .topbar-call,.topbar-wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -6px;opacity:.95}
  .topbar-call svg,.topbar-wa svg{width:20px;height:20px}
  .topbar-wa svg{fill:currentColor}
  .topbar-links{gap:6px 10px}
}

/* the title band: a short "you are here" heading instead of a long hero, so cards start high on the page */
.page-band{background:var(--surface-2);padding:22px 0 20px !important;border-top:0 !important;border-bottom:1px solid var(--line-soft)}
.page-band h1{font-size:clamp(22px,2.6vw,30px);margin:0 0 6px;max-width:none}
.band-lead{margin:0;color:var(--muted);font-size:15px;max-width:78ch}
@media (max-width:760px){.page-band{padding:16px 0 16px !important}}
/* the photo sits beside the title on the home page, so a visitor sees who they would be working with before
   anything else; it fits the band's existing height, so the cards do not move down */
.band-grid{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
.band-grid > :not(.band-portrait){grid-column:2}
.band-portrait{grid-column:1;grid-row:1/3;width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width:760px){
  .band-grid{column-gap:14px}
  .band-portrait{grid-row:1/2;width:64px;height:64px}
  .band-grid .band-lead{grid-column:1/-1;margin-top:8px}
}

/* the catalogue: a count and every control in one toolbar, then a grid of equal cards */
.catalog{background:var(--surface-2);padding:16px 0 52px !important;border-top:0 !important}
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:14px 18px;margin:0 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.catalog-count{margin:0;font-weight:700;font-size:16px;white-space:nowrap}
.catalog-count:focus{outline:none}
/* Search box, the three selects and the view switch share one height (--control-h), so they line up on one
   centre line; it grows to a comfortable touch size on phones (see the mobile block). */
.toolbar-controls{--control-h:40px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.work-search{display:flex;align-items:stretch;gap:0;height:var(--control-h);border:1px solid var(--line);border-radius:9px;background:var(--bg);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.work-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.work-search input{border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;line-height:1.2;padding:0 10px;height:100%;width:190px;max-width:40vw}
.work-search input:focus-visible{outline:none}
.work-search input::placeholder{color:var(--faint)}
.search-button{appearance:none;border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--muted);display:grid;place-items:center;width:var(--control-h);cursor:pointer}
.search-button:hover{color:var(--accent);background:var(--accent-soft)}
.control select{appearance:auto;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:14px;font-weight:500;padding:0 10px;height:var(--control-h);max-width:46vw}
.view-toggle{display:inline-flex;height:var(--control-h);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.view-toggle button{appearance:none;display:grid;place-items:center;width:38px;height:100%;border:0;background:var(--bg);color:var(--muted);cursor:pointer}
.view-toggle button + button{border-left:1px solid var(--line)}
.view-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.view-toggle svg{fill:currentColor}
.active-filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:10px 14px;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px}
.clear-button{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px;padding:6px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.clear-button:hover{border-color:var(--accent)}
.catalog-empty{padding:28px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
.catalog-empty p{margin:0 0 10px;color:var(--muted)}
.empty-title{font-weight:700;color:var(--text) !important;font-size:17px}
.catalog-empty .cta{margin-top:16px}
.catalog-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.status-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.legend-title{font-weight:650;color:var(--text)}
.legend-item{display:inline-flex;align-items:center;gap:6px}
.catalog-note{margin:0;font-size:13.5px;color:var(--muted);max-width:90ch}
/* Wide enough that the count and every control comfortably share one row: keep them there deterministically
   instead of leaving it to wrap on its own, which left the count stranded above an otherwise-empty row. */
@media (min-width:1000px){
  .catalog-toolbar{flex-wrap:nowrap}
  .toolbar-controls{flex-wrap:nowrap}
}
@media (max-width:760px){
  .catalog{padding:14px 0 40px !important}
  .catalog-toolbar{padding:12px;gap:10px}
  .toolbar-controls{--control-h:44px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .work-search{grid-column:1/-1}
  .work-search input{width:100%;max-width:none}
  .control select{width:100%;max-width:none;min-width:0}
  .view-toggle{display:none}
  .status-legend{font-size:12.5px;gap:4px 12px}
}
/* Below this, two selects side by side no longer leave enough room to show their own text (e.g. "Önerilen
   sıra" got clipped): give each control the full row instead of forcing a 2-up grid this narrow. */
@media (max-width:400px){
  .toolbar-controls{grid-template-columns:1fr}
}

/* work cards: a full-width screenshot, a category chip, the name, a one-line summary, then status + View */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:600px){.work-grid{grid-template-columns:minmax(0,1fr)}}
.work-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.work-card:hover,.work-card:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.work-image{position:relative;background:var(--surface-3);border-bottom:1px solid var(--line-soft)}
.work-image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.work-image img[src$=".svg"]{object-fit:contain;background:#eef1f8}
.work-body{display:flex;flex-direction:column;gap:5px;padding:15px 16px 16px;flex:1;min-width:0}
.work-cat{margin:0;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.work-title{font-size:17.5px;line-height:1.3;margin:3px 0 0}
.work-summary{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.work-meta{margin:1px 0 0;color:var(--faint);font-size:12.5px}
/* The status label never shortens (it says what the work is), so on a narrow card such as an English one
   ("Pre-demo with sample data" + "View") the link drops to its own row instead of poking out of the card. */
.work-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;margin-top:auto;padding-top:13px;border-top:1px solid var(--line-soft)}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 14px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap}
.work-card:hover .card-link{background:var(--accent-strong)}
/* list view: the same cards, laid out in rows. Starts right where the grid/list toggle itself becomes
   visible (above 760px, see the toolbar's mobile block) so the button is never pressed with no visible effect. */
@media (min-width:761px){
  .work-grid.is-list{grid-template-columns:minmax(0,1fr);gap:14px}
  .work-grid.is-list .work-card{flex-direction:row}
  .work-grid.is-list .work-image{flex:0 0 280px;border-bottom:0;border-right:1px solid var(--line-soft)}
  .work-grid.is-list .work-image img{height:100%}
  .work-grid.is-list .work-body{padding:16px 20px}
}
@media (prefers-reduced-motion:reduce){.work-card,.btn,.btn .arw{transition:none}.work-card:hover,.work-card:focus-within,.btn:hover{transform:none}}

/* sectors served: the needs that come up most, written for people who search by their trade */
.sector-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1020px){.sector-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sector-list{grid-template-columns:minmax(0,1fr)}}
.sector-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.sector-item h3{font-size:16.5px;margin:0}
.sector-item p{margin:0;color:var(--muted);font-size:14.5px}
.sector-item .more{margin-top:auto;padding-top:6px;font-size:14px}
.sector-note{margin:18px 0 0;color:var(--muted);font-size:14.5px;max-width:95ch}
.sector-fold>summary,.footer-fold>summary{cursor:pointer;font-weight:600;list-style:revert}
.sector-fold>summary{display:inline-block;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:44px;box-sizing:border-box}
.footer-fold{margin-top:6px}
.footer-fold>summary{display:flex;align-items:center;min-height:44px}
.footer-fold[open]>summary{margin-bottom:6px}
.footer-fold>a{display:block;padding:3px 0}

/* services and about on the home page */
.services-text{columns:2 340px;column-gap:32px;color:var(--muted)}
.services-text p{margin:0 0 14px;break-inside:avoid}
.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
@media (max-width:900px){.service-cards{grid-template-columns:minmax(0,1fr)}}
.service-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.service-card h3{font-size:18px}
.service-card p{color:var(--muted);margin:0 0 14px;font-size:15px}
.service-card .more{margin-top:auto}
.about{display:grid;grid-template-columns:1fr 1.6fr;gap:28px;align-items:start}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:6px}}
.about-text p{color:var(--muted);max-width:62ch}
.about-text .about-lead{color:var(--text);font-size:1.125em;line-height:1.55}
.about-text .about-closing{color:var(--text);font-weight:650}
.checks{list-style:none;padding:0;margin:0 0 14px;color:var(--muted);font-size:15px}
.checks li{position:relative;padding-left:26px;margin:8px 0}
.checks li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--ok);font-weight:700}

/* call to action band */
.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.cta-band h2{margin:0 0 6px}
.cta-band p{margin:0;color:var(--muted);max-width:62ch}
@media (max-width:560px){.cta-band{padding:22px}}

/* a work's page, laid out like a product page: media on the left; title, highlights, price and the way to ask on the right */
.work-page{padding:22px 0 36px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--faint);margin:0 0 18px}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:var(--text)}
.product{display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-areas:"media title" "media box";grid-template-rows:auto 1fr;gap:18px 32px;align-items:start}
.product-title{grid-area:title;min-width:0}
.product-title h1{font-size:clamp(26px,3vw,36px);max-width:none;margin:10px 0 10px}
.product-status{margin:0}
.product-media{grid-area:media;min-width:0;position:sticky;top:84px}
.product-box{grid-area:box;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.product-summary{margin:0 0 14px;color:var(--text);font-size:15.5px}
.box-title{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.product-box .checks{margin:6px 0 16px;font-size:14.5px}
.price-box{padding:12px 14px;margin:0 0 14px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px}
.price-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.price-head span{font-size:13px;color:var(--faint);font-weight:650}
.price-head strong{font-size:17px;line-height:1.3}
@media (max-width:380px){.price-sep{display:none}}
.price-box small{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.45}
.product-box .btn{margin-bottom:10px}
.product-box .btn:not(.primary){box-shadow:none}
.aside-note{margin:4px 0 0;font-size:13px;color:var(--muted)}
.work-figure{margin:0}
.work-figure > img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);background:var(--surface-2)}
.work-figure figcaption{font-size:13px;color:var(--faint);margin-top:8px}
.work-figure--data{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.product-nav{display:flex;flex-wrap:wrap;gap:4px;margin:30px 0 4px;padding:6px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px}
.product-nav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600}
.product-nav a:hover{background:var(--surface);color:var(--text)}
.product-content{max-width:860px}
.work-section{display:block;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);margin:16px 0 0;overflow:hidden}
.work-section > summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;-webkit-tap-highlight-color:transparent}
.work-section > summary::-webkit-details-marker{display:none}
.work-section h2{font-size:22px;margin:0}
.work-chev{width:12px;height:12px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease;flex:none;margin-right:2px}
.work-section[open] > summary .work-chev{transform:rotate(-135deg)}
.work-section > summary:hover{background:var(--surface-2)}
.work-section > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.work-section-body{padding:0 22px 26px}
.work-section-body > p{color:var(--muted);max-width:72ch;margin:0 0 10px}
.work-section-body > p strong{color:var(--text)}
@media (prefers-reduced-motion:reduce){.work-chev{transition:none}}
.section-note{font-size:14px;color:var(--faint) !important;margin:0 0 8px !important}
.facts{margin:14px 0 0;display:grid;gap:0;max-width:640px}
.facts > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:14px}
.facts dt{color:var(--faint);font-weight:600}
.facts dd{margin:0}
.facts a{color:var(--accent)}
.bullets{margin:0;padding-left:20px;color:var(--muted)}
.bullets li{margin:6px 0}
.limits{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.limits li{position:relative;padding:10px 14px 10px 40px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:15px}
.limits li::before{content:"!";position:absolute;left:12px;top:11px;width:18px;height:18px;border-radius:50%;background:var(--warn-soft);color:var(--warn-text);font-size:12px;font-weight:800;line-height:18px;text-align:center}
.work-section .table-wrap + .table-wrap{margin-top:14px}
.work-cta{padding:12px 0 56px !important;border-top:0 !important}
.related{background:var(--surface-2)}
.related h2{font-size:24px}
.related-all{margin:20px 0 0}
@media (max-width:960px){
  .product{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "media" "box";grid-template-rows:auto}
  .product-nav{margin-top:24px}
  /* the title, the ways to try and to order should share the first phone screen: tighter space above them */
  .work-page{padding-top:14px}
  .crumbs{margin-bottom:10px}
  .product-title h1{margin:6px 0 8px}
}

/* before/after of the sample product list, drawn from the real sample files */
.ba{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:10px;margin:0}
.ba-side{min-width:0;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px 8px}
.ba-after{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.ba-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;font-weight:700;font-size:14px}
.ba-title span{font-size:12.5px;font-weight:600;color:var(--muted)}
.ba-table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.ba-table th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:650;padding:4px 6px}
.ba-table td{padding:5px 6px;border-top:1px solid var(--line-soft);white-space:nowrap}
.ba-table mark{background:var(--mark);color:inherit;border-radius:4px;padding:0 3px}
.ba-dup td{color:var(--faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--faint) 60%,transparent)}
.ba-arrow{width:34px;height:34px;border-radius:50%;background:var(--accent);position:relative}
.ba-arrow::after{content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-top:2.5px solid var(--on-accent);border-right:2.5px solid var(--on-accent);transform:rotate(45deg)}
.ba figcaption{grid-column:1/-1;font-size:12.5px;color:var(--faint);margin:2px 0 0}
@media (max-width:640px){.ba{grid-template-columns:minmax(0,1fr)}.ba-arrow{justify-self:center;transform:rotate(90deg)}}

/* contact page */
.page-hero.contact-hero{padding:32px 0 4px}
.contact-hero h1{font-size:clamp(28px,3.6vw,42px);max-width:22ch}
.contact-section{padding:18px 0 56px !important;border-top:0 !important}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:start}
.contact-info{position:sticky;top:calc(var(--header-h) + 16px);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.contact-info h2{font-size:19px;margin:0 0 12px}
.contact-info .facts{margin:0}
.contact-info .facts > div{grid-template-columns:84px minmax(0,1fr)}
.contact-info .facts a{overflow-wrap:anywhere}
.contact-info .checks{margin:14px 0 0;font-size:14.5px}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}.contact-info{position:static}.contact-info .tap{display:inline-flex;align-items:center;min-height:44px}}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.steps .num{display:block;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:8px}
.steps h3{font-size:16px}
.steps p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* contact form */
.request-form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
@media (max-width:820px){.request-form{padding:22px}}
@media (max-width:380px){.request-form{padding:18px 14px}}
.form-heading{font-size:19px;font-weight:700;margin:0 0 4px}
.form-intro{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.field{display:grid;gap:7px;margin-bottom:18px}
.field label,.field .field-label{font-size:13.5px;font-weight:600}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:15px;padding:11px 12px}
.field textarea{min-height:112px;resize:vertical}
.field small,.opt{font-size:12.5px;color:var(--faint);font-weight:500}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.choice-grid label{position:relative}
.choice-grid input{position:absolute;opacity:0;pointer-events:none}
.choice-grid label>span{display:block;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:13.5px;font-weight:500;cursor:pointer;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.choice-grid input:checked+span{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.choice-grid input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:360px){.choice-grid{grid-template-columns:1fr}}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.field-row .field{margin-bottom:0}
@media (max-width:560px){.field-row{grid-template-columns:1fr;gap:18px}}
[data-phone-star]{color:var(--warn-text)}
details.more-fields{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin:0 0 18px}
details.more-fields summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
details.more-fields[open] summary{margin-bottom:14px}
details.more-fields .field:last-child{margin-bottom:0}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted);margin:4px 0 16px}
.consent input{margin-top:3px;accent-color:var(--accent)}
.consent a{color:var(--accent)}
.consent-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:4px 0 16px}
.consent-note a{color:var(--accent)}
.captcha{margin:0 0 14px}
.captcha[data-sitekey^="0x"]{min-height:66px}
.form-note{font-size:12.5px;color:var(--faint);margin:12px 0 0}
.form-status{font-size:14px;font-weight:600;margin:12px 0 0;min-height:1.4em}
.form-status.ok{color:var(--ok)}
.form-status.err{color:#b91c1c}

/* FAQ */
.faq-list{max-width:780px;border-top:1px solid var(--line-soft)}
.faq-list details{border-bottom:1px solid var(--line-soft);padding:18px 0}
.faq-list summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:400;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{color:var(--muted);font-size:15px;max-width:66ch;margin:12px 28px 0 0}

/* service pages */
.hero{position:relative;padding:64px 0 48px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% 0 auto -10%;height:560px;pointer-events:none;background:radial-gradient(48% 60% at 22% 42%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 72%)}
.hero .wrap{position:relative}
.page-hero{padding:52px 0 40px}
.page-hero h1{max-width:22ch}
.service{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line-soft)}
.service:first-of-type{border-top:1px solid var(--line-soft)}
.service p{color:var(--muted);margin:0}
.service .checks{margin:0}
@media (max-width:820px){.service{grid-template-columns:1fr;gap:12px}}
.scope{font-size:14px;color:var(--muted);margin:10px 0 0}
.example{display:grid;gap:22px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.data{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
table.data caption{text-align:left;font-weight:700;font-size:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
table.data th,table.data td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.data th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:600}
table.data tr:last-child td{border-bottom:0}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .bad{background:color-mix(in srgb,#dc2626 9%,transparent)}
.related-works{background:var(--surface-2)}

/* legal pages */
.prose{max-width:760px;padding:56px 0 64px}
.prose h1{font-size:clamp(30px,4vw,40px);max-width:none}
.prose h2{font-size:20px;margin:32px 0 10px;max-width:none}
.prose p,.prose li{color:var(--muted)}
.prose ul{padding-left:20px}
.prose a{color:var(--accent)}
.updated{font-size:13.5px;color:var(--faint)}
.search-404{margin:28px 0 8px;max-width:520px}

/* quick contact: three round icons (phone, WhatsApp, Instagram) fixed in the bottom-right corner of every page. They
   always stay visible and in place while the page scrolls; the words sit in the labels for screen readers only. They
   follow the notch and the home bar through the safe-area insets. */
.quick-contact{position:fixed;z-index:30;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.qc-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;min-height:52px;padding:0;border-radius:50%;border:0;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(15,23,42,.28);transition:transform .15s}
.qc-btn svg{width:26px;height:26px;flex:none}
.qc-btn:hover{transform:scale(1.07)}
.qc-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.qc-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.qc-call{background:#0a7aa6;color:#fff}
.qc-call:hover{background:#086587}
.qc-wa{background:#1ea952;color:#fff}
.qc-wa svg{fill:#fff}
.qc-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
@media (max-width:900px){.quick-contact{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:10px}.qc-btn{width:46px;height:46px;min-width:46px;min-height:46px}.qc-btn svg{width:23px;height:23px}}
/* dues page: comparison table and extra modules; contact page: next steps */
table.compare{border-collapse:collapse;width:100%;font-size:14.5px}
table.compare th,table.compare td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
table.compare thead th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:600}
table.compare tbody th{font-weight:650;color:var(--text)}
table.compare td{color:var(--muted)}
table.compare td:last-child{color:var(--text)}
@media (max-width:720px){table.compare thead{position:absolute;left:-9999px}table.compare,table.compare tbody,table.compare tr,table.compare th,table.compare td{display:block;width:100%}table.compare tr{border:1px solid var(--line);border-radius:12px;padding:6px 4px;margin:10px 0}table.compare td{border-bottom:0;padding:6px 12px}table.compare td::before{content:attr(data-label);display:block;font-size:12px;font-weight:650;color:var(--faint)}table.compare tbody th{border-bottom:0;padding:8px 12px 2px}}
.extra-modules{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.extra-modules li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.extra-modules b{display:block}
.extra-tag{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
@media (max-width:620px){.extra-modules{grid-template-columns:minmax(0,1fr)}}
.fit-list,.try-list{margin:12px 0;padding-left:22px}
.fit-q{margin:0 0 14px;padding-left:4px}
.fit-q fieldset{border:0;margin:0;padding:0;min-width:0}
.fit-q legend{padding:0;font-weight:650}
.fit-opts{display:flex;gap:18px;margin:6px 0 4px}
.fit-opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.fit-hint{display:block;font-size:13.5px;color:var(--muted);max-width:70ch}
.fit-status{font-weight:650;margin:10px 0}
.fit-table tr.is-active th,.fit-table tr.is-active td{background:var(--surface);color:var(--text)}
.fit-table tr.is-active th{box-shadow:inset 3px 0 0 var(--text)}
.try-list li{margin:0 0 8px;max-width:70ch}
.after-note{margin:18px 0 0;max-width:70ch;color:var(--muted);font-size:14.5px}
@media (prefers-reduced-motion:reduce){.qc-btn{transition:none}.qc-btn:hover{transform:none}}
@media print{.quick-contact{display:none}}

/* footer */
.site-footer{border-top:1px solid var(--line-soft);background:var(--surface-2);padding:40px 0 26px;color:var(--muted);font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.footer-about p{margin:10px 0 0;max-width:46ch}
.footer-about .brand{color:var(--text)}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-title{font-weight:700;color:var(--text);margin:0 0 4px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text);text-decoration:underline}
.footer-bottom button[data-cookie-prefs]{appearance:none;border:0;background:transparent;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.footer-bottom button[data-cookie-prefs]:hover{color:var(--text)}
.consent-banner{position:fixed;z-index:40;left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;display:flex;flex-direction:column;gap:12px;padding:16px 18px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);font-size:14px;line-height:1.5}
.consent-banner p{margin:0}
.consent-banner a{color:var(--accent);font-weight:600}
.consent-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media print{.consent-banner{display:none}}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--faint)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}
@media (max-width:420px){.footer-grid{grid-template-columns:1fr}}

/* ---- gallery: the media of a work page (real screens, each with a caption) ---- */
.gallery{display:grid;gap:10px;min-width:0}
.gallery-main,.gallery-more{display:grid;gap:10px;min-width:0}
.gallery-stage{position:relative;min-width:0}
.gallery-track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);box-shadow:var(--shadow-lift);-webkit-overflow-scrolling:touch}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gallery-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0}
.gallery-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#101014}
.gallery-slide img{cursor:zoom-in}
.gallery-slide figcaption{padding:10px 14px 12px;font-size:14px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line-soft);background:var(--surface)}
.gallery-slide figcaption b{color:var(--text);font-weight:650}
.gallery-caption{display:none;margin:0;min-height:calc(2 * 1.5em);font-size:14.5px;line-height:1.5;color:var(--muted)}
.gallery-caption b{color:var(--text);font-weight:650}
.gallery[data-ready] .gallery-caption{display:block}
.gallery[data-ready] .gallery-slide figcaption{display:none}
.gallery-navs{position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;display:none;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}
.gallery[data-ready] .gallery-navs{display:flex}
.gallery-nav{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);box-shadow:var(--shadow);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.gallery-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gallery-nav:hover{background:var(--surface)}
.gallery-nav:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gallery-nav[disabled]{opacity:.35;cursor:default}
.gallery-bar{display:none;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--faint)}
.gallery[data-ready] .gallery-bar{display:flex}
.gallery-count{font-variant-numeric:tabular-nums}
.gallery-zoom{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.gallery-zoom:hover{color:var(--text)}
.gallery-thumbs{display:flex;gap:8px;margin:0;padding:2px 2px 6px;list-style:none;overflow-x:auto;scrollbar-width:thin}
.gallery-thumbs li{flex:0 0 auto}
.gallery-thumb{display:block;position:relative;width:96px;padding:0;border:2px solid transparent;border-radius:9px;background:var(--surface-2);overflow:hidden;cursor:pointer;opacity:.8}
.gallery-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gallery-thumb:hover{opacity:1}
.gallery-thumb[aria-current="true"]{border-color:var(--accent);opacity:1}
.gallery-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gallery-note{margin:2px 0 0;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--muted);font-size:14px;line-height:1.5}
.more-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.video-links{flex:1 0 100%;margin:2px 0;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.video-links a{font-weight:600}
.demo-link{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.demo-link .btn{padding:9px 16px;font-size:14.5px}
.demo-note{color:var(--faint);font-size:13px}
@media (max-width:560px){
  .gallery-thumb{width:80px}
  .gallery-slide figcaption{font-size:13.5px}
  .gallery-nav{width:44px;height:44px}
}
/* on a phone the way to ask for something similar stays inside the first screen: screen and caption, then the box,
   and only then the thumbnails and the language note */
@media (max-width:960px){
  .product--gallery{grid-template-areas:"title" "media" "box" "more"}
  .product--gallery .product-media,.product--gallery .gallery{display:contents}
  .product--gallery .gallery-main{grid-area:media}
  .product--gallery .gallery-more{grid-area:more}
}
@media (prefers-reduced-motion:reduce){.gallery-track{scroll-behavior:auto}}

/* enlarged view of one screen */
.gallery-dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.gallery-dialog::backdrop{background:rgba(8,8,12,.96)}
.gallery-dialog-inner{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;height:100%;padding:16px 12px 12px;box-sizing:border-box}
.gallery-dialog-view{min-height:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start}
.gallery-dialog img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;border-radius:6px}
@media (max-width:760px){.gallery-dialog-view{align-items:center;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}.gallery-dialog img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto}}
.gallery-dialog-cap{text-align:center;font-size:14px;line-height:1.45;max-width:900px;margin:0 auto;color:#e9e9ee}
.gallery-dialog-bar{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.gallery-dialog-bar button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,26,.8);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.gallery-dialog-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gallery-dialog-bar button:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* on a computer the previous / next arrows sit at the middle of the left and right edges, the close button stays top right; a phone keeps the bar */
@media (min-width:761px){
  .gallery-dialog-bar{display:contents}
  .gallery-dialog-bar [data-dialog-prev],.gallery-dialog-bar [data-dialog-next]{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px}
  .gallery-dialog-bar [data-dialog-prev]{left:16px}
  .gallery-dialog-bar [data-dialog-next]{right:16px}
  .gallery-dialog-bar [data-dialog-close]{position:absolute;top:12px;right:16px}
}

/* how it is used */
.guide-flow{margin:0 0 22px;display:grid;gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.guide-flow > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 16px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.guide-flow > div:first-child{border-top:0}
.guide-flow dt{font-weight:700;color:var(--text);font-size:14.5px}
.guide-flow dd{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:step}
.guide-step{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 22px;align-items:start;counter-increment:step;padding-top:22px;border-top:1px solid var(--line-soft)}
.guide-step:first-child{border-top:0;padding-top:0}
.guide-step figure{margin:0;min-width:0}
.guide-step img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#101014;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
img.zoomable{cursor:zoom-in}
img.zoomable:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.guide-step h3{margin:0 0 6px;font-size:18px;line-height:1.3;display:flex;gap:10px;align-items:flex-start}
.guide-step h3::before{content:counter(step);flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;line-height:28px;text-align:center}
.guide-step p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.guide-part{margin:26px 0 12px;font-size:17px}
.guide-step--text{grid-template-columns:minmax(0,1fr)}
.guide-log{margin:12px 0 0}
.guide-log figcaption{font-size:13px;color:var(--faint);margin:0 0 6px}
.on-screen{margin:12px 0 0;padding:10px 13px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px}
.on-screen dt{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.on-screen dd{margin:0 0 5px;color:var(--muted);font-size:13.5px;line-height:1.5}
.on-screen dd:last-child{margin-bottom:0}
.on-screen dd b{color:var(--text);font-weight:600}
.guide-log pre{margin:0;padding:12px 14px;background:#101014;color:#e8e8ee;border-radius:10px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre}
.guide-phones{margin:26px 0 8px}
.guide-phones .guide-part{margin-top:0}
.guide-phone-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,210px));gap:14px;justify-content:start}
.guide-phone-row figure{margin:0}
.guide-phone-row img{width:100%;height:auto;aspect-ratio:420/908;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);background:#101014}
.guide-phone-row figcaption{margin-top:8px;font-size:13.5px;color:var(--muted);text-align:center}
@media (max-width:560px){.guide-phone-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.guide-phone-row img{border-radius:14px}}
.guide-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.guide-split > div{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.guide-split h3{margin:0 0 8px;font-size:16px}
.guide-split .checks{margin:0}
.guide-plus{list-style:none;padding:0;margin:0;color:var(--muted);font-size:15px}
.guide-plus li{position:relative;padding-left:26px;margin:8px 0}
.guide-plus li::before{content:"+";position:absolute;left:3px;top:-1px;color:var(--accent);font-weight:800}
@media (max-width:760px){
  .guide-flow > div{grid-template-columns:minmax(0,1fr)}
  .guide-step{grid-template-columns:minmax(0,1fr)}
  .guide-split{grid-template-columns:minmax(0,1fr)}
}
/* Workflow guides: readable text and screenshots using the site's existing colours. */
.editorial-page{padding-top:2rem;padding-bottom:4rem;max-width:960px}
.editorial-page h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;max-width:22ch}
.editorial-page p,.editorial-page li{line-height:1.8}
.editorial-page section{margin-top:2.5rem;scroll-margin-top:6rem}
.editorial-page h2{font-size:1.45rem;line-height:1.35}
.editorial-page h3{font-size:1.2rem}
.editorial-page .lead{font-size:1.15rem;max-width:70ch}
.editorial-meta{font-size:.9rem}
.editorial-note,.editorial-card{border:1px solid var(--line,#d5d5d5);border-radius:14px;padding:1.25rem;margin:1.25rem 0}
.editorial-note h2,.editorial-card h2,.editorial-card h3{margin-top:0}
.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.editorial-grid .editorial-card{margin:0}
.editorial-toc{border-left:3px solid currentColor;padding:.5rem 1rem;margin:2rem 0}
.editorial-figure{margin:2rem 0}
.editorial-figure img{display:block;width:100%;height:auto;max-height:700px;object-fit:contain;border:1px solid var(--line,#d5d5d5);border-radius:8px}
.editorial-figure figcaption{font-size:.85rem;line-height:1.6;margin-top:.7rem}
.editorial-links{margin-top:2rem;padding:1.25rem;border:1px solid var(--line,#d5d5d5);border-radius:14px}
.editorial-links li{margin:.6rem 0}
@media(max-width:640px){.editorial-grid{grid-template-columns:1fr}.editorial-page{padding-top:1rem}.editorial-note,.editorial-card{padding:1rem}.editorial-page h2{font-size:1.3rem}}

/* ====================================================================================================
   Software catalogue design, 4 Ekim 2026 (shared standard for every present and future product):
   a clear first screen (what is offered, how to find it, where to try or order), category cards, product
   cards that answer "for whom / which daily need / what works / is there a demo / how to ask" at a glance,
   a product page that starts with the product and the ways to try or order it, and a compact phone menu.
   ==================================================================================================== */

/* phone menu: a button opens the same links; without JavaScript the links simply stay visible */
.nav-toggle{display:none}
.chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:3px 8px;line-height:1.4}
.btn-sm{padding:8px 14px !important;font-size:14px !important;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
@media (max-width:900px){
  .site-header{position:sticky;top:0}
  [id]{scroll-margin-top:72px}
  .header-bar{flex-wrap:wrap;gap:0 12px;min-height:60px;padding-top:8px;padding-bottom:8px}
  .brand-role{display:none}
  .js .nav-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
  .nav-toggle-bars{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:box-shadow .15s}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{box-shadow:0 0 0 transparent}
  .site-nav{order:3;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;border-top:1px solid var(--line-soft);padding:8px 0 6px}
  .site-nav a{padding:13px 12px;font-size:16px;border-radius:10px}
  .site-nav a[aria-current]{box-shadow:none;background:var(--accent-soft);color:var(--text);border-radius:10px}
  .site-nav .nav-contact{margin:6px 0 2px;text-align:center}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:flex}
}

/* first screen */
.hero{background:var(--band);padding:34px 0 28px !important;border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:28px;align-items:center}
.hero .label{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-strong)}
.hero h1{font-size:clamp(30px,5.2vw,50px);line-height:1.1;letter-spacing:-.025em;margin:8px 0 12px;max-width:20ch}
.hero-lead{margin:0;font-size:clamp(16px,2vw,18.5px);color:var(--muted);max-width:64ch;line-height:1.6}
.hero-search{display:flex;gap:8px;margin:20px 0 18px;max-width:580px}
.hero-search input{flex:1;min-width:0;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;background:var(--surface);color:var(--text)}
.hero-search input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hero-search .btn{height:48px;padding:0 20px}
.hero-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hero-steps li{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:14px;line-height:1.45;color:var(--muted)}
.hero-steps b{display:block;color:var(--text);font-size:14.5px}
.hero-step-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;display:grid;place-items:center}
.hero-portrait{width:170px;height:170px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow);justify-self:end}
@media (max-width:860px){
  .hero{padding:22px 0 20px !important}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-portrait{display:none}
  .hero-steps{gap:8px}
  .hero-steps li{flex-direction:column;align-items:center;text-align:center;padding:10px 6px;gap:6px}
  .hero-steps b{font-size:13.5px;line-height:1.3}
  .hero-step-text{display:none}
  .hero-search{margin:16px 0 14px}
}

/* category cards: on a phone one row that scrolls sideways */
.cats{background:var(--surface-2);padding:22px 0 0 !important;border-top:0 !important}
.cats h2{font-size:20px;margin:0 0 12px}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cat-card{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s}
.cat-card:hover{border-color:var(--accent)}
.cat-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cat-name{font-weight:700;font-size:15px;line-height:1.3}
.cat-count{font-size:13px;color:var(--muted)}
@media (max-width:900px){
  .cat-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:10px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:thin}
  .cat-card{flex:0 0 auto;min-width:150px;scroll-snap-align:start}
}

/* toolbar additions: the live-demo toggle; on a phone the category cards replace the sector select */
.check-chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-h);padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:14px;font-weight:600;cursor:pointer}
.check-chip input{width:18px;height:18px;accent-color:var(--accent)}
@media (max-width:760px){
  .control--sector{display:none}
  .check-chip{grid-column:1/-1}
}

/* product cards */
.work-image{display:block}
.work-cat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;background:none;border-radius:0;text-transform:none;letter-spacing:0}
/* The status badge sits on the cover image instead of sharing the sector chip's row. Sharing it made the row one or two lines
   depending on the sector name, so neighbouring cards started their titles at different heights. The badge stays in the DOM
   right after the chip (reading order unchanged) and keeps its own colours; the shadow keeps it legible over any screenshot. */
.work-card .work-cat .status{position:absolute;top:10px;left:10px;box-shadow:0 0 0 1px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.2)}
.work-title a{text-decoration:none;color:inherit}
.work-title a::after{content:"";position:absolute;inset:0;z-index:1}
.work-for{margin:3px 0 0;font-size:13.5px;line-height:1.45}
.work-points{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:13.5px;color:var(--muted)}
.work-points li{position:relative;padding-left:20px;line-height:1.4}
.work-points li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.work-demo-state{margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--faint);display:flex;align-items:center;gap:7px}
.work-demo-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.work-demo-state.is-live{color:var(--ok-text)}
.work-demo-state.is-live::before{background:var(--ok)}
.work-foot{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px}
.work-price{font-size:12.5px;color:var(--muted)}
.work-actions{display:flex;flex-wrap:wrap;gap:8px}
.work-actions .btn{position:relative;z-index:2;flex:1 1 auto}
.card-link{margin-left:0}
.work-grid.is-list .work-image{flex:0 0 320px}

/* the page of one product: it starts with the product, what it does and how to try or order it */
.product-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.product-lede{margin:0 0 14px;font-size:17px;line-height:1.55;color:var(--muted)}
.product-priceline{margin:0 0 14px;font-size:17px;line-height:1.4;font-weight:700;color:var(--text)}
.how-it-works{font-size:17px}
.sale-other{margin:0 0 18px;border:1px solid var(--line-soft);border-radius:12px;padding:0 14px}
.sale-other>summary{cursor:pointer;padding:12px 0;font-weight:650;min-height:44px;box-sizing:border-box}
.sale-other[open]>summary{border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.product-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.demo-none{margin:0 0 14px;color:var(--muted);font-size:14px}
.product-cta .btn{min-height:48px;justify-content:center}
.fact-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fact-tiles li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.fact-k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fact-v{font-size:14px;line-height:1.4;font-weight:600;overflow-wrap:anywhere}
.fact-v a{color:var(--accent)}
@media (max-width:560px){
  .product-lede{font-size:16px}
  .product-cta .btn{flex:1 1 100%}
  .fact-tiles{gap:8px}
  .fact-tiles li{padding:10px 12px}
  .fact-v{font-size:13.5px}
}

/* sales package */
.sale-options{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:10px}
.sale-option{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.sale-option b{display:block;font-size:15px;line-height:1.4}
.sale-option p{margin:4px 0 0 !important;font-size:14px;color:var(--muted)}
.opt-state{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;margin-top:1px}
.opt-state--ok{background:var(--ok-soft);color:var(--ok-text)}
.opt-state--part{background:var(--warn-soft);color:var(--warn-text)}
.opt-state--no{background:var(--surface-3);color:var(--muted)}
.opt-state--decision{background:var(--info-soft);color:var(--info-text)}
@media (max-width:560px){.sale-option{flex-direction:column;gap:8px}}
.work-section-body h3{font-size:16px;margin:18px 0 6px}

/* how to order */
.how{background:var(--bg)}
.how h2{font-size:clamp(24px,3vw,32px);margin:0 0 6px}
.how-steps{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.how-steps li{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.how-steps h3{font-size:15.5px;margin:8px 0 6px;line-height:1.3}
.how-steps p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.how-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px}
.how-none{margin:0 0 20px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);max-width:760px}
.how-none-title{margin:0 0 6px;font-weight:700;font-size:14px}
.how-none ul{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px}
@media (max-width:1100px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.how-steps{grid-template-columns:minmax(0,1fr)}}

/* gallery: every screen keeps its own shape (a phone screen is tall, a desktop screen is wide); no cropping, no tiny thumbnails in a fixed 16:9 box */
.gallery-track{align-items:center}
.gallery-slide figure{margin:0;display:grid;place-items:center;width:100%}
.gallery-slide img{aspect-ratio:auto;width:100%;height:auto;max-height:min(78vh,720px);object-fit:contain}
.gallery-slide--tall img{aspect-ratio:16/9;max-height:none;object-fit:cover;object-position:top center}
.gallery-navs{bottom:0;aspect-ratio:auto}

/* real-screen showcase in the hero, trust strip, card covers */
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px}
.hero-avatar{display:inline-block;width:36px;height:36px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:10px;border:1px solid var(--line)}
.hero-shots{position:relative;min-height:380px}
.hero-shot{margin:0;position:absolute;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lift);overflow:hidden}
.hero-shot img{display:block;width:100%;height:auto}
.shot-bar{display:flex;gap:5px;padding:7px 10px;background:var(--surface-3);border-bottom:1px solid var(--line-soft)}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.hero-shot--main{left:0;top:0;width:86%}
.hero-shot--side{right:0;top:38%;width:56%;z-index:2}
.hero-shot--phone{left:10%;bottom:-6px;width:21%;z-index:3;border-radius:18px;border-width:3px}
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-shots{display:none}}
.trust{background:var(--surface);border-bottom:1px solid var(--line-soft);padding:0 !important}
.trust-list{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust-list li{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:3px solid var(--accent)}
.trust-list b{font-size:14.5px}
.trust-list span{font-size:13.5px;color:var(--muted);line-height:1.45}
@media (max-width:900px){.trust-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:520px){.trust-list{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 0}}
.work-image{background:linear-gradient(135deg,var(--accent-soft),var(--surface-3));aspect-ratio:16/10;overflow:hidden}
.work-image img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:top left}
.work-image img[src$=".svg"]{object-fit:contain;padding:10px;background:transparent}

/* website service page: three scope cards */
.scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:16px 0 8px}
.scope-card .facts{margin-top:10px}
.scope-card .facts > div{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
.scope-card .facts dt{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.scope-card .facts dd{font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1000px){.scope-grid{grid-template-columns:minmax(0,1fr)}}
.how-list{margin:10px 0 0;padding-left:22px;color:var(--muted);display:grid;gap:8px;max-width:72ch}
.editorial-page .cta-band{margin:28px 0 8px}

/* fixes after the browser test run: the catalogue toolbar wraps instead of overflowing; controls share one height; placeholder contrast */
/* from 1340 px count and controls share one row (it fits); between 1000 and 1339 px the controls wrap instead of overflowing */
@media (min-width:1000px) and (max-width:1339px){
  .catalog-toolbar{flex-wrap:wrap}
  .toolbar-controls{flex-wrap:wrap}
}
@media (min-width:1000px){.work-search input{width:150px}}
.check-chip{white-space:nowrap;height:var(--control-h)}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
/* the selects were as wide as their longest option; cap them so count + controls fit one row from 1340 px */
@media (min-width:1000px){.control select{max-width:158px;text-overflow:ellipsis}}
/* phone gallery spacing (taken over from the video-removal change merged to main as PR #7) */
@media (max-width:560px){
  .gallery-main{gap:4px}
  .gallery-caption{font-size:14px;line-height:1.4;min-height:calc(2 * 1.4em)}
}

/* compact list of every other software under the related cards */
.related-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.related-list a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;text-decoration:none}
.related-list a:hover{border-color:var(--accent);color:var(--accent-strong)}

/* Sales lists that state limits, open decisions or release history: a neutral dot, never a tick that reads as "done / verified" */
.checks--plain li::before{content:"•";color:var(--faint);left:6px}

/* Phone fixes found with real Safari (WebKit) and Android engines: a select with long option text must not widen the form,
   and fields under 16px make iPhone Safari zoom the page when they are focused */
.field{min-width:0;grid-template-columns:minmax(0,1fr)}
.field select{min-width:0;max-width:100%}
.request-form{overflow-x:hidden;overflow-x:clip}
@media (max-width:700px){
  .field input,.field select,.field textarea,.control select,.control input,input[type=search]{font-size:16px}
}

/* phone and tablet: demo + first conversation always within reach on a product page */
.sticky-bar{display:none}
@media (max-width:900px){
  .sticky-bar{position:fixed;z-index:25;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .sticky-bar .btn{flex:1 1 0;min-height:48px;justify-content:center;white-space:nowrap}
  body[data-page="work"]{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media print{.sticky-bar{display:none}}

/* ====================================================================================================
   Accessibility pass, 7 Ekim 2026 (closing audit E9-E13): reachable touch targets, readable sizes, a focus ring
   that is always visible. Stand-alone links and buttons are at least 24x24 CSS px everywhere (WCAG 2.2 SC 2.5.8)
   and at least 44x44 on a phone (<= 768 px); links inside a sentence keep their natural size. On a phone body text
   is 16 px and small labels, the top strip and the footer are never under 14 px.
   ==================================================================================================== */
.topbar-mail,.topbar-links a:not(.topbar-call):not(.topbar-wa),.crumbs a,.site-footer a,.footer-bottom button[data-cookie-prefs],.work-title a,.langbar a,.more,.tap,.facts dd a,.fact-v a,.service-card h3 a,.editorial-links a,.related-list a{display:inline-flex;align-items:center;min-height:24px}
details.more-fields summary{padding-block:2px}
.search-button{flex:none;min-width:44px}
.crumbs{align-items:center}
.langbar button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px}
.consent input,.fit-opt input,.check-chip input{width:24px;height:24px}
.chip,.fact-k,.status,.opt-state,.on-screen dt,.ba-table th,table.data th{font-size:13px}
/* the live-search box shows a ring of its own when the field (or its button) is reached with the keyboard */
.work-search:has(input:focus-visible),.work-search:has(.search-button:focus-visible){outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.search-button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* the security check is a third-party frame: whichever part of it holds the keyboard focus, its wrapper shows it */
.captcha:focus-within,.captcha.has-focus{outline:3px solid var(--accent);outline-offset:4px;border-radius:10px}

@media (max-width:768px){
  /* touch targets */
  .skip{display:inline-flex;align-items:center;min-height:44px}
  .topbar-mail{min-height:44px;margin-block:-6px}
  .lang-link{min-width:44px;min-height:44px}
  .topbar .lang-link{margin-block:-6px}
  .brand{min-height:44px}
  .crumbs{gap:0 8px}
  .crumbs a{min-height:44px}
  .site-footer a,.footer-bottom button[data-cookie-prefs]{min-height:44px}
  .footer-col{gap:0}
  .topbar-links a:not(.topbar-call):not(.topbar-wa){min-height:44px;min-width:44px;justify-content:center;margin-block:-6px}
  .work-title a,.more,.tap,.facts dd a,.fact-v a,.service-card h3 a,.editorial-links a,.product-nav a,.related-list a,.gallery-zoom,.clear-button,.langbar a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{min-width:44px;justify-content:center}
  .view-toggle{border:0;box-shadow:inset 0 0 0 1px var(--line)}
  .view-toggle button{width:44px}
  .faq-list summary{align-items:center;min-height:44px}
  details.more-fields summary{padding-block:11px;font-size:16px}
  .contact-info .checks,.product-box .checks,.trust-list b,.trust-list span{font-size:16px}
  table.compare thead th,.related-list a{font-size:14px}
  .toolbar-controls{--control-h:44px}
  .work-search{border:0;box-shadow:inset 0 0 0 1px var(--line)}
  .work-search:focus-within{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
  .fit-opt,.consent{min-height:44px;align-items:center}
  .choice-grid label>span{display:flex;align-items:center;min-height:44px}

  /* small labels, the top strip, the footer: 14 px at least */
  .topbar,.topbar-links a,.topbar-mail,.lang-link,.mark,.chip,.fact-k,.status,.opt-state,.on-screen dt,.on-screen dd,.ba-table,.ba-table th,.ba-title span,.ba figcaption,table.data,table.data td,table.data th,.label,.eyebrow,.hero .label,.box-title,.hero-step-n,.hero-steps b,.cat-count,.steps .num,.extra-tag,.gallery-count,.gallery-zoom,.price-head span,.price-box small,.aside-note,.demo-note,.field small,.opt,.consent,.consent-note,.form-note,.form-intro,.updated,.status-legend,.legend-item,.legend-title,.work-price,.work-demo-state,.work-meta,.crumbs,.catalog-note,.fit-hint,.section-note,.work-figure figcaption,.guide-log figcaption,.guide-phone-row figcaption,.editorial-figure figcaption,.editorial-meta,.footer-bottom,.footer-bottom *,table.compare td::before,.clear-button,.product-nav a{font-size:14px}
  .scope-card .facts dt{font-size:14px}
  /* body text: 16 px */
  .work-for,.work-for b,.work-points,.work-summary,.sector-item p,.sector-note,.checks,.limits li,.steps p,.service-card p,.scope-card .facts dd,.faq-list summary,.faq-list details p,.guide-flow dt,.guide-flow dd,.guide-plus,.guide-step p,.how-steps h3,.how-steps p,.how-none-title,.how-none ul,.facts > div,.facts dd a,.after-note,.scope,.product-summary,.band-lead,.fact-v,.field label,.field .field-label,.choice-grid label>span,.btn,.nav-toggle,.cat-name,.sale-option b,.sale-option p,table.compare,.bullets,.extra-modules li,.guide-split,.active-filters,.check-chip,.control select,.fit-opt,.more,.hero-steps li,.catalog-count,.how-n,.num{font-size:16px}
  .btn-sm,.card-link,.nav-toggle-label{font-size:15px !important}
  .nav-toggle-label{font-size:16px !important}
  .hero-step-n,.how-n{font-size:14px}
  .steps .num{font-size:14px}
}
.shot-version{font-size:14px;color:var(--muted);white-space:nowrap}
figcaption.shot-version{display:block;margin-top:8px;white-space:normal}

/* Sade sayfa standardı (28 Ekim 2026): bölüm içinde tek yazı ölçeği; aynı tür metin her sayfada aynı boyutta */
.work-section-body p,.work-section-body li,.work-section-body dd,.work-section-body td{font-size:16px;line-height:1.6}
.work-section-body .section-note,.work-section-body small{font-size:14px;line-height:1.55;color:var(--muted)}
.work-section-body h3{font-size:17px;line-height:1.35}
.guide-steps{padding-left:22px}
.guide-step{margin:0 0 12px}
.guide-step--text,.guide-step{display:block}
.guide-step h3{margin:0 0 2px}
.more-items{list-style:none;margin-top:6px}.more-items>details>summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:15px}.more-items>details>ul{margin:8px 0 0;padding-left:18px}

/* Satış sayfası: düz bloklar */
.work-block{padding:34px 0;border-top:1px solid var(--line-soft)}
.work-block:first-child{border-top:0;padding-top:12px}
.work-block>h2{font-size:26px;line-height:1.25;margin:0 0 16px}
.work-block-body{padding:0}
.work-block-body>p{max-width:72ch}
.work-block .checks li,.work-block .bullets li,.work-block .limits li{margin:0 0 8px}
.sale-more{margin-top:14px}.sale-more>summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:15px}

/* Satış sitesi sadeliği (28 Ekim 2026): katalogda yalnız ara + sektör + demo süzgeci; durum süzgeci, görünüm düğmesi, açıklama dipnotu kalkar */
.control--status,.view-toggle,.catalog-foot{display:none}
/* Katalog kartı sade: başlık, tek cümle, fiyat, iki düğme */
.work-card .work-for,.work-card .work-points,.work-card .work-demo-state{display:none}

/* ---- Renkli, ayrışan satış görünümü (28 Ekim 2026) ---- */
:root{--blue:#2563eb;--blue-d:#1e40af;--indigo:#4338ca;--green:#16a34a;--green-d:#15803d}
.chip{background:color-mix(in srgb,var(--chip,#4338ca) 14%,#fff);color:color-mix(in srgb,var(--chip,#4338ca) 62%,#000);border-color:color-mix(in srgb,var(--chip,#4338ca) 35%,#fff);font-weight:700}
/* katalog kartı: büyük mockup, belirgin fiyat */
.work-card{border-radius:16px;overflow:hidden;transition:transform .18s,box-shadow .18s}
.work-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.work-card .work-image img{aspect-ratio:16/10;object-fit:cover}
.work-card .work-price{font-size:19px;font-weight:800;color:var(--green-d)}
.work-card .btn.btn-sm:not(.primary){background:var(--blue);border-color:var(--blue);color:#fff}
.work-card .btn.btn-sm.primary{background:#fff;border-color:var(--indigo);color:var(--indigo)}
/* ürün sayfası: renkli, birbirinden ayrışan düğmeler */
.product-cta>a.btn:not(.primary):not([data-demo]):nth-of-type(1){background:var(--blue);border-color:var(--blue);color:#fff}
.product-cta>a.btn:not(.primary):not([data-demo]):nth-of-type(2){background:var(--indigo);border-color:var(--indigo);color:#fff}
.product-cta>a.btn.primary{background:var(--green-d);border-color:var(--green-d);color:#fff}
.product-cta>a.btn{box-shadow:0 6px 16px -8px rgba(16,16,24,.35)}
/* Demo buttons are told apart by colour (28 Oct 2026): role-1 blue, role-2 indigo, role-3 teal, the public customer page amber; white text keeps 4.5:1 or more */
a.btn[data-demo="role-1"]{background:#2563eb;border-color:#2563eb;color:#fff}
a.btn[data-demo="role-2"]{background:#4338ca;border-color:#4338ca;color:#fff}
a.btn[data-demo="role-3"]{background:#0f766e;border-color:#0f766e;color:#fff}
a.btn[data-demo="page"]{background:#b45309;border-color:#b45309;color:#fff}
a.btn[data-demo="page-2"]{background:#be123c;border-color:#be123c;color:#fff}
a.btn[data-demo="page-3"]{background:#475569;border-color:#475569;color:#fff}
a.btn[data-demo]:hover,a.btn[data-demo]:focus-visible{filter:brightness(.9);color:#fff}

/* fiyat satırı: renkli kutu */
.product-priceline{padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#eef4ff,#f0fbf4);border:1px solid #cfe0ff;border-left:5px solid var(--green);font-size:19px;color:var(--text)}
/* özellik işaretleri: renkli onay */
.checks li::marker{color:var(--green)}
.work-block>h2{border-left:5px solid var(--indigo);padding-left:12px}
.gallery-track{border-radius:16px;background:linear-gradient(135deg,#eef4ff,#f6f0ff)}
.gallery-slide img{background:transparent}
/* galeri sahnesi: tüm kareler aynı oranda (16:10); mockup tam oturur, telefon boyu kareler ortalanır, tam sayfa çekimler üstten doldurur */
.gallery-slide img{aspect-ratio:16/10;max-height:none;width:100%;object-fit:contain}
.gallery-slide--tall img{aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* ---- Sekmeli ürün içeriği (betiksiz) ---- */
.work-tabs{margin:8px 0 0}
.wt-radio{position:absolute;opacity:0;pointer-events:none}
.wt-labels{display:flex;flex-wrap:wrap;gap:0;border-radius:12px;overflow:hidden;background:var(--blue-d);margin:0 0 18px}
.wt-labels label{flex:1 1 auto;text-align:center;padding:14px 18px;color:#fff;background:var(--blue);font-weight:700;cursor:pointer;border-right:1px solid rgba(255,255,255,.25);transition:background .15s}
.wt-labels label:last-child{border-right:0}
.wt-labels label:hover{background:#1d4ed8}
.wt-panel{display:none}
.wt-radio:focus-visible~.wt-labels{outline:3px solid var(--accent);outline-offset:3px}
.wt-radio:nth-of-type(1):checked~.wt-panels .wt-panel:nth-child(1){display:block}
.wt-radio:nth-of-type(1):checked~.wt-labels label:nth-child(1){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-radio:nth-of-type(2):checked~.wt-panels .wt-panel:nth-child(2){display:block}
.wt-radio:nth-of-type(2):checked~.wt-labels label:nth-child(2){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-radio:nth-of-type(3):checked~.wt-panels .wt-panel:nth-child(3){display:block}
.wt-radio:nth-of-type(3):checked~.wt-labels label:nth-child(3){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-radio:nth-of-type(4):checked~.wt-panels .wt-panel:nth-child(4){display:block}
.wt-radio:nth-of-type(4):checked~.wt-labels label:nth-child(4){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-radio:nth-of-type(5):checked~.wt-panels .wt-panel:nth-child(5){display:block}
.wt-radio:nth-of-type(5):checked~.wt-labels label:nth-child(5){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-radio:nth-of-type(6):checked~.wt-panels .wt-panel:nth-child(6){display:block}
.wt-radio:nth-of-type(6):checked~.wt-labels label:nth-child(6){background:var(--blue-d);box-shadow:inset 0 -4px 0 #fff}
.wt-panel>.work-block{border-top:0;padding-top:0}
.wt-panel>.work-block:not(:first-child){border-top:1px solid var(--line-soft);padding-top:26px}
.wt-panel>.work-block:first-child>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.trust-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.trust-chips li{font-size:13px;font-weight:650;color:var(--green-d);background:var(--ok-soft);border:1px solid #bfe5cc;border-radius:999px;padding:4px 12px}
.demo-note--login{font-size:14px;color:var(--muted);margin:8px 0 0}
@media(max-width:560px){.wt-labels label{flex:1 1 45%;padding:12px 8px;font-size:14px}}
.checks li::marker{content:none}

/* ---- Gerçek platform kanıtı: markalı video düğmeleri (YouTube, Instagram) ---- */
.video-links{flex:1 0 100%;margin:6px 0 2px}
.vl-title{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--text)}
.vl-title small{display:block;margin-top:2px;font-weight:500;font-size:13px;color:var(--muted)}
.vl-row{display:flex;flex-wrap:wrap;gap:10px}
.vl-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 16px -8px rgba(16,16,24,.35);transition:transform .15s}
.vl-btn:hover{transform:translateY(-1px)}
.vl-yt{background:#dc2626}
.vl-ig{background:linear-gradient(45deg,#c2410c,#be123c 50%,#7c3aed)}
.vl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none}
.vl-chip svg{width:15px;height:15px}
.work-videos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}

/* ---- Ana sayfa: renkli karşılama, sade sektör şeridi ---- */
.hero{background:linear-gradient(135deg,#1e3a8a 0%,#4338ca 55%,#7c3aed 100%);color:#fff}
.hero h1,.hero .hero-lead,.hero .label{color:#fff}
.hero .hero-lead{opacity:.92}
.hero .label{opacity:.9}
.hero-steps li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff}
.hero-steps .hero-step-text{color:rgba(255,255,255,.85)}
.hero-steps b{color:#fff}
.hero-step-n{background:#fff;color:#4338ca}
.hero-search .btn.primary{background:#15803d;border-color:#15803d}
.hero-mock{position:relative;min-height:340px}
.hero-mock-item{position:absolute;display:block;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.55);transition:transform .2s}
.hero-mock-item img{width:100%;height:auto;display:block}
.hero-mock-0{left:0;top:0;width:78%;z-index:3}
.hero-mock-1{right:0;top:18%;width:52%;z-index:2}
.hero-mock-2{left:12%;bottom:-6%;width:46%;z-index:4}
.hero-mock-item:hover{transform:translateY(-4px)}
@media(max-width:1000px){.hero-mock{min-height:260px;margin-top:20px}}
@media(max-width:560px){.hero-mock{min-height:210px}}
/* sektör şeridi: 30 beyaz kutu yerine renkli hap düğmeleri */
.cat-grid{display:flex;flex-wrap:wrap;gap:10px}
.cat-card{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1.5px solid #dbe3f5;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.cat-card:hover{transform:translateY(-2px);border-color:var(--indigo);box-shadow:var(--shadow)}
.cat-name{font-weight:700;font-size:14.5px;color:var(--text)}
.cat-count{font-size:12px;color:var(--muted)}
.cats h2,.catalog h2,.how h2,.closing h2{border-left:5px solid var(--indigo);padding-left:12px}
.closing .cta-band{background:linear-gradient(135deg,#1e3a8a,#4338ca);color:#fff}
.closing .cta-band h2{color:#fff;border-left-color:#fff}
.closing .cta-band p{color:rgba(255,255,255,.9)}
.closing .cta-band .btn.primary{background:#15803d;border-color:#15803d}

/* ---- Tüm iç sayfalar (iletişim, hizmetler, rehberler, sektörler): aynı renkli başlık ve vurgu ---- */
.editorial-page>h1{background:linear-gradient(135deg,#1e3a8a 0%,#4338ca 60%,#7c3aed 100%);color:#fff;padding:26px 30px;border-radius:18px;margin:10px 0 18px;box-shadow:var(--shadow)}
.editorial-page h2{border-left:5px solid var(--indigo);padding-left:12px}
.editorial-page .btn.primary{background:var(--green-d);border-color:var(--green-d)}
.editorial-card,.service-card,.scope-card{border-radius:16px;box-shadow:var(--shadow)}

/* ---- Ana sayfa alt bilgi: sektörler, hizmetler, hakkımda kompakt ---- */
.home-more{border-top:1px solid var(--line-soft);background:#f8faff;padding:8px 0 4px}
.home-more section{padding:28px 0}
.home-more h2{font-size:22px}
.home-more .section-lead,.home-more .services-text,.home-more .about-text p{font-size:14.5px;color:var(--muted)}
.home-more .sector-item p,.home-more .service-card p{font-size:14px}

/* Sektör kartları: sayı solda renkli rozet, ad yanında (alt alta değil) */
.cat-card{display:inline-flex;flex-direction:row;align-items:center;gap:10px;padding:8px 16px 8px 8px}
.cat-card .cat-count{order:-1;flex:none;min-width:28px;height:28px;padding:0 9px;border-radius:999px;background:var(--indigo);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.cat-card .cat-name{font-size:15px}

/* Instagram tarzı 4:5 galeri slaytları */
.gallery-slide--post img{aspect-ratio:4/5;object-fit:contain;width:100%;height:auto;max-height:640px;border-radius:14px;background:#0b1020}
.gallery-slide--post figcaption{display:none}

/* Ana sayfa üst bölüm: daha küçük ve derli toplu */
.hero{padding:22px 0 20px !important}
.hero h1{font-size:clamp(26px,3.4vw,38px) !important;line-height:1.12;max-width:26ch;margin:6px 0 8px}
.hero .hero-lead{font-size:16px;max-width:58ch;line-height:1.5}
.hero-steps li{padding:9px 12px;font-size:13px}
.hero-steps b{font-size:14px}
.hero-mock{min-height:250px}
.hero-grid{gap:24px}
@media(max-width:1000px){.hero{padding:18px 0 16px !important}}
/* İç sayfa üst bandı: koyu degrade üstünde okunur yazı */
.page-hero.hero p,.page-hero.hero li,.page-hero.hero .crumbs,.page-hero.hero .crumbs a,.page-hero.hero .crumbs span{color:rgba(255,255,255,.92)}
.page-hero.hero .label,.page-hero.hero .eyebrow{color:#c7d2fe}
.page-hero.hero a:not(.btn){color:#fff;text-decoration:underline}
.page-hero.hero .btn:not(.primary){color:#1e3a8a;background:#fff}

/* Ürün sayfası: tekrarsız, sade */
.product-updated{margin:10px 0 0;font-size:13px;color:var(--muted)}
.trial-note{background:var(--ok-soft);border:1px solid #bfe5cc;border-radius:14px;padding:14px 18px;margin:0 0 22px}
.trial-note h3{margin:0 0 6px;font-size:18px}
.trial-note p{margin:0 0 8px;font-size:15px;color:var(--text)}
.gallery-note-fold{margin:10px 0 0;font-size:14px}
.gallery-note-fold summary{cursor:pointer;color:var(--muted);font-weight:600}
.gallery-note-fold .gallery-note{margin:8px 0 0;font-size:13.5px}
/* sekmeler: hafif, tek satır */
.wt-labels{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;border-radius:0;background:transparent;border-bottom:2px solid var(--line-soft);margin:0 0 18px}
.wt-labels label{flex:none;background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:12px 16px;font-weight:700;white-space:nowrap}
.wt-labels label:hover{background:transparent;color:var(--text)}
.wt-radio:nth-of-type(1):checked~.wt-labels label:nth-child(1){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}
.wt-radio:nth-of-type(2):checked~.wt-labels label:nth-child(2){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}
.wt-radio:nth-of-type(3):checked~.wt-labels label:nth-child(3){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}
.wt-radio:nth-of-type(4):checked~.wt-labels label:nth-child(4){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}
.wt-radio:nth-of-type(5):checked~.wt-labels label:nth-child(5){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}
.wt-radio:nth-of-type(6):checked~.wt-labels label:nth-child(6){background:transparent;color:var(--blue);border-bottom-color:var(--blue);box-shadow:none}

.gallery:has(.gallery-slide--post) .gallery-caption{display:none}

@media (max-width:900px){body:has(.sticky-bar) .quick-contact{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

.wt-labels{scrollbar-width:none}.wt-labels::-webkit-scrollbar{display:none}
/* Ana sayfa: sektör listesi solda dikey, kartlar sağda */
.home-split{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.home-split .wrap{max-width:none;padding-left:0;padding-right:0}
.home-split .cats{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding:14px 0}
.home-split .cats h2{font-size:15px;margin:0 0 10px}
.home-split .cat-grid{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px}
.home-split .cat-card{width:100%;justify-content:flex-start;border-radius:12px;padding:6px 10px 6px 6px;gap:9px}
.home-split .cat-card .cat-name{font-size:14px;line-height:1.25;white-space:normal}
.home-split .catalog{padding-top:14px}
.home-split .work-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media(max-width:1000px){
  .home-split{display:block;padding:0}
  .home-split .wrap{padding-left:16px;padding-right:16px}
  .home-split .cats{position:static;max-height:none;overflow:visible;padding:10px 0 0}
  .home-split .cat-grid{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .home-split .cat-card{width:auto;flex:none}
}

/* Kart video rozetleri tıklanır (kartın tüm alanını kaplayan bağlantının üstünde) */
.work-videos{position:relative;z-index:2}
.work-videos .vl-chip{position:relative;z-index:2;cursor:pointer}
/* Ürün sayfası: daha küçük boyutlar */
.product-title h1{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:8px 0}
.product-lede{font-size:15.5px;line-height:1.5}
.product-cta .btn{padding:10px 16px;font-size:15px}
.vl-btn{padding:8px 14px;font-size:14px}
.vl-title{font-size:14px}
.gallery-slide--post img{max-height:520px}
.price-head strong{font-size:20px}

/* Sol sektör listesi: sade satırlar, kendi kaydırması yok, sayfayla yapışkan */
@media(min-width:1001px){
  .home-split{grid-template-columns:210px minmax(0,1fr)}
  .home-split .cats{position:sticky;top:84px;max-height:none;overflow:visible;padding:8px 0}
  .home-split .cats h2{font-size:14px;border:0;padding:0;margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .home-split .cat-grid{gap:0}
  .home-split .cat-card{border:0;background:transparent;box-shadow:none;border-radius:8px;padding:4px 8px;gap:8px;min-height:0;justify-content:space-between}
  .home-split .cat-card:hover{background:#eef2ff;transform:none;box-shadow:none}
  .home-split .cat-card .cat-name{font-size:13.5px;font-weight:600;line-height:1.2}
  .home-split .cat-card .cat-count{order:2;min-width:0;height:auto;padding:1px 7px;font-size:11px;background:#e0e7ff;color:#3730a3}
}
.work-price--none{font-size:14px;font-weight:600;color:var(--muted)}

@media(min-width:1001px){
  .home-split .cats{max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:none}
  .home-split .cats::-webkit-scrollbar{display:none}
  .home-split .cat-card{padding:2px 8px}
  .home-split .cat-card .cat-name{font-size:13px}
}

/* Ürün sayfası: galeri ve sağ sütun birlikte kayar (yapışkan yok) */
.product-media{position:static !important;top:auto !important}

/* Üst şerit: renkli iletişim simgeleri */
.topbar-tel{white-space:nowrap;font-weight:600}
.topbar-social{display:inline-flex;align-items:center;gap:8px}
.topbar .soc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;opacity:1;text-decoration:none;transition:transform .15s}
.topbar .soc:hover{transform:translateY(-1px);text-decoration:none}
.topbar .soc svg{width:17px;height:17px}
.soc-wa{background:#22c55e}
.soc-ig{background:linear-gradient(45deg,#f59e0b,#e11d48 55%,#7c3aed)}
.soc-yt{background:#dc2626}
.soc-li{background:#0a66c2}
@media (max-width:560px){.topbar-mail,.topbar-tel{display:none}.topbar .topbar-call{display:inline-flex}}

@media (max-width:560px){.topbar .topbar-social .soc{display:inline-flex !important}.topbar .topbar-mail,.topbar .topbar-tel{display:none !important}.topbar-inner{justify-content:flex-end}}

/* Başlık çubuğu: iletişim simgeleri masaüstünde başlıkta, telefonda ince şeritte */
.header-contact{display:none}
@media (min-width:901px){
  .topbar{display:none}
  .header-bar{gap:18px}
  .site-nav{margin-left:auto}
  .header-contact{display:inline-flex;align-items:center;gap:10px;order:3}
  .header-contact .header-tel{font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;font-size:14.5px}
  .header-contact .soc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#fff;transition:transform .15s}
  .header-contact .soc:hover{transform:translateY(-1px)}
  .header-contact .soc svg{width:18px;height:18px}
  .header-contact .topbar-social{display:inline-flex;gap:8px}
  .header-contact .lang-link{margin-left:2px}
}

/* Katalog: sol liste yok, sayfalı kart ızgarası */
[data-work][data-page-hidden]{display:none !important}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.pager[hidden]{display:none}
.pager-btn{min-width:44px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.pager-btn:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)}
.pager-btn.is-current{background:var(--text);border-color:var(--text);color:#fff}
.pager-btn:disabled{opacity:.4;cursor:default}
.catalog .work-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Ürün sayfası sağ kutu: fiyatın altında deneme düğmesi */
.btn-trial{background:#15803d !important;border-color:#15803d !important;color:#fff !important;margin:10px 0 14px}
/* İletişim: tek sütun, kısa form */
.contact-grid{display:block !important;max-width:640px;margin:0}
.contact-hero .lead{max-width:60ch}

/* Altbilgi: koyu, tek satır bağlantı, ince yasal satır */
.site-footer{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#cbd5e1;padding:28px 0 18px;margin-top:40px}
.site-footer a,.site-footer button{color:#cbd5e1;text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer}
.site-footer a:hover,.site-footer button:hover{color:#fff;text-decoration:underline}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-bottom:18px}
.site-footer .brand .brand-name{color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;font-weight:600}
.footer-sectors{padding:0 0 14px}
.footer-fold{font-size:13px}
.footer-fold summary{cursor:pointer;color:#94a3b8;list-style:none}
.footer-fold summary::-webkit-details-marker{display:none}
.footer-fold[open] summary{margin-bottom:8px}
.footer-fold div{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:13px;color:#94a3b8}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-lang{font-weight:700;padding-right:84px}
@media(max-width:900px){.footer-lang{padding-right:0}.site-footer{padding-bottom:84px}}

/* Altbilgi daha alçak */
.site-footer{padding:14px 0 8px;margin-top:0}
.footer-top{padding-bottom:8px;justify-content:flex-start}
.footer-links{font-size:14px;padding-right:90px}
.footer-bottom{padding-top:10px}
.catalog{padding-bottom:8px}
.pager{margin:20px 0 6px}
@media(max-width:900px){.site-footer{padding-bottom:84px}.footer-links{padding-right:0}}

/* İlgili rehberler: tek satır */
.editorial-links--line{margin:22px 0 0;font-size:14.5px;color:var(--muted);line-height:1.8}
.editorial-links--line span{font-weight:700;color:var(--text)}
.editorial-links--line a{color:var(--blue)}

/* Tüm yazılımlar: kapalı tek satır, açılınca sütunlu bağlantılar */
.all-works{margin:6px 0 0;font-size:14px}
.all-works summary{cursor:pointer;color:var(--muted);font-weight:600}
.all-works ul{list-style:none;margin:10px 0 0;padding:0;columns:3 240px;column-gap:24px}
.all-works li{break-inside:avoid;padding:3px 0}

/* Ürün sayfası: sağda başlık+kutu tek sütun, solda galeri ve altında sekmeler (aradaki boşluk yok) */
@media (min-width:1001px){
  .product,.product--gallery{grid-template-columns:minmax(0,1fr) 370px;grid-template-areas:"media side" "content side";grid-template-rows:auto 1fr;align-items:start}
  .product-side{grid-area:side;display:flex;flex-direction:column;gap:18px;min-width:0}
  .product-media{grid-area:media}
  .product-content{grid-area:content;max-width:none;min-width:0;margin-top:8px}
}
@media (max-width:1000px){
  .product-side{display:contents}
  .product,.product--gallery{grid-template-areas:"title" "media" "box" "content"}
  .product-content{grid-area:content;min-width:0}
}
.product-box{grid-area:box}

.product-title .highlights{margin:12px 0 16px;font-size:15.5px;font-weight:600}
.product-title .highlights li{margin-bottom:6px}

/* Sağ sütun: demo düğmeleri, fiyat kutusu, video satırı */
.product-cta{display:flex;flex-direction:column;gap:10px;margin:4px 0 0}
.product-cta .btn{width:100%;justify-content:center}
.product-box{padding:16px}
.side-videos{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13.5px;color:var(--muted);font-weight:600}
.side-videos .vl-chip{font-size:13px;padding:5px 12px}
.btn-trial{margin:12px 0 0 !important}

/* İlk ekran müşteri gözüyle: galeri ekrana sığar, sağ sütun sıkı */
@media (min-width:1001px){
  .gallery-slide--post img{max-height:calc(100vh - 250px);min-height:360px}
  .product-title h1{font-size:clamp(22px,2.1vw,30px);line-height:1.15;margin:6px 0}
  .product-lede{font-size:15px;line-height:1.45;margin:0 0 8px}
  .product-title .highlights{font-size:14.5px;margin:8px 0 12px}
  .product-title .highlights li{margin-bottom:3px;padding-left:24px}
  .product-cta{gap:8px}
  .product-cta .btn{padding:9px 14px;font-size:14.5px}
  .product-side{gap:12px}
  .price-box{padding:10px 14px}
  .price-head strong{font-size:19px}
  .btn-trial{padding:11px 14px;font-size:15px}
  .product-chips{margin:0 0 4px}
}

/* Telefon: başlık → galeri → fiyat kutusu → küçük resimler → sekmeler (tek sütun) */
@media (max-width:1000px){
  .product,.product--gallery{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"title" "media" "box" "more" "content"}
  .product-side{display:contents}
  .product-content{grid-area:content;min-width:0}
}

.trial-alt{margin:6px 0 0;text-align:center;font-size:13px}
.trial-alt a{color:var(--muted)}
/* Telefon: alt çubuk taşmasın, yüzen düğmeler içeriğin üstüne binmesin */
@media (max-width:900px){
  .sticky-bar{gap:8px;padding-left:12px;padding-right:12px}
  .sticky-bar .btn{min-width:0;padding:0 12px;font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
  .sticky-bar .btn:first-child:not(:only-child){flex:0 0 auto}
  .sticky-bar .btn.primary{flex:1 1 0}
  body:has(.sticky-bar) .quick-contact{display:none}
  .quick-contact .qc-call,.quick-contact .qc-ig{display:none}
  .quick-contact .qc-btn{width:48px;height:48px}
  .quick-contact{right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* Telefon: küçük resim şeridi gereksiz (kaydırma, sayaç ve oklar var); video bağlantıları yan yana */
@media (max-width:900px){.gallery-more{display:none}
.side-videos{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.side-videos>span{grid-column:1/-1}
.side-videos .vl-chip{justify-content:center;width:100%;box-sizing:border-box;font-size:14px;padding:9px 10px}}

/* Dar telefonda uzun düğme yazısı kırpılmasın, satıra sarılsın */
.btn-block,.btn-trial{white-space:normal;text-align:center;line-height:1.25}

/* Telefon, büyütme: oklar görselin iki yanında, kapat üstte; kaydırınca da geçilir */
@media (max-width:760px){
.gallery-dialog-bar{inset:0;top:0;right:0;pointer-events:none;display:block}
.gallery-dialog-bar button{position:absolute;pointer-events:auto;width:48px;height:48px;opacity:.92}
.gallery-dialog-bar [data-dialog-prev]{left:8px;top:50%;transform:translateY(-50%)}
.gallery-dialog-bar [data-dialog-next]{right:8px;top:50%;transform:translateY(-50%)}
.gallery-dialog-bar [data-dialog-close]{right:10px;top:10px}
}

/* Gerçek telefon: büyütme penceresi görünen ekrana (adres çubuğu hariç) otursun, kapat düğmesi kesilmesin */
.gallery-dialog{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none}
@supports (height:100dvh){.gallery-dialog{height:100dvh;max-height:100dvh}.gallery-dialog-inner{height:100dvh}}
.gallery-dialog-bar{top:calc(10px + env(safe-area-inset-top,0px))}
/* Telefon: çerez kutusu küçük ve altta, içeriği kapatmasın */
@media (max-width:760px){
.consent-banner{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:12px 14px;font-size:13px;line-height:1.4;gap:10px;border-radius:14px}
.consent-actions{flex-wrap:nowrap}
.consent-actions .btn{flex:1;padding:10px 12px;font-size:14px;min-height:42px;justify-content:center;text-align:center}
}

/* Başlıklarda tek kelimelik yetim satır kalmasın */
h1,h2,h3{text-wrap:balance}
/* contact page: every input visible on first open (no scrolling to find the fields) */
.contact-section .request-form{padding:20px 26px 22px;max-width:860px}
.contact-section .form-intro{margin:0 0 14px}
.contact-section .field{margin-bottom:14px}
.contact-section .field-row{margin-bottom:14px}
.contact-section .field textarea{min-height:84px}
.contact-section .field-row .field{margin-bottom:0}
.contact-section .consent-note{margin:2px 0 10px}
.contact-section .captcha{margin:0 0 10px}
.page-hero.contact-hero{padding:20px 0 0}
.contact-hero .lead{margin:6px 0 0}
.contact-hero .crumbs{margin-bottom:6px}
.contact-section{padding:12px 0 40px !important}
@media (max-width:820px){.contact-section .request-form{padding:18px}}
.contact-section .contact-grid{grid-template-columns:minmax(0,860px)}

/* ---------- Free tools (/araclar/) ---------- */
[hidden]{display:none !important}
.tool-page .tool-privacy{background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:15px;margin:14px 0 22px}
.tool{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:20px;margin:18px 0 30px;box-shadow:var(--shadow)}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-bottom:14px}
.tool-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-field--wide{grid-column:1 / -1}
.tool-field>span{font-size:14px;font-weight:650;color:var(--text)}
.tool-field small{font-size:13px;color:var(--muted);line-height:1.4}
.tool-field input,.tool-field select,.tool-field textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px}
.tool-field textarea{resize:vertical;line-height:1.5}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.tool-actions--col{flex-direction:column;align-items:stretch}
.tool-note{font-size:14px;color:var(--muted);margin:8px 0}
.tool-alert{background:var(--warn-soft);color:var(--warn-text);border-radius:10px;padding:10px 14px;font-size:14.5px;margin:10px 0}
.tool-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tool-tabs button{padding:10px 16px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.tool-tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tool-out{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:6px 16px;margin:14px 0}
.tool-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px}
.tool-row:last-child{border-bottom:0}
.tool-row strong{white-space:nowrap}
.tool-recipe-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.tool-qr-wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;margin-top:14px}
.tool-qr{width:min(100%,260px)}
.tool-qr svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px}
.tool-poster{display:none}
.tool-next ul{padding-left:20px}
@media (max-width:640px){.tool{padding:16px}.tool-grid{grid-template-columns:minmax(0,1fr)}.tool-recipe-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-actions .btn{width:100%;justify-content:center}.tool-row{flex-direction:column;gap:2px}.tool-row strong{white-space:normal}}

.tool-help{margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:10px 16px;background:var(--surface-2)}
.tool-help summary{cursor:pointer;font-weight:650}
.tool-help ol{margin:10px 0 4px;padding-left:20px}
.tool-sheet-wrap{margin-top:14px;overflow-x:auto;max-width:100%}
.tool-sheet{display:grid;grid-template-columns:repeat(3,63mm);grid-auto-rows:68mm;gap:0;width:189mm;margin:0 0 12px;background:#fff;border:1px dashed var(--line)}
.tool-sheet--24{grid-template-columns:repeat(4,47mm);grid-auto-rows:45mm;width:188mm}
.tool-label{box-sizing:border-box;border:1px dashed #b4b4c0;border-top:4mm solid #4338ca;-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:3mm;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;color:#000;background:#fff;gap:1mm}
.tool-label-name{font-size:13pt;font-weight:700;line-height:1.2;word-break:break-word;color:#1e1b4b}
.tool-label-price{font-size:30pt;font-weight:800;line-height:1.05}
.tool-label-old{font-size:12pt;text-decoration:line-through;color:#444}
.tool-label-badge{font-size:11pt;font-weight:800;color:#fff;background:#dc2626;border:0;border-radius:3mm;padding:.4mm 3mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tool-label-shop{font-size:9pt;color:#555;width:70%;margin-top:1mm;padding-top:1mm;border-top:1px solid #dcdce6}
.tool-sheet--24 .tool-label{padding:2mm}
.tool-sheet--24 .tool-label-name{font-size:10pt}
.tool-sheet--24 .tool-label-price{font-size:22pt}
.tool-sheet--24 .tool-label-old{font-size:9pt}
.tool-sheet--24 .tool-label-badge{font-size:8pt}
@media print{
  @page{size:A4;margin:10mm}
  body.tool-printing > *{display:none !important}
  body.tool-printing > main{display:block !important}
  body.tool-printing .tool-page > *{display:none !important}
  body.tool-printing .tool-page > .tool{display:block !important;border:0;box-shadow:none;padding:0;margin:0}
  body.tool-printing .tool > *{display:none !important}
  body.tool-printing .tool > .tool-poster{display:block !important;text-align:center;padding:30mm 0 0}
  body.tool-printing,body.tool-printing main,body.tool-printing .tool-page{background:#fff !important}
  body.tool-printing .tool-page{padding:0 !important;max-width:none !important}
  body.tool-printing .tool-poster h2{font-size:44pt;margin:0 0 20mm;line-height:1.15;border:0 !important;padding:0 !important}
  body.tool-printing .tool-poster-qr{width:120mm;margin:0 auto}
  body.tool-printing .tool-poster-qr svg{width:100%;height:auto}
  body.tool-printing .tool-poster p{font-size:20pt}
  body.tool-printing .tool-poster-number{font-size:28pt;font-weight:700}
  body.tool-printing .tool > .tool-sheet-wrap{display:block !important;overflow:visible;margin:0}
  body.tool-printing .tool-sheet{border:0;margin:0 auto;page-break-after:always;break-after:page}
  body.tool-printing .tool-sheet:last-child{page-break-after:auto;break-after:auto}
}

/* ---------- Free tools: ledgers, stock, QR menu, expense splitter ---------- */
.tool h3{margin:22px 0 8px;font-size:18px}
.tool-keep{border:1px solid var(--line)}
.tool-summary .tool-row strong{font-size:20px}
.tool-neg{color:var(--warn-text);font-weight:700}
.tool-pos{color:var(--accent);font-weight:700}
.tool-cust{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--surface)}
.tool-cust-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.tool-cust-name{font-size:17px}
.tool-cust-phone{color:var(--muted);font-size:14px}
.tool-cust-bal{margin-left:auto;font-size:17px}
.tool-hist{list-style:none;margin:8px 0 0;padding:0}
.tool-hist li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.tool-hist .btn,.tool-cust .btn{padding:8px 12px;font-size:14px}
.tool-backup{border-top:1px solid var(--line);margin-top:24px;padding-top:6px}
.tool-file{position:relative;cursor:pointer;overflow:hidden}
.tool-file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.tool-table-wrap{overflow-x:auto;max-width:100%}
.tool-table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0}
.tool-table th,.tool-table td{border-bottom:1px solid var(--line-soft);padding:8px 10px;text-align:left;white-space:nowrap}
.tool-table thead th{font-size:13px;color:var(--muted)}
@media (max-width:480px){.tool-table{font-size:13px}.tool-table th,.tool-table td{padding:7px 5px}}
@media (max-width:380px){.tool-table{font-size:12px}.tool-table th,.tool-table td{padding:6px 3px}.tool-table thead th{white-space:normal;line-height:1.2}}
.tool-transfers{margin:8px 0 12px;padding-left:20px;font-size:16px}
.tool-sheets-list{list-style:none;margin:0;padding:0}
.tool-sheets-list li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px 22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.tool-sheet-preview{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,23,42,.10);background:#fff}
.tool-sheet-main{display:flex;flex-direction:column;gap:12px}
.tool-sheet-actions{display:flex;flex-wrap:wrap;gap:8px}
.tool-sheets-list p{margin:2px 0 0;color:var(--muted);font-size:14.5px}
.tool-camera{margin:10px 0}
.tool-camera video{width:100%;max-width:420px;border-radius:12px;background:#000;display:block}
.tool-card{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:14px 16px;margin:12px 0}
.tool-card h3{margin:0 0 4px}
.tool-card-price{font-size:26px;font-weight:800;margin:4px 0}
.tool-card-stock{font-size:18px;font-weight:650;margin:4px 0}
.tool-stock-list{list-style:none;margin:8px 0;padding:0;max-height:320px;overflow:auto}
.tool-stock-row{padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
@media (max-width:640px){.tool-cust-bal{margin-left:0}.tool-hist li{flex-direction:column;align-items:stretch}.tool-sheets-list li{grid-template-columns:1fr}.tool-sheets-list .btn{flex:1;justify-content:center}}
/* the page a customer sees after scanning a QR menu */
.menu-page{margin:0;background:var(--bg,#fff);color:var(--text)}
.menu-wrap{max-width:640px;margin:0 auto;padding:22px 18px 40px}
.menu-title{font-size:30px;margin:6px 0 4px;line-height:1.15}
.menu-note{color:var(--muted);margin:0 0 14px}
.menu-cat{font-size:20px;margin:26px 0 6px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.menu-list{list-style:none;margin:0;padding:0}
.menu-item{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.menu-item-head{display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.menu-item-name{font-size:17px;font-weight:650;overflow-wrap:anywhere}
.menu-item-price{font-size:17px;font-weight:800;white-space:nowrap}
.menu-item-desc{margin:3px 0 0;color:var(--muted);font-size:14.5px;overflow-wrap:anywhere}
.menu-foot{margin-top:30px;font-size:13px;color:var(--muted)}
.menu-foot a{color:inherit}
.menu-error,.menu-loading{padding:20px 0;font-size:16px}
.menu-loading{font-weight:400;line-height:1.4;margin:0}
@media print{
  body.tool-printing .tool > .tool-report{display:block !important;text-align:left;padding:0}
  body.tool-printing .tool-report h2{font-size:20pt;margin:0 0 8mm}
  body.tool-printing .tool-report .tool-table{font-size:12pt;margin:0 0 8mm}
}

/* ---------- Tools hub: the same card design as the software catalogue ---------- */
.tools-catalog{margin:22px 0 28px}
.tools-catalog .catalog-toolbar{margin-bottom:18px}
.tool-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;box-sizing:border-box;padding:16px 18px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;overflow:hidden}
.tool-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(0deg,rgba(8,12,32,.55),rgba(8,12,32,0));pointer-events:none}
.tool-cover-art{position:absolute;inset:0;display:block;line-height:0}
.tool-art{display:block;width:100%;height:100%}
.tool-cover-hook{position:relative;z-index:1;font-weight:800;font-size:19px;line-height:1.25;max-width:56%;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.work-card .work-cat .status--demo{background:#fff;color:#14532d}
@media (max-width:640px){.tool-cover-hook{font-size:17px;max-width:64%}}
.editorial-page.tool-hub{max-width:1320px}
.tool-hub .lead,.tool-hub .tool-privacy{max-width:860px}
.menu-title,.menu-note,.menu-cat{overflow-wrap:anywhere}

/* ---- Defter araçları (veresiye, kasa): panolu, renkli, yumuşak arayüz ---- */
.tool--book{--debt:#c2410c;--debt-soft:#fff1e8;--pay:#15803d;--pay-soft:#e7f6ec;padding:clamp(14px,3vw,26px);background:linear-gradient(180deg,#fff 0%,#fbfbff 100%);border-radius:22px}
.tool--book .tool-keep{display:flex;gap:10px;align-items:flex-start;border:0;background:#f6f4ff;color:#3b3a8f;border-radius:14px;font-size:14px}
.tool--book .tool-keep::before{content:"🔒";font-size:15px;line-height:1.5}
.book-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;margin:14px 0 18px;padding:24px 26px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#312e81 0%,#4338ca 52%,#7c3aed 100%);box-shadow:0 22px 40px -22px rgba(67,56,202,.75)}
.book-hero::before,.book-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.08)}
.book-hero::before{width:230px;height:230px;right:-70px;top:-100px}
.book-hero::after{width:150px;height:150px;right:80px;bottom:-90px;background:rgba(255,255,255,.06)}
.book-hero-label{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.book-hero-amount{font-size:clamp(34px,8vw,56px);line-height:1.05;font-weight:800;letter-spacing:-.025em}
.book-chip{align-self:flex-start;margin-top:6px;padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.17);font-size:13.5px;font-weight:600}
.book-card{position:relative;margin:16px 0;padding:18px 18px 6px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.tool--book .book-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:18px}
.tool--book .book-h::before{content:"";width:7px;height:22px;border-radius:4px;background:linear-gradient(180deg,#6366f1,#7c3aed)}
.book-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;padding:5px;border-radius:16px;background:var(--surface-2)}
.book-seg-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 8px;border:1.5px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.book-seg-btn b{font-size:15.5px;font-weight:700}
.book-seg-btn small{font-size:12.5px;opacity:.8}
.book-seg-btn:hover{color:var(--text)}
.book-seg-btn.is-on{background:#fff;box-shadow:0 3px 10px -3px rgba(16,16,24,.2)}
.book-seg-btn.is-debt.is-on,.book-seg-btn.is-out.is-on{color:var(--debt);border-color:var(--debt);background:var(--debt-soft)}
.book-seg-btn.is-pay.is-on,.book-seg-btn.is-in.is-on{color:var(--pay);border-color:var(--pay);background:var(--pay-soft)}
.book-seg-select{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;opacity:0;pointer-events:none}
.tool--book .tool-field input,.tool--book .tool-field select{border-radius:12px;border-color:#dcdce6;background:#fff;transition:border-color .15s,box-shadow .15s}
.tool--book .tool-field input:focus,.tool--book .tool-field select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(67,56,202,.14)}
.tool--book input[name="amount"]{font-size:22px;font-weight:800;letter-spacing:-.01em}
.book-save{padding:14px 30px;border-radius:12px;font-size:16px;box-shadow:0 12px 24px -12px rgba(67,56,202,.85)}
.tool--book .book-empty{margin:10px 0 14px;padding:26px 14px;border:1.5px dashed var(--line);border-radius:16px;background:var(--surface-2);color:var(--muted);text-align:center}
.tool--book .tool-cust{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,16,24,.04);transition:box-shadow .2s;animation:book-in .35s ease both}
.tool--book .tool-cust:hover{box-shadow:var(--shadow-lift)}
.tool--book .tool-cust-head{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.tool-cust-av{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;font-size:16px;font-weight:800;letter-spacing:.02em}
.av-0{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.av-1{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.av-2{background:linear-gradient(135deg,#10b981,#059669)}.av-3{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.av-4{background:linear-gradient(135deg,#ec4899,#db2777)}.av-5{background:linear-gradient(135deg,#14b8a6,#0d9488)}.av-6{background:linear-gradient(135deg,#a855f7,#7e22ce)}.av-7{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.tool-cust-who{display:flex;flex:1;flex-direction:column;min-width:0}
.tool--book .tool-cust-name{font-size:17px;overflow-wrap:anywhere}
.tool--book .tool-cust-bal{margin-left:auto;padding:6px 13px;border-radius:999px;font-size:15.5px;font-weight:800;white-space:nowrap}
.tool--book .tool-cust-bal.tool-neg{background:var(--debt-soft);color:var(--debt)}
.tool--book .tool-cust-bal.tool-pos{background:var(--pay-soft);color:var(--pay)}
.tool--book .tool-cust .tool-actions{margin:12px 0 0}
.tool--book .tool-cust .btn.primary{background:#15803d;border-color:#15803d}
.tool--book .tool-hist{margin:10px 0 0}
.tool--book .tool-hist li{position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 12px;padding:10px 0 10px 20px;border-top:1px dashed var(--line)}
.tool--book .tool-hist li::before{content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.tool--book .tool-hist li.hist-debt::before,.tool--book .tool-hist li.hist-out::before{background:var(--debt)}
.tool--book .tool-hist li.hist-pay::before,.tool--book .tool-hist li.hist-in::before{background:var(--pay)}
.hist-main{display:flex;flex-direction:column;flex:1 1 140px;min-width:0}
.hist-date{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.hist-type{font-weight:600;overflow-wrap:anywhere}
.hist-amt{font-size:16px;white-space:nowrap}
.hist-debt .hist-amt,.hist-out .hist-amt{color:var(--debt)}
.hist-pay .hist-amt,.hist-in .hist-amt{color:var(--pay)}
.tool--book .tool-hist li .btn{margin-left:auto}
.book-daynav{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:14px 0 16px}
.book-day{flex:1 1 120px}
.book-nav-btn{flex:none;width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font-size:26px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.book-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.book-today{height:48px}
.book-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.book-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,16,24,.04)}
.book-kpi span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.book-kpi strong{font-size:clamp(18px,3.6vw,24px);font-weight:800;line-height:1.2}
.book-kpi.is-in{border-color:#bfe6cc;background:linear-gradient(180deg,#f0faf3,#fff)}.book-kpi.is-in strong{color:var(--pay)}
.book-kpi.is-out{border-color:#f6d0b8;background:linear-gradient(180deg,#fff5ed,#fff)}.book-kpi.is-out strong{color:var(--debt)}
.book-kpi.is-close{position:relative;overflow:hidden;grid-column:1 / -1;border:0;color:#fff;background:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#7c3aed 100%);box-shadow:0 20px 38px -22px rgba(67,56,202,.8)}
.book-kpi.is-close::after{content:"";position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08)}
.book-kpi.is-close span{color:rgba(255,255,255,.82)}
.book-kpi.is-close strong{font-size:clamp(30px,7vw,46px);color:#fff;letter-spacing:-.02em}
.book-month{margin-bottom:16px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.book-month-top{font-size:14px;color:var(--muted)}
.book-bar{display:flex;height:10px;margin-top:10px;overflow:hidden;border-radius:999px;background:var(--surface-3)}
.book-bar i{display:block;height:100%;transition:width .45s ease}
.book-bar .in{background:linear-gradient(90deg,#34d399,#15803d)}
.book-bar .out{background:linear-gradient(90deg,#fb923c,#c2410c)}
.tool--book .tool-backup{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#fafaff,#fff)}
@keyframes book-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tool--book .tool-cust{animation:none}.book-bar i{transition:none}}
@media (max-width:560px){.book-kpis{grid-template-columns:1fr 1fr}.book-kpi:first-child{grid-column:1 / -1}.book-hero{padding:20px}.tool--book .tool-cust-bal{padding:5px 10px;font-size:14px}.book-save{width:100%;justify-content:center}}

.tool--book .tool-cust .tool-actions{gap:8px}
.tool--book .tool-cust .tool-actions .btn,.tool--book .tool-hist li .btn{width:auto;flex:0 1 auto;padding:9px 14px;font-size:14px}
.tool--book .tool-cust-phone{white-space:nowrap}
.tool--book .tool-cust .tool-actions .btn,.tool--book .tool-hist li .btn{padding:8px 12px;font-size:13.5px}
.tool--book .tool-cust .tool-actions{gap:6px}

/* ---------- Yazdırma tasarımı: afişler (WhatsApp QR, Google yorum QR, QR menü) ve günlük kasa raporu ---------- */
@media print{
  body.tool-printing *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.tool-printing .tool > .tool-poster:not(.tool-report){position:relative;min-height:268mm;padding:0 !important;text-align:center;background:#fff}
  body.tool-printing .tool-poster:not(.tool-report) h2{margin:0 !important;padding:16mm 14mm 14mm !important;color:#fff;font-size:38pt;line-height:1.12;background:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#7c3aed 100%);border-radius:0 0 16mm 16mm}
  body.tool-printing .tool-poster:not(.tool-report) .tool-poster-qr{width:100mm;margin:15mm auto 0;padding:8mm;border:2.6mm solid #4338ca;border-radius:11mm;background:#fff}
  body.tool-printing .tool-poster:not(.tool-report) p{display:inline-block;margin:11mm auto 0;padding:4mm 11mm;border-radius:999px;background:#eef0fe;color:#312e81;font-size:20pt;font-weight:600}
  body.tool-printing .tool-poster:not(.tool-report) p:empty{display:none}
  body.tool-printing .tool-poster:not(.tool-report) .tool-poster-number{display:block;margin:7mm 0 0;padding:0;background:none;border-radius:0;color:#1e1b4b;font-size:30pt;font-weight:800;letter-spacing:.02em}
  body.tool-printing .tool-poster:not(.tool-report)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10mm;background:linear-gradient(90deg,#4338ca,#7c3aed);border-radius:5mm 5mm 0 0}
  /* günlük kasa raporu */
  body.tool-printing .tool-report h2{display:block;margin:0 0 9mm !important;padding:8mm 9mm !important;color:#fff;font-size:22pt;background:linear-gradient(135deg,#312e81 0%,#4338ca 60%,#7c3aed 100%);border-radius:5mm}
  body.tool-printing .tool-report .tool-table{width:100%;margin:0 0 9mm;overflow:hidden;border:1px solid #dcdce6;border-radius:4mm;font-size:12pt}
  body.tool-printing .tool-report .tool-table th,body.tool-printing .tool-report .tool-table td{padding:3.2mm 5mm;border-bottom:1px solid #ececf3}
  body.tool-printing .tool-report .tool-table th{width:55%;background:#f3f2ff;color:#312e81;font-weight:700;text-align:left}
  body.tool-printing .tool-report .tool-table td{text-align:right;font-weight:700}
  body.tool-printing .tool-report .tool-table:first-of-type tr:last-child th,body.tool-printing .tool-report .tool-table:first-of-type tr:last-child td{background:#312e81;color:#fff;font-size:14pt;border-bottom:0}
  body.tool-printing .tool-report .tool-table:nth-of-type(2) td{text-align:left;font-weight:500}
  body.tool-printing .tool-report .tool-table:nth-of-type(2) td:last-child{text-align:right;font-weight:700}
  body.tool-printing .tool-report .tool-table:nth-of-type(2) tr:nth-child(even) td{background:#fafaff}
  body.tool-printing .tool-report .rep-in td:last-child{color:#15803d}
  body.tool-printing .tool-report .rep-out td:last-child{color:#c2410c}
  body.tool-printing .tool-report::after{content:"Hazırlayan: ______________________        İmza: ______________________";display:block;margin-top:24mm;color:#555;font-size:11pt}
  html[lang="en"] body.tool-printing .tool-report::after{content:"Prepared by: ______________________        Signature: ______________________"}
}

.book-count{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.book-diff{margin:10px 0 0;padding:0;font-weight:700;font-size:15px}
.book-diff:empty{display:none}
.book-diff.is-ok{color:var(--pay)}.book-diff.is-plus{color:#1d4ed8}.book-diff.is-minus{color:var(--debt)}
@media print{
  body.tool-printing .tool-report h2{width:100%;box-sizing:border-box}
  body.tool-printing .tool-report .rep-sub{margin:-4mm 0 8mm;color:#555;font-size:11pt}
  body.tool-printing .tool-report .tool-table .rep-head th{width:auto;padding:3mm 5mm;background:#312e81;color:#fff;font-size:11pt;text-align:left}
  body.tool-printing .tool-report .tool-table .rep-head th:last-child{text-align:right}
}

/* ---------- Araç sayfası başlık bandı: gradient + kapak çizimi ---------- */
.tool-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:236px;margin:8px 0 20px;padding:34px clamp(20px,4vw,42px);border-radius:26px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 26px 46px -28px rgba(15,23,42,.6)}
.tool-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,32,.42),rgba(8,12,32,0) 62%);pointer-events:none;z-index:1}
.tool-hero h1{position:relative;z-index:2;margin:0;max-width:17ch;color:#fff;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.15;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.tool-hero-art{position:absolute;top:0;right:0;bottom:0;width:auto;aspect-ratio:480 / 300;display:block;line-height:0;transform:scale(1.14);transform-origin:right center}
@media (max-width:720px){.tool-hero{display:flex;flex-direction:column-reverse;align-items:stretch;min-height:0;padding:0 0 22px}.tool-hero::before{display:none}.tool-hero-art{position:relative;top:auto;right:auto;bottom:auto;display:block;width:100%;height:auto;aspect-ratio:480 / 215;transform:none}.tool-hero h1{max-width:none;padding:18px 20px 0;font-size:1.65rem}}

/* ---------- Tüm ücretsiz araçlar: ortak tasarım dili (veresiye/kasa ile aynı) ---------- */
.tool{padding:clamp(16px,3vw,26px);border-radius:22px;background:linear-gradient(180deg,#fff 0%,#fbfbff 100%)}
.tool-field>span{font-size:13.5px;font-weight:700;color:#2b2b3a}
.tool-field small{color:#6b6b78}
.tool-field input,.tool-field select,.tool-field textarea{border-radius:12px;border-color:#dcdce6;background:#fff;transition:border-color .15s,box-shadow .15s}
.tool-field input:focus,.tool-field select:focus,.tool-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(67,56,202,.14)}
.tool h3:not(.book-h){display:flex;align-items:center;gap:10px}
.tool h3:not(.book-h)::before{content:"";flex:none;width:7px;height:20px;border-radius:4px;background:linear-gradient(180deg,#6366f1,#7c3aed)}
.tool-alert{padding:11px 14px;border-radius:14px;border-left:4px solid #f59e0b}
.tool-actions .btn{border-radius:12px}
.tool-tabs{padding:5px;border-radius:18px;background:var(--surface-2);display:inline-flex;gap:4px}
.tool-tabs button{border:0;background:transparent;border-radius:13px;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.tool-tabs button:hover{color:var(--text)}
.tool-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff;box-shadow:0 8px 18px -10px rgba(67,56,202,.9)}
/* sonuç kartları (marj, KDV) */
.tool-out--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;padding:0;border:0;background:none}
.tool-out--cards[hidden]{display:none}
.tool-out--cards .tool-row{flex-direction:column;justify-content:flex-start;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,16,24,.04)}
.tool-out--cards .tool-row span{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tool-out--cards .tool-row strong{font-size:clamp(20px,3.2vw,26px);white-space:normal;line-height:1.2}
.tool-out--cards .tool-row.is-key{position:relative;overflow:hidden;grid-column:1 / -1;border:0;color:#fff;background:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#7c3aed 100%);box-shadow:0 20px 38px -22px rgba(67,56,202,.8)}
.tool-out--cards .tool-row.is-key::after{content:"";position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08)}
.tool-out--cards .tool-row.is-key span{color:rgba(255,255,255,.82)}
.tool-out--cards .tool-row.is-key strong{font-size:clamp(30px,6vw,44px);letter-spacing:-.02em}
.tool-out--cards .tool-alert{grid-column:1 / -1;margin:0}
/* WhatsApp önizleme */
.wa-phone{max-width:340px;margin:18px 0;overflow:hidden;border-radius:24px;border:1px solid #0b3d33;background:#0b141a;box-shadow:0 22px 42px -24px rgba(8,12,32,.7)}
.wa-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#128c7e;color:#fff}
.wa-av{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.3)}
.wa-bar b{display:block;font-size:15px;line-height:1.2}.wa-bar small{display:block;font-size:11.5px;opacity:.8}
.wa-chat{min-height:120px;padding:18px 14px 22px;background:#ece5dd}
.wa-bubble{position:relative;margin-left:auto;max-width:88%;padding:10px 12px 20px;border-radius:12px 12px 2px 12px;background:#d9fdd3;color:#111b21;font-size:14.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.14)}
.wa-bubble::after{content:"✓✓";position:absolute;right:9px;bottom:3px;font-size:10px;letter-spacing:-1px;color:#53bdeb}
/* QR çıktıları */
.tool-qr-wrap{padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#f5f3ff,#eef2ff)}
.tool-qr svg{padding:12px;border:0;border-radius:18px;background:#fff;box-shadow:0 16px 30px -18px rgba(67,56,202,.7)}
/* etiket sayfası önizlemesi: masadaki kâğıt gibi */
.tool-sheet-wrap{padding:18px;border-radius:20px;background:#e6e8f2}
.tool-sheet{box-shadow:0 18px 36px -18px rgba(16,16,24,.4);border-color:#d5d8e6}
/* gider bölüştürücü sonuçları */
.tool-out{border-radius:20px;box-shadow:0 1px 2px rgba(16,16,24,.04)}
.tool-out ul{list-style:none;margin:8px 0;padding:0}
.tool-out li{margin:6px 0;padding:10px 14px;border-radius:14px;background:#f5f3ff;color:#312e81}
.tool-out .tool-table{border-radius:14px;overflow:hidden}
.tool-out .tool-table thead th{background:#f3f2ff;color:#312e81;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.tool-out .tool-table tbody tr:nth-child(even) td{background:#fafaff}
/* barkod ürün kartı */
.tool-card{border:0;border-radius:22px;background:linear-gradient(135deg,#f5f3ff,#eef6ff);padding:18px 22px;box-shadow:0 1px 2px rgba(16,16,24,.04)}
.tool-card-price{color:#312e81;font-size:32px;letter-spacing:-.02em}
.tool-card-stock{color:#15803d}
@media print{
  body.tool-printing .tool-sheet-wrap{padding:0;background:none;border-radius:0}
  body.tool-printing .tool-sheet{box-shadow:none}
}
@media (max-width:560px){.tool-tabs{display:flex;flex-wrap:wrap}.tool-tabs button{flex:1 1 auto}}

/* ---------- Free tools: win and keep customers (Google profile checklist, loyalty card) ---------- */
.tool--gbp,.tool--loyalty{padding:clamp(14px,3vw,28px);background:linear-gradient(180deg,#fff 0%,#fff8f9 100%);border-radius:22px}
.gbp-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 26px;align-items:center;margin-bottom:18px}
.gbp-ring{width:136px;height:136px;display:block}
.gbp-ring-bg{fill:none;stroke:#fde1e6;stroke-width:11}
.gbp-ring-fg{fill:none;stroke:#e11d48;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .5s ease,stroke .3s}
.tool--gbp[data-level="way"] .gbp-ring-fg{stroke:#f59e0b}
.tool--gbp[data-level="good"] .gbp-ring-fg,.tool--gbp[data-level="great"] .gbp-ring-fg{stroke:#16a34a}
.gbp-ring text{font-size:30px;font-weight:800;fill:#0f172a;font-family:inherit}
.gbp-status{font-size:22px;font-weight:800;margin:0 0 2px;line-height:1.2}
.gbp-count{margin:0 0 12px;color:var(--muted);font-size:15px}
.gbp-sector{max-width:340px}
.gbp-next{background:#fff1f2;border:1px solid #fecdd3;border-radius:16px;padding:14px 18px 12px;margin:0 0 8px}
.gbp-next h3{margin:0 0 8px;font-size:17px;color:#9f1239}
.gbp-next ol{margin:0;padding-left:22px}
.gbp-next li{margin:5px 0;font-size:15.5px;font-weight:650}
.gbp-next a{color:#9f1239;text-underline-offset:3px}
.gbp-done{margin:0;font-weight:650;color:#166534}
.gbp-sec h3{margin:26px 0 6px;font-size:19px}
.gbp-item{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0;background:#fff;transition:border-color .2s,background .2s;scroll-margin-top:90px}
.gbp-item.is-done{background:#f0fdf4;border-color:#bbf7d0}
.gbp-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:16.5px;font-weight:700;line-height:1.35}
.gbp-check input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:#e11d48;cursor:pointer}
.gbp-item.is-done .gbp-title{color:#166534}
.gbp-pill{flex:none;align-self:center;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:2px 9px;border-radius:999px;background:#ffe4e6;color:#9f1239;white-space:nowrap}
.gbp-item.is-done .gbp-pill{background:#dcfce7;color:#166534}
.gbp-why{margin:6px 0 0 36px;font-size:14.5px;color:var(--muted)}
.gbp-how{margin:8px 0 0 36px}
.gbp-how summary{cursor:pointer;font-weight:650;font-size:14.5px;color:var(--accent)}
.gbp-how p{margin:8px 0 0;font-size:14.5px}
.gbp-ex{background:var(--surface-2);border-radius:10px;padding:8px 12px}
.gbp-link{font-weight:700;white-space:nowrap}
.gbp-report{display:none}
@media (max-width:640px){
  .gbp-top{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .gbp-ring{width:120px;height:120px}
  .gbp-sector{max-width:none;width:100%;text-align:left}
  .gbp-why,.gbp-how{margin-left:0}
  .gbp-check{font-size:16px}
}

.lc-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}
.lc-themes{border:0;padding:0;margin:4px 0 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.lc-themes legend{font-size:14px;font-weight:650;padding:0;margin-bottom:8px;float:left;width:100%}
.lc-theme{position:relative;display:block;width:40px;height:40px;cursor:pointer}
.lc-theme input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.lc-swatch{display:block;width:100%;height:100%;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #cbd5e1;transition:box-shadow .15s,transform .15s}
.lc-theme input:checked + .lc-swatch{box-shadow:0 0 0 3px #0f172a;transform:scale(1.06)}
.lc-theme input:focus-visible + .lc-swatch{outline:3px solid #6366f1;outline-offset:3px}
.lc-preview{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;min-width:0}
.lc-card-wrap{margin:0}
.lc-card-wrap svg{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 14px 28px rgba(15,23,42,.18)}
.lc-card-wrap figcaption{margin-top:6px;font-size:13px;color:var(--muted);text-align:center}
.lc-sheets{display:none}
@media (max-width:760px){
  .lc-layout{grid-template-columns:minmax(0,1fr)}
  .lc-preview{position:static;order:-1}
}
@media (max-width:640px){.gbp-top .gbp-summary{width:100%}}

@media print{
  body.tool-printing .tool > .gbp-report{display:block !important;text-align:left;padding:0}
  body.tool-printing .gbp-report h2{font-size:20pt;margin:0 0 3mm;border:0;padding:0}
  body.tool-printing .gbp-report-meta{font-size:11pt;color:#444;margin:0 0 6mm}
  body.tool-printing .gbp-report-list{list-style:none;margin:0 0 6mm;padding:0}
  body.tool-printing .gbp-report-list li{display:flex;gap:3mm;align-items:center;font-size:12pt;padding:1.6mm 0;border-bottom:.2mm solid #ddd}
  body.tool-printing .gbp-rbox{display:inline-block;width:4.5mm;height:4.5mm;border:.4mm solid #222;border-radius:.8mm;flex:none;position:relative}
  body.tool-printing .gbp-report-list li.is-done .gbp-rbox{background:#16a34a;border-color:#16a34a;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.tool-printing .gbp-report-list li.is-done .gbp-rbox::after{content:"";position:absolute;left:1.2mm;top:.5mm;width:1.3mm;height:2.4mm;border:solid #fff;border-width:0 .5mm .5mm 0;transform:rotate(45deg)}
  body.tool-printing .gbp-report-next{font-size:12pt;font-weight:700}
  html[lang] body.tool-printing .gbp-report::after{content:none !important;display:none !important}
  body.tool-printing .tool--gbp,body.tool-printing .tool--loyalty{background:none !important;border-radius:0}
  body.tool-printing .tool > .lc-sheets{display:block !important;margin:0;padding:0}
  body.tool-printing .lc-sheet{display:grid;grid-template-columns:repeat(2,85mm);grid-auto-rows:54mm;width:170mm;margin:0 auto;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.tool-printing .lc-sheet:last-child{break-after:auto;page-break-after:auto}
  body.tool-printing .lc-cell{width:85mm;height:54mm;outline:.15mm dashed #bbb;outline-offset:-.15mm;overflow:hidden}
  body.tool-printing .lc-cell svg{display:block;width:85mm;height:54mm;border-radius:0;box-shadow:none}
}
/* Web sitesi paketleri: katalog kartı görünümünde üç paket + kapalı ayrıntı bölümü */
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:16px 0 8px}
.pack-card .work-image img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}
.pack-points{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:15px;line-height:1.45;color:var(--muted)}
.pack-points li{position:relative;padding-left:22px}
.pack-points li:before{content:"\2713";position:absolute;left:0;color:var(--green-d);font-weight:800}
.scope-more{margin:18px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.scope-more>summary{cursor:pointer;padding:14px 18px;font-weight:700}
.scope-more[open]>summary{border-bottom:1px solid var(--line)}
.scope-more .scope-grid{padding:16px}
@media (max-width:1000px){.pack-grid{grid-template-columns:minmax(0,1fr)}}
/* Site + yazılım paketi: geniş kart */
.bundle-card{flex-direction:row;align-items:stretch}
.bundle-card .work-image{flex:0 0 44%;display:flex;align-items:center;background:#3f1a33}
.bundle-card .work-image img{height:auto;aspect-ratio:700/727;object-fit:contain;width:100%}
.bundle-card .work-body{flex:1;min-width:0}
.bundle-for{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.bundle-for a{white-space:nowrap}
@media (max-width:1000px){.bundle-card{flex-direction:column}.bundle-card .work-image{flex:none}}
/* Web sitesi fiyatları */
.pack-card .work-price{font-size:17px;line-height:1.35}
.bundle-price{color:var(--muted);white-space:nowrap}
.incl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:12px 0}
.incl-grid h3{margin:0 0 4px;font-size:18px}
.pack-points--no li:before{content:"\2715";color:var(--muted);font-weight:700}
@media (max-width:1000px){.incl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Free tools wave 5: carpet-wash quote, gold calculator, calorie and macro calculator ---------- */
.tool-contents{display:contents}
.tool-contents[hidden]{display:none}
.tool-carpet{display:grid;gap:12px;margin-bottom:12px}
.tool-carpet-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 12px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.tool-carpet-row .tool-field:first-child{grid-column:span 2}
.tool-carpet-row .tool-field:nth-child(2){grid-column:span 2}
.tool-out--cards .tool-macro{grid-column:1 / -1}
.tool-carpet-row .tool-row-del{justify-self:end;align-self:end;color:var(--muted)}
.tool-row small{font-weight:400;color:var(--muted);font-size:13.5px}
.tool-live{margin:-2px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.tool-live-status{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.tool-live-status.is-bad{color:var(--warn-text)}
.tool-actions--inline{margin:10px 0 0}
.tool-actions--inline .btn{padding:8px 14px;font-size:14.5px}
.tool-macro{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:8px 0 12px;background:var(--line)}
.tool-macro span{display:block;min-width:3px}
.m-p{background:#22c55e}.m-c{background:#f59e0b}.m-f{background:#ef4444}
.m-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:baseline}
.dt-report{display:none}
@media (max-width:900px){.tool-carpet-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-carpet-row .tool-field:first-child{grid-column:1 / -1}.tool-carpet-row .tool-row-del{grid-column:1 / -1;justify-self:stretch}}
@media print{
  body.tool-printing .tool > .dt-report{display:block !important;padding:6mm 2mm;color:#111;font-family:inherit}
  body.tool-printing .dt-report h2{font-size:20pt;margin:0 0 3mm;border:0;padding:0}
  body.tool-printing .dt-report-meta{font-size:11.5pt;color:#444;margin:0 0 8mm;line-height:1.5}
  body.tool-printing .dt-report table{width:100%;border-collapse:collapse;font-size:14pt}
  body.tool-printing .dt-report th{text-align:left;font-weight:600;padding:3.2mm 2mm;border-bottom:.3mm solid #ccc}
  body.tool-printing .dt-report td{text-align:right;font-weight:700;padding:3.2mm 2mm;border-bottom:.3mm solid #ccc}
  body.tool-printing .dt-report-note{font-size:10.5pt;color:#555;margin:8mm 0 0}
  body.tool-printing .dt-report-by{font-size:12pt;font-weight:700;margin:6mm 0 0}
}