/* Birebirsoft — açık, ferah SaaS arayüzü. Lacivert başlıklar, logo mavisi vurgu, yumuşak kartlar. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/jakarta-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/jakarta-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root, [data-theme="aydinlik"] {
  color-scheme: light;
  --bg: #ffffff;
  --soft: #f6f8fb;
  --tint: #eaf2fd;
  --navy: #0b2559;
  --navy-2: #133a80;
  --blue: #1673d1;
  --blue-soft: #e6f0fc;
  --text: #5d6577;
  --muted: #667085;
  --line: rgba(11, 37, 89, .08);
  --line-2: rgba(11, 37, 89, .14);
  --card: #ffffff;
  --hero-1: #dfeafb;
  --hero-2: #eef4fd;
  --on-navy: #ffffff;
  --ok: #16a34a;
  --err: #c0262d;
  --shadow: 0 1px 2px rgba(11, 37, 89, .04), 0 18px 40px -24px rgba(11, 37, 89, .22);
}
[data-theme="gece"] {
  color-scheme: dark;
  --bg: #070d1c;
  --soft: #0c1529;
  --tint: #111d38;
  --navy: #eef3ff;
  --navy-2: #c9d8ff;
  --blue: #5aa2ff;
  --blue-soft: #14264a;
  --text: #a3aec4;
  --muted: #7b87a0;
  --line: rgba(200, 216, 255, .09);
  --line-2: rgba(200, 216, 255, .16);
  --card: #0f1a31;
  --hero-1: #10224a;
  --hero-2: #0a1428;
  --on-navy: #070d1c;
  --ok: #4ade80;
  --err: #ff8a8a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -24px rgba(0, 0, 0, .6);
}

:root {
  --head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1290px;
  --space: clamp(72px, 10vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--head); color: var(--navy); font-weight: 700; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 880px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.icon { width: 1em; height: 1em; flex: none; }
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
.grad { color: var(--blue); }
.stretched::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 52px; padding: 0 6px 0 26px; border-radius: 100px; border: 1px solid transparent;
  background: var(--navy); color: var(--on-navy); font: 600 16px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:not(:has(.btn__ic)) { padding: 0 26px; }
.btn__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--navy); transition: transform .25s var(--ease), background-color .2s, color .2s; }
.btn__ic .icon { width: 18px; height: 18px; }
.btn:hover { background: var(--blue); }
.btn:hover .btn__ic { transform: rotate(-45deg); color: var(--blue); }
[dir="rtl"] .btn:hover .btn__ic { transform: rotate(45deg); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn--outline .btn__ic { background: var(--navy); color: var(--on-navy); }
.btn--outline:hover { background: var(--navy); color: var(--on-navy); }
.btn--outline:hover .btn__ic { background: var(--bg); color: var(--navy); }
.btn--light { background: #fff; color: #0b2559; }
.btn--light .btn__ic { background: #0b2559; color: #fff; }
.btn--light:hover { background: var(--blue); color: #fff; }
.btn--light:hover .btn__ic { background: #fff; color: var(--blue); }
.btn--sm { height: 44px; padding-inline-start: 22px; font-size: 15px; }
.btn--sm .btn__ic { width: 32px; height: 32px; }
.btn--sm .btn__ic .icon { width: 15px; height: 15px; }
.btn--sm:not(:has(.btn__ic)) { padding: 0 18px; }
.btn--lg { height: 56px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--soft); }
.btn--dark { background: var(--navy); }
.btn:disabled { opacity: .6; cursor: progress; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.actions--center { justify-content: center; }

/* ---------- Etiketler ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border-radius: 50px; border: 1px solid var(--line-2);
  font: 500 15px/1.3 var(--sans); color: var(--navy); background: rgba(255, 255, 255, .5);
}
.pill__ic { display: grid; place-items: center; color: var(--blue); }
.pill__ic .icon { width: 18px; height: 18px; }
.tag { display: inline-block; padding: 4px 12px; border-radius: 50px; background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 80%, var(--navy)); font: 600 13px/1.5 var(--sans); }
.tag--muted { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 50px; background: var(--blue-soft); color: var(--navy); font-size: 14px; }
.chips--outline li { background: transparent; border: 1px solid var(--line-2); }
.ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.ic .icon { width: 26px; height: 26px; }
.ic--light { background: rgba(255, 255, 255, .1); color: #fff; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { width: 18px; height: 18px; color: var(--blue); margin-top: 4px; }
.ticks--light { color: rgba(255, 255, 255, .85); }
.ticks--light .icon { color: #8ec0ff; }

/* ---------- Üst menü: havada duran beyaz şerit ---------- */
.topbar { position: sticky; top: 0; z-index: 50; height: 98px; margin-bottom: -98px; padding-top: 18px; pointer-events: none; }
.topbar__inner {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 76px; padding: 0 14px 0 26px; border-radius: 50px; background: var(--card);
  border: 1px solid transparent; transition: box-shadow .25s, border-color .25s, transform .45s var(--ease);
}
/* Açılış slaytlı sayfada şerit ilk anda ekran boyuna göre biraz aşağıda durur; kaydırınca tepeye yanaşır. */
body:has(.hero) { --drop: clamp(0px, calc(5svh - 18px), 36px); }
body:has(.hero) .topbar:not(.is-scrolled) .topbar__inner { transform: translateY(var(--drop)); }
.topbar.is-scrolled .topbar__inner { box-shadow: 0 12px 40px -18px rgba(11, 37, 89, .3); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: 46px; width: auto; }
.brand__name { font: 800 22px/1 var(--head); color: var(--navy); }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav > a:not(.btn), .dropdown__btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border: 0; border-radius: 50px; background: none;
  font: 500 16px/1 var(--sans); color: var(--navy); cursor: pointer; transition: color .15s, background-color .15s;
}
.mainnav > a:not(.btn):hover, .dropdown__btn:hover, .dropdown.is-open .dropdown__btn, .mainnav > a[aria-current="page"] { background: var(--soft); }
.mainnav > .btn { margin-inline-start: 10px; }
.dropdown { position: relative; }
.dropdown__btn::after { content: ''; width: 6px; height: 6px; margin-inline-start: 9px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.dropdown.is-open .dropdown__btn::after { transform: translateY(1px) rotate(225deg); }
.dropdown__menu {
  position: absolute; top: calc(100% + 14px); inset-inline-start: 50%; translate: -50% 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: 0 30px 60px -24px rgba(11, 37, 89, .3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
[dir="rtl"] .dropdown__menu { translate: 50% 0; }
.dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.dropdown--mega .dropdown__menu { width: min(760px, 92vw); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown__menu a { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background-color .15s; }
.dropdown__menu a:hover, .dropdown__menu a[aria-current] { background: var(--soft); }
.dropdown__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); flex: none; }
.dropdown__icon .icon { width: 20px; height: 20px; }
.dropdown__menu strong { display: block; font: 600 15px/1.35 var(--head); color: var(--navy); }
.dropdown__menu small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* Hizmetler menüsü: solda yalnızca adlar, sağda üzerine gelinen hizmetin önizlemesi */
.mm__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; font: 600 15px/1.35 var(--head); color: var(--navy); }
.mm__list a:hover, .mm__list a:focus-visible, .mm__list a.is-on { background: var(--soft); }
.mm__list a[aria-current] { color: var(--blue); }
.mm__go { flex: none; color: var(--muted); }
.mm__go .icon { width: 16px; height: 16px; }
.mm__side { display: none; }
@media (min-width: 1081px) {
  .dropdown--mega .dropdown__menu.mm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; width: min(700px, 92vw); padding: 10px; }
  .mm__side { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 22px 22px 0; border-radius: 14px; background: var(--soft); }
  .mm__name { margin: 0; font: 700 18px/1.3 var(--head); color: var(--navy); }
  .mm__sum { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); }
  .mm__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 14px/1 var(--sans); color: var(--blue); }
  .mm__more .icon { width: 16px; height: 16px; }
  .mm__img { display: block; width: 100%; height: 150px; margin-top: 18px; object-fit: cover; object-position: center; border-radius: 12px; }
  .mm__img[hidden] { display: none; }
}
.langs .dropdown__btn { gap: 6px; font-size: 14px; }
.langs .dropdown__btn .icon { width: 16px; height: 16px; }
.langs__menu { min-width: 180px; inset-inline-start: auto !important; inset-inline-end: 0; translate: none !important; }
.langs__menu a { align-items: center; padding: 10px 12px; font-size: 15px; color: var(--navy); }
.langs__menu strong { font-size: 13px; color: var(--muted); width: 22px; display: inline; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .2s; }
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-toggle { display: block; }
  .topbar__inner { height: 68px; padding-inline-start: 18px; padding-inline-end: 11px; }
  .brand__logo { height: 38px; }
  .mainnav {
    position: absolute; top: calc(100% + 8px); inset-inline: var(--gutter); flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 110px); overflow-y: auto; padding: 12px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -24px rgba(11, 37, 89, .35);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .topbar .wrap { position: relative; }
  .mainnav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .mainnav > a:not(.btn), .dropdown__btn { width: 100%; height: 50px; justify-content: space-between; border-radius: 14px; font-size: 17px; }
  .dropdown__menu, .dropdown--mega .dropdown__menu { position: static; width: auto; translate: none; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px; }
  .dropdown.is-open .dropdown__menu { display: grid; }
  .dropdown__menu small { display: none; }
  .langs__menu a { padding-inline-start: 14px; }
  .mainnav > .btn { margin: 10px 0 0; }
}

/* Referans logoları: kayan şerit. Logo kutularının ölçüsü (--w/--h, px) şablonda eşit görsel alana göre hesaplanır. */
.brands { --u: 1px; --gap: clamp(40px, 5vw, 72px); padding: clamp(56px, 7vw, 88px) 0 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands-roll 40s linear infinite; }
.brands:hover .brands__track { animation-play-state: paused; }
.brands__list { display: flex; flex: none; align-items: center; gap: var(--gap); padding-right: var(--gap); }
.brands__list li { flex: none; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); overflow: hidden; }
.brands__list img { display: block; max-width: none; height: auto; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; }
.brands__list li:hover img { filter: none; opacity: 1; }
[data-theme="gece"] .brands__list img { filter: grayscale(1) invert(1); }
@keyframes brands-roll { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .brands { --u: .8px; } }
@media (prefers-reduced-motion: reduce) {
  .brands { -webkit-mask-image: none; mask-image: none; }
  .brands__track { width: auto; animation: none; }
  .brands__list { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 28px; padding: 0; }
  .brands__list[aria-hidden] { display: none; }
}

/* ---------- Bölümler ---------- */
.section { padding: var(--space) 0; }
.section--soft { background: var(--soft); }
.section--top0 { padding-top: 0; }
.shead { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.stitle { margin-top: 18px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.22; letter-spacing: -.02em; }
.slead { margin-top: 16px; font-size: 17px; }
.shead--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; text-align: start; }
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Kartlar */
.card { position: relative; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }
.card--white { background: var(--card); }
.card h3 { margin-top: 22px; font-size: 19px; line-height: 1.35; }
.card .tag + h3 { margin-top: 16px; }
.card p { margin-top: 10px; font-size: 15.5px; }
.card--link { transition: background-color .2s, border-color .2s; }
.card--link:hover { background: var(--card); border-color: var(--line-2); }
.card__go { position: absolute; top: 30px; inset-inline-end: 28px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--navy); transition: background-color .2s, color .2s, transform .25s var(--ease); }
.card__go .icon { width: 16px; height: 16px; }
.card--link:hover .card__go { background: var(--navy); color: var(--on-navy); transform: rotate(-45deg); }

/* Hizmet ızgarası: ilk hizmet koyu ve büyük. Laptop ekranına sığsın diye yatay ve sıkı;
   kartlar üzerine gelince oynamaz, yalnızca ince bir gölgeyle zeminden ayrılır. */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; }
