/* SMAX Otomotiv — site stilleri (tasarim: "SMAX Otomotiv v4") */
:root {
  --ink: #111317; --ink2: #3F4650; --muted: #646B76; --muted2: #8A9099;
  --line: #E5E7EA; --line2: #EEF0F2; --line3: #DADDE1; --chrome: #C9CDD2;
  --bg2: #F5F6F7; --btn: #16181C; --red: #C8202A; --wa: #25D366;
  --sans: 'Archivo', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gut: clamp(16px, 3vw, 28px);
  --stripes: repeating-linear-gradient(135deg, #F5F6F7 0 10px, #EEF0F2 10px 20px);
}
* { box-sizing: border-box }
html, body { margin: 0; background: #FFFFFF; color: var(--ink) }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column }
a { color: var(--ink); text-decoration: none }
a:hover { color: var(--red) }
button, input, select, textarea { font-family: inherit }
input::placeholder, textarea::placeholder { color: var(--muted2) }
::selection { background: var(--ink); color: #FFFFFF }
img { max-width: 100% }
h1, h2, h3, p { margin: 0 }
main { flex: 1; display: flex; flex-direction: column }
.wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut) }
.mono { font-family: var(--mono) }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--red) }
.label { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }

/* ---------- butonlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--btn); color: #FFFFFF; font: 600 15px var(--sans); cursor: pointer; white-space: nowrap }
.btn:hover { background: #000000; color: #FFFFFF }
.btn-o { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid var(--line3); border-radius: 8px; background: #FFFFFF; color: var(--ink); font: 600 15px var(--sans); cursor: pointer; white-space: nowrap }
.btn-o:hover { border-color: var(--ink); color: var(--ink) }
.btn-sm { height: 40px; font-size: 14px; padding: 0 14px }

/* ---------- ust bar */
.hdr { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--line) }
.hdr-in { height: 80px; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px) }
.logo { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 3px }
.logo img { height: 50px; width: auto; display: block }
.logo span { display: block; width: 0; min-width: 100%; text-align: center; font: 600 11px/1 'Archivo Narrow', sans-serif; letter-spacing: .02em; color: #4A5058; white-space: nowrap }
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px }
.nav a { display: flex; align-items: center; padding: 0 12px; font: 600 15px var(--sans); color: var(--ink2) }
.nav a:hover { color: var(--ink) }
.nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red) }
.grow { flex: 1 }
.hsearch { flex: 0 1 260px; min-width: 160px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px }
.hsearch:focus-within, .ssearch:focus-within { border-color: var(--ink) }
.hsearch input { flex: 1; min-width: 0; height: 38px; border: 0; outline: none; background: transparent; font: 500 14px var(--sans); color: var(--ink) }
.seg { flex: none; display: flex; padding: 3px; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px }
.seg a { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 6px; font: 700 12.5px var(--sans); color: var(--muted) }
.seg a.on { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(17,19,23,.15) }
.hwa { flex: none; height: 42px; padding: 0 16px; font-size: 14.5px }
.qbadge { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: 600 14px var(--sans) }
.qbadge b { display: none; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; background: var(--red); color: #FFFFFF; font: 700 11.5px/20px var(--sans); text-align: center }
.qbadge.has b { display: inline-block }
.mnav { display: none }
.mnav summary { list-style: none; display: flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; font: 600 14.5px var(--sans); cursor: pointer }
.mnav summary::-webkit-details-marker { display: none }
.mnav .c { display: none }
.mnav[open] .o { display: none }
.mnav[open] .c { display: inline }
.mpanel { position: absolute; left: 0; right: 0; top: 80px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gut) 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #FFFFFF; box-shadow: 0 18px 30px -20px rgba(17,19,23,.35) }
.mpanel .mq { display: flex; align-items: center; gap: 10px }
.mpanel .mq b { display: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--red); color: #FFFFFF; font: 700 12px/22px var(--sans); text-align: center }
.mpanel .mq.has b { display: inline-block }
.mpanel > a { padding: 14px 0; font: 600 17px var(--sans); border-bottom: 1px solid var(--line2) }
.mpanel form { display: flex; align-items: center; height: 46px; padding: 0 12px; margin: 6px 0 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px }
.mpanel input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: transparent; font: 500 15px var(--sans) }
.mpanel .row { display: flex; gap: 10px; margin-top: 14px }
.mpanel .row a { flex: 1 }
@media (max-width: 979px) {
  .nav, .hsearch, .hwa, .hdr-in > .qbadge { display: none }
  input, select, textarea { font-size: 16px !important } /* iOS: 16px altinda odaklaninca sayfa buyur */
  .mnav { display: block }
  .hdr-in > .grow { display: block }
}

