/* Uğur Elektrik · üretim sitesi · K3 "Kesit Çizim" dili, Bosch marka renkleri */

/* ---------- Renkler ----------
   Bosch dijital renk sistemi (Frok), kaynak:
   https://www.bosch.com/media/tech/styles/frok/styles_1/brands/bosch/styles_2/gradations/gradations.css
   red-50 #ed0007 · red-40 #be0004 · blue-50 #007bc0 · blue-40 #00629a · blue-30 #004975 · blue-95 #e8f1ff
   green-50 #00884a · turquoise-50 #18837e · gray-95 #eff1f2 · gray-40 #595e62 · gray-10 #1a1c1d */
:root {
  --bg: #ffffff;
  --paper: #eff1f2;
  --card: #ffffff;
  --ink: #1a1c1d;
  --ink-2: #595e62;
  --rule: rgba(26, 28, 29, .16);
  --grid: rgba(0, 123, 192, .075);
  --red: #ed0007;
  --red-d: #be0004;
  --blue: #007bc0;
  --blue-l: #00629a;
  --blue-d: #004975;
  --blue-95: #e8f1ff;
  --green: #00884a;
  --turq: #18837e;
  --accent: var(--red);
  --on-accent: #ffffff;
  --block: var(--blue-d);
  --on-block: #ffffff;
  --wa: #25d366;
  --wa-d: #075e54;
  --f-disp: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --hdr: 72px;
  color-scheme: light;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; height: auto; }
picture { display: contents; }
a { color: var(--blue-l); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-d); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 200; }
.skip:focus { top: 8px; }
.mt { margin-top: clamp(18px, 3vw, 32px); }
.mb { margin-bottom: clamp(24px, 4vw, 44px); }
.mw { max-width: 46em; }

