/* Rölöve Çizimi — site styles. Tokens first, then layout, then components. */
:root {
  --navy: #0c2846;
  --navy-2: #12355c;
  --accent: #2073be;
  --accent-dark: #175c9c;
  --accent-light: #6cb2ee;
  --mist: #f3f7fb;
  --mist-2: #e9f0f7;
  --ink: #111c29;
  --body: #475668;
  --muted: #5f6b78;
  --line: #e1e9f1;
  --white: #fff;
  --f-display: "Outfit", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --wrap: 80rem;
  --gut: 1rem;
  --hdr: calc(4rem + 1px); /* header height at scroll top: nav + border (+ topbar from 1024px) */
}
@media (min-width: 640px) { :root { --gut: 1.5rem; } }
@media (min-width: 1024px) { :root { --gut: 2rem; --hdr: calc(7.5rem + 1px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; background: var(--white); color: var(--ink); font: 400 1rem/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: #fff; padding: .75rem 1rem; }
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: 4rem 0; }
.sec--lg { padding: 4.5rem 0; }
@media (min-width: 768px) { .sec { padding: 6rem 0; } .sec--md { padding: 5rem 0; } .sec--lg { padding: 6rem 0; } }
.bg-mist { background: var(--mist); }
.bg-navy { background: var(--navy); color: #fff; }
.blueprint { background-color: var(--navy); background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; }
.gridlight { background-color: var(--mist); background-image: linear-gradient(rgba(12,40,70,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(12,40,70,.04) 1px, transparent 1px); background-size: 32px 32px; }

/* Type */
.eyebrow { font: 400 11px/1.4 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-dark); }
.bg-navy .eyebrow, .blueprint .eyebrow, .cta .eyebrow { color: var(--accent-light); }
.h2 { font: 700 1.875rem/1.1 var(--f-display); color: var(--ink); margin-top: 1rem; letter-spacing: -.01em; }
@media (min-width: 768px) { .h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .h2 { font-size: 2.7rem; } }
.bg-navy .h2, .blueprint .h2 { color: #fff; }
.rule { display: block; width: 4rem; height: 3px; background: var(--accent); margin-top: 1.5rem; }
.blueprint .rule { background: var(--accent-light); }
.lede { margin-top: 1.5rem; font-size: 1rem; line-height: 1.65; color: var(--body); }
@media (min-width: 768px) { .lede { font-size: 1.125rem; } }
.head { display: flex; flex-direction: column; align-items: flex-start; max-width: 42rem; }
.head--center { align-items: center; text-align: center; margin: 0 auto; }
.head--center .rule { margin-left: auto; margin-right: auto; }
.headrow { display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; }
@media (min-width: 768px) { .headrow { flex-direction: row; align-items: flex-end; } }
.md-only { display: none; }
@media (min-width: 768px) { .md-only { display: block; } .sm-only { display: none; } }
.sm-only { margin-top: 2rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 13px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; padding: 1rem 1.6rem; border: 1px solid transparent; transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; transition: transform .3s; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); box-shadow: 0 10px 24px -10px rgba(32,115,190,.6); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); }
.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn--sm { padding: .8rem 1.25rem; font-size: 12px; }
.more { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1.25rem; font: 600 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.more svg { width: 14px; height: 14px; transition: transform .3s; }
a:hover .more svg, .more:hover svg { transform: translateX(3px); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(12,40,70,.04); }
.topbar { display: none; background: var(--navy); color: rgba(255,255,255,.75); overflow: hidden; height: 2.5rem; }
/* The topbar scrolls away while the nav stays pinned, so the page never jumps. */
@media (min-width: 1024px) { .topbar { display: block; } .hdr { top: -2.5rem; } }
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 2.5rem; font-size: 11px; }
.topbar__grp { display: flex; align-items: center; gap: 1.25rem; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: .375rem; }
.topbar__social { gap: .85rem !important; }
.topbar__social svg { width: 15px; height: 15px; }
.topbar a { transition: color .2s; }
.topbar a:hover { color: var(--accent-light); }
.topbar svg { width: 13px; height: 13px; }
.topbar .sep { width: 1px; height: .75rem; background: rgba(255,255,255,.15); }
.topbar .mono { font: 400 10px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
@media (min-width: 1024px) { .nav { height: 5rem; } }
.logo img { height: 2.25rem; width: auto; }
@media (min-width: 1024px) { .logo img { height: 2.75rem; } }
.menu { display: flex; align-items: center; }
.menu-wrap { display: none; }
@media (min-width: 1200px) { .menu-wrap { display: block; } }
.menu__item { position: relative; }
.menu__link { position: relative; display: flex; align-items: center; gap: .2rem; padding: .5rem .65rem; font: 600 13px/1.5 var(--f-display); letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; color: rgba(17,28,41,.8); transition: color .2s; }
.menu__link svg { width: 14px; height: 14px; transition: transform .3s; }
.menu__link::after { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.menu__link:hover, .menu__link.is-active, .menu__link[aria-current="page"] { color: var(--navy); }
.menu__link:hover::after, .menu__link.is-active::after, .menu__link[aria-current="page"]::after { transform: scaleX(1); }
.menu__link.is-active svg { transform: rotate(180deg); }
.nav__cta { display: none; align-items: center; gap: 1.25rem; flex-shrink: 0; }
@media (min-width: 1200px) { .nav__cta { display: flex; } }
.nav__tel span { display: none; }
@media (min-width: 1560px) { .nav__tel span { display: inline; } }
.nav__tel { display: flex; align-items: center; justify-content: center; gap: .375rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line); white-space: nowrap; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--navy); transition: color .2s; }
.nav__tel:hover { color: var(--accent-dark); border-color: var(--accent); }
.nav__tel svg { width: 16px; height: 16px; }
.burger { padding: .5rem; color: var(--navy); }
.burger svg { width: 26px; height: 26px; }
@media (min-width: 1200px) { .nav .burger { display: none; } }

/* Mobile drawer */
.mnav { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.mnav.is-open { visibility: visible; }
.mnav__bg { position: absolute; inset: 0; background: rgba(12,40,70,.5); opacity: 0; transition: opacity .3s; }
.mnav.is-open .mnav__bg { opacity: 1; }
.mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 22rem); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
.mnav__top img { height: 2rem; width: auto; }
.mnav__body { flex: 1; overflow-y: auto; padding: .5rem 1rem 1.5rem; }
.mnav__link, .mnav summary { display: flex; align-items: center; justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--line); font: 600 14px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 16px; height: 16px; transition: transform .3s; }
.mnav details[open] summary svg { transform: rotate(180deg); }
.mnav details a { display: block; padding: .6rem 0 .6rem .75rem; font-size: 14px; color: var(--body); border-left: 2px solid var(--line); }
.mnav details a:hover { color: var(--navy); border-color: var(--accent); }
.mnav details div { padding: .5rem 0 .75rem; }
.mnav__foot { padding: 1rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.mnav__foot .btn { width: 100%; }

/* Hero */
.hero { position: relative; overflow: hidden; background: #fff; }
.hero__grid-bg { position: absolute; inset: 0; opacity: .6; }
.hero__in { position: relative; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .hero__in { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .hero__in { padding-top: 6rem; padding-bottom: 6rem; } }
.hero__cols { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero__cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.hero__tag { display: flex; align-items: center; gap: .75rem; }
.hero__tag::before { content: ""; width: 2.5rem; height: 1px; background: var(--accent); }
.hero h1 { margin-top: 1.5rem; }
.hero__kicker { display: block; font: 600 1.125rem/1.4 var(--f-display); color: var(--navy); }
@media (min-width: 640px) { .hero__kicker { font-size: 1.25rem; } }
.hero__title { display: block; margin-top: .75rem; font: 800 3rem/.98 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
@media (min-width: 640px) { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem; } }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__text { margin-top: 1.75rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.65; color: var(--body); }
.hero__text strong { color: var(--navy); font-weight: 600; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.hero__stats { display: flex; gap: 2rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.stat__n { font: 700 1.5rem/1.2 var(--f-display); color: var(--navy); }
.stat__l { margin-top: .25rem; font: 400 10px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hero__media { position: relative; }
.frame { position: relative; overflow: hidden; background: var(--mist); width: 100%; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-4-5 { aspect-ratio: 4 / 5; }
.r-4-3 { aspect-ratio: 4 / 3; }
.r-16-10 { aspect-ratio: 16 / 10; }
.hero__badge { position: absolute; left: -1.25rem; bottom: -1.25rem; display: none; align-items: center; gap: .75rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 25px -5px rgba(12,40,70,.12), 0 8px 10px -6px rgba(12,40,70,.1); }
@media (min-width: 640px) { .hero__badge { display: flex; } }
.hero__badge i { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--navy); color: #fff; }
.hero__badge i svg { width: 20px; height: 20px; }
.hero__badge b { display: block; font: 700 .875rem var(--f-display); color: var(--ink); }
.hero__badge small { display: block; font-size: .75rem; color: var(--muted); }
.hero__chip { position: absolute; top: -1rem; right: -1rem; display: none; padding: .75rem 1rem; background: var(--accent); color: #fff; box-shadow: 0 10px 15px -3px rgba(12,40,70,.2); }
@media (min-width: 768px) { .hero__chip { display: block; } }
.hero__chip b { display: block; font: 700 1.125rem/1 var(--f-display); }
.hero__chip small { display: block; margin-top: .25rem; font: 400 9px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.trust { display: grid; gap: 1px; margin-top: 3.5rem; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .trust { margin-top: 5rem; } }
.trust > div { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: #fff; }
.trust svg { width: 22px; height: 22px; color: var(--accent); }
.trust b { display: block; font: 600 .875rem var(--f-display); color: var(--ink); }
.trust small { display: block; margin-top: .25rem; font-size: .75rem; color: var(--muted); }
/* Desktop: topbar + header + hero = exactly one window at scroll top; content centered, image fits. */
@media (min-width: 1024px) {
  .hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--hdr)); }
  .hero__in { flex: 1; display: flex; flex-direction: column; width: 100%; padding-top: clamp(1.5rem, 5svh, 4.5rem); padding-bottom: clamp(1.5rem, 4svh, 3.5rem); }
  .hero__cols { flex: 1; min-height: 0; }
  .hero__media { align-self: stretch; display: flex; }
  .hero__media .frame { aspect-ratio: auto; height: auto; min-height: 22rem; max-height: 46rem; flex: 1; }
  .hero .trust { margin-top: clamp(1.25rem, 4svh, 3.5rem); }
  /* Vertical rhythm follows window height so short laptop screens still fit. */
  .hero h1 { margin-top: clamp(.75rem, 2svh, 1.5rem); }
  .hero__title { font-size: clamp(3rem, 8.4svh, 4.5rem); }
  .hero__text { margin-top: clamp(.875rem, 2.4svh, 1.75rem); }
  .hero__btns { margin-top: clamp(1.25rem, 3.2svh, 2.25rem); }
  .hero__stats { margin-top: clamp(1.25rem, 3svh, 2.75rem); padding-top: clamp(1rem, 2.4svh, 2rem); }
}
/* Short laptop windows: the stat row repeats the topbar, eyebrow and trust row, so it yields its space. */
@media (min-width: 1024px) and (max-height: 820px) { .hero__stats { display: none; } }

@keyframes rise { from { opacity: .01; transform: translateY(36px); } to { opacity: 1; transform: none; } }
/* .01: tam saydam öğe LCP sayılmaz; görünüm aynı kalır, ilk boyamada ölçülür. */
@keyframes reveal { from { opacity: .01; transform: scale(.97); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s var(--ease) both; }
.reveal { animation: reveal .9s var(--ease) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; } .d5 { animation-delay: .4s; }
.js .io { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .io.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise, .reveal { animation: none; } .js .io { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Stats band */
.band { display: grid; grid-template-columns: repeat(2, 1fr); padding: 2.5rem 0; }
@media (min-width: 768px) { .band { grid-template-columns: repeat(4, 1fr); padding: 3rem 0; } }
.band > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0; }
@media (min-width: 768px) { .band > div:not(:last-child) { border-right: 1px solid rgba(255,255,255,.12); } }
.band b { font: 800 1.875rem/1.1 var(--f-display); color: #fff; }
@media (min-width: 768px) { .band b { font-size: 2.25rem; } }
.band span { margin-top: .5rem; font: 400 10px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-light); }
@media (min-width: 768px) { .band span { font-size: 11px; } }

/* Service columns */
.cols { display: grid; gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 768px) { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cols { grid-template-columns: repeat(4, 1fr); } }
.col { padding: 1.75rem; background: #fff; transition: background .3s, box-shadow .3s; }
.col:hover { background: var(--mist); box-shadow: 0 4px 6px -1px rgba(12,40,70,.08); }
.col__n { font: 700 3rem/1 var(--f-mono); color: var(--mist-2); transition: color .3s; }
.col:hover .col__n { color: rgba(32,115,190,.2); }
.col h3 { margin-top: .75rem; font: 700 1.125rem/1.35 var(--f-display); color: var(--ink); }
.col ul { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.col a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem 0; font-size: 13px; color: var(--body); transition: color .2s; }
.col a:hover { color: var(--navy); }
.col a svg { width: 13px; height: 13px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: .2s; }
.col a:hover svg { opacity: 1; transform: none; }

/* Cards */
.cards { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards--3 { margin-top: 3rem; }
@media (min-width: 640px) { .cards--3 { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; height: 100%; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.card:hover { border-color: rgba(32,115,190,.4); box-shadow: 0 20px 25px -5px rgba(12,40,70,.1), 0 8px 10px -6px rgba(12,40,70,.08); }
.card__media { position: relative; overflow: hidden; }
.card__media .frame { transition: transform .5s; }
.card:hover .card__media .frame { transform: scale(1.03); }
.card__tag { position: absolute; top: 1rem; left: 1rem; padding: .25rem .75rem; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); font: 400 10px/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.card__body { padding: 1.5rem; }
.card h3 { font: 700 1.125rem/1.35 var(--f-display); color: var(--ink); transition: color .2s; }
.card:hover h3 { color: var(--navy); }
.card p { margin-top: .5rem; font-size: .875rem; line-height: 1.65; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; font: 400 10px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.card__meta span:first-child { color: var(--accent-dark); }

/* About split */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split__media { position: relative; }
.split__badge { position: absolute; right: -1.5rem; bottom: -1.5rem; display: none; padding: 1.5rem; background: var(--accent); color: #fff; }
@media (min-width: 768px) { .split__badge { display: block; } }
.split__badge b { display: block; font: 800 2.25rem/1 var(--f-display); }
.split__badge small { display: block; margin-top: .5rem; font: 400 10px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.prose { margin-top: 1.5rem; color: var(--body); line-height: 1.7; }
.prose p + p { margin-top: 1rem; }
.checks { margin-top: 1.75rem; display: grid; gap: .75rem; }
.checks li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--body); }
.checks i { width: 1.25rem; height: 1.25rem; margin-top: .125rem; display: grid; place-items: center; background: var(--navy); color: #fff; flex-shrink: 0; }
.checks i svg { width: 12px; height: 12px; }

/* Steps */
.steps { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 1.75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .3s; }
.step:hover { border-color: rgba(108,178,238,.5); }
.step__n { position: absolute; top: 1.25rem; right: 1.5rem; font: 700 2.25rem/1 var(--f-display); color: rgba(255,255,255,.1); }
.step i { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--accent); color: #fff; }
.step i svg { width: 22px; height: 22px; }
.step h3 { margin-top: 1.25rem; font: 700 1.125rem var(--f-display); color: #fff; }
.step p { margin-top: .75rem; font-size: .875rem; line-height: 1.65; color: rgba(255,255,255,.65); }

/* Brands */
.brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .brands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .brands { grid-template-columns: repeat(4, 1fr); } }
.brands div { display: flex; align-items: center; justify-content: center; padding: 2.25rem 1rem; background: #fff; transition: background .3s; }
.brands div:hover { background: var(--mist); }
.brands img { max-height: 2.25rem; width: auto; max-width: 70%; opacity: .55; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.brands div:hover img { opacity: 1; filter: none; }
.note { margin-top: 1rem; font-size: .75rem; color: var(--muted); text-align: center; }

/* CTA */
.cta { position: relative; overflow: hidden; background: var(--navy); }
.cta .blueprint { position: absolute; inset: 0; opacity: .6; }
.cta__glow { position: absolute; right: -5rem; top: 50%; width: 24rem; height: 24rem; transform: translateY(-50%); border-radius: 50%; background: rgba(32,115,190,.25); filter: blur(64px); }
.cta__in { position: relative; max-width: 56rem; margin: 0 auto; padding: 4.5rem var(--gut); text-align: center; }
@media (min-width: 768px) { .cta__in { padding-top: 6rem; padding-bottom: 6rem; } }
.cta h2 { margin-top: 1.25rem; font: 700 1.875rem/1.2 var(--f-display); color: #fff; }
@media (min-width: 768px) { .cta h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .cta h2 { font-size: 3rem; } }
.cta p { max-width: 42rem; margin: 1.5rem auto 0; font-size: 1.125rem; line-height: 1.65; color: rgba(255,255,255,.7); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }

/* Footer */
.ftr { background: var(--navy); color: rgba(255,255,255,.7); }
.ftr__in { padding-top: 4rem; padding-bottom: 2.5rem; }
.ftr__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ftr__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.ftr__logo { display: inline-flex; }
.ftr__logo img { height: 3.25rem; width: auto; }
.ftr__social { display: flex; gap: .75rem; margin-top: 1.5rem; }
.ftr__social a { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); transition: border-color .2s, color .2s; }
.ftr__social a:hover { border-color: var(--accent-light); color: var(--accent-light); }
.ftr__social svg { width: 16px; height: 16px; }
.ftr p { margin-top: 1.25rem; font-size: .875rem; line-height: 1.65; color: rgba(255,255,255,.65); }
.ftr h3 { font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.ftr ul { margin-top: 1.25rem; display: grid; gap: .625rem; }
.ftr ul a { font-size: .875rem; color: rgba(255,255,255,.65); transition: color .2s; }
.ftr ul a:hover { color: var(--accent-light); }
.ftr ul a.all { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent-light); font-weight: 500; }
.ftr ul a.all svg { width: 14px; height: 14px; }
.ftr__contact { gap: 1rem !important; font-size: .875rem; }
.ftr__contact li { display: flex; align-items: flex-start; gap: .75rem; color: rgba(255,255,255,.65); }
.ftr__contact svg { width: 16px; height: 16px; margin-top: .15rem; color: var(--accent-light); }
.ftr__bottom { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .75rem; color: rgba(255,255,255,.5); text-align: center; }
@media (min-width: 768px) { .ftr__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.ftr__bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
.ftr__bottom a:hover { color: var(--accent-light); }

/* Floating contact stack */
/* Phones: one button just above the bottom tab bar opens the four links (with script). */
.fab { position: fixed; right: 10px; bottom: 88px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab a { width: 44px; height: 42px; display: grid; place-items: center; background: var(--navy); color: #fff; box-shadow: 0 8px 24px rgba(12,40,70,.18); transition: background .25s, transform .25s var(--ease); }
.fab a:hover { background: var(--accent); transform: translateX(-3px); }
.fab a.fab__wa { background: #1fb860; }
.fab a.fab__wa:hover { background: #179c50; }
.fab svg { width: 20px; height: 20px; }
.fab a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.fab__toggle { display: none; }
@media (max-width: 767px) {
  .fab a { width: 48px; height: 48px; border-radius: 14px; }
  .js .fab__toggle { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(32,115,190,.42); -webkit-tap-highlight-color: transparent; transition: background .3s, transform .2s var(--ease); }
  .js .fab__toggle:active { transform: scale(.92); }
  .fab__toggle svg { position: absolute; width: 22px; height: 22px; transition: opacity .25s, transform .45s var(--spring); }
  .fab__toggle svg + svg, .fab.is-open .fab__toggle svg:first-child { opacity: 0; transform: rotate(-90deg) scale(.6); }
  .fab.is-open .fab__toggle svg + svg { opacity: 1; transform: none; }
  .fab.is-open .fab__toggle { background: var(--navy); }
  .js .fab a { transition: opacity .2s, transform .4s var(--spring), visibility 0s .4s; }
  .js .fab:not(.is-open) a { opacity: 0; visibility: hidden; transform: translateY(24px) scale(.5); }
  .js .fab.is-open a { visibility: visible; transition: opacity .2s, transform .45s var(--spring), visibility 0s; }
  .js .fab.is-open a:nth-child(4) { transition-delay: 0s; }
  .js .fab.is-open a:nth-child(3) { transition-delay: .04s; }
  .js .fab.is-open a:nth-child(2) { transition-delay: .08s; }
  .js .fab.is-open a:nth-child(1) { transition-delay: .12s; }
}
@media (min-width: 768px) {
  /* From tablet up the stack's centre sits on the lower golden section of the window (61.8% from the top).
     Phones keep it low, in thumb reach, above the bottom tab bar. */
  .fab { bottom: max(24px, calc(38.2svh - 106.5px)); gap: 7px; }
  .fab a { width: 58px; height: 48px; }
  .fab svg { width: 24px; height: 24px; }
}

/* Inner pages */
.phead { position: relative; overflow: hidden; background: var(--navy); }
.phead__in { position: relative; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .phead__in { padding-top: 5rem; padding-bottom: 5rem; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 400 11px var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.crumbs a:hover { color: var(--accent-light); }
.crumbs span[aria-current] { color: var(--accent-light); }
.phead h1 { margin-top: 1.25rem; max-width: 48rem; font: 800 2.25rem/1.05 var(--f-display); color: #fff; letter-spacing: -.02em; }
@media (min-width: 768px) { .phead h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .phead h1 { font-size: 3.5rem; } }
.phead p { margin-top: 1.25rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.65; color: rgba(255,255,255,.7); }
/* Photo ground: a real picture under a navy scrim dense enough that the title and text keep AA contrast. */
.phead__media { display: none; }
.phead--photo { background-image: none; isolation: isolate; }
.phead--photo .phead__media { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.phead--photo .phead__media img { width: 100%; height: 100%; object-fit: cover; animation: pheadIn 1.8s var(--ease) both; }
.phead--photo .phead__media::after { content: ""; position: absolute; inset: 0; background: rgba(12,40,70,.84); }
@media (min-width: 768px) { .phead--photo .phead__media::after { background: linear-gradient(90deg, rgba(12,40,70,.94) 0%, rgba(12,40,70,.86) 42%, rgba(12,40,70,.42) 100%); } }
@media (min-width: 1024px) { .phead--photo .phead__in { padding-top: 6.5rem; padding-bottom: 6.5rem; } }
.phead--photo p { color: rgba(255,255,255,.82); }
@keyframes pheadIn { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .phead--photo .phead__media img { animation: none; } }

.sys { display: grid; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.sys:first-child { padding-top: 0; }
.sys:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1024px) { .sys { grid-template-columns: 5fr 6fr; gap: 3.5rem; align-items: center; } .sys:nth-child(even) .sys__media { order: 2; } }
.sys h2 { margin-top: .75rem; font: 700 1.75rem/1.15 var(--f-display); color: var(--ink); }
.sys__text { margin-top: 1rem; color: var(--body); line-height: 1.7; }
.sys__lists { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .sys__lists { grid-template-columns: 1fr 1fr; } }
.sys__lists h3 { font: 400 10px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sys__lists ul { margin-top: .75rem; display: grid; gap: .5rem; }
.sys__lists li { display: flex; gap: .6rem; font-size: .875rem; color: var(--body); }
.sys__lists li::before { content: ""; width: 6px; height: 6px; margin-top: .45rem; background: var(--accent); flex-shrink: 0; }

.layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: 17rem 1fr; gap: 4rem; align-items: start; } }
.side { border: 1px solid var(--line); background: #fff; }
@media (min-width: 1024px) { .side { position: sticky; top: 7rem; } }
.side h2 { padding: 1rem 1.25rem; font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; background: var(--navy); color: #fff; }
.side > a { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--body); transition: background .2s, color .2s; }
.side > a:hover { background: var(--mist); color: var(--navy); }
.side > a[aria-current] { background: var(--mist); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.side > a small { font: 400 11px var(--f-mono); color: var(--muted); }
.side__cta { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--mist); }
.side__cta p { font-size: .8125rem; color: var(--body); line-height: 1.55; }
.side__cta .btn { width: 100%; margin-top: .9rem; }

.faq { margin-top: 3rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; font: 600 1.0625rem/1.4 var(--f-display); color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); flex-shrink: 0; transition: transform .3s, background .3s, color .3s; }
.faq summary i svg { width: 14px; height: 14px; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.faq details p { padding: 0 3rem 1.5rem 0; color: var(--body); line-height: 1.7; }

.contact { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }
.cinfo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cinfo > * { display: flex; gap: 1rem; padding: 1.5rem; background: #fff; }
.cinfo i { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--navy); color: #fff; flex-shrink: 0; }
.cinfo i svg { width: 20px; height: 20px; }
.cinfo small { display: block; font: 400 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cinfo b { display: block; margin-top: .3rem; font: 600 1rem/1.45 var(--f-display); color: var(--ink); }
.cinfo a:hover b { color: var(--accent-dark); }
.form { padding: 1.75rem; background: #fff; border: 1px solid var(--line); }
@media (min-width: 768px) { .form { padding: 2.5rem; } }
.form h2 { font: 700 1.5rem var(--f-display); color: var(--ink); }
.form > p { margin-top: .5rem; font-size: .875rem; color: var(--body); line-height: 1.6; }
.fgrid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .full { grid-column: 1 / -1; } }
.field label { display: block; font: 400 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; font: 400 .9375rem var(--f-body); color: var(--ink); background: var(--mist); border: 1px solid var(--line); border-radius: 0; transition: border-color .2s, background .2s; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8898' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.5rem; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.field .err { display: none; margin-top: .4rem; font-size: .75rem; color: #b42318; }
.field.is-bad input, .field.is-bad select { border-color: #b42318; }
.field.is-bad .err { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.form__foot small { flex: 1 1 14rem; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.map { margin-top: 2rem; border: 1px solid var(--line); aspect-ratio: 16 / 9; width: 100%; filter: grayscale(.3); }

.legal { max-width: 46rem; }
.legal h2 { margin-top: 2.5rem; font: 700 1.375rem var(--f-display); color: var(--ink); }
.legal p, .legal li { margin-top: .9rem; color: var(--body); line-height: 1.75; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.err404 { text-align: center; padding: 6rem 0; }
.err404 b { display: block; font: 800 6rem/1 var(--f-display); color: var(--mist-2); }

/* Mega menu: one shared panel that morphs between items (spring easing). */
.menu-wrap { position: relative; }
.mega { position: absolute; top: 100%; left: 0; padding-top: 1.1rem; z-index: 40; pointer-events: none; transition: transform .5s cubic-bezier(.34, 1.28, .64, 1); }
.mega.no-anim, .mega.no-anim .mega__box { transition: none; }
.mega__box { position: relative; overflow: hidden; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border: 1px solid rgba(12,40,70,.12); border-radius: 1rem; box-shadow: 0 24px 48px -16px rgba(12,40,70,.28), 0 2px 6px rgba(12,40,70,.06);
  opacity: 0; transform: translateY(10px) scale(.85); transform-origin: top center; visibility: hidden;
  transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.28, .64, 1), height .5s cubic-bezier(.34, 1.28, .64, 1), visibility .25s; }
.mega.is-open { pointer-events: auto; }
.mega.is-open .mega__box { opacity: 1; transform: none; visibility: visible; }
.mega__panel { position: absolute; top: 0; left: 0; width: max-content; padding: 1.25rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .35s var(--ease), visibility .22s; }
.mega__panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .06s; }
.mega__grid { display: grid; grid-template-columns: repeat(2, 19rem); gap: .35rem 1rem; }
.mtile { display: flex; align-items: center; gap: .9rem; padding: .5rem; border-radius: .75rem; transition: background .2s; }
.mtile:hover { background: var(--mist); }
.mtile img { width: 112px; height: 56px; object-fit: cover; border-radius: .5rem; box-shadow: 0 8px 20px -8px rgba(12,40,70,.45); flex-shrink: 0; transition: transform .35s var(--ease); }
.mtile:hover img { transform: scale(1.05); }
.mtile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 .95rem/1.25 var(--f-display); color: var(--ink); }
.mtile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .2rem; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.mtile:hover b { color: var(--navy); }
.mega__all { display: inline-flex; align-items: center; gap: .35rem; margin: .9rem .5rem 0; font: 600 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.mega__all svg { width: 14px; height: 14px; transition: transform .25s; }
.mega__all:hover svg { transform: translateX(3px); }
.mega__panel--links { display: grid; gap: .15rem; min-width: 14rem; padding: .75rem; }
.mlink { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .6rem .75rem; border-radius: .5rem; font-size: .9rem; color: var(--body); transition: background .2s, color .2s; }
.mlink:hover { background: var(--mist); color: var(--navy); }
.mlink svg { width: 14px; height: 14px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: .2s; }
.mlink:hover svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mega, .mega__box, .mega__panel { transition: opacity .15s !important; transform: none !important; } }

/* Blog post */
.post h2 { margin-top: 2.25rem; font: 700 1.5rem/1.25 var(--f-display); color: var(--ink); }
.post p { margin-top: .9rem; color: var(--body); line-height: 1.8; font-size: 1.0625rem; }
.side > a[aria-current], .side > a { line-height: 1.4; }

/* Product group showcase (preview: /deneme-slider/) */
.gx { margin-top: 3rem; }
.gx__panels { display: grid; gap: 2.5rem; }
.gx__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); }
.gx__media img { width: 100%; height: 100%; object-fit: cover; }
.gx__cap { position: absolute; inset: auto 0 0; padding: 3.5rem 1.25rem 1.25rem; background: linear-gradient(to top, rgba(12,40,70,.88), rgba(12,40,70,0)); color: #fff; }
.gx__cap h3 { font: 700 1.375rem/1.2 var(--f-display); letter-spacing: -.01em; }
.gx__cap span { display: block; margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,.8); }
.gx__list { display: grid; gap: .5rem; margin-top: .75rem; }
@media (min-width: 640px) { .gx__media { aspect-ratio: 16 / 9; } .gx__list { grid-template-columns: repeat(2, 1fr); } }
.gx__list a { display: flex; align-items: center; gap: .875rem; padding: .5rem .875rem .5rem .5rem; background: var(--mist); color: var(--ink); font-size: .9375rem; font-weight: 500; transition: background .25s, color .25s; }
.gx__list a:hover { background: var(--mist-2); color: var(--navy); }
.gx__list .gx__ico { flex: none; }
.gx__list img { width: 4rem; height: 2.75rem; object-fit: cover; flex-shrink: 0; }
.gx__list span { flex: 1; min-width: 0; }
.gx__list svg { width: 16px; height: 16px; color: var(--accent); transition: transform .25s var(--ease), color .25s; }
.gx__list a:hover svg { transform: translateX(3px); }

/* With script the group list drives one panel: a column of tabs beside it from 1024px, a row of swipeable chips above it below. */
@media (min-width: 1024px) {
  .gx--js { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; }
  .gx--js .gx__tabs { display: flex; flex-direction: column; gap: .375rem; }
  .gx--js .gx__media { aspect-ratio: 16 / 10; }
  .gx--js .gx__cap { display: none; }
}
.gx__tab { cursor: pointer; position: relative; flex: 1; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 1rem; row-gap: .375rem; padding: 1.25rem 1.5rem; text-align: left; background: var(--mist); color: var(--ink); transition: background .3s, color .3s; }
.gx__tab:hover { background: var(--mist-2); }
.gx__tab.is-on { background: var(--navy); color: #fff; }
.gx__name { grid-column: 1; font: 700 1.375rem/1.2 var(--f-display); letter-spacing: -.01em; }
@media (min-width: 1280px) { .gx__name { font-size: 1.625rem; } }
.gx__meta { grid-column: 1; font-size: .875rem; line-height: 1.45; color: var(--body); transition: color .3s; }
.gx__tab.is-on .gx__meta { color: rgba(255,255,255,.75); }
.gx__tab svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); }
.gx__tab:hover svg { opacity: .6; transform: none; }
.gx__tab.is-on svg { opacity: 1; transform: none; color: var(--accent-light); }
.gx__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gx--js .gx__panels { display: block; }
.gx--js .gx__panel:not(.is-on) { display: none; }
@media (min-width: 640px) { .gx--js .gx__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1023px) {
  .gx--js .gx__tabs { display: flex; gap: .5rem; margin: 0 calc(var(--gut) * -1) 1rem; padding: 0 var(--gut) .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .gx--js .gx__tabs::-webkit-scrollbar { display: none; }
  .gx--js .gx__tab { flex: none; display: block; padding: .75rem 1.125rem; border-radius: 999px; scroll-snap-align: start; scroll-margin-inline: var(--gut); -webkit-tap-highlight-color: transparent; transition: background .3s var(--ease), color .3s, transform .2s var(--ease); }
  .gx--js .gx__tab:active { transform: scale(.96); }
  .gx--js .gx__name { font: 600 .9375rem/1.2 var(--f-display); letter-spacing: 0; white-space: nowrap; }
  .gx--js .gx__meta, .gx--js .gx__tab svg { display: none; }
  .gx--js .gx__media { aspect-ratio: 16 / 11; }
}
/* Geçiş: geniş ekranda paneller aynı hücrede üst üste durur, seçilen yumuşakça belirir; yükseklik ve sekme boyları hiç değişmez.
   Hareket yok (ölçek, kayma, sıralı açılma yok), yalnız kısa bir saydamlık geçişi. */
@media (min-width: 1024px) {
  .gx--js .gx__panels { display: grid; }
  /* Eski panel, yenisi üstünde belirene kadar olduğu gibi kalır; böylece arada soluklaşma olmaz. */
  .gx--js .gx__panel, .gx--js .gx__panel:not(.is-on) { display: flex; flex-direction: column; grid-area: 1 / 1; background: #fff; opacity: 0; visibility: hidden; }
  .gx--js .gx__panel.is-on { opacity: 1; visibility: visible; z-index: 1; }
  /* Geçiş yalnız kullanıcı grup değiştirince (gx--anim): ilk açılışta gizli paneller bir an bile görünmez. */
  .gx--js.gx--anim .gx__panel:not(.is-on) { transition: opacity 0s linear .3s, visibility 0s linear .3s; }
  .gx--js.gx--anim .gx__panel.is-on { transition: opacity .3s ease; }
  .gx--js .gx__list { flex: 1; grid-auto-rows: 1fr; }
  .gx--js .gx__list--1 { grid-template-columns: 1fr; }
  .gx--js .gx__list li, .gx--js .gx__list a { height: 100%; }
}
@media (max-width: 1023px) { .gx--js .gx__panel.is-on { animation: gxFade .3s ease both; } }
@keyframes gxFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gx__media img, .gx__list svg, .gx__tab svg { transition: none; }
  .gx--js .gx__panel, .gx--js .gx__panel.is-on { transition: none !important; animation: none !important; }
}

/* Hero slider */
.slider { position: relative; height: max(520px, calc(100svh - var(--hdr))); overflow: hidden; background: var(--navy); color: #fff; touch-action: pan-y; user-select: none; }
/* Tablet/desktop: slider + overlapping trust row = exactly one window at scroll top. */
@media (min-width: 768px) {
  .first { display: flex; flex-direction: column; min-height: calc(100svh - var(--hdr)); }
  .first .slider { flex: 1; height: auto; min-height: 460px; }
}
.slider__track { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
.slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.slide__media { position: absolute; inset: 0; overflow: hidden; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s cubic-bezier(.2, .6, .3, 1); }
.slide.is-on .slide__media img { transform: scale(1); }
.slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,44,.35) 0%, rgba(8,24,44,.5) 55%, rgba(8,24,44,.72) 100%); }
.slide__body { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 2rem; padding-bottom: 4.5rem; }
.slide__tag, .slide__title, .slide__text, .slide__cta { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.slide.is-on .slide__tag, .slide.is-on .slide__title, .slide.is-on .slide__text, .slide.is-on .slide__cta { opacity: 1; transform: none; }
.slide.is-on .slide__tag { transition-delay: .25s; } .slide.is-on .slide__title { transition-delay: .35s; } .slide.is-on .slide__text { transition-delay: .45s; } .slide.is-on .slide__cta { transition-delay: .55s; }
.slide__tag { padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(8,24,44,.35); backdrop-filter: blur(6px); font: 600 11px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.slide__title { max-width: 18ch; margin-top: 1.25rem; font: 700 clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem)/1.05 var(--f-display); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.slide__text { max-width: 40rem; margin-top: 1.1rem; font-size: clamp(1rem, .9rem + .45vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,.88); }
.slide__cta { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; padding: .45rem .45rem .45rem 1.4rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font: 600 .95rem var(--f-display); color: #fff; transition: background .3s, border-color .3s, opacity .7s var(--ease), transform .9s var(--ease); }
.slide__cta i { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); transition: transform .3s var(--ease); }
.slide__cta i svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.slide__cta:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.slide__cta:hover i { transform: rotate(45deg); }
.slider__arrow { position: absolute; top: 50%; z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-top: -1.375rem; border-radius: 50%; background: rgba(8,24,44,.55); color: #fff; backdrop-filter: blur(6px); transition: background .25s, transform .25s; }
.slider__arrow:hover { background: var(--accent); }
.slider__arrow svg { width: 20px; height: 20px; }
.slider__arrow--prev { left: 1rem; } .slider__arrow--prev svg { transform: rotate(90deg); }
.slider__arrow--next { right: 1rem; } .slider__arrow--next svg { transform: rotate(-90deg); }
@media (max-width: 767px) { .slider__arrow { top: auto; bottom: 1.4rem; margin-top: 0; width: 2.5rem; height: 2.5rem; } .slider__arrow--prev { left: var(--gut); } .slider__arrow--next { right: auto; left: calc(var(--gut) + 3rem); } }
/* Arrows sit inside the fixed contact stack's column (10px + 58px + 1rem), mirrored on the left. */
@media (min-width: 768px) { .slider__arrow--prev { left: calc(68px + 1rem); } .slider__arrow--next { right: calc(68px + 1rem); } }
.slider__nav { position: absolute; left: 50%; bottom: 2rem; z-index: 3; display: flex; align-items: center; gap: .25rem; transform: translateX(-50%); }
@media (max-width: 767px) { .slider__nav { left: auto; right: var(--gut); bottom: 2.15rem; transform: none; } }
.slider__dots { display: flex; gap: .5rem; }
.slider__play { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.8); transition: color .2s, background .2s; }
.slider__play:hover { color: #fff; background: rgba(255,255,255,.12); }
.slider__play svg { width: 14px; height: 14px; }
.slider__play svg + svg, .slider__play[aria-pressed="true"] svg:first-child { display: none; }
.slider__play[aria-pressed="true"] svg + svg { display: block; fill: currentColor; }
.slider__dots button { width: 2.75rem; height: 1.5rem; display: grid; align-items: center; }
.slider__dots i { display: block; height: 3px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.slider__dots i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.slider__dots button.is-on i::after { animation: dot var(--slide-ms, 6000ms) linear forwards; }
.slider.is-paused .slider__dots button.is-on i::after { animation-play-state: paused; }
@keyframes dot { to { transform: scaleX(1); } }
.trust-wrap { position: relative; z-index: 4; background: #fff; }
.trust-wrap { padding-top: 1.5rem; }
.trust-wrap .trust { margin-top: 0; }
@media (min-width: 768px) {
  .trust-wrap { padding-top: 0; padding-bottom: clamp(1rem, 3svh, 2rem); }
  .trust-wrap .trust { transform: translateY(-2.5rem); margin-bottom: -2.5rem; box-shadow: 0 20px 40px -24px rgba(12,40,70,.35); }
  .slider__nav { bottom: 4.5rem; }
  .slide__body { padding-bottom: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide__media img, .slide__tag, .slide__title, .slide__text, .slide__cta { transition: opacity .3s !important; transform: none !important; }
  .slider__dots button.is-on i::after { animation: none; transform: scaleX(1); }
}

/* Phones: floating bottom tab bar. The slider ends at its top edge; the footer clears it.
   A pill sits behind the current tab (--i); on tap it springs to the tapped tab, the icon pops,
   then the page changes with a short cross-fade while the bar stays put. */
.bnav { display: none; }
@media (max-width: 767px) {
  .bnav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 56; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding: 0 4px; background: rgba(12,40,70,.94); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; box-shadow: 0 12px 32px rgba(12,40,70,.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); view-transition-name: bnav; }
  .bnav__pill { position: absolute; top: 6px; bottom: 6px; left: 4px; width: calc((100% - 8px) / 5); padding: 0 5px; opacity: 0; transform: translateX(calc(var(--i) * 100%)); transition: transform .5s var(--spring), opacity .25s; pointer-events: none; }
  .bnav__pill::before { content: ""; display: block; height: 100%; border-radius: 15px; background: rgba(108,178,238,.16); box-shadow: inset 0 0 0 1px rgba(108,178,238,.12); }
  .bnav.has-cur .bnav__pill { opacity: 1; }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; color: rgba(255,255,255,.68); font: 500 11px/1 var(--f-body); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .3s; }
  .bnav i { display: grid; place-items: center; transition: transform .2s var(--ease), color .3s; }
  .bnav a:active i { transform: scale(.86); }
  .bnav svg { width: 22px; height: 22px; }
  .bnav a[aria-current] { color: #fff; }
  .bnav a[aria-current] i { color: var(--accent-light); }
  .bnav a.is-pop i { animation: bnavPop .5s var(--spring); }
  .bnav a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -4px; border-radius: 14px; }
  .bnav__home { gap: 3px; }
  .bnav__home i, .bnav__home[aria-current] i { width: 42px; height: 42px; margin-top: -4px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(32,115,190,.45); }
  .bnav__home svg { width: 20px; height: 20px; }
  .bnav__home[aria-current] span { color: var(--accent-light); }
  .slider { height: max(480px, calc(100svh - var(--hdr) - 74px)); }
  .ftr { padding-bottom: 74px; }
}
@keyframes bnavPop { 0% { transform: scale(.82); } 45% { transform: translateY(-4px) scale(1.14); } 100% { transform: none; } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: hdr; }
  ::view-transition-old(root) { animation: vtOut .18s ease-in both; }
  ::view-transition-new(root) { animation: vtIn .28s var(--ease) both; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .bnav__pill, .bnav i, .fab a, .fab__toggle svg { transition: none !important; }
  .bnav a.is-pop i { animation: none; }
}

/* Phones: tighter rhythm, hero copy anchored low, cards in swipeable rails. */
@media (max-width: 767px) {
  .slide { align-items: flex-end; }
  .slide__body { align-items: flex-start; text-align: left; padding-top: 1.5rem; padding-bottom: 5.25rem; }
  .slide__media::after { background: linear-gradient(180deg, rgba(8,24,44,.3) 0%, rgba(8,24,44,.08) 28%, rgba(8,24,44,.5) 55%, rgba(8,24,44,.9) 100%); }
  .slide__tag { font-size: 10px; }
  .slide__title { max-width: 11ch; margin-top: 1rem; font-size: clamp(2.375rem, 10.6vw, 3rem); line-height: 1.02; }
  .slide__text { max-width: 32ch; margin-top: .875rem; font-size: 1rem; line-height: 1.55; }
  .slide__cta { margin-top: 1.5rem; }
  .slider__nav { left: calc(var(--gut) + 6.25rem); right: auto; bottom: 1.65rem; }
  .slider__dots { gap: .375rem; }
  .slider__dots button { width: 1.75rem; }
  /* Trust points: one slim strip of three, icon over a short title; the descriptions wait for wider screens. */
  .trust-wrap { padding: 1.75rem 0; }
  .trust { grid-template-columns: repeat(3, 1fr); gap: 0; background: none; border: 0; }
  .trust > div { flex-direction: column; align-items: center; justify-content: flex-start; gap: .625rem; padding: .125rem .375rem; text-align: center; background: none; }
  .trust > div + div { border-left: 1px solid var(--line); }
  .trust > div > svg { flex: none; width: 24px; height: 24px; }
  .trust b { max-width: 9ch; font-size: .8125rem; line-height: 1.25; }
  .trust small { display: none; }
  .band { padding: 1.75rem 0; }
  .band > div { padding: .875rem .25rem; }
  .band b { font-size: 1.75rem; }
  .band span { letter-spacing: .12em; }
}
@media (max-width: 639px) {
  .sec, .sec--lg { padding: 3.25rem 0; }
  .lede { margin-top: 1.125rem; }
  .cards, .cards--3 { margin-top: 2rem; }
  .gx { margin-top: 2rem; }
  .steps { gap: .875rem; margin-top: 2rem; }
  .step { padding: 1.25rem; }
  .step i { width: 2.5rem; height: 2.5rem; }
  .step h3 { margin-top: 1rem; }
  .brands { margin-top: 2rem; }
  .brands div { padding: 1.5rem .75rem; }
  .cards--rail { grid-auto-flow: column; grid-auto-columns: 84%; gap: .875rem; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 0 var(--gut) .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .cards--rail::-webkit-scrollbar { display: none; }
  .cards--rail > * { scroll-snap-align: start; }
}

/* ---- Rölöve Çizimi eklemeleri ---- */
.steps--7 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .steps--7 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps--7 { grid-template-columns: repeat(4, 1fr); } .steps--7 .step:nth-child(n+5) { grid-column: span 1; } }
.card--icon .ico { position: absolute; left: 1rem; bottom: -1.375rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 6px 14px rgba(12,40,70,.25); }
.card--icon .ico svg { width: 22px; height: 22px; }
.card--icon .card__media { overflow: visible; }
.card--icon .card__media .frame { overflow: hidden; }
.card--icon .card__body { padding-top: 2.25rem; }
.gx__ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex-shrink: 0; background: var(--navy); color: #fff; }
.gx__ico svg { width: 20px; height: 20px; color: #fff !important; transform: none !important; }
.gx__list a:hover .gx__ico { background: var(--accent); }
.dist { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .dist { grid-template-columns: 1fr 1fr; } }
.dist h3 { font: 700 1.125rem var(--f-display); color: var(--ink); margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .45rem .9rem; border: 1px solid var(--line); background: var(--mist); font-size: .875rem; color: var(--navy); }
.legal ul.chips { list-style: none; padding-left: 0; margin-top: 1.25rem; }
.legal ul.chips li { margin-top: 0; line-height: 1.4; }
.legal.wide { max-width: 56rem; }
.facts { margin-top: 2.25rem; border: 1px solid var(--line); background: var(--mist); }
.facts > div { display: grid; gap: .25rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 8rem 1fr; gap: 1rem; } }
.facts dt { font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.facts dd { font-size: .9375rem; color: var(--body); line-height: 1.6; }
.prose-post h2.post__lead { margin-top: 1.25rem; font-size: 1.625rem; }
.post h3 { margin-top: 1.75rem; font: 700 1.1875rem/1.3 var(--f-display); color: var(--ink); }
.post ul { margin-top: .9rem; padding-left: 0; list-style: none; }
.post ul li { position: relative; margin-top: .55rem; padding-left: 1.6rem; color: var(--body); line-height: 1.7; }
.post ul li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .75rem; height: .75rem; background: var(--accent); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.post strong { color: var(--ink); font-weight: 600; }
.side__grp { border-top: 1px solid var(--line); }
.side__grp summary { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.25rem; cursor: pointer; font: 600 .8125rem var(--f-display); color: var(--navy); list-style: none; background: var(--mist); }
.side__grp summary::-webkit-details-marker { display: none; }
.side__grp > a { display: block; padding: .65rem 1.25rem .65rem 1.75rem; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.4; color: var(--body); }
.side__grp > a:hover { background: var(--mist); color: var(--navy); }
.side__grp > a[aria-current] { background: var(--mist); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.sgroup + .sgroup { margin-top: 4.5rem; }
.sgroup .cards { margin-top: 2.5rem; }
.mega__grid--3 { grid-template-columns: repeat(3, 17rem); grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
/* Tüm 3 sütunlu menülerde kutu yüksekliği aynı: 2 satır başlık + 2 satır alt yazı (kısa alt yazılı Blog menüsü de Hizmetler kadar aralıklı). */
.mega__grid--3 .mtile { min-height: calc(1rem + 2 * 1.25 * .95rem + .2rem + 2 * 1.4 * .78rem); }
.mega__grid--r2 { grid-template-rows: repeat(2, auto); }

/* Son satırı boş kalmayan ızgaralar (bkz. tools/build.mjs gridCls ve stepsGrid). */
.step--cta { display: flex; flex-direction: column; background: var(--accent); border-color: var(--accent); transition: background .3s, border-color .3s; }
.step--cta:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.step--cta i { background: #fff; color: var(--accent); }
.step--cta p { color: rgba(255,255,255,.85); }
.step--cta .more { margin-top: auto; padding-top: 1.25rem; color: #fff; }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
/* Öne çıkan ilk kart (yatay): 2 sütunda tek sayıda tüm satırı; 3 sütunda 3n+1 sayıda tüm satırı, 3n+2 sayıda iki sütunu kaplar. */
@media (min-width: 640px) and (max-width: 1023px) {
  .cards--feat > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .cards--feat > :first-child:nth-last-child(odd) > .card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cards--feat > :first-child:nth-last-child(odd) .card__media .frame { aspect-ratio: auto; height: 100%; min-height: 17rem; }
  .cards--feat > :first-child:nth-last-child(odd) .card__body { display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.25rem; }
  .cards--feat > :first-child:nth-last-child(odd) h3 { font-size: 1.5rem; line-height: 1.25; }
  .cards--feat > :first-child:nth-last-child(odd) p { -webkit-line-clamp: 3; font-size: .9375rem; }
  .cards--feat > :first-child:nth-last-child(odd) .card--icon .ico { bottom: auto; top: 1rem; }
}
@media (min-width: 1024px) {
  .cards--feat > :first-child:nth-last-child(3n+1) { grid-column: 1 / -1; }
  .cards--feat > :first-child:nth-last-child(3n+1) > .card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cards--feat > :first-child:nth-last-child(3n+1) .card__media .frame { aspect-ratio: auto; height: 100%; min-height: 17rem; }
  .cards--feat > :first-child:nth-last-child(3n+1) .card__body { display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.25rem; }
  .cards--feat > :first-child:nth-last-child(3n+1) h3 { font-size: 1.5rem; line-height: 1.25; }
  .cards--feat > :first-child:nth-last-child(3n+1) p { -webkit-line-clamp: 3; font-size: .9375rem; }
  .cards--feat > :first-child:nth-last-child(3n+1) .card--icon .ico { bottom: auto; top: 1rem; }
  .cards--feat > :first-child:nth-last-child(3n+2) { grid-column: span 2; }
  .cards--feat > :first-child:nth-last-child(3n+2) > .card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cards--feat > :first-child:nth-last-child(3n+2) .card__media .frame { aspect-ratio: auto; height: 100%; min-height: 17rem; }
  .cards--feat > :first-child:nth-last-child(3n+2) .card__body { display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.25rem; }
  .cards--feat > :first-child:nth-last-child(3n+2) h3 { font-size: 1.5rem; line-height: 1.25; }
  .cards--feat > :first-child:nth-last-child(3n+2) p { -webkit-line-clamp: 3; font-size: .9375rem; }
  .cards--feat > :first-child:nth-last-child(3n+2) .card--icon .ico { bottom: auto; top: 1rem; }
}

/* Yasal metinler, onaya bağlı harita ve çerez bandı (KVKK). */
.legal a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal a.btn, .legal button { text-decoration: none; }
.legal__date { margin-top: 2.5rem !important; font-size: .875rem; color: var(--muted) !important; }
.map--off { display: grid; place-items: center; padding: 1.5rem; background: var(--mist); filter: none; text-align: center; }
.map__in { max-width: 26rem; }
.map__in p { font-size: .875rem; line-height: 1.6; color: var(--body); }
.map__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1rem; }
.ckb { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 58; width: min(26rem, calc(100% - 2.5rem)); padding: 1.25rem 1.25rem 1.125rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -12px rgba(12,40,70,.35); }
.ckb[hidden] { display: none; }
.ckb p { font-size: .8125rem; line-height: 1.6; color: var(--body); }
.ckb b { display: block; margin-bottom: .25rem; font: 700 1rem var(--f-display); color: var(--ink); }
.ckb a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.ckb__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1rem; }
/* İki seçenek de aynı görünür: onay yönlendirmesi yok. */
.ckb__btn { padding: .8rem 1rem; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: 600 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.ckb__btn:hover { background: var(--navy-2); }
.ckb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .ckb { left: 10px; right: 10px; width: auto; bottom: 84px; } }
.map--off[hidden] { display: none; }

/* Hizmet bölgesi: noktalı İstanbul haritası + ilçe listesi (tools/build.mjs districtsHtml). */
.dist2 { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 1024px) { .dist2 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3rem; align-items: center; } }
.dist2__lists { display: grid; gap: 1.75rem; }
.dist2__lists h3 { font: 700 1.125rem var(--f-display); color: var(--ink); margin-bottom: 1rem; }
.dist2 .chips li { cursor: default; transition: background .2s, color .2s, border-color .2s; }
.dist2 .chips li.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dist2 .chips li.is-office { display: inline-flex; align-items: center; gap: .45rem; background: var(--accent); border-color: var(--accent); color: #fff; }
.dist2 .chips li.is-office small { font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.dmap { position: relative; border: 1px solid var(--line); background: #fff; }
.dmap__svg { display: block; width: 100%; height: auto; }
.dmap__land { fill: url(#dmapDots); }
#dmapDots circle { fill: rgba(12,40,70,.42); }
.dmap__sea { font: italic 500 22px var(--f-body); letter-spacing: .35em; fill: rgba(95,107,120,.55); }
.dmap__side { font: 700 22px var(--f-mono); letter-spacing: .28em; fill: var(--navy); opacity: .62; paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.dmap__line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: .45; transition: opacity .25s, stroke-width .25s; }
.js .dmap__line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .dmap.is-in .dmap__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) calc(var(--n) * 45ms + .2s), opacity .25s, stroke-width .25s; }
.dmap__line.is-on { opacity: 1; stroke-width: 3; }
.dmap__flow circle { fill: var(--accent); opacity: 0; }
.dmap__pt circle { fill: var(--accent); transition: r .2s; }
.dmap__pt .dmap__hit { fill: transparent; }
.dmap__pt { cursor: pointer; }
.dmap__pt.is-on circle:not(.dmap__hit) { r: 8; fill: var(--navy); }
.dmap__hub circle { fill: var(--navy); }
.dmap__hub .dmap__pulse { fill: var(--accent); }
.dmap__hub .dmap__core { fill: #fff; }
.dmap__tag { opacity: 0; transition: opacity .2s; pointer-events: none; }
.dmap__tag.is-on { opacity: 1; }
.dmap__tag rect, .dmap__office rect { fill: var(--navy); }
.dmap__tag text, .dmap__office text { font: 600 22px var(--f-body); fill: #fff; text-anchor: middle; }
.dmap__office rect { fill: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .dmap__flow, .dmap__pulse { display: none; }
  .js .dmap__line, .js .dmap.is-in .dmap__line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}
.nowrap { white-space: nowrap; }