/* ---------- ana sayfa: hero */
.hero { background: linear-gradient(180deg, #F5F6F7 0%, #FFFFFF 100%); border-bottom: 1px solid var(--line) }
.hero-in { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px) }
.hero-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.hero h1 { font: 800 clamp(38px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.03em; text-wrap: balance }
.hero h1 span { display: block }
.hero h1 span + span { color: var(--muted) }
.hero-copy > p { max-width: 520px; font: 400 17px/1.6 var(--sans); color: var(--ink2); text-wrap: pretty }
.finder { display: flex; flex-direction: column; gap: 12px; max-width: 560px; padding: 16px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(17,19,23,.04), 0 12px 32px -24px rgba(17,19,23,.35) }
.finder > b { font: 700 14px var(--sans) }
.finder .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field > span { font: 600 12px var(--sans); color: var(--muted) }
.sel { position: relative; min-width: 0 }
.sel select { width: 100%; height: 44px; padding: 0 34px 0 12px; background: #FFFFFF; border: 1px solid var(--line3); border-radius: 8px; font: 500 14.5px var(--sans); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; outline: none }
.sel select:disabled { background: var(--bg2); color: var(--muted2); cursor: default }
.sel::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); pointer-events: none }
.inp { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line3); border-radius: 8px; background: #FFFFFF; font: 500 14.5px var(--sans); color: var(--ink); outline: none }
.inp:focus, .sel select:focus, textarea.inp:focus { border-color: var(--ink) }
.finder .go { display: flex; gap: 8px }
.finder .go .inp { flex: 1; min-width: 0 }
.finder .go .btn { height: 44px; padding: 0 22px; font-size: 14.5px }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 13.5px var(--sans); color: var(--muted) }
.popular a { font: 600 13px var(--mono); text-decoration: underline; text-decoration-color: var(--chrome); text-underline-offset: 3px }
.hero-media { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px }
.stage { position: relative; aspect-ratio: 1 / .82; max-height: 640px; touch-action: pan-y }
.stage::before { content: ''; position: absolute; inset: 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFF, rgba(255,255,255,0)); pointer-events: none }
.stage::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 6%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17,19,23,.24), transparent); pointer-events: none }
.stage .slide { position: absolute; inset: 0; z-index: 1; transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1) }
.stage .slide[hidden] { display: block; opacity: 0; transform: scale(.96); pointer-events: none; visibility: hidden; transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s .35s }
.stage smax-media, .stage .fallback { position: absolute; inset: 0 }
.stage .fallback { display: flex; align-items: center; justify-content: center }
.stage .fallback img { width: 62%; height: auto; opacity: .9 }
.stage smax-media:defined + .fallback { display: none }
.stage img.custom, .stage video.custom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.dots { display: flex; justify-content: center; gap: 4px }
.dots button { display: flex; align-items: center; height: 28px; padding: 0 5px; border: 0; background: transparent; cursor: pointer }
.dots span { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--chrome); transition: width .35s ease, background .35s ease }
.dots button.on span { width: 22px; background: var(--ink) }

.compat { border-bottom: 1px solid var(--line) }
.compat .wrap { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px }
.compat .label { font-size: 12px }
.compat a { font: 700 16px var(--sans); color: var(--ink2); letter-spacing: -.01em }
.compat a:hover { color: var(--ink) }