.bento__feature {
  grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 30px 32px; border-radius: 14px; background: #0b2559; color: rgba(255, 255, 255, .78);
}
/* İkonlar zeminsiz ve büyük; sağ üst köşeden taşar (görselin sağ alttan taşmasının karşılığı). */
.bento .ic { position: absolute; top: -14px; inset-inline-end: -14px; width: auto; height: auto; border-radius: 0; background: none; pointer-events: none; }
.bento .ic .icon { stroke-width: 1.1; }
.bento__feature .ic { top: -26px; inset-inline-end: -26px; color: rgba(125, 182, 255, .55); }
.bento__feature .ic .icon { width: 150px; height: 150px; stroke-width: .9; }
.bento__feature h3 { padding-inline-end: 110px; font-size: clamp(21px, 1.9vw, 26px); color: #fff; }
.bento__feature > p { margin-top: 14px; max-width: 460px; font-size: 16px; }
.bento__feature .ticks { margin-top: 18px; gap: 8px; }
.bento__feature .btn { margin-top: 24px; position: relative; z-index: 1; }
.bento__shot { position: absolute; inset-inline-end: -36px; bottom: -36px; width: 50%; max-width: 340px; border-radius: 14px; opacity: .95; }
.bento .card {
  overflow: hidden; padding: 20px 22px 22px;
  background: var(--card); box-shadow: 0 1px 2px rgba(11, 37, 89, .04), 0 4px 14px -8px rgba(11, 37, 89, .14);
}
.bento .card .ic { color: color-mix(in srgb, var(--blue) 80%, transparent); }
.bento .card .ic .icon { width: 78px; height: 78px; }
/* Başlık iki satırlık yer tutar, böylece açıklamalar aynı hizadan başlar ve ikonun altına girmez. */
.bento .card h3 { display: flex; align-items: center; min-height: 2.6em; margin: 0; padding-inline-end: 64px; font-size: 16.5px; line-height: 1.3; }
.bento .card p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; }
.bento .card__go { display: none; }
.bento .card--link, .bento .card--link:hover { transform: none; transition: none; border-color: var(--line); background: var(--card); }
.bento .stretched:focus-visible { outline: none; }
.bento .card:has(.stretched:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-theme="gece"] .bento .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -8px rgba(0, 0, 0, .5); }
/* Altyapı ızgarası (partials/platform.php): aynı kartlar üç sütunda; büyük kartın altında kullandığımız teknolojiler. */
.bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--3 .bento__feature h3 { padding-inline-end: 150px; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.02em; line-height: 1.1; }
.bento--3 .bento__feature > p { margin-top: 12px; font-size: 17px; }
.bento--3 .card p { max-width: 36ch; }
.bento__tech { margin-top: auto; padding-top: 28px; }
.bento__tech h4 { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.chips--light { margin-top: 12px; gap: 6px; }
.chips--light li { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88); font-size: 13.5px; }
/* Nokta ikonlar (main.js): açılış çizimiyle aynı dil. Silik zemin noktaları ızgarayı belli eder. */
.dotic circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--ease); }
.dotic .f { opacity: .3; }
[data-dots].is-lit .dotic circle { transform: none; }
@media (prefers-reduced-motion: reduce) { .dotic circle { transform: none; transition: none; } }
/* Bölüm başlığı: solda başlık, sağda açıklama; dikeyde yer kazandırır. */
.shead--wide { margin-bottom: clamp(28px, 3.5vw, 44px); align-items: flex-end; }
.shead--wide .stitle { margin-top: 14px; }
.shead--wide .stitle:first-child { margin-top: 0; }
/* Başlık üstünde etiket kalmadı: ilk başlık üst boşluk almaz. */
.shead > .stitle:first-child, .about__text > .stitle:first-child, .contact__text > .stitle:first-child, .journey__head > .stitle:first-child { margin-top: 0; }
.shead--wide .slead { max-width: 460px; margin: 0; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__shot { width: 46%; } .bento--3 > :last-child { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento__feature { grid-column: auto; grid-row: auto; padding: 28px; } .bento__shot { position: static; width: 100%; margin: 28px 0 -28px; } .bento--3 > :last-child { grid-column: auto; } }

/* Siparişin yolculuğu: tam genişlikte lacivert bant (js/journey.js). Solda başlık ve adımlar; nokta sahnesi bandın
   tamamını kaplar, harita yazıların altında kaybolur. Yalnızca etkin adımın açıklaması açılır; betik yoksa ya da hareket
   azaltılmışsa hepsi açık durur. Bant aşağıda pazaryerleri akışıyla sürer: harita alt kenarda düz laciverte söner, akış
   kutusuz olarak aynı lacivertin üstünde, haritanın nokta diliyle çizilir (js/markets.js). */
.section--journey { padding: 0; }
.journey, .journey__after { --jp: #0b2559; --jt: #f4f8ff; --jm: rgba(214, 226, 250, .78); --jd: rgba(169, 189, 230, .45); --ja: #6fb0ff; }
.journey { position: relative; isolation: isolate; overflow: hidden; background: var(--jp); color: var(--jt); padding: clamp(44px, 4.6vw, 64px) 0; }
.journey--join::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: clamp(72px, 9vw, 120px); background: linear-gradient(rgba(11, 37, 89, 0), var(--jp)); pointer-events: none; }
[data-theme="gece"] .journey, [data-theme="gece"] .journey__after { --jp: #0f1d3d; }
[data-theme="gece"] .journey--join::after { background: linear-gradient(rgba(15, 29, 61, 0), var(--jp)); }
.journey__stage { position: absolute; inset: 0; z-index: -1; }
.journey__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey__wrap { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 220px) minmax(0, 1fr); grid-template-areas: "head head ." "steps ticket ."; column-gap: 28px; align-items: end; }
.journey__head { grid-area: head; align-self: start; margin-bottom: 20px; }
.journey .stitle { margin-top: 14px; font-size: clamp(28px, 2.6vw, 38px); }
.journey .stitle { color: var(--jt); }
.journey .stitle .grad { color: var(--ja); }
/* Açıklamalar açılıp kapanırken bandın yüksekliği değişmesin diye liste en uzun hâline göre yer ayırır. */
.journey__steps { grid-area: steps; position: relative; min-height: 244px; margin: 0; padding: 0; list-style: none; }
.journey__steps::before { content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 16px; width: 3px; background: radial-gradient(circle, var(--jd) 1px, transparent 1.4px) 50% 0 / 3px 7px repeat-y; }
.journey__step { position: relative; padding: 5px 0; padding-inline-start: 32px; }
.journey__step::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--jd); background: var(--jp); box-sizing: border-box; transition: background-color .4s, border-color .4s, box-shadow .4s; }
.journey__step h3 { font-size: 18.5px; line-height: 1.4; font-weight: 600; color: rgba(234, 241, 255, .6); transition: color .4s; }
.journey__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease); }
.journey__more > div { overflow: hidden; }
.journey__more p { margin: 4px 0 4px; max-width: 34ch; font-size: 16px; line-height: 1.55; color: var(--jm); }
.journey.is-live .journey__step:not(.is-active) .journey__more { grid-template-rows: 0fr; }
.journey__step.is-done::before, .journey:not(.is-live) .journey__step::before { border-color: var(--ja); background: var(--ja); box-shadow: inset 0 0 0 3px var(--jp); }
.journey__step.is-done h3 { color: rgba(234, 241, 255, .8); }
.journey__step.is-active::before { border-color: var(--jt); background: var(--jt); box-shadow: inset 0 0 0 3px var(--jp), 0 0 0 5px rgba(111, 176, 255, .22); }
.journey__step.is-active h3, .journey:not(.is-live) .journey__step h3 { color: var(--jt); }
.journey__ticket { grid-area: ticket; padding-bottom: 6px; }
.journey__order { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--jm); }
.journey__order > span:first-child { display: block; color: var(--jt); font-weight: 600; }
.journey__order b { font-variant-numeric: tabular-nums; }
.journey__clock { margin: 0; white-space: nowrap; font: 700 clamp(28px, 2.6vw, 38px)/1 var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--jt); }
.journey__after { position: relative; background: var(--jp); color: var(--jt); padding: 0 0 clamp(52px, 5.6vw, 76px); }
html:not(.js) .journey__stage { display: none; }
@media (max-width: 1080px) {
  .journey__wrap { grid-template-columns: minmax(0, 270px) minmax(0, 190px) minmax(0, 1fr); }
  .journey__step h3 { font-size: 17.5px; }
  .journey__more p { font-size: 15px; }
}
/* Telefonda harita bandın tamamını kaplar: başlığın ve adım listesinin arkasına uzanır, orada sönükleşir.
   Künye haritanın sağ üstünde küçük bir hap olur. */
@media (max-width: 860px) {
  .journey { padding-top: 40px; }
  .journey__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto clamp(250px, 76vw, 420px) auto; grid-template-areas: "head" "stage" "steps"; }
  .journey__head { position: relative; z-index: 1; margin-bottom: 0; }
  .journey__stage { position: relative; inset: auto; z-index: 0; grid-area: auto; grid-row: 1 / 3; grid-column: 1; align-self: stretch; margin: -40px calc(var(--gutter) * -1) -150px; }
  .journey__ticket { grid-area: stage; z-index: 2; align-self: start; justify-self: end; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 7px 8px 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--jp) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(214, 226, 250, .2); }
  [dir="rtl"] .journey__ticket { padding: 7px 14px 7px 8px; }
  .journey__order { margin: 0; font-size: 12.5px; line-height: 1.3; }
  .journey__what { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
  .journey__clock { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 17px; }
  .journey__steps { position: relative; z-index: 1; min-height: 0; margin-top: 4px; }
}

/* Adım kartları: etkin adım genişler */
.stepcards { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-height: 420px; }
.stepcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 48px 28px; cursor: default; transition: flex-grow .5s var(--ease), background-color .3s; }
.stepcard + .stepcard { border-inline-start: 1px solid var(--line); }
.stepcard.is-active { flex-grow: 2.4; }
.stepcard__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 15px/1 var(--head); color: var(--navy); transition: background-color .3s, color .3s, border-color .3s; }
.stepcard.is-active .stepcard__num { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.stepcard__body { margin-top: auto; }
.stepcard h3 { font-size: 19px; line-height: 1.35; }
.stepcard p { margin-top: 12px; font-size: 15px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .3s; }
.stepcard.is-active p { max-height: 200px; opacity: 1; transition-delay: .15s; }
html:not(.js) .stepcard p { max-height: none; opacity: 1; }
@media (max-width: 900px) {
  .stepcards { flex-direction: column; min-height: 0; }
  .stepcard { padding: 26px; flex-direction: row; gap: 18px; align-items: flex-start; }
  .stepcard + .stepcard { border-inline-start: 0; border-top: 1px solid var(--line); }
  .stepcard__num { flex: none; }
  .stepcard__body { margin-top: 0; }
  .stepcard p, .stepcard.is-active p { max-height: none; opacity: 1; margin-top: 6px; }
}

/* Projeler */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.project__img { aspect-ratio: 1240 / 720; overflow: hidden; background: var(--tint); }
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project__body { padding: 24px 26px 28px; }
.project h2 { margin-top: 14px; font-size: 20px; }
.project p { margin-top: 8px; font-size: 15px; }
.section--top0 .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .projects, .section--top0 .projects { grid-template-columns: 1fr; } }

/* Projeler (anasayfa), "nehir": marka adları bandın tam genişliğinde büyük ve kalın akar (js/showcase.js). Her adın üst
   üste iki kopyası vardır, aynı kalınlıkta: soluk (__lo) ve lacivert (__hi); ortaya yaklaşan adda betik yalnız ikisinin
   opaklığını değiştirir. Etkin ad, bölüm başlığı ve görsel aynı sol hizada durur (--a: içeriğin sol kenarı, betik ölçer);
   önceki ad bu hizanın solunda söner. Açıklama görselin sağında, iri ve okunaklıdır. Görsele basınca hafifçe içeri basılır
   ve sıradaki proje gelir. Geçiş efekti yalnız solmadır. Görseller 1240 × 720'lik ekran sahneleridir (img/proje), kutu onları bütün olarak gösterir. Betik yoksa
   adlar ortalanmış bir satırdır, görsel ve ilk açıklama görünür. */
