:root {
  color-scheme: light;
  --ink: #172735; --slate: #304a5f; --slate-hover: #20384b; --muted: #4a5c6b;
  --paper: #f3f5f7; --white: #fff; --header: #fcfdfe; --line: #d9e1e8; --accent: #ff9656;
  --accent-hover: #ffa874; --accent-text: #99401c; --soft: #fff0e5;
  --tint: #e8eef4; --green: #12633e; --red: #a32a32;
  --font: Inter, system-ui, sans-serif; --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --shadow: 0 8px 24px #1a314711;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--font); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; opacity: .64; }
[hidden] { display: none !important; }
svg { flex: 0 0 auto; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.08; }
h1, h2 { font-family: var(--display); font-weight: 800; }
h1 { font-size: clamp(48px, 7vw, 86px); }
h2 { font-size: clamp(31px, 4vw, 52px); }
h3 { font-size: 1.05rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #b96803; outline-offset: 3px; }
.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.muted { color: var(--muted); }
.fineprint { font-size: .76rem; color: var(--muted); margin-top: 15px; line-height: 1.55; }
.fineprint a, .text-link { text-decoration: underline; text-underline-offset: 3px; }
.skip { position: absolute; z-index: 6; top: 8px; left: 10px; background: var(--white); border-radius: 8px; padding: 8px 12px; transform: translateY(-140%); }
.skip:focus { transform: none; }
.topline { background: var(--slate); color: var(--white); font-size: .76rem; }
.topinner { min-height: 30px; display: flex; align-items: center; justify-content: space-between; }
.topinner > * { display: flex; align-items: center; gap: 7px; }
.topinner svg { color: var(--accent); }
.site-header, .staff-header { background: var(--header); color: var(--ink); border-bottom: 1px solid var(--line); }
.navrow { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); line-height: 1; }
.mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--accent); color: var(--ink); border-radius: 8px; }
.brand strong { display: block; font: 800 26px/.95 var(--display); letter-spacing: .03em; white-space: nowrap; }
.brand strong b { color: var(--accent-text); }
.brand small { display: block; font-size: 8px; font-weight: 750; letter-spacing: .13em; margin-top: 6px; color: var(--muted); }
nav { display: flex; align-items: center; gap: clamp(12px, 2.1vw, 30px); }
nav a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--muted); font-size: .88rem; white-space: nowrap; }
nav a:hover, nav a[aria-current] { color: var(--slate-hover); text-decoration: underline; text-decoration-color: var(--accent-text); text-underline-offset: 6px; }
.menu-toggle { display: none; padding: 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 8px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 10px 17px; border: 1px solid transparent; border-radius: 9px; font-weight: 750; font-size: .86rem; line-height: 1.25; text-align: center; transition: background-color .17s, border-color .17s; }
.button.primary { background: var(--accent); color: #332411; }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.glass { color: var(--ink); background: #ffffffbd; border-color: #9badbc; }
.button.glass:hover { background: var(--white); }
.button.secondary { background: var(--slate); color: var(--white); }
.button.secondary:hover { background: var(--slate-hover); }
.button.outline { border-color: var(--line); background: white; color: var(--ink); }
.button.outline:hover { background: var(--paper); }
.button.whatsapp { background: #e1f5e9; color: #115438; border-color: #b6e0c8; }
.button.whatsapp:hover { background: #d3f0df; }
.button.danger { color: var(--red); background: #fff1f2; border-color: #ffd5d9; }
.button.full { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .135em; line-height: 1.35; }
.eyebrow.accent { color: var(--accent-text); }
.eyebrow > span { background: var(--accent-text); width: 17px; height: 2px; border-radius: 3px; flex: none; }
.home-hero, .service-hero, .portal-head {
  background: var(--tint);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.home-hero { padding-block: clamp(23px, 3vw, 38px) clamp(23px, 3vw, 36px); }
.public h1, .public h2 { font-family: var(--font); font-weight: 750; letter-spacing: -.045em; }
.home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr);
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}
.home-intro h1 {
  font-size: clamp(34px, 4.5vw, 57px);
  line-height: 1.05;
  margin-top: 7px;
}
.home-intro h1 em { display: block; color: var(--slate); font-style: normal; }
.home-intro-actions { padding-bottom: 3px; }
.home-intro-actions p { color: var(--muted); max-width: 45ch; margin-bottom: 10px; font-size: .875rem; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.social-media {
  display: grid; gap: clamp(16px, 3vw, 26px); margin-block: clamp(26px, 5vw, 54px);
  padding: clamp(16px, 4vw, 36px); border: 1px solid #d6e0ea; border-radius: clamp(14px, 2vw, 22px);
  background: radial-gradient(ellipse at top right, #fff1e7 0, transparent 56%), #e9eff5;
}
.social-top { display: grid; gap: 16px; align-items: center; }
.social-heading h2 { margin-top: 6px; font-size: clamp(23px, 3.2vw, 36px); }
.social-heading > p:last-child { margin-top: 7px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.social-profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.social-profiles:has(> li:only-child) { max-width: 340px; }
.social-profile {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; min-height: 70px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); box-shadow: 0 3px 10px #1a314708;
}
.social-profile:hover, .social-profile:focus-visible { border-color: #889faf; box-shadow: var(--shadow); }
.social-profile > svg { color: var(--slate); }
.social-profile-copy { display: grid; gap: 3px; line-height: 1.3; }
.social-profile-copy strong { font-size: .96rem; }
.social-profile-copy small { color: var(--muted); font-size: .78rem; }
.social-logo { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; }
.social-profile--instagram .social-logo { background: #fbeaf0; color: #a52f60; }
.social-profile--instagram .social-logo > span { position: relative; display: grid; width: 20px; height: 20px; place-items: center; border: 2px solid; border-radius: 6px; }
.social-profile--instagram .social-logo > span::before { content: ''; width: 8px; height: 8px; border: 2px solid; border-radius: 50%; }
.social-profile--instagram .social-logo > span::after { content: ''; position: absolute; top: 2px; right: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.social-profile--facebook .social-logo { background: #e8f0ff; color: #1657b9; font: 800 28px/1 Arial, sans-serif; }
.social-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 315px), 1fr)); gap: 14px; }
.social-videos--single { grid-template-columns: minmax(0, 640px); }
.social-video { min-width: 0; margin: 0; border: 1px solid var(--line); background: var(--white); border-radius: 12px; overflow: hidden; }
.social-video video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #13232f; }
.social-video figcaption { padding: 12px 14px; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 850px) {
  .social-top:has(.social-profiles) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; }
  .social-profiles:has(> li:only-child) { justify-self: end; width: 100%; }
}
.media-admin-list li { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-block: 7px; }
.media-admin-list { list-style: none; margin: 0; padding: 0; }
.media-admin-list span { min-width: 0; overflow-wrap: anywhere; }
.home-service {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  min-height: 216px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color .17s, box-shadow .17s;
}
.home-service-repair { --service-tone: var(--slate-hover); --service-chip: #e7eef5; }
.home-service-tow { --service-tone: var(--accent-text); --service-chip: var(--soft); }
.home-service:hover { border-color: var(--service-tone); box-shadow: 0 12px 25px #1a31471c; }
.home-service-image { position: relative; min-width: 0; overflow: hidden; background: var(--slate); }
.home-service-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-service-repair img { object-position: 42% 41%; }
.home-service-tow img { object-position: 51% 61%; }
.home-service-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(13px, 1.7vw, 22px); min-width: 0; }
.home-service-type { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: var(--service-chip); color: var(--service-tone); font-size: .67rem; font-weight: 800; letter-spacing: .09em; }
.home-service h2 { margin-top: 8px; font-size: clamp(19px, 2.45vw, 31px); line-height: 1.08; }
.home-service p { margin: 8px 0 14px; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.home-service-link { display: flex; align-items: center; gap: 7px; color: var(--service-tone); font-size: .81rem; font-weight: 750; margin-top: auto; }
.service-hero { padding-block: clamp(20px, 3vw, 36px); }
.service-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(25px, 4vw, 62px);
  align-items: stretch;
}
.service-hero-copy { align-self: center; }
.service-hero h1 { font-size: clamp(33px, 4vw, 49px); line-height: 1.08; margin-block: 7px 10px; }
.service-hero h1 em { display: block; color: var(--slate); font-style: normal; }
.service-hero-tow h1 em { color: var(--accent-text); }
.service-hero-copy p { color: var(--muted); margin-bottom: 14px; max-width: 44ch; font-size: .875rem; }
.service-hero-image { position: relative; min-height: clamp(230px, 27vw, 345px); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--slate); box-shadow: var(--shadow); }
.service-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 57%; }
.service-hero-repair .service-hero-image img { object-position: center 35%; transform: scale(1.1); transform-origin: left top; }
.repair-services { margin-block: 28px; }
.repair-services h2, .home-visit h2, .faq h2 { font-size: clamp(22px, 2.5vw, 33px); }
.repair-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.repair-service { padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.repair-service h3 { margin-block: 11px 6px; }
.repair-service p { color: var(--muted); font-size: .9rem; }
.home-visit {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  margin-block: 31px 39px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}
.home-visit-copy { align-self: center; padding: clamp(17px, 3vw, 35px); }
.home-visit h2 { max-width: 15ch; margin: 8px 0 15px; }
.home-visit-address { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); overflow-wrap: anywhere; }
.home-visit-address svg { color: var(--accent-text); margin-top: 3px; }
.home-visit .actions { margin-top: 15px; }
.home-visit-image { position: relative; min-height: 310px; background: var(--slate); }
.home-visit-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.tow-visit .home-visit-image { min-height: 340px; }
.tow-visit .home-visit-image img { object-position: center 72%; }
.tools-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-top: 24px; scroll-margin-top: 14px; }
.tools-grid.quote-only { display: block; max-width: 970px; }
.tool-card { background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); padding: 24px; min-width: 0; }
.tool-heading { display: flex; align-items: center; gap: 12px; }
.tool-heading h2, .tool-card h2 { font-size: clamp(22px, 2.4vw, 33px); margin-top: 2px; }
.tool-card > p { margin: 10px 0 15px; }
.icon-box { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto; }
.icon-box.orange { background: var(--soft); color: #945608; }
.icon-box.dark { background: var(--tint); color: var(--slate-hover); }
.route-pair { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: end; gap: 8px; margin-bottom: 14px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 800; font-size: .84rem; margin-bottom: 7px; }
.route-dot { display: inline-block; vertical-align: 1px; width: 8px; height: 8px; border: 2px solid #a9610a; border-radius: 50%; }
.route-dot.filled { background: #a9610a; }
.selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
label { display: grid; gap: 5px; min-width: 0; font-size: .82rem; font-weight: 700; }
input, textarea, select { min-width: 0; max-width: 100%; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #cdd6e2; border-radius: 8px; background: #fff; color: var(--ink); font-size: .95rem; font-weight: 500; }
input[readonly] { background: #f2f5f8; color: #42556b; }
textarea { resize: vertical; min-height: 86px; }
input[type=checkbox] { width: 19px; min-height: 19px; margin: 0; accent-color: #936010; }
.icon-button { display: inline-grid; place-items: center; min-width: 36px; min-height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
.swap { min-width: 0; }
.track-card { display: flex; flex-direction: column; background: var(--tint); }
.track-card .button { margin-top: auto; }
.notice { padding: 11px 13px; border-radius: 8px; background: #edf2f7; color: #2c435c; font-size: .86rem; overflow-wrap: anywhere; }
.notice.error { background: #fff0f0; color: var(--red); }
.notice.success { background: #e7f7ee; color: var(--green); }
.notice:empty { display: none; }
.quote-output { margin-top: 14px; padding: 14px; border-radius: 9px; border: 1px solid #ecd6b3; background: #fffbf3; }
.quote-output p { margin-bottom: 8px; }
.quote-total { display: flex; align-items: end; flex-wrap: wrap; gap: 7px 17px; margin: 6px 0; }
.quote-total strong { font: 800 43px/1 var(--display); }
.quote-total span { font-weight: 650; color: #4c5a69; }
#quote-result > .notice { margin-top: 12px; }
.faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 24px; margin-block: 55px 74px; }
.faq h2 { margin-top: 8px; }
.faq details { border-bottom: 1px solid #cbd5e2; padding: 0 5px 0 0; }
.faq summary { cursor: pointer; padding: 13px 0; font-weight: 750; }
.faq details p { padding-bottom: 14px; color: var(--muted); }
.page-head h1 { margin: 5px 0; }
.page-head p { color: var(--muted); font-size: .875rem; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 18px 25px; }
.contact-card { display: flex; flex-direction: column; padding: 18px; }
.contact-card .tool-heading { align-items: flex-start; }
.contact-card .tool-heading h2 { font-size: clamp(17px, 2vw, 24px); }
.contact-card .tool-heading p { font-size: .86rem; margin-top: 4px; }
.contact-card > .contact-person { margin: 17px 0 2px; font-weight: 650; color: var(--muted); }
.contact-phone { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; font-size: clamp(1.06rem, 2vw, 1.4rem); font-weight: 750; margin-bottom: 6px; }
.contact-phone svg { color: var(--accent-text); }
.contact-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-card .actions { margin-top: auto; }
.tracking-wrap { width: min(860px, calc(100% - 72px)); margin-block: 28px 64px; }
#track-result:not(:empty) { margin-top: 15px; }
.tracking-actions { margin-top: 13px; }
.customer-job { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: clamp(15px, 3vw, 24px); box-shadow: var(--shadow); }
.customer-job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.customer-job h2, .history-title { font-size: clamp(19px, 4vw, 24px); }
.customer-plate { display: block; margin-top: 4px; font-size: clamp(20px, 5vw, 28px); line-height: 1.2; letter-spacing: .025em; }
.customer-job-top .badge { padding: 5px 9px; }
.customer-work { padding-top: 13px; border-top: 1px solid var(--line); }
.customer-work h3 { margin-bottom: 4px; }
.customer-items { margin: 5px 0 0; padding: 0; list-style: none; }
.customer-items li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.customer-items li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.customer-items li span { min-width: 0; overflow-wrap: anywhere; }
.customer-items small { display: block; color: var(--muted); font-size: .78rem; }
.customer-items b { flex: none; white-space: nowrap; }
.customer-more > summary { min-height: 44px; padding-block: 10px; font-weight: 700; cursor: pointer; }
.history-body .customer-job { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: none; }
.booking-slot[aria-pressed=true] strong::after { content: ' ✓'; }
.staff-push .actions { margin-top: 8px; }
.startup-push { margin-bottom: 16px; }
.startup-push .actions { margin-top: 0; }
.staff-main:has(#staff-app .staff-push) .startup-push { display: none; }
.portal-head h1 { font-size: clamp(26px, 3.2vw, 37px); }
.portal-head { padding-block: 17px 19px; }
.portal-head + .tracking-wrap .panel h2 { font-size: clamp(21px, 2.7vw, 29px); }
.segments { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.segments button { flex: 1; min-height: 44px; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font-size: .86rem; font-weight: 750; }
.segments button[aria-pressed=true] { background: white; color: var(--ink); border-color: var(--line); box-shadow: 0 2px 5px #12213b0d; }
.vehicle-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); color: var(--ink); }
.vehicle-overview .eyebrow { color: var(--accent-text); }
.vehicle-overview h2 { margin-block: 4px; }
.vehicle-overview p { color: var(--muted); }
.maintenance-overview { display: grid; gap: 2px; padding: 12px 15px; border-radius: 9px; background: var(--soft); color: #673e06; }
.maintenance-overview span, .maintenance-overview small { font-size: .8rem; font-weight: 650; }
.maintenance-overview strong { color: var(--ink); font: 800 30px/1.1 var(--display); }
.history-title { font-size: 32px; }
.history-record { border: 1px solid var(--line); border-radius: 11px; background: white; }
.history-record > summary { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.history-record > summary::-webkit-details-marker { display: none; }
.history-record > summary::after { content: 'Ayrıntılar +'; grid-column: 1 / -1; color: var(--accent-text); font-size: .76rem; font-weight: 750; }
.history-record[open] > summary::after { content: 'Ayrıntıları gizle −'; }
.history-record > summary span:last-of-type { display: grid; justify-items: end; gap: 3px; }
.history-record > summary small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.history-body .panel { border-width: 1px 0 0; border-radius: 0 0 10px 10px; }
.photo-panel summary, .settings-hours summary { cursor: pointer; font-weight: 800; min-height: 44px; }
.settings-hours p { margin-bottom: 12px; }
.photo-panel summary span { color: var(--muted); font-weight: 500; font-size: .8rem; }
.photo-groups { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-group { background: var(--paper); border-radius: 9px; padding: 10px; }
.photo-group legend { margin: 0; }
.photo-list:not(:empty) { margin-bottom: 9px; }
.photo-edit { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; align-items: start; }
.photo-edit img { width: 100%; height: 80px; object-fit: cover; border-radius: 7px; }
.photo-pick { position: relative; cursor: pointer; overflow: hidden; }
.photo-pick:focus-within { outline: 3px solid #b96803; outline-offset: 3px; }
.photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 45%), 1fr)); gap: 8px; }
.photo-thumb { display: grid; min-width: 0; gap: 5px; padding: 5px; text-align: left; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.photo-thumb img { width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; border-radius: 5px; }
.photo-thumb span { font-size: .76rem; overflow-wrap: anywhere; }
.photo-dialog { width: min(820px, calc(100% - 22px)); color: var(--ink); }
.photo-dialog::backdrop { background: #101721df; }
.photo-large img { max-height: 70dvh; width: 100%; object-fit: contain; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(84px,1fr)); gap: 7px; }
.slot { display: grid; gap: 1px; min-height: 56px; place-content: center; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.slot small { color: var(--green); font-size: .73rem; }
.slot:disabled { background: var(--paper); opacity: 1; color: var(--muted); }
.slot:disabled small { color: var(--muted); }
.slot[aria-pressed=true] { border-color: #a56b20; background: var(--soft); }
.appointment-card { background: var(--paper); border: 1px solid var(--line); padding: 13px; border-radius: 9px; }
#booking-day { max-width: 280px; }
.site-footer { background: var(--slate); color: #edf2f6; }
.site-footer .brand, .site-footer .brand small { color: var(--white); }
.site-footer .brand strong b { color: var(--accent); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; padding-block: 26px; align-items: start; }
.footer-grid > div { display: grid; gap: 5px; font-size: .84rem; }
.footer-grid b { color: white; }
.footer-grid a:hover, .footer-bottom a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid #ffffff25; padding-block: 15px; display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; }
.error-page { min-height: 48vh; padding-block: 44px; }
.error-page .button { margin-top: 13px; }

/* Personel uygulaması ve servis dökümü */
.staff { min-height: 100dvh; }
.staff-main { width: min(820px, calc(100% - 32px)); padding-block: 28px max(32px, env(safe-area-inset-bottom)); }
.staff-main:has(.staff-home) { max-width: 560px; }
.staff-header .navrow { width: min(820px, calc(100% - 32px)); min-height: 62px; }
.staff-header .button { min-height: 44px; }
.login { max-width: 460px; margin: 35px auto; }
.login-title { font: 750 clamp(27px, 6vw, 34px)/1.15 var(--font); letter-spacing: -.035em; }
.install-dialog { width: min(470px, calc(100% - 32px)); color: var(--ink); }
.install-dialog::backdrop { background: #101721ab; }
.staff-title { display: grid; justify-items: start; gap: 11px; margin-bottom: 16px; }
.staff-title h1 { font: 750 clamp(25px, 5vw, 34px)/1.15 var(--font); letter-spacing: -.035em; }
.staff-title .button { min-height: 44px; padding: 8px 12px; }
.staff-account { position: relative; }
.staff-account summary { list-style: none; cursor: pointer; }
.staff-account summary::-webkit-details-marker { display: none; }
.staff-account-menu { position: absolute; right: 0; top: calc(100% + 5px); display: grid; width: 205px; gap: 5px; padding: 8px; z-index: 4; box-shadow: var(--shadow); }
.staff-account-menu button { justify-content: start; }
.staff-account-menu button[aria-current] { border-color: var(--slate); }
.staff-home { display: grid; gap: 9px; }
.staff-tile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: 12px;
  width: 100%; min-height: 66px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink); text-align: left;
}
.staff-tile:hover { border-color: var(--slate); }
.staff-tile[data-target=start] { background: var(--accent); border-color: transparent; color: #332411; }
.staff-tile[data-target=start]:hover { background: var(--accent-hover); }
.staff-tile-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--tint); }
.staff-tile[data-target=start] .staff-tile-icon { background: #fff7ed80; }
.staff-tile-label { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; line-height: 1.3; }
.staff-tile strong { font-size: clamp(1rem, 4vw, 1.125rem); }
.staff-tile > svg { opacity: .65; }
.staff-main .panel h2 { font: 750 1.15rem/1.2 var(--font); letter-spacing: -.018em; }
.staff-main .form-message:empty, #job-form :is(#items, #live-total, #vehicle-info, #maintenance-preview):empty,
#job-form .span:has(> #clear-owner[hidden]) { display: none; }
.staff-extra { min-width: 0; }
.staff-extra.panel { padding: 0 16px; }
.staff-extra > summary, .staff-filter > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-weight: 750; }
.staff-extra[open] > :last-child { padding-bottom: 13px; }
.staff-price-heading { border-top: 1px solid var(--line); padding-top: 10px; }
.plate-entry { display: flex; gap: 6px; align-items: end; }
.plate-entry label { flex: 1; min-width: 0; }
.staff-main #job-form textarea { min-height: 74px; }
.stack { display: grid; gap: 13px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span { grid-column: 1/-1; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 18px; min-width: 0; }
.panel h2 { font-size: 33px; }
.panel h3 { margin-bottom: 5px; }
.split-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.results-list { display: grid; gap: 7px; }
.record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: left; align-items: center; gap: 8px; width: 100%; color: var(--ink); border-radius: 9px; border: 1px solid var(--line); background: #fff; padding: 12px; }
.record-row:hover, .record-row[aria-pressed=true] { border-color: #bd8b42; background: #fffaed; }
.record-row strong, .record-row small { display: block; overflow-wrap: anywhere; }
.record-row small { color: var(--muted); font-size: .77rem; }
.record-meta { display: grid; justify-items: end; gap: 3px; }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 20px; background: var(--soft); color: #744607; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.badge.done { background: #e2f5e9; color: #185d3a; }
.badge.cancelled { background: #faeaec; color: #8b3036; }
.item-row { display: grid; grid-template-columns: 1fr 2fr .8fr 1fr auto; gap: 8px; align-items: end; background: #f5f7fb; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.item-row .check { min-height: 31px; grid-column: 1/-1; }
.sum-box { margin-left: auto; width: min(100%, 340px); }
.sum-box > div { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; gap: 8px; }
.sum-box > div:last-child { border-top: 1px solid var(--line); font-weight: 800; font-size: 1.16rem; padding-top: 8px; margin-top: 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th, .data-table td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th:last-child, .data-table td:last-child { text-align: right; white-space: nowrap; }
.data-table td:first-child { overflow-wrap: anywhere; }
.data-table td small { display: block; color: var(--muted); }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.summary-grid > div { background: var(--paper); border-radius: 8px; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere; }
.summary-grid small { display: block; color: var(--muted); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.timeline li { border-left: 3px solid var(--accent); padding-left: 10px; }
.timeline small { display: block; color: var(--muted); }
.preserve { white-space: pre-wrap; overflow-wrap: anywhere; }
.user-form { border-top: 1px solid var(--line); padding-top: 12px; }
.job-save { position: sticky; bottom: 0; z-index: 2; padding: 9px 0 max(9px, env(safe-area-inset-bottom)); background: var(--paper); }
.job-save + .form-message { scroll-margin-bottom: 85px; }

@media (max-width: 940px) {
  .wrap { width: calc(100% - 46px); }
  .navrow { gap: 13px; }
  .nav-cta { display: none; }
  .tools-grid { grid-template-columns: 1.45fr 1fr; }
  .tool-card { padding: 19px; }
  .route-pair { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }
  .selects { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wrap, .staff-main, .tracking-wrap { width: calc(100% - 30px); }
  input, select, textarea { font-size: 16px; }
  .navrow { min-height: 62px; position: relative; }
  .site-header .navrow { gap: 8px; }
  .menu-toggle { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; order: 3; }
  .nav-cta { display: inline-flex; flex: 0 0 44px; min-height: 44px; padding: 0; margin-left: auto; }
  .nav-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header nav { display: none; position: absolute; z-index: 4; top: 100%; left: -15px; right: -15px; background: var(--header); padding: 5px 15px 12px; border-top: 1px solid var(--line); box-shadow: var(--shadow); }
  .site-header nav.open { display: grid; gap: 0; }
  nav a { border-bottom: 1px solid var(--line); }
  .home-hero { padding-block: 20px; }
  .home-intro { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
  .home-intro h1 { font-size: clamp(28px, 8.3vw, 43px); margin-top: 6px; }
  .home-intro-actions { padding-bottom: 0; }
  .home-intro-actions p { margin-bottom: 12px; font-size: .88rem; }
  .home-actions { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); }
  .home-actions .button { gap: 6px; padding-inline: 7px; font-size: .77rem; }
  .home-actions svg { width: 16px; height: 16px; }
  .home-services { gap: 9px; }
  .home-service { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; border-radius: 11px; }
  .home-service-image { height: clamp(113px, 34vw, 195px); }
  .home-service-copy { padding: 10px; }
  .home-service-type { font-size: .59rem; gap: 4px; padding: 3px 5px; letter-spacing: .06em; }
  .home-service-type svg { width: 14px; height: 14px; }
  .home-service h2 { font-size: clamp(15px, 4.3vw, 24px); margin-top: 7px; margin-bottom: 9px; }
  .home-service p { display: none; }
  .home-service-link { font-size: .72rem; gap: 4px; }
  .home-service-link svg { width: 14px; height: 14px; }
  .service-hero-layout { grid-template-columns: 1fr; gap: 16px; }
  .service-hero h1 { font-size: clamp(29px, 7.6vw, 42px); margin-block: 7px 9px; }
  .service-hero-copy p { margin-bottom: 14px; font-size: .88rem; }
  .service-hero-copy .actions { gap: 7px; }
  .service-hero-copy .button { padding-inline: 11px; font-size: .8rem; }
  .service-hero-image { min-height: 0; aspect-ratio: 1.6; border-radius: 11px; }
  .service-hero-image img { object-position: center 61%; }
  .repair-services { margin-block: 28px; }
  .repair-service-list { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .repair-service { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px; }
  .repair-service .icon-box { grid-row: 1 / 3; align-self: start; width: 40px; height: 40px; }
  .repair-service h3 { margin: 0; }
  .repair-service p { font-size: .83rem; }
  .home-visit { grid-template-columns: 1fr; margin-block: 32px; }
  .home-visit-image, .tow-visit .home-visit-image { min-height: 0; aspect-ratio: 1.45; }
  .tools-grid { grid-template-columns: 1fr; margin-top: 16px; gap: 12px; }
  .route-pair { grid-template-columns: 1fr; gap: 9px; }
  .selects { grid-template-columns: 1fr 1fr; }
  .swap { width: 44px; justify-self: end; min-height: 42px; margin-block: 0 -31px; z-index: 1; transform: rotate(90deg); }
  .faq { grid-template-columns: 1fr; gap: 14px; margin-block: 31px; }
  .page-head { padding-block: 15px 17px; }
  .contact-grid { grid-template-columns: 1fr; gap: 10px; margin-block: 13px 21px; }
  .contact-card .actions { gap: 6px; }
  .contact-card .actions .button { padding-inline: 10px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-grid > .brand { grid-column: 1/-1; }
  .footer-bottom { flex-wrap: wrap; }
  .staff-main { padding-top: 19px; }
  .login { margin-block: 13px; }
  .staff-header .button { font-size: .75rem; padding-inline: 9px; }
  .staff-header .actions { gap: 4px; }
  #job-form .plate-entry { grid-column: 1/-1; }
  .item-row { grid-template-columns: 1fr 1fr auto; }
  .item-row .item-kind { grid-column: 1; }
  .item-row .item-name { grid-column: 2/4; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .photo-groups, #customer-tracking .form-grid, #public-booking .form-grid { grid-template-columns: 1fr; }
  .vehicle-overview { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .job-save button:first-child { flex: 1; }
}
@media (max-width: 385px) {
  .tool-card, .panel { padding: 13px; }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-header .brand strong { font-size: 23px; }
  .staff-header .mark { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
.public { --paper: #f5f7fa; --tint: #e9eff6; --slate: #29465e; --line: #d8e1ea; }
.public .home-hero { background: radial-gradient(ellipse at 98% 0%, #fff0e4 0, transparent 48%), linear-gradient(150deg, #e6eef6, #f3f6f9); }
.public .home-service { border-radius: 17px; box-shadow: 0 10px 32px #192d4214; }
.public .home-service-repair { border-bottom: 3px solid #436782; }
.public .home-service-tow { border-bottom: 3px solid #db824c; }
.public .portal-head, .public .service-hero { background: linear-gradient(120deg, #e5edf5, #f5f7fa); }
.public .tool-card { border-radius: 17px; }
.public .navrow .nav-cta { box-shadow: 0 3px 10px #c06b2d24; }

.staff { --paper: #f0f4f8; --ink: #172a3c; --slate: #29465e; --line: #d9e3ec; background: var(--paper); }
.staff .staff-header { border-color: #dae4ed; }
.staff .staff-header .navrow, .staff .staff-main { width: min(960px, calc(100% - 32px)); }
.staff .staff-main:has(.staff-home) { max-width: 820px; }
.staff .staff-main:has(.staff-dock) { padding-bottom: 36px; }
.staff-title .eyebrow { margin-bottom: -5px; }
.staff .panel { border-radius: 14px; }
.staff .login { padding: clamp(18px, 5vw, 30px); border-radius: 18px; }
.login-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; }
.login-options .check { min-height: 44px; }
.link-button { border: 0; padding: 8px 0; min-height: 44px; color: var(--slate-hover); background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-align: start; }
.recovery-panel { margin-top: 10px; }
.recovery-code { background: var(--tint); border-radius: 10px; padding: 10px; }
.recovery-code input { font-family: ui-monospace, monospace; }
.staff-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staff-tile { min-height: 86px; padding: 14px 16px; border-radius: 16px; background: var(--white); }
.staff-tile-main { min-height: 96px; }
.staff-tile-compact { min-height: 64px; }
.staff-tile[data-target=start] { background: linear-gradient(118deg, #1b3549, #294c66); color: #fff; }
.staff-tile[data-target=start]:hover { background: #294d68; }
.staff-tile[data-target=start] .staff-tile-icon { color: #291607; background: #ffc088; }
.staff-tile-label { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.staff-tile-label small { font-size: .77rem; color: var(--muted); }
.staff-tile[data-target=start] small { color: #e4edf5; }
.staff-title .staff-back { border: 0; background: transparent; padding-inline: 0; color: var(--slate-hover); }
.staff-title-home { padding: clamp(13px, 3vw, 20px); border: 1px solid #d5e0eb; border-radius: 16px; background: linear-gradient(115deg, #fff, #e5eff8); }
.staff-title-home h1 { margin: 0; }
.staff-tile:only-child { grid-column: 1/-1; }
.staff-plate-search { border-color: #cad8e5; background: linear-gradient(120deg, #fff, #f3f8fc); }
.staff-plate-search .plate-entry input { min-height: 49px; }
.staff-plate-search .plate-entry button { min-height: 49px; }
.staff-plate-search .primary svg { width: 17px; }
.staff-plate-search #vehicles:empty { display: none; }
.service-intake .intake-plate { grid-column: 1/-1; align-items: end; }
.staff .service-intake .intake-plate input, .staff .service-intake .intake-plate button { min-height: 51px; }
.staff .service-intake .intake-plate .scan-button { padding-inline: 12px; background: var(--accent); color: #291607; }
.staff .service-intake .intake-plate .scan-button:hover { background: var(--accent-hover); }
.service-intake .intake-phone { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; min-width: 0; }
.service-intake .intake-phone .button { min-height: 44px; padding-inline: 10px; }
.intake-match { border-radius: 9px; background: #e9f6ef; color: #14603f; padding: 8px 10px; font-size: .85rem; font-weight: 700; }
.intake-match summary { min-height: 40px; padding-block: 9px; cursor: pointer; }
.intake-match .actions { padding-bottom: 3px; }
.intake-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-presets button { padding: 6px 10px; min-height: 44px; border: 1px solid #d6e1ec; border-radius: 9px; color: var(--slate-hover); background: #eef4f9; font-size: .83rem; font-weight: 700; }
.intake-presets button:hover { background: #dfeaf4; }
.staff-open-services { margin-top: 4px; }
.staff-open-services .record-row, .staff-appointment-list .appointment-card { border-radius: 12px; }
.staff-appointment-list #appointment-message:empty { display: none; }
.staff .login { border-radius: 20px; }
.staff-dock { display: none; }
.staff .scan-button { padding-inline: 10px; min-width: 46px; color: var(--slate-hover); background: #eaf1f7; }
.staff .plate-entry { align-items: end; }
.staff .plate-entry button { min-height: 44px; }
.staff .plate-entry input { text-transform: uppercase; font-weight: 650; letter-spacing: .045em; }
.staff .plate-entry label { position: relative; }
.plate-read-status { position: absolute; inset: 0 0 auto auto; color: #106543; font-size: .75rem; font-weight: 750; }
.staff .plate-entry .plate-read input { border-color: #168156; background: #e9f9f0; box-shadow: 0 0 0 3px #2aae7440; }
@media (prefers-reduced-motion: no-preference) {
  .staff .plate-entry .plate-read input { animation: plate-read 3s ease-out; }
  @keyframes plate-read {
    0%, 28%, 56% { box-shadow: 0 0 0 0 #2aae7480; }
    14%, 42%, 70% { box-shadow: 0 0 0 5px #2aae7430; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}
.staff .record-row { min-width: 0; }
.staff .record-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.staff .service-actions { align-items: stretch; }
.staff .job-save { padding-inline: 0; box-shadow: 0 -5px 12px #f0f4f8; }
.staff .plate-dialog, .plate-dialog { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0a1521; color: #fff; }
.plate-dialog::backdrop { background: #0a1521; }
.plate-camera-layout { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.camera-top, .camera-bottom { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
.camera-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: max(8px, env(safe-area-inset-top)) 8px; }
.plate-dialog h2 { margin: 0; color: inherit; font: 750 1.2rem/1.2 var(--font); }
.camera-frame { position: relative; min-height: 0; overflow: hidden; background: #060d15; }
.camera-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.camera-detection { position: absolute; pointer-events: none; border: 3px solid #ffd247; border-radius: 5px; background: #ffd24714; box-shadow: 0 0 0 1px #392700, 0 0 12px #ffd24770; }
.camera-live { position: absolute; top: 9px; left: max(9px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 16px; color: #fff; background: #102030e8; font-size: .75rem; font-weight: 700; pointer-events: none; }
.camera-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a1ffd7; }
.camera-live[data-detected] { background: #ffd247; color: #302006; }
.camera-live[data-detected]::before { background: #624000; }
.camera-bottom { display: grid; grid-row: 3; gap: 8px; padding-block: 9px max(10px, env(safe-area-inset-bottom)); }
.camera-message { margin: 0; min-height: 1.35em; text-align: center; color: #e5edf6; font-size: .9rem; }
.camera-actions { align-items: stretch; justify-content: center; gap: 8px; }
.camera-actions .button, .plate-dialog .icon-button { min-height: 44px; }
.plate-dialog .icon-button { min-width: 44px; }
.camera-retry { flex-basis: 100%; }
.camera-file { position: relative; cursor: pointer; }
.camera-file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.camera-file:focus-within { outline: 3px solid #b96803; outline-offset: 3px; }
.cash-toolbar { display: flex; gap: 10px; align-items: end; }
.cash-toolbar label { max-width: 230px; min-width: 0; flex: 1; }
.cash-toolbar { flex-wrap: wrap; }
.ops-layout, .ops-layout > *, .ops-search { min-width: 0; }
.ops-layout { display: grid; gap: 14px; align-items: start; }
.ops-layout .record-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ops-layout h2, .ops-dialog h2 { overflow-wrap: anywhere; }
.ops-layout .record-row small { color: var(--muted); }
.ops-layout .record-row .button { margin: 4px 0; min-height: 32px; padding: 3px 8px; font-size: .76rem; }
.ops-quantity { display: inline-block; border-radius: 100px; color: var(--green); background: #e6f3eb; padding: 3px 10px; font-weight: 700; white-space: nowrap; font-size: .81rem; }
.ops-quantity.low { background: #fff1d3; color: #815006; }
.ops-quantity.empty { background: #fce9e9; color: #9c2c34; }
.ops-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops-filters button { padding-inline: 4px; font-size: .83rem; min-width: 0; }
.ops-filters button span { margin-left: 3px; opacity: .85; font-variant-numeric: tabular-nums; }
.ops-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ops-facts > span { background: var(--paper); border-radius: 10px; padding: 8px; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.ops-facts b { display: block; color: var(--ink); margin-top: 4px; }
.ops-pager { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.ops-pager:empty { display: none; }
.ops-pager button { min-height: 42px; padding-inline: 11px; }
.ops-balance { background: var(--tint); border-radius: 10px; padding: 12px; font-size: 1.1rem; font-weight: 750; }
.ops-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ops-switch span { display: grid; gap: 3px; }
.ops-switch small { font-weight: 400; color: var(--muted); }
.ops-switch input { inline-size: 42px; block-size: 24px; border-radius: 99px; background: #798797; flex: 0 0 auto; border: 0; appearance: none; padding: 3px; cursor: pointer; }
.ops-switch input::after { content: ""; display: block; inline-size: 18px; block-size: 18px; border-radius: 50%; background: white; transition: transform .14s ease; }
.ops-switch input:checked { background: var(--green); }
.ops-switch input:checked::after { transform: translateX(18px); }
.ops-dialog { width: min(570px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: clamp(14px, 3.5vw, 24px); }
.ops-dialog .split-heading { margin-bottom: 12px; }
.ops-dialog::backdrop { background: #142735a8; }
.ops-detail { scroll-margin-top: 90px; }
.ops-scan-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.ops-scan-line button { min-height: 44px; padding-inline: 9px; }
.ops-camera { width: min(680px, calc(100% - 20px)); }
.ops-camera-view { position: relative; background: #172735; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; }
.ops-camera-view video { width: 100%; height: 100%; display: block; object-fit: contain; }
.ops-camera-view span { position: absolute; inset: 4px; border: 2px solid #ffffff86; border-radius: 9px; pointer-events: none; }
.ops-camera-read .ops-camera-view span { border-color: #ffcc54; box-shadow: inset 0 0 0 2px #ffcc5460; }
.ops-camera p { padding-block: 7px; }
.ops-suggestions { display: grid; gap: 4px; }
.ops-suggestions:not(:empty) { margin-top: 8px; padding: 8px; background: var(--paper); border-radius: 10px; }
.ops-suggestions > strong { font-size: .78rem; color: var(--muted); }
.customer-cars { max-height: 290px; overflow: auto; }
.ops-desktop { display: none; }
@media (min-width: 760px) {
  .ops-layout:has(.ops-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ops-desktop { display: inline; }
}
@media (max-width: 420px) {
  .ops-dialog .split-heading h2 { font-size: 1.35rem; }
  .ops-pager button { padding-inline: 8px; font-size: .8rem; }
}
.cash-summary { min-width: 0; }
.cash-summary dl, .receipt-total, .receipt-facts { margin: 10px 0 0; }
.cash-revenue dl > div, .receipt-total > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; padding: 5px 0; }
.cash-row small { color: var(--muted); display: block; }
.cash-summary dd, .receipt-total dd, .receipt-facts dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.cash-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cash-overview > div { border-radius: 11px; background: var(--tint); padding: 10px 12px; overflow-wrap: anywhere; }
.cash-overview > .cash-net { background: #24415a; color: #fff; }
.cash-overview dt { font-size: .8rem; }
.cash-overview dd { font-size: clamp(.91rem, 2.5vw, 1.28rem); }
.cash-revenue { margin-top: 10px; }
.cash-revenue summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding-block: 7px; cursor: pointer; border-bottom: 1px solid var(--line); }
.cash-revenue summary strong::after { content: ' ⌄'; }
.cash-revenue[open] summary strong::after { content: ' ⌃'; }
.cash-revenue > p { font-size: .78rem; }
.cash-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cash-actions .button { min-height: 46px; padding-inline: 7px; }
.cash-entry form > button { justify-self: start; }
.cash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 8px 0; overflow-wrap: anywhere; }
.cash-row > b { font-variant-numeric: tabular-nums; }
.cash-row .button { padding-inline: 9px; }
.cash-voided { color: var(--muted); }
.cash-voided > b { text-decoration: line-through; }
.cash-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: #dfe9f2; }
.cash-mode button { border: 0; border-radius: 9px; min-height: 46px; padding: 6px 9px; color: var(--slate-hover); background: transparent; font-weight: 750; }
.cash-mode button[aria-pressed=true] { background: var(--white); box-shadow: 0 1px 5px #253b551c; }
.service-finish { display: grid; gap: 8px; }
.service-finish-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px; }
.service-finish-row > div { min-width: 0; overflow-wrap: anywhere; }
.service-finish-row small, .cash-staff-row small, .cash-completed-job summary small { display: block; color: var(--muted); font-size: .78rem; }
.service-finish details summary { cursor: pointer; color: var(--slate); font-weight: 700; padding-block: 11px; }
.service-finish details label { max-width: 360px; }
.service-credited { padding-inline: 3px; }
.cash-work-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 9px; }
.cash-work-filters :is(label,select) { min-width: 0; }
.cash-staff-row, .cash-completed-job summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; }
.cash-staff-row { background: #f0f5fa; padding: 9px 12px; border-radius: 9px; }
.cash-staff-row > span, .cash-completed-job summary > span { overflow-wrap: anywhere; }
.cash-staff-row > b, .cash-completed-job summary > b, .cash-job-items b, .cash-job-sums dd { font-variant-numeric: tabular-nums; }
.cash-completed-job { min-width: 0; border: 1px solid var(--line); border-radius: 10px; }
.cash-completed-job summary { min-height: 56px; padding: 10px 12px; cursor: pointer; list-style: none; }
.cash-completed-job summary::-webkit-details-marker { display: none; }
.cash-completed-job summary > b::after { content: ' ⌄'; color: var(--muted); }
.cash-completed-job[open] summary > b::after { content: ' ⌃'; }
.cash-completed-job > .stack { padding: 10px 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.cash-completed-job .button { justify-self: start; }
.cash-job-items { list-style: none; padding: 0; margin: 0; }
.cash-job-items li, .cash-job-sums > div { display: flex; justify-content: space-between; gap: 5px 10px; flex-wrap: wrap; padding-block: 4px; }
.cash-job-items li + li { border-top: 1px solid var(--line); }
.cash-job-items small { color: var(--muted); }
.cash-job-sums { margin: 0; }
.cash-job-sums dd { margin: 0; font-weight: 750; }
.cash-job-sums > div:last-child { border-top: 1px solid var(--line); font-weight: 750; }
.staff-work-report :is(#cash-staff-summary,#cash-work-feedback):empty { display: none; }
.receipt-wrap { width: min(700px, calc(100% - 24px)); margin: 24px auto; }
.receipt-actions { margin-bottom: 12px; justify-content: space-between; }
.receipt-paper { background: white; border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 4vw, 32px); overflow-wrap: anywhere; }
.receipt-heading { display: flex; justify-content: space-between; gap: 8px; align-items: end; border-bottom: 2px solid var(--slate); padding-bottom: 10px; }
.receipt-heading h1 { font: 800 clamp(24px, 5vw, 40px)/1.16 var(--font); }
.receipt-business, .receipt-note { margin: 9px 0; white-space: pre-wrap; }
.receipt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: #f3f6f9; padding: 11px; border-radius: 8px; }
.receipt-facts dt { color: var(--muted); font-size: .79rem; }
.receipt-paper h2 { margin-top: 18px; font: 750 1.15rem/1.2 var(--font); }
.receipt-items { width: 100%; border-collapse: collapse; text-align: left; }
.receipt-items :is(th,td) { padding: 7px 5px; border-bottom: 1px solid var(--line); }
.receipt-items :is(th,td):last-child { text-align: right; white-space: nowrap; }
.receipt-total { margin-left: auto; max-width: 280px; }
.receipt-total > div:last-child { border-top: 1px solid var(--slate); font-size: 1.15rem; }
.receipt-foot { margin-top: 18px; color: var(--muted); font-size: .8rem; }

@media (max-width: 700px) {
  .public .home-service { border-radius: 12px; }
  .staff .staff-main:has(.staff-dock) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .staff .staff-title { margin-bottom: 12px; }
  .staff .staff-title .button { min-height: 40px; }
  .staff-home { gap: 8px; }
  .staff-tile { gap: 9px; padding: 11px; min-height: 62px; grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .staff-tile-main { grid-column: 1/-1; min-height: 69px; }
  .staff-tile > svg { width: 16px; }
  .staff-tile-compact { grid-template-columns: 34px minmax(0, 1fr); }
  .staff-tile-compact > svg { display: none; }
  .staff-tile-icon { width: 34px; height: 34px; }
  .staff-tile strong { font-size: .91rem; }
  .staff-tile-label small { font-size: .72rem; }
  .staff-dock { position: fixed; z-index: 3; inset: auto 0 0; display: flex; justify-content: center; gap: 4px;
    padding: 4px 8px max(5px, env(safe-area-inset-bottom)); background: #fcfdfe; border-top: 1px solid #cfdae6; }
  .staff-dock button { flex: 1 1 0; max-width: 130px; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 48px;
    border: 0; border-radius: 9px; background: transparent; color: var(--slate-hover); font-size: .69rem; line-height: 1.2; font-weight: 700; }
  .staff-dock button[aria-current] { background: #e6eef7; }
  .staff-dock svg { width: 18px; height: 18px; }
  .staff .job-save { display: grid; grid-template-columns: 1fr auto; }
  .staff .job-save > .primary:only-child { grid-column: 1/-1; }
  .staff .service-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff .service-actions .primary, .staff .service-actions .whatsapp { grid-column: 1/-1; }
}

.service-portal { width: min(780px, calc(100% - 32px)); margin-block: clamp(20px, 4vw, 40px) clamp(40px, 7vw, 80px); }
.service-portal-head {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); min-height: 132px;
  padding: clamp(16px, 4vw, 30px); border-radius: 20px; color: #fff;
  background: linear-gradient(90deg, #142c3f 4%, #142c3ff5 48%, #142c3fa0 100%), url('/assets/dogus-oto-atolye.jpg') center 52% / cover, #142c3f;
}
.service-portal-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: #442317; background: #ffc090; }
.service-portal-head h1 { font: 770 clamp(25px, 4.2vw, 38px)/1.1 var(--font); letter-spacing: -.045em; }
.service-portal-head p { margin-top: 7px; color: #e6eef6; font-size: clamp(.83rem, 2vw, .98rem); }
.service-portal-body { margin-top: 14px; }
.service-card, .service-portal .customer-job {
  padding: clamp(15px, 3vw, 25px); border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: 0 8px 26px #142c3f0c;
}
.service-card h2, .service-portal .history-title { font: 750 clamp(1.15rem, 3vw, 1.38rem)/1.2 var(--font); letter-spacing: -.025em; }
.service-main-action { min-height: 49px; justify-self: start; }
.service-help { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.service-help a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.service-portal :is(#booking-message, #booking-status-message, #history-more):empty { display: none; }
.service-portal input, .service-portal textarea { font-size: 1rem; }
.service-portal input[name=plate], .service-portal input[name=code] { text-transform: uppercase; }
.booking-date-control { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 7px; width: min(100%, 360px); margin-top: -7px; }
.booking-date-control #booking-day { width: 100%; min-width: 0; max-width: none; min-height: 46px; }
.booking-date-control button { padding: 0; min-height: 46px; font-size: 1.65rem; }
#booking-times > .button { margin-top: 8px; }
.service-portal .slot-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.service-portal .booking-slot { min-height: 48px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.service-portal .booking-slot:enabled:hover { border-color: var(--slate); background: var(--tint); }
.booking-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px 12px; padding: 10px 12px; border-radius: 10px; background: var(--tint); }
.booking-summary p { font-weight: 750; }
.booking-summary .button { min-height: 44px; padding-block: 6px; }
.service-portal .customer-job-top { align-items: center; padding: 1px 0 10px; }
.service-portal .customer-plate { margin: 3px 0; font: 800 clamp(1.45rem, 4vw, 1.9rem)/1.15 var(--font); overflow-wrap: anywhere; }
.customer-context { color: var(--muted); font-size: .79rem; }
.customer-state .badge { white-space: normal; }
.customer-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 8px; margin: 0; }
.customer-facts > div { min-width: 0; padding: 11px 12px; border-radius: 10px; background: var(--tint); }
.customer-facts dt, .customer-facts small { display: block; color: var(--muted); font-size: .78rem; }
.customer-facts dd { margin: 2px 0 0; font-size: 1.17rem; font-weight: 750; overflow-wrap: anywhere; }
.service-portal .history-body .customer-job { padding: 14px; border-radius: 0 0 10px 10px; border: 0; border-top: 1px solid var(--line); box-shadow: none; }
.service-portal .tracking-actions { margin-top: 0; }
@media (max-width: 560px) {
  .service-portal { width: calc(100% - 24px); }
  .service-portal-head { align-items: flex-start; min-height: auto; border-radius: 15px; }
  .service-portal-icon { width: 40px; height: 40px; border-radius: 10px; }
  .service-portal .form-grid { grid-template-columns: minmax(0, 1fr); }
  .service-main-action { justify-self: stretch; }
  .service-portal .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-portal .tracking-actions .button { flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .staff .staff-main, .staff .staff-header .navrow { width: calc(100% - 24px); }
  .staff .plate-entry .button { padding-inline: 8px; }
  .cash-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-overview > .cash-net { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .cash-row > div { grid-column: 1/-1; }
  .service-finish-row > .button { width: 100%; }
}
@page { margin: 12mm; }
@media print {
  .receipt-page { color: black; background: white; font-size: 10pt; }
  .receipt-wrap { width: auto; margin: 0; }
  .receipt-actions { display: none; }
  .receipt-paper { padding: 0; border: 0; }
  .receipt-items tr, .receipt-facts, .receipt-total { break-inside: avoid; }
  .receipt-items thead { display: table-header-group; }
}