.sec { padding-top: clamp(48px, 6vw, 80px) }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px }
.sec-h h2 { font: 800 clamp(24px, 2.4vw, 32px)/1.15 var(--sans); letter-spacing: -.02em }
.sec-h a { font: 600 14.5px var(--sans) }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.trow { display: flex; align-items: center; gap: 14px; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #FFFFFF; transition: background .15s }
.trow:hover { background: var(--bg2); color: var(--ink) }
.trow .th { position: relative; flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(135deg, #F2F3F5 0 6px, #EBEDF0 6px 12px) }
.trow .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.trow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.trow .tx b { font: 700 15.5px/1.25 var(--sans) }
.trow .tx span { font: 500 13px var(--sans); color: var(--muted) }
.trow > i { flex: none; font-style: normal; color: var(--muted2) }

.cta { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px) }
.cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 4vw, 44px); background: var(--btn); border-radius: 14px; color: #FFFFFF }
.cta-box > div:first-child { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 10px }
.cta-box h2 { font: 800 clamp(22px, 2.4vw, 32px)/1.2 var(--sans); letter-spacing: -.02em }
.cta-box p { max-width: 580px; font: 400 16px/1.6 var(--sans); color: var(--chrome) }
.cta-box .acts { display: flex; flex-wrap: wrap; gap: 10px }
.cta-box .w { height: 48px; background: #FFFFFF; color: var(--ink); font-weight: 700 }
.cta-box .w:hover { background: var(--line2); color: var(--ink) }
.cta-box .tel { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 1px solid #3A3F47; border-radius: 8px; font: 600 14.5px var(--mono); color: #FFFFFF }
.cta-box .tel:hover { border-color: #FFFFFF; color: #FFFFFF }

.flow-wrap { position: relative }
smax-flow:defined { display: block; position: relative; height: 330px }
@media (hover: none) { smax-flow:defined ~ .flow-hint { display: none !important } }
.flow-hint { display: none; margin: 4px 0 0; text-align: center; font: 500 12px var(--mono); color: var(--muted) }
smax-flow:defined ~ .flow-hint { display: block }

/* ---------- urun kartlari */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px }
.pgrid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 16px }
.pcard-w { position: relative; display: flex; flex-direction: column }
.pcard-w > .pcard { flex: 1 }
.qmini { position: absolute; right: 10px; top: 10px; z-index: 2; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.94); font: 700 12px var(--sans); color: var(--ink); cursor: pointer; box-shadow: 0 2px 6px -3px rgba(17,19,23,.3) }
.qmini:hover { border-color: var(--ink) }
.qmini.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF }
.pcard { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s }
.pcard:hover { border-color: var(--chrome); box-shadow: 0 14px 30px -20px rgba(17,19,23,.35); color: var(--ink) }
.pmedia { position: relative; aspect-ratio: 4 / 3; background: var(--bg2) }
.pmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--stripes) }
.ph b { font: 600 19px var(--mono); color: #C3C8CE }
.ph span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.ptag { position: absolute; left: 10px; top: 10px; padding: 4px 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 5px; font: 600 11px var(--sans); color: var(--ink2) }
.pbody { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; border-top: 1px solid var(--line2) }
.pcode { font: 600 12px var(--mono); color: var(--red) }
.pname { font: 700 15.5px/1.3 var(--sans); text-wrap: pretty }
.psub { font: 500 13px/1.35 var(--sans); color: var(--muted) }
.poem { margin-top: auto; padding-top: 10px; font: 500 12px var(--mono); color: var(--muted) }

/* ---------- sayfa basligi + breadcrumb */
.phead { background: var(--bg2); border-bottom: 1px solid var(--line) }
.phead .wrap { padding-top: 22px; padding-bottom: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px }
.phead h1 { font: 800 clamp(30px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.03em; text-wrap: balance; max-width: 860px }
.phead p { max-width: 640px; font: 400 16.5px/1.6 var(--sans); color: var(--ink2) }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px var(--sans); color: var(--muted) }
.crumbs a { color: var(--muted) }
.crumbs a:hover { color: var(--red) }
.crumbs span:last-child { color: var(--ink) }

/* ---------- katalog */
.cat-head .wrap { padding-bottom: 26px }
.cat-head h1 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.025em }
.cat-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px }
.cat-bar .t { display: flex; flex-direction: column; gap: 6px }
.cat-bar .t span { font: 500 14px var(--sans); color: var(--muted) }
.cat-bar .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.cat-bar form { display: flex; gap: 6px }
.cat-bar .sel { min-width: 200px }
.vseg { display: flex; padding: 3px; gap: 2px; background: #FFFFFF; border: 1px solid var(--line3); border-radius: 8px }
.vseg a { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 6px; font: 600 13.5px var(--sans); color: var(--ink2) }
.vseg a.on { background: var(--ink); color: #FFFFFF }
.cat { padding-top: 24px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start }
.cat aside { flex: 1 1 250px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px }
.cat .res { flex: 999 1 0; min-width: 62%; display: flex; flex-direction: column; gap: 14px }
@media (max-width: 979px) {
  /* Telefonda: arama + filtre, sonra urunler, en sonda yardim ve PDF kutulari */
  .cat aside { display: contents }
  .cat .ssearch, .cat .fdet { order: 1; flex: 1 1 100% }
  .cat .res { order: 2; min-width: 100% }
  .cat aside .help { order: 3; flex: 1 1 100% }
}
.ssearch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 12px; background: #FFFFFF; border: 1px solid var(--line3); border-radius: 8px }
.ssearch input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: transparent; font: 500 14.5px var(--sans) }
.ssearch a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--bg2); font-size: 16px }
.fbox { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 12px }
.fbox .label { display: block; padding: 12px 10px 6px }
.fitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; font: 500 14.5px var(--sans) }
.fitem:hover { background: var(--bg2); color: var(--ink) }
.fitem > span { display: flex; align-items: center; gap: 9px }
.fitem > span::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--chrome); background: #FFFFFF }
.fitem.on { background: var(--bg2); font-weight: 700 }
.fitem.on > span::before { border-color: var(--ink); background: var(--ink) }
.fitem small { font: 500 12px var(--mono); color: var(--muted2) }
.fsep { margin: 12px 10px 0; border-top: 1px solid var(--line2) }
.models { margin: 8px 10px 0; padding-top: 12px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 8px }
.models > span { font: 600 12.5px var(--sans); color: var(--muted) }
.models div { display: flex; flex-wrap: wrap; gap: 6px }
.models a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--line3); border-radius: 6px; background: #FFFFFF; font: 500 12.5px var(--mono) }
.models a.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF }
.fbox .clear { display: block; margin: 10px 10px 0 }
.fbox .clear a { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid var(--line3); border-radius: 8px; font: 600 13.5px var(--sans) }
.help { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px }
.help b { font: 700 15.5px var(--sans) }
.help p { font: 400 14px/1.55 var(--sans); color: var(--ink2) }
.help .btn { height: 40px; margin-top: 4px; font-size: 14px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.fdet > summary { display: none }
.fdet > summary::-webkit-details-marker { display: none }
@media (max-width: 979px) {
  .fdet > summary.fsum { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 14px; background: #FFFFFF; border: 1px solid var(--line3); border-radius: 8px; font: 700 15px var(--sans); cursor: pointer; list-style: none }
  .fsum::after { content: '+'; font-size: 20px; color: var(--muted) }
  .fdet[open] > .fsum { margin-bottom: 10px }
  .fdet[open] > .fsum::after { content: '−' }
  .fsum small { margin-left: auto; font: 600 12.5px var(--sans); color: var(--red) }
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font: 600 14px var(--sans) }
.pager > a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line3); border-radius: 8px }
.pager div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px }
.pager div a, .pager div span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 8px }
.pager div a:hover { background: var(--bg2) }
.pager div .on { background: var(--ink); color: #FFFFFF }
.pager .gap { color: var(--muted2) }
.pdfbox .btn-o { justify-content: flex-start; white-space: normal; height: auto; min-height: 40px; padding: 8px 12px; text-align: left }
.preview { margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; background: #FFF4D6; color: #7A5600; font: 600 14px var(--sans) }
.chips a { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; background: #FFFFFF; border: 1px solid var(--line3); border-radius: 6px; font: 600 13px var(--sans) }
.chips a:hover { border-color: var(--ink); color: var(--ink) }
.chips a i { font-style: normal; font-size: 15px; color: var(--muted) }
.plist { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.plist .r { display: grid; grid-template-columns: 52px minmax(92px, .7fr) minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) 72px; gap: 14px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line2) }
.plist .r:hover { background: #FAFBFB }
.plist .r.h { padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--line); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.plist .r.h:hover { background: var(--bg2) }
.plist .im { position: relative; display: block; width: 52px; height: 40px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, #F2F3F5 0 6px, #EBEDF0 6px 12px) }
.plist .im img { width: 100%; height: 100%; object-fit: cover }
.plist .cd { font: 600 12.5px var(--mono); color: var(--red) }
.plist .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.plist .nm b { font: 700 14.5px/1.3 var(--sans) }
.plist .nm span { font: 500 12.5px var(--sans); color: var(--muted) }
.plist .sb { font: 500 13.5px/1.3 var(--sans); color: var(--ink2) }
.plist .oe { font: 500 12px/1.3 var(--mono); color: var(--ink2); overflow-wrap: anywhere }
.plist .ra { display: flex; flex-direction: column; gap: 6px }
.plist .ask.qrow { width: 100%; background: #FFFFFF; cursor: pointer; font-size: 12px }
.plist .ask.qrow.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF }
.plist .ask { display: flex; align-items: center; justify-content: center; height: 34px; border: 1px solid var(--line3); border-radius: 8px; font: 600 13px var(--sans) }
.plist .ask:hover { border-color: var(--ink); color: var(--ink) }
@media (max-width: 760px) {
  .plist .r { grid-template-columns: 52px minmax(0, 1fr) 64px; row-gap: 4px }
  .plist .r.h { display: none }
  .plist .cd { grid-column: 2; grid-row: 1 }
  .plist .nm { grid-column: 2; grid-row: 2 }
  .plist .im { grid-row: 1 / 3 }
  .plist .sb, .plist .oe { display: none }
  .plist .ra { grid-column: 3; grid-row: 1 / 3 }
}
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 24px; border: 1px dashed var(--line3); border-radius: 10px }
.empty b { font: 800 22px var(--sans) }
.empty p { max-width: 460px; font: 400 15px/1.6 var(--sans); color: var(--ink2) }
.empty .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px }

/* ---------- urun detay */
.pd { padding-top: 22px; padding-bottom: clamp(48px, 6vw, 80px) }
.pd-top { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: flex-start; margin-top: 20px }
.gal { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px }
.gal-main { position: relative; aspect-ratio: 4 / 3; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FFFFFF }
.gal-main .ph b { font-size: clamp(32px, 4vw, 48px) }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px }
.thumbs a { display: block; width: 80px; height: 60px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: #FFFFFF }
.thumbs a.on { border-color: var(--ink) }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block }
.info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.info-h { display: flex; flex-direction: column; gap: 12px }
.codebar { display: flex; align-items: center; gap: 10px }
.codebar span { font: 600 14px var(--mono); color: var(--red) }
.mini { height: 26px; padding: 0 10px; border: 1px solid var(--line3); border-radius: 6px; background: #FFFFFF; font: 600 12px var(--sans); color: var(--ink2); cursor: pointer }
.mini:hover { border-color: var(--ink) }
.info h1 { font: 800 clamp(28px, 3vw, 40px)/1.12 var(--sans); letter-spacing: -.025em; text-wrap: balance }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.tags a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font: 600 13px var(--sans) }
.tags a.mono { font: 600 12.5px var(--mono) }
.tags a:hover { border-color: var(--ink); color: var(--ink) }
.oembox { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 10px }
.oembox .hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px }
.oembox .hd small { font: 400 12.5px var(--sans); color: var(--muted2) }
.oembox .list { display: flex; flex-wrap: wrap; gap: 6px }
.oembox button { height: 34px; padding: 0 11px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font: 600 13px var(--mono); color: var(--ink); cursor: pointer }
.oembox button:hover { border-color: var(--ink) }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px }
.facts > * { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; background: var(--bg2); border-radius: 8px }
.facts .label { font-size: 11px }
.facts b { font: 600 14px/1.4 var(--sans) }
.facts a:hover { background: var(--line2); color: var(--ink) }
.facts a b { display: flex; align-items: center; gap: 8px }
.facts a b i { padding: 2px 6px; border: 1px solid var(--ink); border-radius: 4px; font: 600 10px var(--mono); font-style: normal }
.acts-v { display: flex; flex-direction: column; gap: 8px }
.acts-v .btn { height: 52px; font: 700 15.5px var(--sans) }
.acts-v .row { display: flex; flex-wrap: wrap; gap: 8px }
.acts-v .row > * { flex: 1 1 160px; font-size: 14.5px }
.acts-v p { margin-top: 4px; font: 400 13px/1.5 var(--sans); color: var(--muted) }
.qadd.on { border-color: var(--ink); background: var(--bg2) }
.pd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: clamp(36px, 4vw, 56px) }
.pd-cards > div { padding: 20px; border: 1px solid var(--line); border-radius: 10px }
.pd-cards h3 { margin: 0 0 10px; font: 700 17px var(--sans) }
.kv { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line2); font: 500 14px/1.45 var(--sans) }
.kv i { font: 500 12px/1.7 var(--mono); font-style: normal; color: var(--muted2) }
.kv.sp { justify-content: space-between; gap: 14px }
.kv.sp span:first-child { color: var(--muted) }
.kv.sp span:last-child { text-align: right; font-weight: 600 }
.veh { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px }
.veh span { padding: 6px 10px; background: var(--bg2); border-radius: 6px; font: 500 13.5px var(--sans) }
.pd-cards p { margin: 14px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted) }
.related { background: var(--bg2); border-top: 1px solid var(--line) }
.related .wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 88px }
.related .sec-h { margin-bottom: 20px }
.related .sec-h h2 { font-size: clamp(22px, 2.2vw, 28px) }
.msg { max-width: 640px; margin: 0 auto; padding: 120px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px }
.msg b { font: 800 28px var(--sans) }
.msg p { font: 400 16px/1.6 var(--sans); color: var(--ink2) }

