murattunalı.

APPROACH — METHOD PAGE 00 / 07

Nothing is “done” until measured.

No team page. A method page.

How we work matters more than who we are. Principles instead of a reference list; standards instead of titles.

Under every principle below sits a guard that protects it — and you can break that guard from here, on purpose. Or audit this page right now, in your own browser: the numbers below are not our claim, they are your device’s measurement.

MAKE A GUARD FAIL ↓ DECISION LEDGER ↓ Get your site machine-read →

SUITE — AT BUILD TIME THRESHOLD — NOT A MEASUREMENT

1641 ACTIVE GUARDS

CONTRAST FLOOR
4.5:1
KEYBOARD TOUR
FULL
CLIPPING IN THREE LANGUAGES
0
SCROLL CLS
0,05
SIGNATURE ELEMENT
1

IN THIS BROWSER

A passing test proves nothing. For every guard on record the rule was broken on purpose first, the red was seen, and the violation was reverted.

01 — PRINCIPLES

FIVE PRINCIPLES · FIVE GUARDS

01

No claim without proof.

We do not publish a number we cannot verify — not on our own site, not on yours. Instead of empty praise, we show method.

GUARD iddia-kanit

unverifiable numbers PASS

02

Boldness in one place.

One signature element per project; everything else stays disciplined and quiet. Being remembered does not come from clutter.

GUARD imza-tekligi

signature elements PASS

03

Performance is a design decision.

An idea that does not fit the budget is dropped, however beautiful. Speed, accessibility and elegance belong to the same sentence.

GUARD kaydirma-cls

layout shift PASS

04

Built for two readers.

A person and a model. The visible layer speaks to the human, the structural layer to the machine — both tell the same truth.

OrganizationProfessionalServicePersonWebSiteBreadcrumbListWebPage

GUARD yapi-katmani

entities PASS

05

Accessibility is non-negotiable.

AA contrast, keyboard focus, a full reduced-motion flow. These are not features, they are the baseline.

GUARD kontrast-aa

lowest contrast PASS

LIVE AUDIT IN THIS BROWSER, RIGHT NOW

  1. kontrast-aa Lowest text contrast
  2. dokunma-hedefi Smallest touch target
  3. baslik-duzeni Heading order
  4. odak-halkasi Focus ring
  5. hareket-tercihi Motion preference
  6. duzen-kaymasi Layout shift (CLS)
  7. en-buyuk-boyama Largest paint (LCP)
  8. ilk-boyama First contentful paint (FCP)
  9. uzun-gorev Long tasks
  10. metin-kirpma Clipped text
  11. yatay-tasma Horizontal overflow
  12. dil-etiketi Document language
  13. yapi-katmani Structural layer
  14. belge-agirligi Document + script + style
  15. yazi-tipi-agirligi Font weight on the wire

Never.

WHAT WE DO NOT DO HAS TO BE WRITTEN DOWN TOO

  • Invented metrics, fake client logos, imaginary testimonials REJECTED
  • Showmanship that does not fit the performance budget REJECTED
  • Dark patterns: hidden costs, forced sign-up, false urgency REJECTED
  • Claiming “world-class” without proof REJECTED

02 — THE SYSTEM, DRAWN

VALUES READ FROM THE CODE

THE SYSTEM, DRAWN

Focusing — anatomy of the signature effect

blur 12px · opsz 24 · opacity 0.25
blur 0px · opsz 72 · opacity 1

DRAG — OR USE ARROW KEYS blur 12,0 opsz 24 opacity 0,25

One signature element: blur 12→0 pixels, optical size axis 24→72, opacity 0.25→1. H1 and H2 only, once per element — the values are read from js/motion.js, so the plate cannot drift from the code.

The grid system

--container 1280–1720px · --margin-d 80px · --gutter-d 24px · 12 × 1fr

The drawing is built from real values read out of css/tokens.css: container width, margin, gutter and column count cannot drift from the code. Content aligns left; the right void is signal space.

TOOLSET: static HTML · GSAP · View Transitions · AVIF/WebP · schema.org · llms.txt

The guard architecture is open source ↗

03 — METHOD

THREE CONCRETE CASES

The second mechanism is running on your device right now. The “AUDIT THIS PAGE NOW” button runs 15 measurements in your browser: contrast, touch targets, heading order, layout shift, paint timing, clipping, weight. If your browser does not expose one of them, the row reads “NOT MEASURABLE” — we do not write a guess there. If it comes out red, it stays red.

04 — THE LIMIT

05 — DECISION LEDGER

RATIONALE + REJECTED ALTERNATIVE

Language suggestion banner

NOT BUILT

Redirecting a visitor to their own language is a defensible pattern — but it requires storing a “shown once” flag, which means a cookie or local storage. The privacy text says no cookies are used.

INSTEADThe conflict was resolved in favour of the claim: the banner was never built. All three languages stay visible in the header. The suite measures it on every run — after the form is filled, stored values must be zero.

Team page

REJECTED

A team page is a trust device, but an indirect one: it shows who works here, not how the work is done. A title guarantees no outcome; a client list describes no method.

INSTEADThe page you are reading, and this ledger.

Legal texts

LEFT OPEN

The privacy and terms pages are live, but they were not written by a lawyer. Every technical fact they contain was measured; legal sufficiency is a separate question.

INSTEADThe gap is not hidden: it stands written in the file’s own warning field.

EN / DE interface strings

AWAITING APPROVAL

Some interface strings are derived from the approved Turkish, some are translated. Which is which is marked in the file.

INSTEADThe translated ones are live but awaiting approval. Writing the gap down has a practical reason: a hidden gap is eventually mistaken for the truth.

hook
—
h1 · claim
—
RATIO
— / ceiling 0,50

SOURCES

WRITTEN BY Murat Tunalı Founder. Twenty years of enterprise IT infrastructure + web development.