.disp { font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; letter-spacing: -.025em; line-height: .95; }
.h2 { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; letter-spacing: -.02em; line-height: .98; font-size: clamp(32px, 4.8vw, 70px); }
.h3 { font-family: var(--f-disp); font-stretch: 104%; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-size: clamp(22px, 2.1vw, 30px); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 40em; }
.muted { color: var(--ink-2); }
.small { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* Doğrulanacak etiketi: kesik çizgili */
.todo {
  display: inline-block; border: 1.5px dashed var(--blue-d); color: var(--blue-d); background: var(--blue-95);
  border-radius: 3px; padding: 0 .4em; font-size: .8em; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: .05em;
  font-family: var(--f-body); font-stretch: 100%; letter-spacing: 0;
}
.sec.block .todo, .ftr .todo, .menu .todo { color: #fff; border-color: #fff; background: transparent; }

/* Ölçü çizgisi künyesi */
.dim { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.3; margin-bottom: clamp(20px, 3vw, 36px); }
.dim::before, .dim::after { content: ""; flex: 1 1 0; height: 11px; min-width: 24px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .55; }
.dim.l::before { flex: 0 0 40px; }
.dim b { font-weight: 600; color: var(--ink); }

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border: 1.5px solid var(--ink); border-radius: 3px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.acc { background: var(--red); border-color: var(--red); color: #fff; }
.btn.acc:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.wide { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.arrow-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.arrow-link .ar { width: 18px; height: 18px; }
.more { margin-top: 36px; }

/* ---------- Üst çubuk ---------- */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0 33%, var(--blue) 33% 66%, var(--green) 66%); }
.hdr .wrap { height: 100%; display: flex; align-items: center; gap: 14px; max-width: none; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark { width: 38px; height: 38px; flex: none; color: var(--blue-d); }
.logo-word { font-family: var(--f-disp); font-stretch: 115%; font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.logo-sub { display: block; font-family: var(--f-body); font-stretch: 100%; font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--ink-2); margin-top: 4px; }
.logo-badge { height: 40px; width: auto; flex: none; }
/* Bosch Yetkili Servis rozeti: solda, menü çubuğundan aşağı sarkan etiket gibi */
.logo-tag { flex: none; align-self: flex-start; position: relative; z-index: 2; margin-top: 3px; padding: 8px 9px 10px; background: #fff;
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(0, 73, 117, .18), 0 1px 0 var(--rule); }
.logo-tag img { display: block; height: 92px; width: auto; }
.hdr .logo { align-self: stretch; align-items: center; }
.hdr-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 3px; border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.hdr-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.hdr-btn.acc { background: var(--red); border-color: var(--red); color: #fff; }
.hdr-btn.acc:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; }
.hdr-btn svg { width: 18px; height: 18px; }
.menu-btn .bars { width: 22px; height: 12px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; right: 7px; }

/* ---------- Tam ekran menü (koyu mavi çizim kâğıdı) ---------- */
.menu {
  --ink: #ffffff; --ink-2: rgba(255, 255, 255, .74); --rule: rgba(255, 255, 255, .24);
  position: fixed; inset: 0; z-index: 100; background: var(--blue-d); color: #fff;
  display: grid; grid-template-rows: var(--hdr) 1fr; visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s; overflow: hidden;
}
.menu.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu a { color: #fff; }
.menu :focus-visible { outline-color: #fff; }
.menu-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: #fff; fill: none; }
.menu-grid line { stroke-width: .5; opacity: .16; vector-effect: non-scaling-stroke; }
.menu-grid .frame { stroke-width: 1.2; opacity: .6; vector-effect: non-scaling-stroke; }
.menu-top { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 var(--gut); border-bottom: 1px solid var(--rule); }
.menu-top .logo, .menu-top .logo-mark { color: #fff; }
.menu .hdr-btn { border-color: #fff; color: #fff; }
.menu .hdr-btn:hover { background: #fff; color: var(--blue-d); }
.menu .hdr-btn.acc { border-color: var(--red); color: #fff; }
.menu .hdr-btn.acc:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; }
.menu-close .x { font-size: 22px; line-height: 1; }
.menu-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); padding: clamp(18px, 4vh, 48px) var(--gut) clamp(24px, 5vh, 56px); overflow-y: auto; min-height: 0; }
.menu-list { list-style: none; margin: 0; padding: 0; align-self: center; }
.menu-list a { display: grid; grid-template-columns: 46px auto auto; justify-content: start; align-items: center; text-decoration: none; padding: clamp(2px, .6vh, 7px) 0; }
.menu-list .bal { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.menu-list .lead-ln { display: block; width: clamp(28px, 5vw, 72px); height: 1.5px; background: currentColor; transform-origin: left; margin-right: 18px; }
.menu-list .t { font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; letter-spacing: -.025em; font-size: clamp(32px, 6vh, 64px); line-height: 1.02; }
.menu-list .note { display: block; font-family: var(--f-body); font-stretch: 100%; font-weight: 400; letter-spacing: 0; font-size: 14px; color: var(--ink-2); line-height: 1.2; margin-top: 2px; }
.menu-list a:hover .tt, .menu-list a[aria-current="page"] .tt { background: linear-gradient(transparent 82%, var(--red) 82%, var(--red) 96%, transparent 96%); }
.menu-list a[aria-current="page"] .bal { background: var(--red); border-color: var(--red); }
.menu-side { align-self: end; display: grid; gap: 22px; }
.menu-links .mh { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.menu-links ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.menu-links a { font-size: 15px; text-decoration: none; display: block; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.menu-links a:hover { text-decoration: underline; }
.tblock { border: 1.5px solid #fff; display: grid; grid-template-columns: 1fr 1fr; }
.tblock > div { padding: 11px 14px; border-top: 1px solid #fff; border-left: 1px solid #fff; font-size: 14px; line-height: 1.45; }
.tblock > div:nth-child(-n+2) { border-top: 0; }
.tblock > div:nth-child(odd) { border-left: 0; }
.tblock > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tblock .k { display: block; color: var(--ink-2); font-size: 13px; }
.tblock .v { font-weight: 600; font-size: 15px; }
.tblock .v a { text-decoration: none; }
.menu .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.menu.open .dr { animation: draw 1s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(.15s + var(--d, 0) * 1s); }
.menu .lead-ln { transform: scaleX(0); }
.menu .bal, .menu .t { opacity: 0; }
.menu.open .lead-ln { animation: grow .35s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: calc(.28s + var(--i) * .045s); }
.menu.open .bal { animation: pop .3s ease-out forwards; animation-delay: calc(.2s + var(--i) * .045s); }
.menu.open .t { animation: tin .45s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.4s + var(--i) * .045s); }
.menu .menu-side { opacity: 0; transform: translateY(10px); }
.menu.open .menu-side { animation: up .5s ease-out .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tin { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes up { to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }

/* ---------- Ana sayfa: kesit sahnesi ---------- */
.cut { position: relative; height: 260vh; }
.cut-stage {
  position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr));
  /* Masaüstü: solda başlık + parça kartı dikeyde ortalı, ortada çizim, sağda alet seçici */
  display: grid; grid-template-columns: minmax(280px, 385px) minmax(0, 1fr) minmax(200px, 230px);
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  grid-template-areas: ". fig tabs" "intro fig tabs" "left fig tabs" ". fig tabs"; column-gap: clamp(20px, 2.6vw, 48px); row-gap: 22px;
  padding: clamp(14px, 2.4vh, 28px) max(var(--gut), calc((100vw - 1560px) / 2), clamp(24px, 4.5vw, 88px)) 40px;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.cut-intro { grid-area: intro; display: grid; gap: 10px; align-content: start; }
.slogan { margin: 0; font-size: clamp(32px, min(3.2vw, 6.4vh), 52px); }
.cut-intro h1 { font-family: var(--f-body); font-weight: 600; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.35; color: var(--ink); max-width: 22em; }
.cut-tel { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.cut-tel a { font-weight: 600; color: var(--ink); text-decoration: none; }
.cut-tel a[href^="/"] { color: var(--blue-l); text-decoration: underline; }
.tool-tabs { grid-area: tabs; align-self: center; display: grid; gap: 8px; }
.tool-tabs::before { content: "Alet seçin"; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0 2px 4px; }
.tool-tab {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 12px; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px 6px 8px;
  border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; cursor: pointer; text-align: left;
  font-size: 15.5px; font-weight: 600; line-height: 1.2; color: var(--ink); transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.tool-tab::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .35; }
.tool-tab .ic { width: 46px; height: 28px; color: currentColor; }
.tool-tab:hover { border-color: var(--blue); color: var(--blue-l); box-shadow: 0 6px 18px rgba(0, 73, 117, .10); }
.tool-tab[aria-pressed="true"] { background: var(--blue-d); border-color: var(--blue-d); color: #fff; box-shadow: 0 8px 22px rgba(0, 73, 117, .22); }
.tool-tab[aria-pressed="true"]::after { opacity: 1; }
.cut-left { grid-area: left; align-self: start; display: grid; gap: 10px; }
.cut-intro { align-self: end; }
/* Seçili parçadan kenardaki parça kartına uzanan ok */
.cut-ok { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.cut-ok path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.cut-ok .ok-uc { fill: var(--red); stroke: none; }
.cut-ok .ok-nokta { fill: #fff; stroke: var(--red); stroke-width: 2; }
.cut-ok.ciz path { stroke-dasharray: var(--L); stroke-dashoffset: var(--L); animation: okciz .55s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes okciz { to { stroke-dashoffset: 0; } }
.part-card { z-index: 4; }
.cut-left .scroll-hint { display: none; }
.cut-left .btn { width: 100%; }
.cut-fig { grid-area: fig; min-height: 0; position: relative; }
.cut-right { display: none; }
.cut-right .legend { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cut-right .legend button { font-size: 14px; padding: 3px 0; }
.cut-right .legend[hidden] { display: none; }
.scroll-hint { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.scroll-hint i { display: block; width: 1.5px; height: 30px; background: var(--rule); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--red); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { to { top: 100%; } }

.drill { width: 100%; height: 100%; overflow: visible; color: var(--ink); touch-action: pan-y; }
.tool-svg { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.tool-svg.on { opacity: 1; visibility: visible; transition: opacity .35s ease .05s, visibility 0s; }
.drill .ln { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.drill .dt { fill: none; stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .8; }
.drill .fl { fill: #fff; }
.drill .cl { fill: none; stroke: var(--blue); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-dasharray: 18 5 3 5; opacity: .6; }
.drill .hous-fill { fill: #fff; }
.drill .part { cursor: pointer; outline: none; }
.drill .part .ln, .drill .part .dt { transition: stroke .2s; }
.drill .part .fl { transition: fill .2s; }
.drill .part:hover .ln, .drill .part:focus-visible .ln { stroke: var(--blue); }
.drill .part:focus-visible .ln { stroke-width: 2.6; }
.drill .part.on .ln, .drill .part.on .dt { stroke: var(--red); }
.drill .part.on .ln { stroke-width: 2.4; }
.drill .lbl { pointer-events: none; opacity: 0; }
.drill .lbl .lead { fill: none; stroke: var(--blue-d); stroke-width: .9; vector-effect: non-scaling-stroke; }
.drill .lbl .dot { fill: var(--blue-d); }
.drill .bal circle { fill: #fff; stroke: var(--blue-d); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.drill .bal text { font: 600 21px var(--f-body); text-anchor: middle; dominant-baseline: central; fill: var(--blue-d); }
.drill .lbl .nm { font: 700 24px var(--f-body); fill: var(--ink); }
.drill .lbl .nt { font: 400 20px var(--f-body); fill: var(--ink-2); }
.drill .lbl.on .bal circle { fill: var(--red); stroke: var(--red); }
.drill .lbl.on .bal text { fill: #fff; }
.drill .lbl.on .nm { fill: var(--red-d); }
.drill .dimx { fill: none; stroke: var(--blue-d); stroke-width: .8; vector-effect: non-scaling-stroke; opacity: .55; }
.drill .dimt { font: 400 19px var(--f-body); fill: var(--ink-2); }
.drill .intro .ln, .drill .intro .dt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.55, 0, .25, 1) forwards; animation-delay: var(--d, 0s); }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legend button { width: 100%; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 5px 0; cursor: pointer; font-size: 15px; line-height: 1.25; color: var(--ink); opacity: .45; transition: opacity .3s, color .2s; }
.legend button.vis { opacity: 1; }
.legend .n { width: 26px; height: 26px; border-radius: 50%; border: 1.3px solid var(--blue-d); color: var(--blue-d); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.legend button.on .n { background: var(--red); border-color: var(--red); color: #fff; }
.legend button:hover { color: var(--blue-l); }

.part-card { background: #fff; border: 1.5px solid var(--ink); padding: 14px 16px 16px; position: relative; min-height: clamp(130px, 21vh, 210px); display: flex; flex-direction: column; gap: 6px; }
.part-card::before { content: ""; position: absolute; left: -1.5px; top: -1.5px; width: 14px; height: 14px; background: var(--red); }
.part-card h2 { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: 24px; letter-spacing: -.015em; line-height: 1.05; }
.part-card .kicker { font-size: 14px; color: var(--ink-2); }
.part-card p { margin: 0; font-size: 15px; line-height: 1.5; }
.part-card .btn { margin-top: auto; min-height: 44px; font-size: 15px; }
.part-card .x { display: none; }

/* ---------- Genel bölümler ---------- */
.sec { padding: clamp(60px, 9vw, 130px) 0; position: relative; }
.sec.tight { padding: clamp(44px, 6vw, 88px) 0; }
.sec.paper { background: var(--paper); }
.sec.block { background: var(--block); color: var(--on-block); }
.sec.block a:not(.btn) { color: #fff; }
.sec.block .dim, .sec.block .muted, .sec.block .small { color: rgba(255, 255, 255, .78); }
.sec.block .dim b { color: #fff; }
.sec.block .btn { background: #fff; color: var(--blue-d); border-color: #fff; }
.sec.block .btn:hover { background: transparent; color: #fff; }
.sec.block .btn.acc { background: var(--red); border-color: var(--red); color: #fff; }
.sec.block .btn.acc:hover { background: var(--red-d); border-color: var(--red-d); }
.sec.block :focus-visible { outline-color: #fff; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 5vw, 60px); }
.sec-head p { margin: 0; }
.intro-def { border-bottom: 1px solid var(--rule); }
.kisaca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.kisaca .h3 { margin: 0 0 14px; }
.kisaca .lead { margin: 0 0 22px; }
.k-kartlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-kartlar a { position: relative; display: grid; gap: 6px; height: 100%; padding: 18px 44px 18px 18px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.k-kartlar a:hover, .k-kartlar a:focus-visible { border-color: var(--blue); box-shadow: 0 6px 18px rgba(0, 73, 117, .1); }
.k-kartlar b { font-family: var(--f-disp); font-size: 18px; font-weight: 800; }
.k-kartlar span { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.k-kartlar svg { position: absolute; right: 16px; top: 20px; width: 18px; height: 18px; color: var(--blue); }
.def-grid { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.4fr) auto; gap: clamp(16px, 3vw, 48px); align-items: start; }
.def-grid .lead { margin: 0; }
.def-grid .btns { flex-direction: column; }

/* Üç kapı */
.doors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.door { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.door:hover { color: var(--ink); }
.door .ph { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--paper); }
.door .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.door:hover .ph img { transform: scale(1.035); }
.door .body { padding: 18px 2px 0; display: grid; gap: 6px; }
.door h3 { font-family: var(--f-disp); font-stretch: 110%; font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.02em; line-height: 1; display: flex; align-items: center; gap: 12px; }
.chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; vertical-align: middle; }
.chip.mv { background: var(--blue); }
.chip.ye { background: var(--green); }
.h2 .chip { width: .4em; height: .4em; margin-right: .25em; vertical-align: .12em; }
.door p { margin: 0; color: var(--ink-2); font-size: 16px; }
.door .go { font-weight: 600; font-size: 15px; margin-top: 4px; color: var(--blue-l); }
.door:hover .go { text-decoration: underline; }
.door.other .ph { background: var(--blue-d); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 28px); }
.door.other .names { color: #fff; font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; letter-spacing: -.02em; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.12; margin: 0; }
.door.other .names span { display: block; }
.door.other .ph small { font-size: 14px; opacity: .8; }
.credit { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 12px; line-height: 1; padding: 5px 7px; border-radius: 2px; background: rgba(255, 255, 255, .9); color: #222; pointer-events: none; }

/* Numaralı hizmet satırları */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a { display: grid; grid-template-columns: clamp(56px, 7vw, 110px) minmax(0, 1fr) minmax(0, .9fr) 140px 28px; align-items: center; gap: clamp(12px, 2vw, 28px); padding: clamp(14px, 1.8vw, 20px) 6px; text-decoration: none; color: var(--ink); transition: background-color .25s; }
.rows a:hover { background: #fff; color: var(--ink); }
.rows .no { font-family: var(--f-disp); font-stretch: 80%; font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rows a:hover .no { color: var(--red); }
.rows .nm { font-family: var(--f-disp); font-stretch: 110%; font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.02; }
.rows .ds { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.rows .th { position: relative; width: 140px; height: 90px; overflow: hidden; background: var(--paper); display: block; }
.rows .th img { width: 100%; height: 100%; object-fit: cover; }
.rows .th .credit { font-size: 10px; padding: 3px 4px; right: 4px; bottom: 4px; }
.rows .th-ph { display: grid; place-items: center; color: var(--ink-2); }
.rows .th-ph .ic { width: 90px; height: 54px; }
.rows .ar { width: 24px; height: 24px; transition: transform .25s; }
.rows a:hover .ar { transform: translateX(4px); }
.rows li.minor .nm { font-size: clamp(18px, 1.8vw, 24px); }
.ic .ln { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ic .dt { fill: none; stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .75; }

/* Geniş fotoğraf */
.wide-photo { position: relative; margin: 0; }
.wide-photo img { width: 100%; height: clamp(320px, 56vw, 760px); object-fit: cover; }
.wide-photo figcaption { position: absolute; left: var(--gut); bottom: var(--gut); max-width: 560px; background: #fff; padding: clamp(18px, 2vw, 28px); border-left: 6px solid var(--red); }
.wide-photo figcaption .h3 { margin-bottom: 8px; font-size: clamp(24px, 2.4vw, 34px); }
.wide-photo figcaption p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* Arıza kaydı çağrısı */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cta-grid .h2 { margin-bottom: 22px; }
/* ---------- Arıza kaydı canlandırması (telefonda 4 adım) ---------- */
.kayit-demo { display: grid; grid-template-columns: auto 355px; align-items: center; gap: clamp(20px, 3vw, 44px); justify-self: center; }
.kd-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kd-adimlar li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .55); transition: color .3s; }
.kd-adimlar li span { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); display: grid; place-items: center; font-size: 14px; transition: background-color .3s, border-color .3s; }
.kayit-demo[data-adim="1"] li[data-a="1"], .kayit-demo[data-adim="2"] li[data-a="2"], .kayit-demo[data-adim="3"] li[data-a="3"], .kayit-demo[data-adim="4"] li[data-a="4"] { color: #fff; }
.kayit-demo[data-adim="1"] li[data-a="1"] span, .kayit-demo[data-adim="2"] li[data-a="2"] span, .kayit-demo[data-adim="3"] li[data-a="3"] span, .kayit-demo[data-adim="4"] li[data-a="4"] span { background: var(--red); border-color: var(--red); }
/* Gerçek iPhone 11 çerçevesi (355x701); ekran alanı 300x649, sol 27 üst 26 */
.kd-cihaz { position: relative; width: 355px; height: 701px; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.kd-cerceve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.kd-tel { position: absolute; left: 27px; top: 26px; width: 301px; height: 649px; border-radius: 38px; background: #fff; color: var(--ink); padding: 46px 18px 22px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.kd-ust { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 12px; border-bottom: 1px solid var(--rule); }
.kd-ust b { font-family: var(--f-disp); font-size: 19px; font-weight: 800; }
.kd-sayac { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kd-ekran { position: relative; }
.kd-s { position: absolute; inset: 12px 0 0; opacity: 0; transform: translateX(26px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.kayit-demo[data-adim="1"] .kd-s1, .kayit-demo[data-adim="2"] .kd-s2, .kayit-demo[data-adim="3"] .kd-s3, .kayit-demo[data-adim="4"] .kd-s4 { opacity: 1; transform: none; }
.kd-et { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kd-et2 { margin-top: 14px; }
.kd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kd-kart { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--rule); border-radius: 10px; font-size: 13.5px; font-weight: 600; transition: border-color .25s, background-color .25s; }
.kd-kart img { width: 64px; height: 64px; object-fit: contain; }
.kd-kart .ic { width: 64px; height: 64px; color: var(--ink-2); }
.kayit-demo.secti .kd-hedef { border-color: var(--blue); background: var(--blue-95); box-shadow: inset 0 0 0 1px var(--blue); }
.kd-foto { position: relative; height: 250px; border: 1.5px dashed var(--rule); border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.kd-bos { display: grid; justify-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.kd-bos svg { width: 34px; height: 34px; }
.kd-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .4s, transform .6s; }
.kayit-demo.foto .kd-foto img { opacity: 1; transform: none; }
.kd-flas { position: absolute; inset: 0; background: #fff; opacity: 0; }
.kayit-demo.foto .kd-flas { animation: flas .5s ease-out; }
@keyframes flas { 0% { opacity: .95; } 100% { opacity: 0; } }
.kd-yazi { min-height: 110px; border: 1.5px solid var(--blue); border-radius: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.45; }
.kd-imlec { display: inline-block; width: 2px; height: 1.1em; background: var(--blue); vertical-align: -3px; animation: imlec 1s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.kd-sube { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kd-sube span { text-align: center; padding: 9px; border: 1.5px solid var(--rule); border-radius: 8px; font-size: 14px; font-weight: 600; }
.kd-sube .on { border-color: var(--blue-d); background: var(--blue-d); color: #fff; }
.kd-s4 { inset: -12px -18px -22px; background: #efe7de; display: grid; align-content: start; gap: 10px; padding-bottom: 12px; }
.kd-wa-ust { background: var(--wa-d); color: #fff; padding: 10px 16px; display: flex; justify-content: space-between; align-items: baseline; }
.kd-wa-ust small { opacity: .75; }
.kd-balon { justify-self: end; width: 82%; margin-right: 12px; background: #d9fdd3; border-radius: 10px 0 10px 10px; padding: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  opacity: 0; transform: translateY(18px) scale(.96); transform-origin: right bottom; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1.15); }
.kayit-demo.gitti .kd-balon { opacity: 1; transform: none; }
.kd-balon img { width: 100%; height: 120px; object-fit: cover; border-radius: 7px; display: block; }
.kd-balon p { margin: 6px 4px 0; font-size: 13px; line-height: 1.4; }
.kd-balon small { display: block; text-align: right; font-size: 11px; color: #667781; margin: 2px 4px 0; }
.kd-tik { font-style: normal; color: #8696a0; transition: color .3s; }
.kayit-demo.okundu .kd-tik { color: #53bdeb; }
.kd-cevap { justify-self: start; max-width: 80%; margin-left: 12px; background: #fff; border-radius: 0 10px 10px 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .4s; }
.kayit-demo.cevap .kd-cevap { opacity: 1; transform: none; }
.kd-alt { padding-top: 12px; }
.kd-btn { display: grid; place-items: center; min-height: 48px; border-radius: 24px; background: var(--red); color: #fff; font-weight: 700; font-size: 15.5px; transition: transform .15s, background-color .3s; }
.kd-btn em { font-style: normal; }
.kd-b4 { display: none; }
.kayit-demo[data-adim="3"] .kd-btn { background: var(--wa); color: #0b2b1a; }
.kayit-demo[data-adim="3"] .kd-b1 { display: none; }
.kayit-demo[data-adim="3"] .kd-b4 { display: inline; }
.kayit-demo[data-adim="4"] .kd-alt { display: none; }
.kayit-demo.bas .kd-btn, .kayit-demo.bas .kd-hedef { transform: scale(.95); }
/* Dokunan parmak: dokunma halkası */
.kd-parmak { position: absolute; left: var(--px, 50%); top: var(--py, 90%); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(26, 28, 29, .28); border: 2px solid rgba(255, 255, 255, .9); opacity: 0; transition: left .6s cubic-bezier(.3, .7, .2, 1), top .6s cubic-bezier(.3, .7, .2, 1), opacity .25s; pointer-events: none; }
.kayit-demo.parmak .kd-parmak { opacity: 1; }
.kayit-demo.bas .kd-parmak { animation: dokun .45s ease-out; }
@keyframes dokun { 0% { transform: scale(1); } 40% { transform: scale(.7); background: rgba(237, 0, 7, .45); } 100% { transform: scale(1.25); opacity: 0; } }
@media (max-width: 960px) {
  .kayit-demo { grid-template-columns: 1fr; justify-items: center; }
  .kd-adimlar { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .kd-adimlar li { font-size: 14.5px; }
}
@media (max-width: 520px) { .k-kartlar { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .kd-cihaz { transform: scale(.88); transform-origin: top center; margin-bottom: -84px; } }
@media (prefers-reduced-motion: reduce) { .kd-s, .kd-balon, .kd-cevap, .kd-foto img { transition: none; } .kd-parmak { display: none; } }
.phone-sketch { width: 100%; max-width: 400px; justify-self: center; color: currentColor; }
.phone-sketch .ln { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.phone-sketch .acc-fill { fill: var(--red); stroke: var(--red); }
.phone-sketch .dt { fill: none; stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; opacity: .7; }
.phone-sketch text { font: 500 15px var(--f-body); fill: currentColor; }
.notice { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; padding: 14px 16px; border: 1px dashed currentColor; margin-top: 26px; max-width: 34em; }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* Süreç: aşağı akan zaman çizelgesi. --p (0-1) site.js'de kaydırmayla dolar; JS yoksa içerik yine görünür. */
.process { list-style: none; margin: 0; padding: 0; position: relative; --p: 0; }
.process::before, .process::after { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: var(--rule); }
/* Dolu hat yeşil, ucu kırmızı: geçilen yol yeşil, şu anki adım kırmızı */
.process::after { bottom: auto; height: calc((100% - 64px) * var(--p)); background: linear-gradient(var(--green) calc(100% - 70px), var(--red)); }
.process.bitti::after { background: var(--green); }
.process li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 260px) minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 48px); align-items: center; padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--rule); }
.process li:last-child { border-bottom: 0; }
.process .n { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue-d); color: var(--blue-d); display: grid; place-items: center; font-family: var(--f-disp); font-weight: 800; font-size: 24px; transition: background .35s, border-color .35s, color .35s, transform .35s; transition-delay: calc(var(--k, 0) * .2s); }
.sec.paper .process .n { background: var(--paper); }
.process li:first-child .n { background: var(--red); border-color: var(--red); color: #fff; }
.process li.on .n { background: var(--red); border-color: var(--red); color: #fff; }
/* Son adıma gelince süreç tamam: hat ve tüm adımlar Bosch yeşili */
.process li.gecti .n, .process.bitti li .n { background: var(--green); border-color: var(--green); color: #fff; transform: none; }
.process li.on .n { transform: scale(1.06); }
.process h3 { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.015em; margin: 0; line-height: 1.05; }
.process p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 36em; }
@media (prefers-reduced-motion: reduce) { .process .n { transition: none; } .process li.on .n { transform: none; } }

/* Rakamlar */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); }
.stat .v { font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; font-size: clamp(60px, 8vw, 128px); letter-spacing: -.04em; line-height: .9; display: block; color: var(--blue-d); }
.stat .v sup { font-size: .4em; vertical-align: top; position: relative; top: .25em; margin-left: .04em; color: var(--red); }
.stat .bar { display: block; height: 11px; margin: 14px 0 10px; border-left: 1.5px solid var(--blue-d); border-right: 1.5px solid var(--blue-d); background: linear-gradient(var(--blue-d), var(--blue-d)) center / 100% 1.5px no-repeat; }
.stat .k { font-size: 15px; color: var(--ink-2); line-height: 1.4; }

/* Logolar */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.logos figure { margin: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 10px 14px; position: relative; background: #fff; }
.logos img { max-height: 72px; max-width: 86%; width: auto; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter .3s, opacity .3s; }
.logos figure:hover img { filter: none; opacity: 1; }
.logos figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Yorum yer tutucu */

/* Şubeler */
.branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.branch { background: var(--paper); padding: clamp(22px, 3vw, 40px); position: relative; display: grid; gap: 12px; align-content: start; }
.sec.paper .branch { background: #fff; }
.branch .tag { font-size: 14px; color: var(--ink-2); }
.branch h2, .branch h3 { font-family: var(--f-disp); font-stretch: 110%; font-weight: 800; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.02em; line-height: 1; }
.branch h2 a, .branch h3 a { color: var(--ink); text-decoration: none; }
.branch h2 a:hover, .branch h3 a:hover { color: var(--blue-l); }
.branch address { font-style: normal; font-size: 17px; line-height: 1.5; }
.tel { font-family: var(--f-disp); font-stretch: 100%; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); text-decoration: none; letter-spacing: -.01em; display: inline-block; color: var(--ink); }
.tel:hover { color: var(--blue-l); }
.branch .hours { font-size: 15px; color: var(--ink-2); }
.branch .btn { min-height: 46px; font-size: 15px; padding: 0 16px; }
.branch::after { content: ""; position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; border-right: 1.5px solid var(--blue-d); border-top: 1.5px solid var(--blue-d); }

/* SSS */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 20px 4px; font-family: var(--f-disp); font-stretch: 104%; font-weight: 700; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.01em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 11px; height: 11px; margin-right: 6px; justify-self: end; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq .a { padding: 0 4px 22px; max-width: 46em; color: var(--ink-2); font-size: 16.5px; }
.qa { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.qa-i { padding: 18px 0 16px; border-bottom: 1px solid var(--rule); }
.qa-i h3 { font-family: var(--f-disp); font-stretch: 104%; font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 8px; }
.qa-i p { margin: 0 0 4px; max-width: 46em; color: var(--ink); }
.qa-i p.small { margin-top: 6px; }
.sss { display: grid; gap: clamp(40px, 6vw, 72px); }
.sss-g .h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 18px; }

/* ---------- İç sayfa başı ---------- */
.ph-head { padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 4.5vw, 56px); border-bottom: 1.5px solid var(--ink); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; }
.crumb { font-size: 14px; color: var(--ink-2); margin-bottom: clamp(16px, 2.6vw, 28px); display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { text-decoration: none; color: var(--blue-l); }
.crumb a:hover { text-decoration: underline; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.ph-grid > div:only-child { grid-column: 1 / -1; }
.ph-grid h1 { font-size: clamp(40px, 5.4vw, 84px); }
.ph-grid .lead { margin-top: 22px; margin-bottom: 0; }
.ph-photo { position: relative; margin: 0; }
.ph-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ic-badge { position: absolute; left: 10px; top: 10px; background: #fff; padding: 6px 8px; border-radius: 3px; color: var(--blue-d); line-height: 0; box-shadow: 0 1px 0 var(--rule); }
.ic-badge .ic { width: 64px; height: 38px; }
.ph-ph .ws-ph { aspect-ratio: 4 / 3; }
.big404 { font-size: clamp(90px, 16vw, 220px); color: var(--blue-d); margin: 0 0 10px; }

/* Hizmet kartları (fotoğraflı) */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(14px, 2vw, 24px); }
.cat { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 8px; text-decoration: none; color: var(--ink); align-content: start; }
.cat:hover { color: var(--ink); }
.cat-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); margin-bottom: 6px; }
.cat-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.cat:hover .cat-ph img { transform: scale(1.035); }
.cat-ph .ws-ph { height: 100%; aspect-ratio: auto; }
.cat .no { font-size: 14px; color: var(--ink-2); }
.cat-h { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.015em; line-height: 1.05; }
.cat p { margin: 0; color: var(--ink-2); font-size: 15px; }
.cat .go { font-weight: 600; font-size: 15px; color: var(--blue-l); }
.cat:hover .go { text-decoration: underline; }
.series { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.series span { font-size: 13px; padding: 3px 9px; border-radius: 3px; line-height: 1.2; color: #fff; font-weight: 600; }
.series .mv { background: var(--blue-l); }
.series .ye { background: var(--green); }

/* Hizmet sayfası */
.svc { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.svc-aside { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; display: grid; gap: 18px; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.toc a { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; color: var(--ink); }
.toc a:hover { color: var(--blue-l); }
.aside-sube { font-size: 15px; line-height: 1.7; }
.aside-sube b { display: block; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.aside-sube a[href^="tel"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.svc-body > section { padding-bottom: clamp(32px, 4.5vw, 56px); }
.svc-body h2.h3 { margin-bottom: 16px; font-size: clamp(26px, 2.6vw, 36px); }
.svc-body h3 { font-size: 19px; margin: 18px 0 6px; }
.svc-body .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 32px); margin-top: 22px; }
.tbl-wrap { overflow-x: auto; margin-bottom: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-size: 14px; color: var(--ink-2); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.tbl tbody th { font-weight: 700; width: 28%; }
.checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border: 1.5px solid var(--red); transform: rotate(45deg); }
.steps-mini { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: s; display: grid; border-top: 1px solid var(--rule); }
.steps-mini li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.steps-mini li::before { content: "0" counter(s); font-family: var(--f-disp); font-stretch: 80%; font-weight: 600; font-size: 22px; color: var(--blue-d); line-height: 1.1; }
.rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; border-top: 1.5px solid var(--ink); }
.rel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 600; color: var(--ink); }
.rel a:hover { color: var(--blue-l); }
.rel .ar { width: 20px; height: 20px; flex: none; transition: transform .25s; }
.rel a:hover .ar { transform: translateX(4px); }
.photo { position: relative; margin: 0; }
.photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.photo figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.photo .credit { top: 8px; bottom: auto; }
.ws-ph { position: relative; aspect-ratio: 16 / 10; background: #e6e8ea; color: #5c6166; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; font-size: 15px;
  background-image: linear-gradient(135deg, transparent 49.7%, rgba(0, 73, 117, .08) 49.7% 50.3%, transparent 50.3%), linear-gradient(45deg, transparent 49.7%, rgba(0, 73, 117, .08) 49.7% 50.3%, transparent 50.3%); }
.ws-ph span { background: #e6e8ea; padding: 7px 13px; border: 1px solid rgba(0, 0, 0, .12); }
.ws-ph .ic { width: 140px; height: 84px; color: var(--blue-d); background: #e6e8ea; }
.ws-ph.sm { aspect-ratio: 16 / 6; margin-top: 14px; }

/* Düzen yardımcıları */
.two-col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.two-col h2.h3 { margin: 0 0 12px; }
.two-col h2.h3 ~ h2.h3 { margin-top: 28px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.panel { background: var(--paper); padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 10px; align-content: start; }
.sec.paper .panel { background: #fff; }
.panel h3, .panel h2.h3 { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.015em; line-height: 1.08; }
.panel p { margin: 0; }
.panel ul { margin: 0; padding-left: 1.1em; }
.panel li { margin-bottom: 6px; }
.panel .btn { justify-self: start; }
.panel.warn { border-left: 6px solid var(--red); }
.series-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.series-row.rev > figure { order: 2; }
.series-row .h2 { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 14px; }
.big-adr { font-style: normal; font-size: 20px; line-height: 1.5; margin-bottom: 10px; }
.tels { list-style: none; padding: 0; margin: 0 0 24px; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.art-body section { margin-bottom: 28px; }
.art-body h2.h3 { margin-bottom: 10px; }
.art-body p { max-width: 42em; }
.art-cta { position: sticky; top: calc(var(--hdr) + 24px); }
.art-head .lead { font-size: clamp(19px, 1.6vw, 22px); max-width: 44em; border-left: 4px solid var(--red); padding-left: 18px; }
.big-steps { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.big-steps li { display: grid; grid-template-columns: clamp(80px, 12vw, 170px) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.big-steps .n { font-family: var(--f-disp); font-stretch: 80%; font-weight: 600; font-size: clamp(56px, 8vw, 116px); line-height: .85; color: var(--blue-d); }
.big-steps h2 { font-family: var(--f-disp); font-stretch: 110%; font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -.02em; line-height: 1; margin-bottom: 12px; }
.big-steps p { margin: 0 0 8px; color: var(--ink-2); }
.big-steps .msg { background: var(--paper); padding: 14px 16px; font-size: 15px; border-left: 4px solid var(--wa); }
.big-steps .msg b { display: block; font-size: 14px; color: var(--ink-2); font-weight: 500; margin-bottom: 4px; }
.brand-rows { display: grid; gap: clamp(36px, 5vw, 64px); }
.brand-row .h2 { margin-bottom: 18px; }
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); border-top: 1.5px solid var(--ink); }
.brand-list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.brand-list .lg { width: 96px; height: 44px; display: grid; place-items: center; background: #fff; }
.brand-list .lg img { max-height: 40px; width: auto; }
.brand-list .lg.txt { font-family: var(--f-disp); font-weight: 800; font-size: 14px; }
.brand-list h3 { font-size: 19px; font-weight: 700; line-height: 1.2; }
.brand-list p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.auth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 220px; gap: clamp(14px, 2vw, 24px); }
.auth .badge { background: var(--paper); display: grid; place-items: center; padding: 20px; }
.auth .badge img { max-width: 170px; }
.doc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.doc figure { margin: 0; background: #fff; padding: 16px; position: relative; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.team .ws-ph { aspect-ratio: 3 / 4; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--blue-d); }
.timeline li { position: relative; padding: 0 0 24px 26px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--blue-d); }
.timeline b { display: block; font-family: var(--f-disp); font-stretch: 104%; font-size: 20px; }
.map-box { position: relative; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 20px; }
.map-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-box .mg path { stroke: var(--blue-d); stroke-width: .6; opacity: .14; }
.map-box .mc { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 6 6; }
.map-box .mx { stroke: var(--red); stroke-width: 1.2; }
.map-box .in { position: relative; background: #fff; padding: 14px 18px; border: 1.5px solid var(--ink); display: grid; gap: 8px; justify-items: center; }
.map-box .btns { justify-content: center; }
.map-box .btn { min-height: 42px; font-size: 14px; }

/* ---------- Formlar ---------- */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.fstep { border: 0; margin: 0; padding: 0 0 clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; min-width: 0; }
.fstep legend { display: contents; }
.fstep .sn { grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--blue-d); color: var(--blue-d); display: grid; place-items: center; font-weight: 700; }
.fstep .st { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.015em; line-height: 1.1; padding-top: 8px; }
.fstep .sd { color: var(--ink-2); font-size: 15px; margin: 0 0 8px; }
.fields { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.fields.solo { grid-column: auto; }
.fields .full { grid-column: 1 / -1; }
fieldset.f { border: 0; margin: 0; padding: 0; min-width: 0; }
.f label, .f .lab { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.f .opt { font-weight: 400; color: var(--ink-2); }
.f input[type="text"], .f input[type="tel"], .f select, .f textarea, .wa-f input, .wa-f select, .wa-f textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--rule); border-bottom-color: var(--ink); border-radius: 0; padding: 12px 14px; min-height: 50px; transition: border-color .2s;
}
.f select, .wa-f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea { resize: none; field-sizing: content; overflow: hidden; line-height: 1.5; }
.f textarea { min-height: 120px; }
.f input:focus, .f select:focus, .f textarea:focus, .wa-f input:focus, .wa-f select:focus, .wa-f textarea:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--rule); background: #fff; font-size: 15px; font-weight: 500; transition: border-color .2s, background-color .2s, color .2s; }
.choice input:checked + span { border-color: var(--blue-d); background: var(--blue-d); color: #fff; }
.choice input:focus-visible + span { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.choice .sw { width: 10px; height: 10px; border-radius: 50%; }
.choice .sw.mv { background: var(--blue); }
.choice .sw.ye { background: var(--green); }
.drop { border: 1.5px dashed var(--blue-d); background: var(--paper); padding: 22px; display: grid; gap: 8px; justify-items: start; position: relative; }
.drop svg { width: 28px; height: 28px; color: var(--blue-d); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop:focus-within { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs img { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--rule); }
.form-side { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 14px; }
[hidden] { display: none !important; }
.preview b { font-weight: 700; color: var(--ink); }
.foto-gonder { border: 1.5px dashed var(--wa-d); padding: 16px; display: grid; gap: 10px; }
.foto-gonder .fg-h { margin: 0; }
.preview { background: #fff; border: 1.5px solid var(--ink); border-left: 5px solid var(--wa); padding: 18px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; min-height: 160px; }
.preview-h, .form-note { font-size: 14px; color: var(--ink-2); }
.form-note { margin-top: 10px; }

/* ---------- Alt bilgi ---------- */
.ftr { background: var(--block); color: #fff; padding: clamp(52px, 7vw, 100px) 0 96px; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr :focus-visible { outline-color: #fff; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) minmax(0, .9fr) minmax(0, .9fr); gap: clamp(24px, 3.4vw, 48px); padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ftr-word { font-family: var(--f-disp); font-stretch: 118%; font-weight: 800; font-size: clamp(36px, 4vw, 56px); letter-spacing: -.03em; line-height: 1.02; margin-bottom: 14px; }
.ftr-def { font-size: 15px; opacity: .85; max-width: 22em; }
.ftr h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: rgba(255, 255, 255, .72); }
.ftr h2 a { color: rgba(255, 255, 255, .85); }
.ftr address { font-style: normal; font-size: 15.5px; line-height: 1.6; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font-size: 15px; }
.ftr-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.ftr-bot a { text-decoration: underline; }

/* ---------- WhatsApp düğmesi ve sohbet penceresi ---------- */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; gap: 10px; align-items: center; transition: opacity .2s; }
.fab a, .wa-fab { height: 56px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); border: 0; cursor: pointer; }
.fab-call { width: 56px; background: var(--blue-d); color: #fff; display: none !important; }
.fab-call svg { width: 24px; height: 24px; }
.wa-fab { background: var(--wa); color: #0b2a17; padding: 0 22px 0 18px; font-weight: 700; font-size: 16px; }
.wa-fab svg { width: 26px; height: 26px; }
.wa-fab:hover { background: #1ebe5a; }
.wa-fab[aria-expanded="true"] { background: var(--wa-d); color: #fff; }
.wa-nudge { position: fixed; right: 16px; bottom: 84px; z-index: 71; display: flex; align-items: center; gap: 2px; background: #fff; border: 1.5px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); padding: 2px 4px 2px 14px; }
.wa-nudge[hidden] { display: none; }
.wa-nudge button { background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; min-height: 40px; }
.wa-nudge-x { width: 36px; font-size: 22px !important; line-height: 1; color: var(--ink-2); }
.wa-panel {
  position: fixed; right: 16px; bottom: 84px; z-index: 90; width: min(420px, calc(100vw - 32px));
  /* Sabit boy: konu seçilince pencere büyümez, baştan tam boy açılır; içerik içeride kayar */
  height: min(700px, calc(100vh - var(--hdr) - 110px)); height: min(700px, calc(100svh - var(--hdr) - 110px));
  display: flex; flex-direction: column; background: #efeae2; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease;
}
.wa-panel[hidden] { display: none; }
.wa-panel.open { opacity: 1; transform: none; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; background: var(--wa-d); color: #fff; flex: none; }
.wa-av { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--blue-d); display: grid; place-items: center; flex: none; }
.wa-av .logo-mark { width: 30px; height: 30px; }
.wa-head h2 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.wa-head p { margin: 0; font-size: 13.5px; opacity: .92; }
.wa-head > div { flex: 1; min-width: 0; }
.wa-x { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; border-radius: 50%; flex: none; }
.wa-x:hover { background: rgba(255, 255, 255, .14); }
.wa-panel :focus-visible { outline-color: var(--blue-d); }
.wa-head :focus-visible { outline-color: #fff; }
.wa-body { flex: 1; min-height: 0; padding: 14px; overflow-y: auto; display: grid; align-content: start; gap: 12px; overscroll-behavior: contain; }
.wa-bubble { position: relative; margin: 0; background: #fff; border-radius: 0 10px 10px 10px; padding: 10px 12px; font-size: 15px; line-height: 1.45; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); max-width: 92%; }
.wa-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-topic { min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1.5px solid var(--wa-d); background: #fff; color: var(--wa-d); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.wa-topic:hover { background: #e7f6ee; }
.wa-topic[aria-pressed="true"] { background: var(--wa-d); color: #fff; }
.wa-form { display: grid; gap: 10px; background: #fff; border-radius: 10px; padding: 12px; }
.wa-form[hidden] { display: none; }
.wa-f[hidden], .wa-yol[hidden] { display: none; }
.wa-f label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.wa-f .opt { font-weight: 400; color: var(--ink-2); }
.wa-f input, .wa-f select { min-height: 46px; padding: 10px 12px; font-size: 16px; }
.wa-f select { padding-right: 36px; }
.wa-f textarea { min-height: 70px; padding: 10px 12px; font-size: 16px; }
.wa-yol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.wa-yol li { display: grid; gap: 2px; padding: 8px 10px; background: var(--paper); }
.wa-sube { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-sube legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; width: 100%; }
.wa-sube .choice span { min-height: 40px; font-size: 14.5px; }
.wa-go { background: var(--wa); border-color: var(--wa); color: #0b2a17; width: 100%; }
.wa-go:hover { background: var(--wa-d); border-color: var(--wa-d); color: #fff; }
.wa-note { font-size: 13px; color: var(--ink-2); margin: 0; }
.wa-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 89; }
.wa-dim[hidden] { display: none; }
body.sheet-open .fab, body.sheet-open .wa-nudge { opacity: 0; pointer-events: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  .rows a { grid-template-columns: 64px minmax(0, 1fr) minmax(0, .9fr) 120px 28px; }
  .rows .th { width: 120px; height: 80px; }
  .auth { grid-template-columns: 1fr 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr 1fr; }
  .def-grid, .kisaca { grid-template-columns: 1fr; }
  .def-grid .btns { flex-direction: row; }
}
@media (max-width: 960px) {
  :root { --hdr: 62px; }
  .hdr .call-txt, .logo-badge { display: none; }
  .logo-tag { padding: 4px 5px 6px; border-radius: 0 0 8px 8px; }
  .logo-tag img { height: 58px; }
  .cut .cut-stage { padding-top: 40px; }
  .page-head, main > section:first-child { scroll-margin-top: 0; }
  .cut { height: 220vh; }
  .cut-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "intro" "tabs" "fig" "legend"; padding-top: 10px; padding-bottom: 84px; row-gap: 6px; }
  .slogan { font-size: clamp(30px, 8.6vw, 54px); }
  .cut-intro { gap: 4px; }
  .cut-intro h1 { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
  .cut-tel { display: none; }
  .tool-tabs { display: flex; align-self: auto; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); scroll-snap-type: x proximity; }
  .tool-tabs::-webkit-scrollbar { display: none; }
  .tool-tabs::before, .tool-tab::after { display: none; }
  .tool-tab { display: inline-flex; flex: none; gap: 6px; min-height: 40px; padding: 0 13px 0 6px; border-radius: 6px; box-shadow: none; font-size: 14px; scroll-snap-align: start; }
  .tool-tab:hover, .tool-tab[aria-pressed="true"] { box-shadow: none; }
  .tool-tab .ic { width: 34px; height: 21px; }
  .cut-left { grid-area: auto; }
  .cut-left .btns, .cut-left .scroll-hint { display: none; }
  .cut-right { display: block; grid-area: legend; }
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
  .legend[hidden] { display: none; }
  .legend button { font-size: 13px; gap: 6px; grid-template-columns: 24px 1fr; padding: 3px 0; }
  .legend .n { width: 22px; height: 22px; font-size: 12px; }
  .drill .lbl .lead, .drill .lbl .nm, .drill .lbl .nt, .drill .lbl .dot { display: none; }
  .drill .bal text { font-size: 34px; }
  .drill .dimx, .drill .dimt { display: none; }
  .part-card { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; min-height: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .22); transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .part-card.show { transform: none; }
  .part-card .x { display: grid; place-items: center; position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1; }
  .sec-head, .cta-grid, .ph-grid, .svc, .form-wrap, .doc, .two-col, .series-row, .article { grid-template-columns: minmax(0, 1fr); }
  .series-row.rev > figure { order: 0; }
  .svc-aside, .form-side, .art-cta { position: static; }
  .svc-aside .toc { display: none; }
  .doors { grid-template-columns: 1fr 1fr; }
  .door.other { grid-column: 1 / -1; }
  .door.other .names { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .door .ph { aspect-ratio: 4 / 3; }
  .door.other .ph { aspect-ratio: auto; }
  .process::before, .process::after { left: 23px; top: 40px; }
  .process::before { bottom: 40px; }
  .process::after { height: calc((100% - 80px) * var(--p)); }
  .process li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 22px 0; border-bottom: 0; }
  .process .n { grid-row: 1 / span 2; width: 48px; height: 48px; font-size: 19px; }
  .process h3 { padding-top: 10px; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .branches, .split, .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: 1fr 1fr; }
  .big-steps li { grid-template-columns: 64px minmax(0, 1fr); }
  .big-steps li > :last-child { grid-column: 2; }
  .team { grid-template-columns: 1fr 1fr; }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .menu-body { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .menu-side { align-self: start; }
  .fab-call { display: inline-flex !important; }
  .wa-fab-t { display: none; }
  .wa-fab { width: 56px; padding: 0; }
}
@media (max-width: 640px) {
  .hdr .wrap { gap: 8px; }
  .logo-word { font-size: 16px; }
  .hdr .logo { gap: 8px; }
  .logo-sub { display: none; }
  .logo-mark { width: 32px; height: 32px; }
  .hdr-btn { padding: 0 12px; height: 42px; font-size: 14px; }
  .hdr .call { display: none; }
  .ariza-txt-long { display: none; }
  .logo { gap: 8px; }
  .rows a { grid-template-columns: 44px minmax(0, 1fr) 86px; row-gap: 4px; padding: 14px 2px; }
  .rows .nm { grid-column: 2; grid-row: 1; }
  .rows .ds { grid-column: 2; grid-row: 2; font-size: 14px; }
  .rows .th { grid-column: 3; grid-row: 1 / span 2; width: 86px; height: 64px; }
  .rows .ar { display: none; }
  .rows .no { font-size: 24px; grid-row: 1 / span 2; align-self: start; }
  .cats { grid-template-columns: minmax(0, 1fr); }
  .svc-body .two { grid-template-columns: minmax(0, 1fr); }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: auto !important; }
  .tbl thead { display: none; }
  .tbl tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .tbl th, .tbl td { border: 0; padding: 2px 0; }
  .tbl td:nth-child(2)::before { content: "Belirti: "; color: var(--ink-2); }
  .tbl td:nth-child(3)::before { content: "Olası neden: "; color: var(--ink-2); }
  .tbl.kv td::before { content: none; }
  .fields { grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; }
  .fstep { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .fstep .sn { width: 38px; height: 38px; }
  .wide-photo img { height: 340px; }
  .wide-photo figcaption { position: static; border-left: 0; border-top: 6px solid var(--red); }
  .wide-photo .credit { top: 8px; bottom: auto; }
  .ftr-top { grid-template-columns: minmax(0, 1fr); }
  .brand-list { grid-template-columns: minmax(0, 1fr); }
  .menu-list .t { font-size: clamp(28px, 8vw, 40px); }
  .menu-list a { grid-template-columns: 42px auto auto; }
  .menu-list .lead-ln { width: 18px; margin-right: 12px; }
  .menu-links ul { grid-template-columns: 1fr; }
  .menu-links { display: none; }
  .tblock { grid-template-columns: 1fr; }
  .tblock > div { border-left: 0 !important; border-top: 1px solid #fff !important; }
  .tblock > div:first-child { border-top: 0 !important; }
  .map-box { aspect-ratio: 4 / 5; }
  .stat .v { font-size: 60px; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .wa-panel { left: 0; right: 0; bottom: 0; width: 100%; height: 88vh; height: 88svh; border-radius: 14px 14px 0 0; transform: translateY(40px); }
  .wa-nudge { bottom: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .cut { height: auto; }
  .cut-stage { position: relative; top: 0; height: calc(100svh - var(--hdr)); min-height: 620px; }
  .scroll-hint { display: none !important; }
}

.slogan .yil { color: var(--red); display: block; white-space: nowrap; }

@media (max-width: 430px) { .logo-word { display: none; } }

/* Hero: toplu hâlde tıklanabilir parça noktaları */
.cut .hs { cursor: pointer; transition: opacity .2s; }
.cut .hs-ic { fill: var(--red); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.cut .hs-hale { fill: var(--red); opacity: .35; transform-box: fill-box; transform-origin: center; animation: hs-nabiz 2.2s ease-out infinite; }
.cut .hs text { fill: #fff; font-family: var(--f-disp); font-weight: 800; pointer-events: none; }
.cut .hs:hover .hs-ic { fill: var(--red-d); }
@keyframes hs-nabiz { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cut .hs-hale { animation: none; opacity: 0; } }

/* İletişim: iki şube yan yana 3B harita */
.h3d { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.h3d-kart { display: grid; grid-template-rows: auto auto 1fr; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--bg); }
.h3d-harita { position: relative; height: 400px; background: var(--paper); }
.h3d-yedek { position: absolute; inset: auto 16px 16px; margin: 0; font-size: 14px; }
.h3d-dis { position: relative; margin: 0; border-top: 1px solid var(--rule); }
.h3d-dis img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.h3d-dis figcaption { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 3px; background: rgba(255, 255, 255, .92); font-size: 13.5px; font-weight: 600; }
.h3d-bilgi { display: grid; gap: 6px; align-content: start; padding: 18px; }
.h3d-bilgi .h3 { margin: 0; }
.h3d-bilgi address { font-style: normal; color: var(--ink-2); font-size: 15px; }
.h3d-bilgi .btn { justify-self: start; margin-top: 8px; }
.h3d-pin { position: relative; padding: 0 0 14px; pointer-events: none; }
.h3d-pin span { display: block; padding: 8px 14px; border-radius: 4px; background: var(--red); color: #fff; font: 700 14px var(--f-body); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.h3d-pin::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
@media (max-width: 960px) {
  .h3d { grid-template-columns: 1fr; }
  .h3d-harita { height: 340px; }
}

/* Hakkımızda: değerler */
.degerler { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.degerler li { display: grid; align-content: start; gap: 6px; padding: 18px; border-top: 3px solid var(--red); background: var(--paper); }
.degerler b { font-family: var(--f-disp); font-size: 18px; font-weight: 800; }
.degerler span { font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .degerler { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .degerler { grid-template-columns: 1fr; } }

/* Google yorumları: yavaş kayan şerit, üzerine gelince ya da odakta durur */
.yorum-puan { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 26px; }
.yorum-puan a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; }
.yorum-puan b { font-family: var(--f-disp); font-size: 28px; font-weight: 800; }
.yorum-puan .stars { color: #f5a400; letter-spacing: 2px; }
.yorum-puan span:last-child { font-size: 14.5px; color: var(--ink-2); }
.yorum-serit { overflow: hidden; margin: 0 calc(-1 * var(--gut, 20px)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.yorum-iz { display: flex; width: max-content; animation: yorum-kay 70s linear infinite; }
.yorum-serit:hover .yorum-iz, .yorum-serit:focus-within .yorum-iz, .yorum-serit:focus .yorum-iz { animation-play-state: paused; }
.yorum-grup { display: flex; gap: 16px; padding-right: 16px; }
.yorum { width: 340px; margin: 0; padding: 22px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.yorum .stars { color: #f5a400; letter-spacing: 3px; font-size: 17px; }
.yorum blockquote { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.yorum figcaption { display: grid; gap: 2px; font-size: 14px; }
.yorum figcaption span { color: var(--ink-2); font-size: 13px; }
@keyframes yorum-kay { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .yorum { width: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .yorum-iz { animation: none; }
  .yorum-serit { overflow-x: auto; }
  .yorum-grup[aria-hidden="true"] { display: none; }
}

/* Hero çizimi: malzeme boyaması (veri/cizimler.py MALZEME). Çizgi koyu gri, dolgu gerçek malzeme tonu */
.drill .part .ln { stroke: #2b3035; }
.drill .m-metal .fl { fill: url(#mz-metal); }
.drill .m-celik .fl { fill: url(#mz-celik); }
.drill .m-bakir .fl { fill: url(#mz-bakir); }
.drill .m-karbon .fl { fill: #3a3f44; }
.drill .m-plastik .fl, .drill .m-kaucuk .fl, .drill .m-aku .fl { fill: url(#mz-koyu); }
.drill .m-sepet .fl { fill: #cfd6db; fill-opacity: .85; }
.drill.seri-mavi .m-govde .fl, .drill.seri-mavi .hous-fill { fill: url(#mz-mavi); }
.drill.seri-yesil .m-govde .fl, .drill.seri-yesil .hous-fill { fill: url(#mz-yesil); }
/* Koyu ve renkli yüzeyde detay çizgileri açık */
.drill .m-govde .dt, .drill .m-plastik .dt, .drill .m-kaucuk .dt, .drill .m-aku .dt, .drill .m-karbon .dt { stroke: rgba(255, 255, 255, .55); }
.drill .m-bakir .dt { stroke: #7a3d14; }
/* Seçim ve üzerine gelme: malzeme kalır, parlaklık ve kırmızı çizgi */
.drill .part:hover .fl { fill-opacity: 1; filter: brightness(1.12); }
.drill .part.on .fl { filter: brightness(1.08) drop-shadow(0 0 6px rgba(237, 0, 7, .45)); }

.sube-foto { margin: 0 0 16px; }
.sube-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; }

/* Gerçek ürün ayrıntıları: siyah kauçuk, kırmızı vurgu, ışık yansıması (cizimler.py k-*) */
.drill .part .k-siyah, .drill .part .fl.k-siyah { fill: url(#mz-kauc); }
.drill .part .k-kirmizi, .drill .part .fl.k-kirmizi { fill: url(#mz-kirmizi); }
.drill .part .k-isik { fill: url(#mz-isik); stroke: none; pointer-events: none; }
.drill .part .dt.k-acik { stroke: rgba(255, 255, 255, .22); }
.drill .part .k-yazi { fill: #fff; font: 800 30px var(--f-disp); letter-spacing: .06em; opacity: .95; }
.drill .hous-fill ~ .k-siyah, .drill .hous-fill ~ .k-isik, .drill .hous-fill ~ .k-yazi { transition: opacity .2s; }
.drill .part .k-alu { fill: url(#mz-metal); }
.drill .part .ln.k-cubuk { stroke: #22262a; stroke-width: 7; }
.drill .part .ln.k-kirmizi-cizgi { stroke: #e2160f; stroke-width: 6; }
.drill .part .k-acik-daire { fill: #f3f4f5; }
.drill .part .k-alt { fill: #fff; font: 600 15px var(--f-body); opacity: .85; }

/* ---------- Mobil dokunma alanları: her bağlantı ve düğme en az 44px ---------- */
@media (max-width: 960px) {
  .crumb { gap: 0 8px; margin-top: -10px; align-items: center; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr ul { gap: 0; }
  .ftr ul a, .ftr address a, .ftr h2 a, .ftr-bot a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr address { line-height: 1.5; }
  .tel { display: inline-flex; align-items: center; min-height: 44px; }
  .legend button { min-height: 44px; padding: 4px 0; }
  .arrow-link { min-height: 44px; }
  .todo { font-size: max(.8em, 13px); white-space: normal; }
  .yorum-puan a { min-height: 44px; align-items: center; }
}
@media (max-width: 960px) {
  .branch h2 a, .branch h3 a, .aside-sube a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumb a { min-width: 44px; }
}

@media (max-width: 640px) {
  .doors { grid-template-columns: 1fr; }
  .door .ph { aspect-ratio: 16 / 10; }
  .door.other .ph { aspect-ratio: auto; }
}
/* Arıza kaydı demosu: 961-1200px arasında (1360 dahil) adımlar telefonun üstünde (yan yana sığmıyor) */
@media (min-width: 961px) {
  .kayit-demo { grid-template-columns: 1fr; justify-items: center; }
  .kd-adimlar { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
}
/* Tablet (641-960): parça listesi çizimin sağında, çizim büyük */
@media (min-width: 641px) and (max-width: 960px) {
  .cut-stage { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "intro intro" "tabs tabs" "fig legend"; column-gap: 12px; }
  .cut-right { align-self: center; }
  .legend { grid-template-columns: 1fr; gap: 0; }
  .legend button { font-size: 14.5px; }
}
/* Tablet parça listesi tek sütun (genel .cut-right .legend kuralını ezer) */
@media (min-width: 641px) and (max-width: 960px) { .cut-right .legend { grid-template-columns: 1fr; } }
/* Yatay tablet ve küçük dizüstü (961-1280): yan sütunlar daralır, çizim büyür */
@media (min-width: 961px) and (max-width: 1280px) {
  .cut-stage { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 196px; column-gap: 20px; padding-left: 24px; padding-right: 24px; }
  .slogan { font-size: clamp(30px, 3vw, 40px); }
}
/* Yatay telefon (kısa ekran): kaydırmalı sahne yerine sabit yükseklikli, parçaları açık çizim */
@media (max-height: 500px) and (max-width: 960px) and (orientation: landscape) {
  .cut { height: auto; }
  .cut-stage { position: relative; top: 0; height: auto; grid-template-rows: auto auto 82vh; padding-bottom: 24px; }
}
.cut-tel b, .cut-tel a { white-space: nowrap; }
@media (max-height: 500px) and (max-width: 960px) and (orientation: landscape) {
  .cut-right { align-self: start; }
  .cut-right .legend { grid-template-columns: 1fr 1fr; }
  .cut-right .legend button { min-height: 40px; font-size: 13.5px; }
}
/* Tablet: iki sütunlu kart grupları korunur, belge görseli ekranı kaplamaz */
@media (min-width: 641px) and (max-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .doc { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .doc figure { max-width: 360px; }
}
/* Kısa ekran (yatay telefon): WhatsApp penceresi ekran boyunca, sağdaki düğmeler açıkta kalır */
@media (max-height: 520px) and (orientation: landscape) {
  .wa-panel { top: 8px; bottom: 8px; right: 88px; left: auto; width: min(440px, calc(100vw - 104px)); height: auto; border-radius: 12px; }
}
/* SSS konu kısayolları */
.sss-kisa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 44px); }
.sss-kisa a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--rule); border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; background: var(--bg); }
.sss-kisa a:hover { border-color: var(--blue); color: var(--blue); }
.sss-kisa span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.sss-g { scroll-margin-top: calc(var(--hdr) + 16px); }
/* Referans logoları: telefonda üçlü ızgara, kutular kısa */
@media (max-width: 640px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos figure { aspect-ratio: 4 / 3; padding: 8px; }
  .logos img { max-height: 44px; }
}
/* Alt bilgi telefonda: marka ve adresler tam genişlik, Hizmetler ve Kurumsal yan yana */
@media (max-width: 640px) {
  .ftr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .ftr-top > :nth-child(-n+3) { grid-column: 1 / -1; }
  .ftr ul { font-size: 14.5px; }
  .ftr ul a { line-height: 1.3; }
}
@media (min-width: 961px) { .kd-adimlar li { white-space: nowrap; } }
/* Telefon: parça listesi 3 sütun, çizime daha çok yer */
@media (max-width: 640px) {
  .cut-right .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  .cut-right .legend button { font-size: 12.5px; grid-template-columns: 22px 1fr; gap: 5px; min-height: 40px; }
  .legend .n { width: 20px; height: 20px; font-size: 11px; }
}

/* ===== Mobil 2. tur (9 Ekim) ===== */
.tool-tab .t-kisa { display: none; }
/* Alt bilgi açılır listeler: masaüstünde hep açık, başlık gibi */
.ftr-acc summary { list-style: none; pointer-events: none; }
.ftr-acc summary::-webkit-details-marker { display: none; }
@media (max-width: 960px) {
  /* 1) Alet seçici: altı alet tek satırda eşit kutular */
  .tool-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .tool-tab { flex-direction: column; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 2px; border-radius: 12px; font-size: 13px; line-height: 1.15; text-align: center; }
  .tool-tab .ic { width: 38px; height: 22px; }
}
@media (max-width: 640px) {
  .tool-tab .t-uzun { display: none; }
  .tool-tab .t-kisa { display: block; }
  .tool-tabs { gap: 5px; }
  .tool-tab { min-height: 56px; font-size: 11.5px; padding: 6px 1px; }
  .tool-tab .ic { width: 32px; height: 19px; }

  /* 4) Hizmet verdiğimiz aletler: kaydırılan fotoğraf kartları */
  .doors { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 10px; }
  .doors::-webkit-scrollbar { display: none; }
  .door, .door.other { flex: 0 0 82%; scroll-snap-align: start; position: relative; border-radius: 16px; overflow: hidden; background: var(--blue-d); }
  .door .ph, .door.other .ph { aspect-ratio: 4 / 5; }
  .door.other .ph { justify-content: flex-start; padding: 22px 20px; }
  .door .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px; background: linear-gradient(180deg, transparent, rgba(0, 22, 38, .9) 55%); }
  .door h3, .door p, .door .go { color: #fff; }
  .door p { font-size: 14.5px; opacity: .9; }
  .door .go { font-size: 14.5px; text-decoration: underline; }
  .door .credit { display: none; }

  /* 5) Arıza kaydı: tek sıra adım göstergesi, yan yana butonlar, kompakt not */
  .kd-adimlar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; position: relative; }
  .kd-adimlar::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 1.5px; background: rgba(255, 255, 255, .3); }
  .kd-adimlar li { position: relative; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.2; text-align: center; white-space: normal; }
  .kd-adimlar li span { width: 28px; height: 28px; font-size: 12.5px; background: var(--blue-d); }
  .sec.block .cta-grid .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sec.block .cta-grid .btns .btn { padding: 0 10px; font-size: 15px; min-height: 48px; }
  .sec.block .notice { font-size: 13.5px; padding: 10px 12px; margin-top: 16px; gap: 8px; }

  /* 6) Alt bilgi: kompakt, listeler açılır başlık */
  .ftr { padding-top: 40px; }
  .ftr-word { font-size: 30px; margin-bottom: 8px; }
  .ftr-def { font-size: 14px; }
  .ftr-top { row-gap: 18px; padding-bottom: 20px; }
  .ftr-top > .ftr-acc { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .22); }
  .ftr-acc summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  .ftr-acc summary h2 { margin: 0; font-size: 16px; color: #fff; }
  .ftr-acc summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .8); transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
  .ftr-acc[open] summary::after { transform: translateY(2px) rotate(225deg); }
  .ftr-acc ul { padding-bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .ftr address { font-size: 14.5px; }
  .ftr h2 { margin-bottom: 6px; }
}
/* ===== Mobil 3. tur: telefonda çizime azami alan, parça kartında × çakışması ===== */
@media (max-width: 640px) {
  .cut-right { display: none; }                       /* parça listesi: numaralar dokunulabilir, ad ve açıklama kartta */
  .cut-stage { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "intro" "tabs" "fig"; padding-bottom: 76px; row-gap: 8px; }
  .slogan { font-size: clamp(24px, 7vw, 30px); line-height: 1.02; }
  .slogan .yil { display: inline; }
  .cut-intro h1 { font-size: 13px; line-height: 1.35; }
  .part-card .kicker { padding-right: 40px; font-size: 13px; }
  .part-card { padding: 12px 14px 14px; }
  .part-card h2 { font-size: 22px; }
  .part-card p { font-size: 14.5px; }
}

/* ===== Mobil 4. tur ===== */
@media (max-width: 960px) {
  .hdr { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  body.hdr-gizli .hdr { transform: translateY(calc(-100% - 56px)); }   /* asılı logo rozeti de gizlensin */
  .cut-stage { transition: top .3s cubic-bezier(.2, .7, .2, 1); }
  body.hdr-gizli .cut-stage { top: 0; }
}
@media (max-width: 640px) {
  .cut-stage { padding-bottom: 66px; }
  .tool-tab { min-height: 52px; }
}
/* Markalar: logo duvarı (ortada rozet, iki yanda marka logoları; boş hücre bırakmaz) */
.logo-duvari { display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-auto-rows: 1fr; gap: 1px; aspect-ratio: 4 / 3; background: var(--rule); border: 1px solid var(--rule); }
.logo-duvari span { display: grid; place-items: center; padding: 10%; background: #fff; }
.logo-duvari img { width: 100%; height: auto; max-height: 70%; aspect-ratio: auto; object-fit: contain; filter: grayscale(1); opacity: .85; }
.logo-duvari .rozet { grid-column: 2; grid-row: 1 / span 3; background: var(--paper); }
.logo-duvari .rozet img { filter: none; opacity: 1; max-height: 60%; width: auto; max-width: 90%; }
/* Telefonda sağ altta yalnız WhatsApp düğmesi (arama düğmesi yer kaplıyordu; arama üst menüde var) */
.fab .fab-call { display: none !important; }

/* Logosu olmayan referans: aynı kutuda sade yazı */
.logos figure.yazi span { font-family: var(--f-disp); font-weight: 800; font-size: clamp(18px, 2vw, 26px); letter-spacing: .06em; color: #5a6066; }
/* İstatistikler: 3 kutu (personel sayısı kalktı) */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Gizlilik ve KVKK metni */
.doc-metin { max-width: 46em; }
.doc-metin h2 { margin: 32px 0 10px; }
.doc-metin h2:first-child { margin-top: 0; }
.doc-metin p { color: var(--ink); }

/* İstatistikler: 4 haneli yıl (1990) dar sütuna sığmıyordu; telefonda yıl tam satır, diğer ikisi yan yana */
.stat .v { white-space: nowrap; }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .stats .stat:first-child { grid-column: 1 / -1; }
}

/* Dar telefonlar (21 Ekim mobil denetimi) */
.cta-grid > *, .ph-grid > *, .kayit-demo > * { min-width: 0; }
@media (max-width: 420px) {
  .ph-grid h1 { font-size: min(40px, 10.2vw); }
}
@media (max-width: 350px) {
  .kayit-demo { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .kd-adimlar { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .kd-adimlar::before { display: none; }
}

/* Geç yüklenen görseller (23 Ekim denetimi): inene kadar gizli, inince solarak gelir; kutu yeri width/height ile ayrılı */
img[loading="lazy"] { transition: opacity .45s ease; }
img.yk { opacity: 0; }
.rows .th { background: #e2e6e9; }

/* 23 Ekim görsel denetimi */
footer address a[href^="tel:"] { white-space: nowrap; }
.h2:not(.mb) + :is(p, ul, ol) { margin-top: 18px; }
.sec-head > .h2 + * { margin-top: 0; }
h2.h3 + .rel, h2.h3 + ul, h2.h3 + ol { margin-top: 14px; }
.logos img { opacity: 1; filter: grayscale(1) contrast(1.25) brightness(.85); }
.sube-harita { margin-top: 16px; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; }
.ph-grid .lead + .btns { margin-top: 24px; }
/* Beyaz zeminli ürün görselleri başlıkta kırpılmasın; rozet ürünün üstüne binmesin */
.ph-photo img:is([src*="-urun"], [src*="indego"]) { object-fit: contain; background: #fff; box-sizing: border-box; padding: 8% 6% 6% 14%; border: 1px solid var(--rule); }