/* ---------- hakkimizda */
.ab { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); align-items: flex-start }
.ab-t { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px }
.ab-t .lead { font: 600 clamp(18px, 1.6vw, 21px)/1.55 var(--sans); text-wrap: pretty }
.ab-t p { font: 400 16.5px/1.7 var(--sans); color: var(--ink2); text-wrap: pretty }
.ab-t .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px }
.ab-m { flex: 1 1 400px; min-width: 0; position: relative; aspect-ratio: 4 / 3 }
.ab-m > img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--line) }
.ab-m .dots-bg { position: absolute; inset: 0; background-image: radial-gradient(#CDD1D6 1.3px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); pointer-events: none }
.ab-m .flag { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent 97%); mask-image: linear-gradient(#000 70%, transparent 97%) }
.ab-m smax-flag-3d { position: absolute; inset: 0 }
.ab-m .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center }
.ab-m .fallback img { width: 70% }
.ab-m smax-flag-3d:defined + .fallback { display: none }
.pillars { padding-bottom: 96px }
.pillars > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--line) }
.pillars .p { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 0 0 }
.pillars .p i { font: 600 12px var(--mono); font-style: normal; color: var(--muted2) }
.pillars .p b { font: 700 18px var(--sans) }
.pillars .p p { font: 400 15px/1.6 var(--sans); color: var(--ink2) }