/* Üst boşluk başlığın harf üstüne, alt boşluk görselin alt kenarına göre eşittir: başlığın satır aralığı ve harf üstü payı (-.245em) düşülür. */
.section--river { padding-block: clamp(64px, 7.5vw, 96px); }
.section--river .shead { align-items: flex-start; margin-bottom: clamp(12px, 1.6vw, 22px); }
.section--river .stitle { margin-top: -.245em; }
/* Düğme, başlığın harflerinin görsel ortasına hizalanır (harf ortası ≈ .377em, düğme 52 px). */
.section--river .shead > .btn { margin-top: calc(clamp(30px, 3.4vw, 44px) * .377 - 26px); }
.river { --fs: clamp(44px, 5.8vw, 84px); --bw: clamp(320px, 42vw, 580px); }
/* Ad kutusu kuyruklu harfleri (g, ş, ç) de içine alır ve görselin üstüne biner: harflerin kuyruğu görselin üst kenarının
   üzerinden geçer. */
.river__names { position: relative; z-index: 2; display: flex; justify-content: center; gap: .5em; height: calc(var(--fs) * 1.32); margin-bottom: calc(var(--fs) * -.3); overflow: hidden; font: 700 var(--fs)/1.16 var(--head); letter-spacing: -.045em; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--a, 14%) - 10px), #000 var(--a, 14%), #000 86%, transparent); mask-image: linear-gradient(90deg, transparent calc(var(--a, 14%) - 10px), #000 var(--a, 14%), #000 86%, transparent); }
[dir="rtl"] .river__names { -webkit-mask-image: linear-gradient(270deg, transparent calc(var(--a, 14%) - 10px), #000 var(--a, 14%), #000 86%, transparent); mask-image: linear-gradient(270deg, transparent calc(var(--a, 14%) - 10px), #000 var(--a, 14%), #000 86%, transparent); }
.river__nm { display: grid; flex: none; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.river__nm > span { grid-area: 1 / 1; text-align: center; }
.river__lo { color: color-mix(in srgb, var(--navy) 8%, transparent); transition: color .3s; }
.river__hi { color: var(--navy); opacity: 0; }
.river__nm[aria-selected="true"] .river__hi { opacity: 1; }
.river__nm[aria-selected="true"] .river__lo { opacity: 0; }
.river__nm:hover .river__lo { color: color-mix(in srgb, var(--navy) 30%, transparent); }
.river__nm:focus { outline: none; }
.river__nm:focus-visible .river__hi { text-decoration: underline 2px var(--blue); text-underline-offset: .12em; }
.river.is-live .river__names { display: block; }
.river.is-live .river__nm { position: absolute; top: 0; left: 0; will-change: transform; }

.river.is-live .river__stage { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(32px, 4vw, 64px); }
.river__band { position: relative; flex: none; width: var(--bw); aspect-ratio: 1240 / 720; cursor: pointer; }
.river__frame { transition: transform .25s var(--ease); }
.river__band:active .river__frame { transform: scale(.985); transition-duration: .12s; }
.river__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--soft); }
.river__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.river__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.river__frame img.is-on { opacity: 1; }
.river.is-live .river__band, .river.is-live .river__item { opacity: 0; }

.river__cap { display: grid; flex: 1; max-width: 480px; }
.river__item { grid-area: 1 / 1; align-self: center; visibility: hidden; }
.river__item.is-on { visibility: visible; }
.river__tag { color: var(--blue); font: 600 15px/1.4 var(--sans); }
.river__text { margin-top: 12px; color: var(--navy); font: 600 clamp(22px, 1.95vw, 28px)/1.35 var(--head); letter-spacing: -.012em; text-wrap: pretty; }
/* Noktalar: kaç proje olduğunu gösterir; etkin nokta kısa bir çizgiye uzar ve sıradakine kalan süreyle (--p) dolar. */
.river__dots { grid-area: 2 / 1; display: flex; gap: 6px; margin-top: 24px; padding-block: 6px; }
.river__dots i { position: relative; width: 5px; height: 5px; cursor: pointer; border-radius: 3px; background: color-mix(in srgb, var(--navy) 16%, transparent); transition: width .6s var(--ease); }
.river__dots i.is-on { width: 26px; }
.river__dots i::after { content: ''; position: absolute; inset: -9px -3px; }
.river__dots b { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(var(--p, 1)); transform-origin: left; }
[dir="rtl"] .river__dots b { transform-origin: right; }
.river__dots i:not(.is-on) b { display: none; }
@media (max-width: 900px) {
  .river__stage { flex-direction: column; align-items: flex-start; gap: 22px; }
  .river { --bw: min(580px, 100%); }
  .river__cap { max-width: min(var(--bw), 46ch); }
}
@media (max-width: 560px) {
  .river { --fs: 44px; }
  .river__names { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .river__text { font-size: 20px; }
}

/* ---------- İletişim ---------- */
.contact {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px;
  padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: #0b2559; color: rgba(255, 255, 255, .75);
}
.contact > * { position: relative; }
.contact .stitle { color: #fff; }
.contact .grad { color: #8ec0ff; }
.channels { display: grid; gap: 12px; margin-top: 32px; }
.channel { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: background-color .2s; }
.channel:hover { background: rgba(255, 255, 255, .12); }
.channel__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; flex: none; }
.channel__ic .icon { width: 20px; height: 20px; }
.channel small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); }
.channel strong { display: block; font: 600 18px/1.3 var(--head); color: #fff; }
.offices { display: grid; gap: 18px; margin-top: 28px; }
.offices li { display: flex; gap: 16px; }
.offices h3 { color: #fff; font-size: 16px; }
.offices p { margin-top: 2px; font-size: 14.5px; }
.offices a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: #8ec0ff; }
.offices a .icon { width: 14px; height: 14px; }
.contact__form { background: var(--card); color: var(--text); border-radius: 20px; padding: clamp(22px, 3vw, 36px); align-self: start; }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Form ---------- */
.demo-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { font-size: 14px; font-weight: 600; color: var(--navy); padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--soft);
  color: var(--navy); font: 400 15.5px/1.4 var(--sans); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 38px; }
[dir="rtl"] .field select { background-position: 20px 52%, 15px 52%; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--card); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.field--error input { border-color: var(--err); }
.field small { color: var(--err); font-size: 13px; }
.form-error { padding: 12px 14px; border-radius: 12px; background: rgba(192, 38, 45, .08); color: var(--err); font-size: 14px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.checks .check { position: relative; }
.checks .check input { position: absolute; opacity: 0; pointer-events: none; }
.checks .check span { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 50px; color: var(--navy); transition: background-color .15s, border-color .15s, color .15s; }
.checks .check:hover span { border-color: var(--blue); }
.checks .check input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.checks .check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.check--consent { font-size: 13.5px; line-height: 1.5; }
.check--consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy); flex: none; }
.check--consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- İç sayfa başlığı ---------- */
/* Ana sayfa açılışının sakin, açık yankısı: aynı içeri alınmış yuvarlak çerçeve, ama düz ve açık. Dalga, doku, ışık yok.
   Solda başlık, sağda açıklama; bölüm başlıklarındaki (shead--wide) yerleşimin aynısı. */
.phero { position: relative; margin: 12px 12px 0; padding: 132px 0 clamp(40px, 4.6vw, 60px); border-radius: 32px; background: var(--soft); text-align: start; }
.phero .wrap { position: relative; }
.breadcrumb { margin-bottom: 30px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: '/'; margin-inline-end: 8px; opacity: .6; }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb [aria-current] { color: var(--navy); }
.phero__title { max-width: 900px; margin: 0 auto; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.15; letter-spacing: -.03em; }
.phero__lead { max-width: 720px; margin: 20px auto 0; font-size: clamp(16px, 1.4vw, 19px); }
.phero__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.phero .phero__title { max-width: none; margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.12; }
.phero .phero__lead { max-width: 48ch; margin: 0; font-size: 17px; }
/* Üst etiket: açılıştaki gibi kısa bir çizgiyle başlayan, kutusuz satır */
.phero .pill { gap: 12px; margin-bottom: 18px; padding: 0; border: 0; border-radius: 0; background: none; font: 500 15px/1.4 var(--sans); color: var(--navy-2); }
.phero .pill::before { content: ''; width: 22px; height: 2px; flex: none; border-radius: 2px; background: var(--blue); }
.phero .pill__ic { display: none; }
.phero .actions { margin-top: 30px; }
/* Hizmet sayfası: görsel çerçevenin sağ alt köşesinden bakar, alttan kırpılır. Görseller küçük (405px) olduğundan gerilmez. */
.phero--product .phero__text { max-width: 620px; }
.phero--product .phero__lead { margin-top: 20px; max-width: 46ch; }
.phero--product .phero__title { font-size: clamp(34px, 3.8vw, 52px); }
.phero--peek { overflow: hidden; min-height: 480px; }
.phero--peek .wrap { position: static; }
.phero--peek .phero__text { max-width: min(46%, 560px); }
.peek { position: absolute; inset-inline-end: clamp(0px, 2vw, 32px); bottom: 0; width: min(54%, 700px); margin: 0; }
.peek img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .phero--peek { padding-bottom: 0; min-height: 0; }
  .phero--peek .phero__text { max-width: none; }
  .peek { position: relative; inset: auto; width: min(100%, 560px); margin: 20px auto 0; }
}
.phero--end { min-height: calc(100svh - 24px); display: flex; align-items: center; text-align: center; }
.phero--end .wrap { width: 100%; }
.phero--end .phero__title { margin-inline: auto; }
.phero--end .phero__lead { margin: 18px auto 0; }
@media (max-width: 900px) { .phero__row { grid-template-columns: 1fr; } .phero { padding-top: 120px; } }
@media (max-width: 560px) { .phero { margin: 8px 8px 0; border-radius: 26px; } }
/* Üst menü açık çerçevenin üstünde duruyor: ince bir çizgiyle belirginleşir */
body:not(.page-home) .topbar:not(.is-scrolled) .topbar__inner { border-color: var(--line); }
/* Başlığın hemen altından başlayan içerik nefes alsın */
.phero + .section--top0 { padding-top: clamp(40px, 5vw, 64px); }
/* İç sayfalarda bölüm başlıkları da ana sayfadaki gibi sola yaslı */
body:not(.page-home) .shead:not(.shead--split) { margin-inline: 0; text-align: start; }
.big-ic { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--navy); color: var(--on-navy); margin-bottom: 24px; }
.big-ic .icon { width: 34px; height: 34px; }
.big-404 { font: 800 clamp(80px, 12vw, 140px)/1 var(--head); color: var(--blue); letter-spacing: -.04em; margin-bottom: 12px; }

/* İstatistikler */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 0; position: relative; }
/* Alt sayfalarda rakamlar kartsız: ince çizgilerle ayrılmış sakin bir şerit */
.stats:not(.stats--plate) { margin-top: clamp(32px, 4vw, 48px); border-block: 1px solid var(--line-2); }
.stats:not(.stats--plate) .stats__item { padding: 30px clamp(20px, 3vw, 36px); }
.stats:not(.stats--plate) .stats__item + .stats__item { border-inline-start: 1px solid var(--line-2); }
@media (max-width: 700px) {
  .stats:not(.stats--plate) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats:not(.stats--plate) .stats__item:nth-child(odd) { border-inline-start: 0; }
  .stats:not(.stats--plate) .stats__item:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
.stats dd { margin: 0; font: 800 clamp(30px, 3vw, 40px)/1.1 var(--head); color: var(--navy); letter-spacing: -.02em; }
.stats dt { margin-top: 6px; font-size: 15px; }

/* İhtiyaç → çözüm kartları */
/* Sorun → çözüm: rozet ve kart yok. Soru solda sabit durur, sağda her satır küçük bir sorun ve altında çözüm cümlesi. */
#sorun-cozum .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.issues__title { position: sticky; top: 120px; max-width: 16ch; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.03em; }
.issues { border-bottom: 1px solid var(--line-2); }
.issue { display: grid; row-gap: 8px; padding-block: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--line-2); }
.issue:first-child { padding-top: 0; border-top: 0; }
.issue__need h3 { font: 500 16px/1.5 var(--sans); letter-spacing: 0; color: var(--text); }
.issue__need p { display: none; }
.issue__fix { margin: 0; font: 600 clamp(19px, 1.65vw, 22px)/1.42 var(--head); letter-spacing: -.01em; color: var(--navy); text-wrap: pretty; }
@media (max-width: 900px) {
  #sorun-cozum .wrap { grid-template-columns: 1fr; }
  .issues__title { position: static; }
  .issues { margin-top: 32px; }
  .issue:first-child { padding-top: 24px; border-top: 1px solid var(--line-2); }
}