/* ---------- iletisim */
.ct { padding-top: 32px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start }
.cinfo { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.cinfo > a, .cinfo > div.ad { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-bottom: 1px solid var(--line) }
.cinfo > a:hover { background: var(--bg2); color: var(--ink) }
.cinfo .label { display: flex; align-items: center; gap: 7px }
.cinfo .v { font: 600 19px var(--mono) }
.cinfo .v.t { font: 600 17px var(--sans); overflow-wrap: anywhere }
.cinfo small { font: 400 13.5px var(--sans); color: var(--muted) }
.cinfo .soc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 20px; background: var(--bg2) }
.cinfo .soc .label { margin-right: 6px }
.cinfo .soc a { font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 3px }
.cinfo .soc a span { font-weight: 500; color: var(--muted) }
.cinfo > :last-child { border-bottom: 0 }
.cform { flex: 1.4 1 500px; min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 10px }
.cform form { display: flex; flex-direction: column; gap: 16px }
.cform .hd { display: flex; flex-direction: column; gap: 4px }
.cform .hd b { font: 800 22px var(--sans) }
.cform .hd span { font: 400 14px/1.5 var(--sans); color: var(--muted) }
.cform .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px }
.cform label { display: flex; flex-direction: column; gap: 6px }
.cform label > span { font: 600 13px var(--sans) }
.cform .inp { font-size: 15px }
.cform textarea.inp { height: auto; padding: 10px 12px; font: 500 15px/1.55 var(--sans); resize: vertical }
.cform .err .inp { border-color: var(--red) }
.cform em { font: 500 12.5px var(--sans); font-style: normal; color: var(--red) }
.cform .ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
.cform .priv { max-width: 360px; font: 400 12.5px/1.5 var(--sans); color: var(--muted) }
.cform .priv a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px }
.cform .ft .btn { height: 48px; padding: 0 24px; font-weight: 700 }

/* ---------- teklif listesi */
.ql { padding-top: 32px; padding-bottom: 96px; max-width: 860px }
.ql-items { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.ql-item { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line2) }
.ql-item:last-child { border-bottom: 0 }
.ql-item .nm { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.ql-item .nm b { font: 700 15px/1.3 var(--sans) }
.ql-item .nm span { font: 500 13px var(--sans); color: var(--muted) }
.ql-item label { display: flex; flex-direction: column; gap: 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ql-item .inp { height: 38px; text-align: center }
.ql-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 18px }
.ql-foot .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between }

/* ---------- metin sayfasi (KVKK) */
.prose { padding-top: 32px; padding-bottom: 96px; max-width: 820px }
.prose h2 { margin: 28px 0 10px; font: 700 19px var(--sans) }
.prose p, .prose li { font: 400 15.5px/1.7 var(--sans); color: var(--ink2) }
.prose ul { padding-left: 20px; margin: 8px 0 }

/* ---------- alt bilgi */
.ftr { background: var(--ink); color: var(--chrome) }
.ftr-in { padding-top: clamp(44px, 5vw, 64px); padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 36px 48px }
.ftr-in > div { display: flex; flex-direction: column; gap: 9px }
.ftr .about { flex: 2 1 280px; min-width: 0; gap: 14px }
.ftr .about img { width: 100%; max-width: 240px; height: auto; display: block }
.ftr .about p { max-width: 340px; font: 400 14px/1.6 var(--sans); color: #A4AAB3 }
.ftr .col { flex: 1 1 160px }
.ftr .col > b { margin-bottom: 4px; font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF }
.ftr .col a { font: 500 14px var(--sans); color: #A4AAB3; overflow-wrap: anywhere }
.ftr .col a:hover { color: #FFFFFF }
.ftr .col a.tel { font: 600 14px var(--mono); color: #FFFFFF }
.ftr .col span { font: 400 13px/1.5 var(--sans); color: var(--muted2) }
.ftr-b { border-top: 1px solid #23262B }
.ftr-b .wrap { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 12.5px var(--sans); color: var(--muted2) }
.ftr-b a { color: var(--muted2) }
.ftr-b a:hover { color: #FFFFFF }
.ftr-b .links { display: flex; flex-wrap: wrap; gap: 18px }

.waf { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 16px; background: var(--btn); color: #FFFFFF; border-radius: 999px; font: 600 14.5px var(--sans); box-shadow: 0 12px 28px -10px rgba(17,19,23,.55) }
.waf:hover { background: #000000; color: #FFFFFF }
.waf .dot { width: 9px; height: 9px }
@media (max-width: 979px) {
  /* Telefonda kucuk yuvarlak: icerigi ve butonlari kapatmasin */
  .waf { right: 14px; bottom: 14px; width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 0 }
  .waf .dot { width: 14px; height: 14px }
  main { padding-bottom: 64px }
}
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translate(-50%, 12px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; padding: 11px 18px; background: var(--btn); color: #FFFFFF; border-radius: 8px; font: 600 14px var(--sans) }
.toast.on { opacity: 1; transform: translate(-50%, 0) }

@media (prefers-reduced-motion: reduce) { * { transition: none !important } }