/* Öne çıkan yetenekler: kart ve ikon yok. Büyük başlık, altında ince çizgiyle ayrılmış üç sütun; her çizginin başında sitenin kısa mavi çizgisi. */
.feats__title { max-width: 18ch; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.03em; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 52px) clamp(32px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.feat { position: relative; padding-top: 24px; border-top: 1px solid var(--line-2); }
.feat::before { content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--blue); }
.feat h3 { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.35; letter-spacing: -.01em; }
.feat p { margin-top: 10px; max-width: 38ch; font-size: 16px; line-height: 1.65; }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats { grid-template-columns: 1fr; } }
/* Süreç adımları: aynı çizgili sütunlar, başında küçük numara */
.feats--steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.feat__n { display: block; margin-bottom: 14px; font: 600 14px/1 var(--sans); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Detay: kartlar yerine çizgili sade listeler */
.detail .feats__title { max-width: none; margin: 0 0 28px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; }
.detail__side { gap: 36px; }
.sidelist h3 { margin-bottom: 10px; font-size: 17px; }
.sidelist li { padding: 12px 0; border-top: 1px solid var(--line-2); color: var(--navy); font-size: 16px; line-height: 1.5; }
.sidelist li:last-child { border-bottom: 1px solid var(--line-2); }

/* SSS (alt sayfa): solda başlık, sağda çizgili liste; kutu ve daire yok */
.faqwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.faq--plain { gap: 0; border-bottom: 1px solid var(--line-2); }
.faq--plain details, .faq--plain details[open] { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.faq--plain details:first-child { border-top: 0; }
.faq--plain summary { padding: 22px 0; }
.faq--plain summary h3 { font-size: 18px; }
.faq--plain details p { padding: 0 0 24px; max-width: 62ch; }
.faq--plain .faq__x, .faq--plain details[open] .faq__x { width: 18px; height: 18px; border: 0; background: none; }
.faq--plain .faq__x::before, .faq--plain .faq__x::after { left: 1px; right: 1px; }
.faq--plain details[open] .faq__x::before, .faq--plain details[open] .faq__x::after { background: var(--blue); }
@media (max-width: 900px) { .faqwrap { grid-template-columns: 1fr; } .faq--plain { margin-top: 32px; } .faq--plain details:first-child { border-top: 1px solid var(--line-2); } }

/* Diğer hizmetler: iki sütun, çizgili satırlar */
.more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-top: clamp(32px, 4vw, 56px); }
.more li { border-top: 1px solid var(--line-2); }
.more a { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0 26px; }
.more h3 { font-size: 18px; line-height: 1.35; transition: color .15s; }
.more p { margin-top: 6px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.more__go { flex: none; margin-top: 2px; color: var(--muted); transition: color .15s; }
.more__go .icon { width: 20px; height: 20px; }
.more a:hover h3, .more a:hover .more__go, .more a:focus-visible .more__go { color: var(--blue); }
@media (max-width: 800px) { .more { grid-template-columns: 1fr; } }

/* Ayrıntı */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; align-items: start; }
.detail__side { display: grid; gap: 20px; }
.detail__side .card h3 { margin: 0 0 14px; font-size: 17px; }
.detail .prose .stitle { margin: 0 0 24px; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }

/* Hakkımızda hikâye: üstte başlık + giriş, altında 2 × 2 geniş sütun (her biri yaklaşık 50 harf, 17px), en altta kapanış. Çizgi ve hareket yok, ritim boşluktan gelir. */
.story, .journey-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.story .issues__title { position: static; }
.story .prose { max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.7; color: var(--navy); }
.story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(40px, 6vw, 96px); margin-top: clamp(44px, 5vw, 72px); }
.story__grid h3 { font: 600 clamp(20px, 1.8vw, 24px)/1.3 var(--head); letter-spacing: -.015em; color: var(--navy); }
.story__grid .prose { max-width: 52ch; margin-top: 12px; font-size: 17px; line-height: 1.75; color: var(--text); }
.story__close { max-width: 62ch; margin-top: clamp(44px, 5vw, 72px); font-size: clamp(19px, 1.65vw, 22px); line-height: 1.6; color: var(--navy); }

/* Hakkımızda çizimleri: ince çizgili, açık mavi sahnede; pathLength="1" olduğundan her çizgi aynı yöntemle kendini çizer. */
.dd { --dd-stage: #edf3fc; --dd-fill: #dce9fa; display: block; width: 100%; height: auto; overflow: visible; }
[data-theme="gece"] .dd { --dd-stage: #0c1830; --dd-fill: #16294d; }
.dd .k, .dd .a, .dd .h { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dd .k { stroke: var(--navy); }
.dd .a { stroke: var(--blue); }
.dd .h { stroke: var(--line-2); }
.dd .t { fill: var(--dd-fill); }
.dd .w { fill: var(--card); }
.dd .dot { stroke-width: 3.4; }
.js .dd .k, .js .dd .a { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .dd .t, .js .dd .w { fill-opacity: 0; }
.js .draw .dd .k, .js .draw .dd .a { animation: ddl .9s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .07s); }
.js .draw .dd .t, .js .draw .dd .w { animation: ddl .9s cubic-bezier(.4, 0, .2, 1) forwards, ddf .5s ease forwards; animation-delay: calc(var(--i, 0) * .07s), calc(var(--i, 0) * .07s + .5s); }
@keyframes ddl { to { stroke-dashoffset: 0; } }
@keyframes ddf { to { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .dd .k, .js .dd .a { stroke-dashoffset: 0; animation: none !important; }
  .js .dd .t, .js .dd .w { fill-opacity: 1; animation: none !important; }
}

.vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(36px, 4vw, 56px); }
.val__art { padding: 22px 18px 14px; border-radius: 24px; background: var(--dd-stage, #edf3fc); border: 1px solid var(--line); }
[data-theme="gece"] .val__art, [data-theme="gece"] .tl__art { --dd-stage: #0c1830; background: #0c1830; }
.val__t h3 { margin-top: 22px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -.01em; }
.val__t p { margin-top: 10px; max-width: 34ch; font-size: 16px; line-height: 1.65; }

.timeline { border-bottom: 1px solid var(--line-2); }
.tl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 28px; align-items: start; padding-block: clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--line-2); }
.tl:first-child { padding-top: 0; border-top: 0; }
.tl__art { padding: 10px; border-radius: 20px; background: #edf3fc; }
.tl__y { display: block; margin-bottom: 4px; font: 600 14px/1.5 var(--sans); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl__t h3 { font: 600 clamp(19px, 1.65vw, 22px)/1.4 var(--head); letter-spacing: -.01em; color: var(--navy); }
.tl__t p { margin-top: 8px; max-width: 52ch; font-size: 16px; line-height: 1.65; }
@media (max-width: 1000px) { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .story, .journey-split { grid-template-columns: 1fr; }
  .story .prose { margin-top: 28px; }
  .story__grid { grid-template-columns: 1fr; }
  .timeline { margin-top: 32px; }
  .tl:first-child { padding-top: 24px; border-top: 1px solid var(--line-2); }
}
/* Dar ekran: değerler ve yolculuk aynı kısa satır düzeninde (solda küçük çizim, sağda metin); sayfa uzamasın. */
@media (max-width: 640px) {
  .vals { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-2); }
  .val { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 18px; align-items: start; padding-block: 20px; border-bottom: 1px solid var(--line-2); }
  .val__art { padding: 8px; border-radius: 16px; }
  .val__t h3 { margin-top: 0; font-size: 18px; }
  .val__t p { margin-top: 6px; font-size: 15px; line-height: 1.55; }
  .tl { grid-template-columns: 76px minmax(0, 1fr); gap: 0 18px; padding-block: 20px; }
  .tl__art { padding: 6px; border-radius: 16px; }
  .tl__t h3 { font-size: 18px; }
  .tl__t p { font-size: 15px; line-height: 1.55; }
}

.faq { display: grid; gap: 12px; }
.faq details { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; transition: background-color .2s; }
.faq details[open] { background: var(--card); box-shadow: var(--shadow); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 17px; line-height: 1.4; font-weight: 600; }
.faq__x { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-2); flex: none; }
.faq__x::before, .faq__x::after { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.6px; margin-top: -.8px; background: var(--navy); transition: transform .25s var(--ease); }
.faq__x::after { transform: rotate(90deg); }
.faq details[open] .faq__x { background: var(--navy); border-color: var(--navy); }
.faq details[open] .faq__x::before, .faq details[open] .faq__x::after { background: var(--on-navy); }
.faq details[open] .faq__x::after { transform: rotate(0); }
.faq details p { padding: 0 24px 22px; max-width: 720px; }

.prose { max-width: 780px; font-size: 17px; line-height: 1.8; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.6em; }
.prose h3 { font-size: 19px; margin-top: 1.4em; }
.prose > h2:first-child, .prose > .stitle + * { margin-top: 0; }
.prose--legal { font-size: 16px; }

/* ---------- Kampanya sayfası ---------- */
.topbar--landing { position: static; height: auto; margin: 0; padding: 18px 0 0; }
.topbar--landing .topbar__inner { box-shadow: var(--shadow); }
.lp { padding: clamp(40px, 6vw, 80px) 0; text-align: start; }
.lp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px 64px; align-items: start; }
.lp .phero__title { margin: 20px 0 0; text-align: start; }
.lp .phero__lead { margin: 18px 0 0; }
.lp__ticks { margin-top: 28px; }
.lp__image { margin-top: 36px; border-radius: 18px; }
.lp__form { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); }
.lp__form-title { font-size: 22px; margin-bottom: 20px; }
.lp__refs .brands { padding-bottom: var(--space); }
@media (max-width: 900px) { .lp__grid { grid-template-columns: 1fr; } }

/* ---------- Alt bilgi ---------- */
.footer { background: var(--soft); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.1fr .7fr 1.1fr; gap: 40px; }
.footer__about p { margin-top: 18px; max-width: 320px; font-size: 15px; }
.footer h2 { font-size: 17px; margin-bottom: 18px; }
.footer nav li + li { margin-top: 10px; }
.footer nav a, .contact-list a { font-size: 15px; transition: color .15s; }
.footer nav a:hover, .contact-list a:hover { color: var(--blue); }
.contact-list { display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.contact-list .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--blue); }
.contact-list strong { font-weight: 600; color: var(--navy); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__legal a:hover, .footer__legal button:hover { color: var(--blue); }
.footer--landing { padding-top: 0; background: none; border: 0; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp ve çerez onayı ---------- */
.wa-float {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 40; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(11, 37, 89, .35);
}
.wa-float .icon { width: 26px; height: 26px; }
.consent { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 60; width: min(440px, calc(100% - 36px)); }
.consent__box { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 30px 60px -24px rgba(11, 37, 89, .35); }
.consent h2 { font-size: 17px; margin-bottom: 8px; }
.consent p { font-size: 14px; }
.consent p a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.consent__prefs { display: grid; gap: 10px; margin-top: 14px; }
.consent__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 14px; }
.consent__row strong { color: var(--navy); }
.consent__row input { margin-top: 3px; accent-color: var(--navy); }
.consent__row small { display: block; color: var(--muted); font-size: 12.5px; }
.consent__row em { font-style: normal; font-size: 12px; color: var(--muted); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.consent__actions .btn { flex: 1 1 auto; height: 42px; }

/* Kaydırınca beliren öğeler */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 1080px) { .langs .dropdown__btn { justify-content: flex-start; } .langs .dropdown__btn::after { margin-inline-start: auto; } }
@media (max-width: 560px) { .pill { padding: 8px 16px; font-size: 14px; } }

/* ---------- Geri gelen bölümler ---------- */
.section--soft .card:not(.card--white) { background: var(--card); }
.section--soft .card--link:hover { border-color: var(--line-2); }

/* Hakkımızda özeti */
.about { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.about__text .stitle { margin-top: 18px; }
.about__text .slead { margin-bottom: 30px; }
/* Değerler: kart yerine ince çizgilerle bölünmüş 2×2 bir liste; başlığın yanındaki ikon konuyu işaret eder. */
.about__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.about__values li { padding-block: 30px 32px; padding-inline: 0 32px; border-bottom: 1px solid var(--line-2); }
.about__values li:nth-child(even) { padding-inline: 32px 0; border-inline-start: 1px solid var(--line-2); }
.about__values h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.35; }
.about__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.about__ic .icon { width: 20px; height: 20px; }
.about__values p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; }
.about + .stats { margin-top: clamp(48px, 6vw, 80px); }
/* Rakamlar: açılış plakasının küçük bir yankısı. Lacivert, noktalı dokulu tek parça bir şerit; rakamlar ince çizgilerle ayrılır. */
.stats--plate {
  --pl-line: rgba(220, 232, 255, .14);
  isolation: isolate; overflow: hidden; gap: 0; margin: 0; padding: clamp(36px, 4vw, 52px) 0;
  border-radius: 28px; background: #0b2559;
}
.stats--plate::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stats--plate::after {
  background-image: radial-gradient(circle, rgba(220, 232, 255, .16) 1px, transparent 1.4px); background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%); mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
}
.stats--plate .stats__item { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 4px clamp(24px, 3vw, 44px); }
.stats--plate .stats__item + .stats__item { border-inline-start: 1px solid var(--pl-line); }
.stats--plate dd { font-size: clamp(34px, 3.5vw, 50px); line-height: 1; letter-spacing: -.035em; color: #f2f6ff; }
.stats--plate dt { margin-top: 14px; max-width: 220px; font-size: 15px; line-height: 1.5; color: #aab9d8; }
[data-theme="gece"] .stats--plate { background: #0f1d3d; box-shadow: inset 0 0 0 1px rgba(200, 216, 255, .09); }
@media (max-width: 960px) {
  .stats--plate { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .stats--plate .stats__item { padding: 30px clamp(20px, 4vw, 36px); }
  .stats--plate .stats__item + .stats__item { border-inline-start: 0; }
  .stats--plate .stats__item:nth-child(even) { border-inline-start: 1px solid var(--pl-line); }
  .stats--plate .stats__item:nth-child(n+3) { border-top: 1px solid var(--pl-line); }
}
/* Telefonda tek sütun: rakam solda, açıklaması yanında. */
@media (max-width: 560px) {
  .stats--plate { grid-template-columns: 1fr; }
  .stats--plate .stats__item { display: flex; align-items: center; gap: 14px; padding: 22px 20px; }
  .stats--plate .stats__item:nth-child(even) { border-inline-start: 0; }
  .stats--plate .stats__item + .stats__item { border-top: 1px solid var(--pl-line); }
  .stats--plate dd { flex: 0 0 49%; font-size: 28px; white-space: nowrap; }
  .stats--plate dt { margin: 0; }
}
@media (max-width: 960px) { .about { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .about__values { grid-template-columns: 1fr; }
  .about__values li, .about__values li:nth-child(even) { padding: 26px 0; border-inline-start: 0; }
}

/* Pazaryerleri: harita bandının devamı. Kutusuz; yazılar bandın açık tonlarında, hatlar haritanın nokta dilinde
   (js/markets.js): pazaryeri adlarından çıkan noktalı hatlar tek düğümde birleşir ve sağdaki sipariş akışına bağlanır. */
.markets { --mk-dot: #a9bde6; --mk-acc: #6fb0ff; --mk-lit: #f4f8ff; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 22px 56px; align-items: center; padding-top: clamp(22px, 2.6vw, 34px); background: radial-gradient(circle, rgba(169, 189, 230, .3) 1px, transparent 1.4px) 0 0 / 6px 3px repeat-x; }
.markets__head h3 { font-size: 20px; color: var(--jt); }
.markets__head p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--jm); }
.markets__stage { --row: 28px; position: relative; display: grid; grid-template-columns: auto minmax(96px, 1fr) minmax(0, 230px); align-items: start; }
.markets__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.markets__list { grid-column: 1; margin: 0; padding: 0; list-style: none; }
.markets__item { display: flex; align-items: center; height: var(--row); color: var(--jt); opacity: .46; transition: opacity 1.2s var(--ease); }
.markets__item.is-on { opacity: .95; transition-duration: .6s; }
.markets__name { font: 800 16.5px/1 var(--head); letter-spacing: -.02em; white-space: nowrap; }
.markets__item img { max-height: 24px; width: auto; filter: grayscale(1) brightness(0) invert(1); }
.markets__feed { grid-column: 3; position: relative; overflow: hidden; height: calc(var(--row) * 3); margin: calc(var(--n) * var(--row) / 2 - var(--row) / 2) 0 0; padding: 0; list-style: none; }
.markets__feed li { position: absolute; inset-inline: 0; top: 0; height: var(--row); display: flex; align-items: center; gap: 12px; transform: translateY(calc(var(--i) * var(--row))); opacity: calc(1 - var(--i) * .36); transition: transform .9s var(--ease), opacity .9s; }
.markets__feed i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.markets__feed i { filter: brightness(1.35) saturate(.9); }
.markets__feed b { font: 700 16px/1 var(--head); color: var(--jt); font-variant-numeric: tabular-nums; }
.markets__feed span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--jm); }
.markets__feed small { margin-inline-start: auto; white-space: nowrap; font-size: 13px; color: rgba(169, 189, 230, .7); font-variant-numeric: tabular-nums; }
.markets__feed li.is-in b, .markets__feed li.is-in span, .markets__feed li.is-in small { animation: mk-in .8s var(--ease) both; }
.markets__feed li.is-out { opacity: 0; }
@keyframes mk-in { from { opacity: 0; transform: translateX(-6px); } }
[dir="rtl"] .markets__feed li.is-in b, [dir="rtl"] .markets__feed li.is-in span, [dir="rtl"] .markets__feed li.is-in small { animation-name: mk-in-rtl; }
@keyframes mk-in-rtl { from { opacity: 0; transform: translateX(6px); } }
@media (max-width: 960px) { .markets { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .markets { padding-top: 20px; }
  .markets__stage { --row: 25px; grid-template-columns: auto minmax(40px, 1fr) minmax(0, 120px); }
  .markets__name { font-size: 14.5px; }
  .markets__feed span { display: none; }
  .markets__feed li { gap: 9px; }
  .markets__feed b { font-size: 14.5px; }
}

/* WhatsApp Business API */
/* Bölümün kendi iç boşluğu yoktur; üst ve alt boşluk eşittir (--air, sitenin bölüm boşluğu --space). Üstteki silik kareler
   bölümün üst kenarından taşar, bölüm onları keser; görünen şerit ile karelerle telefon arasındaki boşluk birlikte --air'i
   verir. Altta en alttaki öğenin altına da --air bırakılır. Yazı sütununun içi 20/32/40 px'lik bir ritimle aralanır.
   Sütunlar 3/2 oranındadır; yazı alanı (--tw) en çok 640 px'tir (paragraf 54ch ile sınırlı, iki düğme tek satıra sığar).
   Telefonun genişliği yazının bıraktığı yerden hesaplanır: altyazı her genişlikte yazının 40 px sağında başlar, telefon
   sağ kenardan --shift kadar içeride durur (geniş ekranda 60 px, dar masaüstünde sıfıra iner) ve sağdaki kareler sayfa
   kenarına taşar. Bölüm başlığı etkin telefonla aynı hizadadır; başlığın satır aralığından gelen üst boşluk kırpılır.
   Tablette fırıldak yazının altında ortalanır; telefonda altyazı solda, telefon yanında durur, sağdaki kareler taşar. */
.section--waba { overflow: clip; padding-block: 0; }
.waba { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.waba > * { --cap: clamp(130px, 14vw, 200px); --gap: 28px; --tw: min(640px, (100cqi - 40px) * .6); --shift: clamp(0px, (100cqi - 1000px) * .27, 60px); --pw: clamp(190px, calc(100cqi - var(--tw) - 40px - var(--cap) - var(--gap) - var(--shift)), 600px); --s: calc(var(--pw) * .1); --air: var(--space); margin-bottom: var(--air); }
.waba__text { position: relative; z-index: 1; max-width: 640px; margin-top: var(--air); }
.waba__text .stitle { margin-top: -.11em; }
.waba__text .slead { max-width: 54ch; margin-top: 20px; }
.waba__text .ticks { gap: 12px; margin-top: 32px; color: var(--navy); font-size: 16px; }
.waba__text .actions { margin-top: 40px; }
/* Meta Tech Provider: rozet değil, metnin altında ince bir çizgiyle ayrılmış sade bir yetki satırı */
.waba__provider { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.waba__provider .icon { flex: none; width: 32px; height: 32px; color: var(--navy); }
.waba__provider strong { display: block; font: 600 15px/1.25 var(--head); color: var(--navy); letter-spacing: -.005em; }
.waba__provider small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.wa-tick { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ticks--wa .wa-tick { flex: none; width: 18px; height: 12px; margin-top: 7px; color: #53bdeb; transition: color .6s, opacity .6s; }
.ticks--wa li { transition: color .6s; }
.ticks--wa[data-live] li:not(.is-read) { color: var(--text); }
.ticks--wa[data-live] li:not(.is-read) .wa-tick { color: var(--muted); opacity: .55; }
/* Telefon fırıldağı: dört telefon bir merkezin çevresinde fırıldak gibi dizilir; her biri bir öncekine 90 derece açılıdır,
   hepsinin başı (üst kısa kenarı) merkeze bakar ve bir sonrakinin uzun kenarına dar, eşit bir boşlukla (--s) dayanır.
   Etkin telefon alttakidir, dik ve tam boy durur. Silik telefonlar kısadır: yalnız merkeze bakan baş kısımları, telefon
   genişliğinde bir kare olarak görünür (clip-path); üç kare etkin telefonun üstünde ve yanında 2x2 bir blok kurar. Fırıldak
   saat yönünde çeyrek tur dönerken gelen telefon kareden tam boya açılır, giden telefon kareye kapanır; açılma, silikleşme
   ve bulanıklık dönüşle aynı eğride ilerler. Görsel kutusu altyazıyı ve bu bileşimi kapsar, merkez etkin telefonun sağ üst
   köşesinin --s/2 dışındadır. RTL'de her şey aynalanır. Telefonun içindeki her şey em ile ölçeklenir. Renkler WhatsApp'ın
   açık/koyu paleti */
.waba__visual { --wa-bar: #f6f6f6; --wa-bg: #efeae2; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-ink: #111b21; --wa-sub: #667781; --wa-line: rgba(11, 20, 26, .1); --wa-link: #027eb5; --wa-note: #fdf4c5; --wa-note-ink: #54656f; --wa-chip: #ffffff; --wa-tick: #53bdeb; --wa-green: #00a884; --wa-doc: rgba(11, 20, 26, .05); --dir: 1; --x: calc(var(--s) / -2 - var(--pw)); --ease-w: cubic-bezier(.65, 0, .35, 1); position: relative; justify-self: end; margin-top: calc(var(--air) - var(--pw) - var(--s)); margin-inline-end: calc(var(--shift) - var(--pw) - var(--s)); width: calc(var(--cap) + var(--gap) + var(--pw) * 2 + var(--s)); height: calc(var(--pw) * (1 + 640 / 300) + var(--s)); }
[data-theme="gece"] .waba__visual { --wa-bar: #1f2c34; --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-ink: #e9edef; --wa-sub: #8696a0; --wa-line: rgba(233, 237, 239, .1); --wa-link: #53bdeb; --wa-note: #182229; --wa-note-ink: #ffd279; --wa-chip: #182229; --wa-doc: rgba(233, 237, 239, .06); }
[dir="rtl"] .waba__visual { --dir: -1; --x: calc(var(--s) / 2); }
.wa-dial { position: absolute; inset: 0; }
.wa-wheel { position: absolute; left: calc(var(--cap) + var(--gap) + var(--pw) + var(--s) / 2); top: calc(var(--pw) + var(--s) / 2); rotate: calc(var(--turn, 0) * 90deg * var(--dir)); transition: rotate 1.8s var(--ease-w); }
[dir="rtl"] .wa-wheel { left: auto; right: calc(var(--cap) + var(--gap) + var(--pw) + var(--s) / 2); }
.wa-ph { position: absolute; left: var(--x); top: calc(var(--s) / 2); width: var(--pw); aspect-ratio: 300 / 640; padding: calc(var(--pw) * .036); border-radius: calc(var(--pw) * .155); background: #0e0e0e; font-size: calc(var(--pw) * .049); transform-origin: calc(var(--x) * -1) calc(var(--s) / -2); rotate: calc(var(--k, 0) * -90deg * var(--dir)); clip-path: inset(0 0 calc(100% - var(--pw)) 0 round calc(var(--pw) * .155)); opacity: .09; filter: blur(4px); transition: opacity 1.1s cubic-bezier(.3, 0, .2, 1), filter 1.1s cubic-bezier(.3, 0, .2, 1), clip-path 1.8s var(--ease-w); cursor: pointer; }
.wa-ph:nth-child(2) { --k: 1; }
.wa-ph:nth-child(3) { --k: 2; }
.wa-ph:nth-child(4) { --k: 3; }
/* Silikleşme ve bulanıklık sırayla artar: etkin telefon net ve tam boy, sıradaki biraz, ondan sonraki daha çok, az önce
   ayrılan en çok silik ve bulanık */
/* Geçişler yöne göre ayrılır: etkinlikten çıkan telefon dönüşün başında yavaşça söner ve bulanıklaşır; etkin olan telefon
   dönüşün ortasına kadar silik kalır, ikinci yarısında yumuşakça netleşir. Kareden tam boya açılma dönüşün tamamına yayılır. */
.wa-ph[data-d="0"] { clip-path: inset(0 0 0 0 round calc(var(--pw) * .155)); opacity: 1; filter: blur(0); cursor: auto; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1) .55s, filter 1.3s cubic-bezier(.4, 0, .2, 1) .5s, clip-path 1.8s var(--ease-w); }
.wa-ph[data-d="1"] { opacity: .24; filter: blur(2px); }
.wa-ph[data-d="2"] { opacity: .15; filter: blur(3px); }
[data-theme="gece"] .wa-ph { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wa-ph::after { content: ''; position: absolute; top: calc(var(--pw) * .068); left: 50%; width: 30%; height: calc(var(--pw) * .074); border-radius: 99px; background: #0e0e0e; translate: -50% 0; }
/* Altyazı: etkin telefonun solunda, üstündeki karenin altında; telefona bakan kenara yaslıdır. Dört altyazı aynı hücrede
   üst üste durur; eskisi fırıldak dönerken söner, yenisi dönüşün ikinci yarısında belirir. */
.wa-cap { position: absolute; inset-inline-start: 0; top: calc(var(--pw) * 1.2 + var(--s)); width: var(--cap); text-align: end; pointer-events: none; }
.wa-cap__items { display: grid; }
/* Altyazı geçişi: eskisi hızlıca hafif yukarı kayıp bulanıklaşarak söner; yenisi dönüş yerine oturmaya yakınken alttan
   bulanıktan nete gelir, önce başlık sonra açıklama. */
.wa-cap__item { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s .5s; }
.wa-cap__item.is-on { visibility: visible; transition: none; }
.wa-cap__item > * { opacity: 0; filter: blur(6px); translate: 0 -6px; transition: opacity .45s cubic-bezier(.4, 0, 1, 1), filter .45s cubic-bezier(.4, 0, 1, 1), translate .45s cubic-bezier(.4, 0, 1, 1); }
.wa-cap__item.is-on > * { opacity: 1; filter: none; translate: none; transition: none; animation: wa-cap-in 1s cubic-bezier(.2, .7, .2, 1) 1s backwards; }
.wa-cap__item.is-on > .wa-cap__d { animation-delay: 1.14s; }
@media (prefers-reduced-motion: reduce) { .wa-cap__item.is-on > * { animation: none; } }
@keyframes wa-cap-in { from { opacity: 0; filter: blur(6px); translate: 0 8px; } }
.wa-cap__t { font: 700 clamp(22px, 1.9vw, 27px)/1.15 var(--head); color: var(--navy); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.wa-cap__d { max-width: 24ch; margin-top: 14px; margin-inline-start: auto; font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
/* Telefon ekranı iOS WhatsApp'ın işletme sohbetini birebir izler: üstte saat ve sinyal/Wi-Fi/pil durum çubuğu, geri oku,
   işletmenin adı ve onay rozeti, görüntülü/sesli arama simgeleri; WhatsApp'ın bej sohbet zemini; en üstte Meta bildirimi;
   grubun ilk balonunda kuyruk; gönderilen mesajda tek tik → çift gri tik → okununca mavi çift tik; şablonların hızlı yanıt
   düğmeleri balonun altında ayrı ayrı; altta artı, yazı kutusu (çıkartma simgesiyle), kamera ve mikrofon, yazarken yeşil
   gönder düğmesi ve iOS'un ana ekran çubuğu. */
.wa { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .12); background: var(--wa-bg); color: var(--wa-ink); font: 400 1em/1.38 var(--sans); }
.wa::after { content: ''; position: absolute; bottom: .6em; left: 50%; width: 36%; height: .3em; border-radius: 1em; background: var(--wa-ink); translate: -50% 0; }
.wa__top { background: var(--wa-bar); border-bottom: 1px solid var(--wa-line); }
.wa__sb { display: flex; align-items: center; justify-content: space-between; height: 2.9em; padding: .3em 1.5em 0 2em; }
.wa__clock { font-size: .95em; font-weight: 600; letter-spacing: -.01em; }
.wa__sbi { width: 4.1em; height: 1.55em; fill: currentColor; }
.wa__sbi-wifi { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.wa__sbi-bat { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .4; }
.wa__bar { display: flex; align-items: center; gap: .55em; padding: .25em .95em .6em .45em; }
.wa__ic { flex: none; width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa__ic--back { width: 1.85em; height: 1.85em; margin-inline-end: -.35em; stroke-width: 2; }
.wa__ic--call { margin-inline-start: .55em; }
[dir="rtl"] .wa__ic--back, [dir="rtl"] .wa__ic--reply, [dir="rtl"] .wa__send svg { scale: -1 1; }
.wa__avatar { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; }
.wa__who { flex: 1; display: grid; min-width: 0; line-height: 1.22; }
.wa__who strong { display: flex; align-items: center; gap: .25em; font-size: 1em; font-weight: 600; white-space: nowrap; }
.wa__badge { flex: none; width: 1em; height: 1em; fill: #1d9bf0; }
.wa__badge-ok { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa__who small { overflow: hidden; font-size: .76em; color: var(--wa-sub); white-space: nowrap; text-overflow: ellipsis; }
.wa__thread { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 1.6em); mask-image: linear-gradient(transparent, #000 1.6em); }
.wa__log { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: .18em; align-items: start; padding: 1em .85em .75em; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.wa__log.is-clear { opacity: 0; }
.wa__note { justify-self: center; max-width: 94%; margin-bottom: .55em; padding: .5em .8em; border-radius: .6em; background: var(--wa-note); color: var(--wa-note-ink); font-size: .74em; line-height: 1.42; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.wa__ic--lock { display: inline; width: 1.1em; height: 1.1em; margin-inline-end: .25em; vertical-align: -.18em; stroke-width: 2; }
.wa__sys { justify-self: center; margin: .5em 0 .2em; padding: .28em .75em; border-radius: .55em; background: var(--wa-chip); color: var(--wa-sub); font-size: .78em; font-weight: 500; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
/* Balonlar: aynı taraftan art arda gelenler sıkı durur; grubun ilk balonu biraz ayrılır ve köşesinde kuyruk taşır */
.wa__m, .wa__b { position: relative; padding: .38em .6em .45em; border-radius: .62em; background: var(--wa-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa__m { justify-self: start; max-width: 82%; transform-origin: 0 100%; }
.wa__m--out { justify-self: end; background: var(--wa-out); transform-origin: 100% 100%; }
[dir="rtl"] .wa__m { transform-origin: 100% 100%; }
[dir="rtl"] .wa__m--out { transform-origin: 0 100%; }
.wa__m--in:not(.wa__m--in + .wa__m--in), .wa__m--out:not(.wa__m--out + .wa__m--out) { margin-top: .5em; }
.wa__m--in:not(.wa__m--in + .wa__m--in):not(.wa__m--list), .wa__m--list:not(.wa__m--in + .wa__m--list) > .wa__b { border-start-start-radius: 0; }
.wa__m--out:not(.wa__m--out + .wa__m--out) { border-start-end-radius: 0; }
.wa__m--in:not(.wa__m--in + .wa__m--in):not(.wa__m--list)::before, .wa__m--list:not(.wa__m--in + .wa__m--list) > .wa__b::before,
.wa__m--out:not(.wa__m--out + .wa__m--out)::before { content: ''; position: absolute; top: 0; width: .55em; height: .7em; background: inherit; }
.wa__m--in:not(.wa__m--in + .wa__m--in):not(.wa__m--list)::before, .wa__m--list:not(.wa__m--in + .wa__m--list) > .wa__b::before { inset-inline-start: -.5em; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa__m--out:not(.wa__m--out + .wa__m--out)::before { inset-inline-end: -.5em; clip-path: polygon(0 0, 100% 0, 0 100%); }
[dir="rtl"] .wa__m--in:not(.wa__m--in + .wa__m--in):not(.wa__m--list)::before, [dir="rtl"] .wa__m--list:not(.wa__m--in + .wa__m--list) > .wa__b::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
[dir="rtl"] .wa__m--out:not(.wa__m--out + .wa__m--out)::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa__meta { float: inline-end; display: inline-flex; align-items: center; gap: .2em; margin-block: .6em -.35em; margin-inline-start: .75em; font-size: .7em; line-height: 1; color: var(--wa-sub); }
.wa__meta .wa-tick { width: 1.55em; height: 1.05em; color: var(--wa-tick); transition: color .45s; }
.wa-tick__2 { transition: opacity .3s; }
.wa[data-live] .wa__m--out:not(.is-read) .wa-tick { color: var(--wa-sub); }
.wa[data-live] .wa__m--out:not(.is-dlv):not(.is-read) .wa-tick__2 { opacity: 0; }
/* Şablon ve hızlı yanıt düğmeleri: balon ile düğmeler ayrı yüzeylerdir, aralarında WhatsApp'taki gibi ince bir boşluk vardır */
.wa__m--list { display: grid; gap: .16em; min-width: 68%; padding: 0; background: none; box-shadow: none; }
.wa__btns { display: grid; gap: .16em; }
.wa__btns span { display: flex; align-items: center; justify-content: center; gap: .35em; padding: .55em .6em; border-radius: .62em; background: var(--wa-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); color: var(--wa-link); font-size: .95em; font-weight: 500; transition: background-color .4s, scale .25s var(--ease); }
.wa__btns span.is-pressed { background: color-mix(in srgb, var(--wa-in) 84%, var(--wa-link)); scale: .98; }
.wa__ic--reply { width: 1.15em; height: 1.15em; stroke-width: 2; }
.wa__promo { display: grid; place-items: center; height: 3.1em; margin: -.1em -.32em .45em; border-radius: .45em; background: #d9fdd3; color: #0b5c3b; font: 700 2.1em/1 var(--head); letter-spacing: -.02em; }
[data-theme="gece"] .wa__promo { background: #0f3d2e; color: #9ff0c0; }
/* Doküman: ilk sayfanın küçük önizlemesi, altında PDF satırı (ad, sayfa, tür, boyut), sonra açıklama */
.wa__m--doc { width: 80%; padding-top: .3em; }
.wa__page { display: grid; align-content: start; gap: .34em; height: 4.4em; margin: 0 -.32em; padding: .75em 1.1em; overflow: hidden; border-radius: .45em .45em 0 0; background: #fff; }
.wa__page i { height: .26em; border-radius: 1em; background: rgba(11, 20, 26, .12); }
.wa__page i:nth-child(1) { width: 52%; height: .38em; background: rgba(11, 20, 26, .22); }
.wa__page i:nth-child(2) { width: 92%; }
.wa__page i:nth-child(3) { width: 84%; }
.wa__page i:nth-child(4) { width: 90%; }
.wa__page i:nth-child(5) { width: 58%; }
.wa__doc { display: flex; align-items: center; gap: .55em; margin: 0 -.32em .45em; padding: .55em .65em; border-radius: 0 0 .45em .45em; background: var(--wa-doc); }
.wa__doc svg { flex: none; width: 1.9em; height: 1.9em; fill: #e5484d; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.wa__doc span { display: grid; min-width: 0; }
.wa__doc b { overflow: hidden; font-size: .92em; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.wa__doc small { font-size: .74em; color: var(--wa-sub); }
/* Canlı konum: sade mahalle planı; balon girince kurye rotada şubeden eve doğru ilerler */
.wa__m--loc { width: 78%; padding-top: .3em; }
.wa__live { display: block; margin-bottom: .1em; font-size: .92em; font-weight: 600; }
.wa__map { display: block; width: calc(100% + .64em); height: auto; margin: 0 -.32em .45em; border-radius: .45em; }
.wa__map-bg { fill: #e7efe6; }
.wa__map-park { fill: #cfe5c9; }
.wa__map-rd { fill: none; stroke: #fff; stroke-width: 7; }
.wa__map-route { fill: none; stroke: #00a884; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wa__map-home { fill: #fff; stroke: #00a884; stroke-width: 3; }
.wa__map-cur { fill: #1673d1; transform: translate(138px, 22px); }
.wa__map-halo { fill: rgba(22, 115, 209, .18); }
[data-theme="gece"] .wa__map-bg { fill: #1b272d; }
[data-theme="gece"] .wa__map-park { fill: #1f3a30; }
[data-theme="gece"] .wa__map-rd { stroke: #2b3a41; }
[data-theme="gece"] .wa__map-home { fill: #1b272d; }
[data-theme="gece"] .wa__map-cur { fill: #5aa2ff; }
.wa .is-in .wa__map-cur { animation: wa-drive 7s cubic-bezier(.45, 0, .3, 1) .6s backwards; }
@keyframes wa-drive { 0% { transform: translate(24px, 70px); } 30% { transform: translate(60px, 70px); } 78% { transform: translate(112px, 22px); } 100% { transform: translate(138px, 22px); } }
.wa .is-in { animation: wa-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes wa-in { from { opacity: 0; transform: translateY(.7em) scale(.96); } }
.wa__compose { display: flex; align-items: center; gap: .6em; padding: .5em .85em 2.4em; background: var(--wa-bar); border-top: 1px solid var(--wa-line); }
.wa__ic--plus { width: 1.75em; height: 1.75em; }
.wa__input { flex: 1; display: flex; align-items: center; gap: .3em; min-width: 0; height: 2.3em; padding-inline: .85em .45em; border: 1px solid var(--wa-line); border-radius: 1.15em; background: var(--wa-in); }
.wa__field { flex: 1; min-width: 0; overflow: hidden; font-size: .95em; white-space: nowrap; }
.wa__ic--sticker { width: 1.45em; height: 1.45em; }
.wa__acts { display: flex; align-items: center; gap: .75em; }
.wa__compose.is-typing .wa__field::after { content: ''; display: inline-block; width: 1.5px; height: 1.15em; margin-inline-start: 1px; vertical-align: -.2em; background: var(--wa-green); animation: wa-caret 1s steps(1) infinite; }
@keyframes wa-caret { 50% { opacity: 0; } }
.wa__send { flex: none; display: none; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--wa-green); transition: transform .2s var(--ease); }
.wa__send.is-press { transform: scale(.86); }
.wa__send svg { width: 1.2em; height: 1.2em; fill: #fff; }
.wa__compose.is-typing .wa__acts { display: none; }
.wa__compose.is-typing .wa__send { display: grid; }
.msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.msg--out { justify-self: end; background: #d9fdd3; }
.msg--list span { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .08); color: #027eb5; text-align: center; font-weight: 500; }
@media (max-width: 960px) { .section--waba { padding-block: var(--space); } .waba { grid-template-columns: 1fr; } .waba { row-gap: 0; } .waba > * { --peek: clamp(24px, 6cqi, 48px); --pw: clamp(190px, calc((100cqi - var(--cap) - var(--gap) - var(--peek)) / 1.1), 280px); margin-bottom: 0; } .waba__text { margin-top: 0; }
  /* Web'deki gibi: üstteki kareler yutulur, yalnız alt şeritleri Meta Tech Provider satırının hemen altında kalır; fırıldak sağa yaslanır, sağdaki kareler sayfa kenarına taşar (kenardan --peek kadar içeriden başlar). */
  .waba__visual { --strip: calc(var(--pw) * .36); justify-self: end; margin: calc(32px + var(--strip) - var(--pw)) calc(var(--peek) - var(--pw)) 0 0; clip-path: inset(calc(var(--pw) - var(--strip)) -100vw -100vw -100vw); }
  [dir="rtl"] .waba__visual { margin: calc(32px + var(--strip) - var(--pw)) 0 0 calc(var(--peek) - var(--pw)); } }
/* Telefonda fırıldak gösterilmez, bölüm yalnız yazıdan oluşur. Görünmeyen fırıldak IntersectionObserver'a hiç girmediği
   için sohbetler de başlamaz. */
@media (max-width: 560px) { .waba__visual { display: none; } }

/* Sektörler: solda seçilebilir sektör adları, sağda o sektörün ince çizgili sahnesi (partials/sectors.php, js/sectors.js).
   Çizgi kalınlığı sahnenin boyuna göre JS'te --sw ile ayarlanır, ekranda hep ~1.5px kalır. */
.sectors {
  --sc-stage: #edf3fc; --sc-fill: #dce9fa; --sc-street: #e9f1fc; --sc-shade: rgba(11, 37, 89, .10); --sc-dim: rgba(11, 37, 89, .34);
  display: grid; grid-template-columns: minmax(0, 392px) minmax(0, 1fr); gap: 56px; align-items: center;
}
[data-theme="gece"] .sectors { --sc-stage: #0c1830; --sc-fill: #16294d; --sc-street: #13213f; --sc-shade: rgba(0, 0, 0, .3); --sc-dim: rgba(200, 216, 255, .34); }
.sectors__tabs { position: relative; display: flex; flex-direction: column; padding: 2px 0; }
.sectors__tabs::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.sectors__tab { position: relative; display: block; width: 100%; margin: 0; padding: 20px 0; padding-inline-start: 32px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
/* Etkin adın yanındaki ince çizgi sıradaki sektöre kalan süreyle dolar (--p). */
.sectors__tab::after { content: ""; position: absolute; inset-inline-start: -.5px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--blue); transform: scaleY(var(--p, 0)); transform-origin: top; opacity: 0; transition: opacity .35s var(--ease); }
.sectors__tab[aria-selected="true"]::after { opacity: 1; }
.sectors__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sectors__t { display: block; color: var(--sc-dim); font: 700 clamp(22px, 2.05vw, 29px)/1.2 var(--head); letter-spacing: -.02em; transition: color .45s var(--ease); }
.sectors__tab:hover .sectors__t { color: color-mix(in srgb, var(--navy) 62%, transparent); }
.sectors__tab[aria-selected="true"] .sectors__t { color: var(--navy); }
.sectors__d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .45s var(--ease); }
.sectors__d > span { display: block; min-height: 0; overflow: hidden; }
.sectors__d > span > span { display: block; max-width: 33ch; padding-top: 12px; font-size: 17px; line-height: 1.6; }
.sectors__tab[aria-selected="true"] .sectors__d { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, .12s; }

.sectors__stage { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 780 / 460; border: 1px solid var(--line); border-radius: 24px; background: var(--sc-stage); }
.sectors__sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.sectors__sc.on, .sectors__sc.out { opacity: 1; visibility: visible; }
.sectors__sc svg { --sw: 1.5; position: absolute; inset: 0; width: 100%; height: 100%; }
/* Sahne etiketleri: yalnız o sektörün açıklamasındaki ifadeler. */
.sectors__tg { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 50px; background: var(--card); color: var(--navy); font: 500 14px/1.2 var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); }
.sectors__tg::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.sectors__tg.r { transform: translate(-100%, -50%); }
.sectors__tg.l { transform: translate(0, -50%); }
/* Çizim mürekkepleri: k lacivert, a mavi, h ince çizgi, m silik, x kâğıt; w/t/s dolgular. */
.sectors svg .k, .sectors svg .a, .sectors svg .h, .sectors svg .m, .sectors svg .x { fill: none; stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; }
.sectors svg .k { stroke: var(--navy); }
.sectors svg .a { stroke: var(--blue); }
.sectors svg .h { stroke: var(--line-2); }
.sectors svg .m { stroke: color-mix(in srgb, var(--navy) 28%, transparent); }
.sectors svg .x { stroke: var(--card); }
.sectors svg .w { fill: var(--card); }
.sectors svg .t { fill: var(--sc-fill); }
.sectors svg .s { fill: var(--blue-soft); }
.sectors svg .fa { fill: var(--blue); }
.sectors svg .fk { fill: var(--navy); }
.sectors svg .sh { fill: var(--sc-shade); stroke: none; }
.sectors svg .st { fill: none; stroke: var(--sc-street); stroke-width: 15; stroke-linecap: round; }
.sectors svg .pk { fill: var(--sc-street); stroke: none; }
.sectors svg .dt { stroke-dasharray: 0 calc(var(--sw) * 4.2); stroke-width: calc(var(--sw) * 1.55); }
.sectors svg .wv { stroke-width: calc(var(--sw) * 1.3); }
.sectors svg .b2 { stroke-width: calc(var(--sw) * 1.6); }
/* Çizilme ve silinme kare kare JS'le boyanır; bu, çizilmeden önceki hâldir. */
.sectors svg .ln { stroke-dasharray: var(--L) calc(var(--L) * 3); stroke-dashoffset: calc(var(--L) * 1.1); fill-opacity: 0; }
.sectors svg .fd { opacity: 0; }
.sectors__sc.out .lp { opacity: 0 !important; transition: opacity .2s ease; }
.sectors__m { display: none; }
@media (max-width: 1180px) {
  .sectors { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; }
  .sectors__tab { padding-block: 14px; padding-inline-start: 26px; }
  .sectors__tab::after { top: 14px; bottom: 14px; }
  .sectors__d > span > span { padding-top: 8px; font-size: 16px; }
  .sectors__tg { gap: 7px; padding: 6px 12px 6px 10px; font-size: 13px; }
}
/* Telefonda adlar yatay kaydırılan çiplere dönüşür, etkin sektörün adı ve açıklaması sahnenin altında yazar. */
@media (max-width: 860px) {
  .sectors { grid-template-columns: 1fr; gap: 16px; }
  .sectors__tabs { flex-direction: row; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .sectors__tabs::-webkit-scrollbar { display: none; }
  .sectors__tabs::before { display: none; }
  .sectors__tab { flex: none; width: auto; overflow: hidden; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 50px; background: var(--card); scroll-snap-align: start; }
  .sectors__tab::after { inset-inline: 18px; top: auto; bottom: 6px; width: auto; height: 1.5px; transform: scaleX(var(--p, 0)); transform-origin: left; }
  .sectors__tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: var(--blue-soft); }
  .sectors__t { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  .sectors__d { display: none; }
  .sectors__stage { border-radius: 20px; }
  .sectors__m { display: block; }
  .sectors__m h3 { margin: 6px 0; font-size: 22px; letter-spacing: -.02em; }
  .sectors__m p { font-size: 16px; }
}
@media (max-width: 600px) { .sectors__tg { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sectors svg .ln { stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .sectors svg .fd, .sectors__tg { opacity: 1; }
}

/* Teknolojiler */

.brands-end { padding-bottom: var(--space); }

/* ---------- Açılış slaytı: logo lacivertinde bir plaka ----------
   Sayfanın kenarlarından içeri çekilmiş tek parça bir pano. Gece renkleri yalnızca plakanın içinde geçerli,
   böylece düğmeler, başlık ve noktalı çizim kendiliğinden açık renge döner. Altta sekmeler bir içindekiler satırıdır. */
@property --tone { syntax: '<color>'; inherits: true; initial-value: #1673d1; }
.hero {
  --bg: #0b2559; --soft: rgba(238, 243, 255, .07); --navy: #f2f6ff; --navy-2: #c9d8ff; --blue: #7db6ff;
  --text: #aab9d8; --muted: #7d8fb6; --line: rgba(220, 232, 255, .12); --line-2: rgba(220, 232, 255, .22);
  --card: rgba(238, 243, 255, .06); --on-navy: #0b2559;
  --lit: color-mix(in srgb, var(--tone) 58%, #fff);
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: max(calc(100svh - 24px), 760px); margin: 12px 12px 0; padding: calc(132px + var(--drop, 0px)) 0 0; border-radius: 32px;
  background: #0b2559; color: var(--text);
}
[data-theme="gece"] .hero { --bg: #0f1d3d; background: #0f1d3d; box-shadow: inset 0 0 0 1px rgba(200, 216, 255, .09); }
/* Zemin: üstte derin lacivert, sağ altta slayt renginde çok hafif bir ışık; üstünde çizimin ızgarasını sürdüren ince nokta dokusu.
   --tone anında değişir (geçişi tüm alt ağacın stilini her karede yeniden hesaplatırdı); ışığın rengi yalnızca bu katmanın
   color özelliğiyle yumuşakça geçer, degrade onu currentColor ile kullanır. */
.hero::before, .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before {
  color: color-mix(in srgb, var(--tone) 30%, transparent); transition: color 1s var(--ease);
  background:
    radial-gradient(60% 70% at 88% 92%, currentColor, transparent 70%),
    radial-gradient(50% 60% at 4% 0%, rgba(125, 182, 255, .10), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(4, 12, 32, .35));
}
.hero::after {
  background-image: radial-gradient(circle, rgba(220, 232, 255, .16) 1px, transparent 1.4px);
  background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 48%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 72% 48%, #000, transparent 75%);
}
[dir="rtl"] .hero::after { -webkit-mask-image: radial-gradient(70% 80% at 28% 48%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 28% 48%, #000, transparent 75%); }
.hero .wrap { position: relative; z-index: 1; }
.hero__inner { display: flex; flex-direction: column; }
.hero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 3vw, 40px); align-items: center; --pb: clamp(32px, 4vw, 56px); padding-bottom: var(--pb); }
.hero .grad { color: var(--lit); transition: color 1s var(--ease); }

/* Metinler aynı hücrede üst üste durur; yükseklik en uzun slayta göre sabitlenir, sayfa zıplamaz. */
.hs-texts { display: grid; align-self: center; }
.hs-text { grid-area: 1 / 1; max-width: 600px; visibility: hidden; opacity: 0; transition: opacity .5s var(--ease), visibility 0s .5s; }
.hs-text.is-active { visibility: visible; opacity: 1; transition: opacity .5s var(--ease) .1s, visibility 0s; }
/* Üst başlık: hap yerine sol kenarında slayt renginde kısa bir çizgi olan sade satır */
.hero .pill { gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; font: 500 15px/1.4 var(--sans); color: var(--navy-2); }
.hero .pill::before { content: ''; width: 22px; height: 2px; flex: none; border-radius: 2px; background: var(--lit); transition: background-color 1s var(--ease); }
.hero__title { margin-top: 22px; font-size: clamp(38px, 4.6vw, 68px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.hero__lead { margin-top: 24px; max-width: 520px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.7; color: var(--text); }
.hs-text .actions { margin-top: 36px; }
.hero .btn:hover { background: var(--lit); color: #0b2559; }
.hero .btn:hover .btn__ic { color: #0b2559; }
.hero .btn--outline { color: var(--navy); }
.hero .btn--outline:hover { background: var(--navy); color: #0b2559; border-color: transparent; }
.hero .btn--outline:hover .btn__ic { background: #0b2559; color: #fff; }
.hs-text .pill, .hs-text .hero__lead, .hs-text .actions { transform: translateY(14px); opacity: 0; transition: transform .7s var(--ease), opacity .6s var(--ease); }
.hs-text.is-active .pill, .hs-text.is-active .hero__lead, .hs-text.is-active .actions { transform: none; opacity: 1; }
.hs-text.is-active .hero__lead { transition-delay: .35s; }
.hs-text.is-active .actions { transition-delay: .45s; }
/* Başlık kelime kelime maskeden yükselir (main.js kelimeleri .w ile sarar). */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease); transition-delay: calc(var(--wi) * 45ms + .1s); }
.hs-text.is-active .hero__title .w > span { transform: none; }

/* Çizim sahnesi: noktalı tuval, kenarları plakaya karışır. Ekran boyunu kullanır, metnin altına taşıp sekme çizgisine
   kadar iner ve dış kenarda plakaya doğru biraz dışarı uzanır. Üstten metin satırıyla aynı yerden başlar (tuvaldeki 01 / 04
   künyesi js/hero-doodle.js'te üst başlık satırının hizasına oturur). */
.hs-stage {
  position: relative; align-self: stretch; min-height: clamp(480px, calc(100svh - 250px - var(--drop, 0px)), 780px);
  --bleed: max(var(--gutter), calc((100vw - min(100vw, var(--max))) / 2 + var(--gutter) - 40px));
  width: calc(100% + var(--bleed)); margin-inline-end: calc(var(--bleed) * -1); margin-bottom: calc(var(--pb) * -1);
}
.doodle { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Sekmeler: plakanın tabanında, ince çizgilerle bölünmüş bir içindekiler satırı.
   Etkin hücrenin üst kenarında süre çizgisi dolar; numara ve başlık üst üste durur. */
.hs-nav { position: relative; display: flex; align-items: stretch; margin: 0 calc(var(--gutter) * -1); }
/* Üst çizgi plakanın iki kenarına kadar uzanır */
.hs-nav::before { content: ''; position: absolute; top: 0; left: -100vw; right: -100vw; height: 1px; background: var(--line); }
.hs-tabs { flex: 1; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hs-tabs::-webkit-scrollbar { display: none; }
.hs-tab {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px var(--gutter) 26px; border: 0; border-inline-end: 1px solid var(--line); background: none; cursor: pointer; text-align: start;
  font: 500 15px/1.35 var(--sans); color: var(--muted); transition: color .3s, background-color .3s;
}
.hs-tab__num { font: 600 13px/1 var(--head); letter-spacing: .02em; color: var(--muted); transition: color .3s; }
.hs-tab__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-tab:hover { color: var(--navy); background: rgba(238, 243, 255, .03); }
.hs-tab.is-active { color: var(--navy); }
.hs-tab.is-active .hs-tab__num { color: var(--lit); }
.hs-tab:focus-visible { outline-offset: -4px; }
.hs-tab__bar { position: absolute; inset-inline: 0; top: -1px; height: 2px; opacity: 0; }
.hs-tab__bar::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--lit); transition: background-color 1s var(--ease); }
[dir="rtl"] .hs-tab__bar::after { transform-origin: right; }
.hs-tab.is-active .hs-tab__bar { opacity: 1; }
.hs-tab.is-active .hs-tab__bar::after { transform: scaleX(1); }
.hero.is-playing .hs-tab.is-active .hs-tab__bar::after { transform: scaleX(0); animation: hs-progress var(--hs-ms, 7000ms) linear forwards; }
.hero.is-held .hs-tab.is-active .hs-tab__bar::after { animation-play-state: paused; }
@keyframes hs-progress { to { transform: scaleX(1); } }
.hs-pause { position: relative; flex: none; width: 88px; border: 0; background: none; cursor: pointer; transition: background-color .3s; }
.hs-pause:hover { background: rgba(238, 243, 255, .05); }
.hs-pause:focus-visible { outline-offset: -4px; }
.hs-pause span, .hs-pause span::before { position: absolute; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--navy); }
.hs-pause span { left: 50%; margin-left: -5px; }
.hs-pause span::before { content: ''; top: 0; margin-top: 0; left: 7px; }
.hs-pause.is-paused span { margin: -8px 0 0 -5px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--navy); }
.hs-pause.is-paused span::before { display: none; }

/* Dar ekranda ve dik tablette sahne metnin altına iner; yatay tablette (iPad 1024–1080) yan yana kalır. */
@media (max-width: 900px), (max-width: 1080px) and (orientation: portrait) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 16px; }
  .hs-text { max-width: 720px; }
  .hs-stage { align-self: auto; height: auto; min-height: 0; width: 100%; margin: 0; aspect-ratio: 16 / 10; max-height: 460px; }
}
/* Alçak yatay ekranlarda (MacBook, 13-14" dizüstü: görünür alan 650-880 px) açılış tek karede kalır: 760 px tabanı kalkar,
   başlık ve boşluklar ekran boyuyla birlikte küçülür; sekme satırı ilk ekranda görünür. */
@media (min-width: 901px) and (max-height: 880px) and (orientation: landscape) {
  .hero { min-height: calc(100svh - 24px); padding-top: calc(112px + var(--drop, 0px)); }
  .hero__grid { --pb: clamp(18px, 3.4svh, 32px); }
  .hero__title { margin-top: 14px; font-size: clamp(32px, min(4.6vw, 7.8svh), 68px); }
  .hero__lead { margin-top: 16px; font-size: clamp(15px, 2.4svh, 18px); line-height: 1.65; }
  .hs-text .actions { margin-top: clamp(18px, 3svh, 28px); }
  .hs-stage { min-height: clamp(300px, calc(100svh - 270px), 780px); }
  .hs-tab { gap: 6px; padding: clamp(10px, 2svh, 18px) var(--gutter) clamp(12px, 2.4svh, 20px); }
}
@media (max-width: 640px) {
  .hero { margin: 8px 8px 0; padding-top: calc(112px + var(--drop, 0px)); border-radius: 24px; }
  .hero__title { font-size: clamp(30px, 8.6vw, 44px); }
  .hs-stage { aspect-ratio: 1 / .82; }
  /* Dar ekranda yalnızca etkin sekmenin başlığı görünür; diğerleri numarasıyla kalır */
  .hs-tab { flex: none; padding: 18px 18px 20px; }
  .hs-tab.is-active { flex: 1 1 auto; }
  .hs-tab:not(.is-active) .hs-tab__label { display: none; }
  .hs-tab.is-active .hs-tab__label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hs-pause { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .hero.is-playing .hs-tab.is-active .hs-tab__bar::after { animation: none; transform: scaleX(1); } }

/* ---------- İç sayfa açılış arka planı: akan dalgalar ve kumlu doku ---------- */
.hbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
/* SVG iki periyot genişliğinde; görünen pencere ilk yarısıdır. Her dalga kendi hızında bir periyot sola kayar. */
.hbg__waves { position: absolute; top: 0; left: 0; width: 200%; height: 100%; min-width: 2400px; }
.hbg__wave { transform-box: fill-box; animation: hbg-drift 48s linear infinite; }
.hbg__wave--2 { animation-duration: 64s; animation-direction: reverse; }
@keyframes hbg-drift { to { transform: translateX(-50%); } }
.hbg__s1a { stop-color: var(--tone); stop-opacity: .08; }
.hbg__s1b { stop-color: var(--tone); stop-opacity: 0; }
.hbg__s2a { stop-color: #8ab8ff; stop-opacity: .13; }
.hbg__s2b { stop-color: var(--tone); stop-opacity: 0; }
[data-theme="gece"] .hbg__s2a { stop-color: var(--tone); }
.hbg__s1a, .hbg__s1b, .hbg__s2b { transition: stop-color 1s var(--ease); }
/* Kağıt dokusu: ışık alan ince kabartma ve hafif yatay lifler; dalgaların ve renklerin üstünde, çok hafif */
.hbg::after {
  content: ''; position: absolute; inset: 0; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.1'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .18' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 320px, 480px;
}
[data-theme="gece"] .hbg::after { mix-blend-mode: soft-light; opacity: .25; }
@media (prefers-reduced-motion: reduce) { .hbg__wave { animation: none; } }