/* Evalaris tanıtım sitesi — 3. sürüm
   Tek yazı ailesi (Inter), 8pt boşluk sistemi, en fazla 1200 px içerik, gerçek ürün ekranları.
   Renk: beyaz / çok açık gri zemin, lacivert #1F3A5F–#112d4f, amber #F2B24B yalnız küçük vurgu. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/inter-tr-ext.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+011E-011F, U+0130, U+015E-015F, U+20BA;
}

:root {
  /* renk */
  --l900: #0c2340;
  --l800: #112d4f;
  --l700: #1F3A5F;
  --l600: #2c4c75;
  --l100: #e8eef6;
  --l50:  #f4f7fb;
  --amber: #F2B24B;
  --metin: #0f1b2d;
  --metin-2: #3d4b5f;   /* beyaz üstünde 8,9:1 */
  --metin-3: #5a6879;   /* beyaz üstünde 5,6:1 */
  --cizgi: #e2e7ee;
  --cizgi-2: #d3dae4;
  --zemin: #ffffff;
  --zemin-2: #f6f8fb;
  --odak: #2a63b8;
  /* 8pt boşluk */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  /* yazı ölçeği */
  --f-xs: 0.8125rem;  /* 13 */
  --f-sm: 0.875rem;   /* 14 */
  --f-md: 1rem;       /* 16 */
  --f-lg: 1.125rem;   /* 18 */
  --f-xl: 1.25rem;    /* 20 */
  --f-2xl: 1.5rem;    /* 24 */
  --f-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.625rem);
  --f-h1: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
  --kap: 1200px;
  --r: 8px;
  --r-lg: 12px;
  --golge-1: 0 1px 2px rgba(12, 35, 64, .06), 0 1px 1px rgba(12, 35, 64, .04);
  --golge-ekran: 0 1px 2px rgba(12, 35, 64, .06), 0 8px 24px -8px rgba(12, 35, 64, .14), 0 32px 64px -24px rgba(12, 35, 64, .22);
  --ust-yuk: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yuk) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  font-size: var(--f-md);
  line-height: 1.6;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--l700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--l900); }
a[href^="mailto"] { overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0; color: var(--metin); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; border-radius: 4px; }
.gizli { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ik--k { width: 16px; height: 16px; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--s4)); margin-inline: auto; padding-inline: var(--s4); }
@media (max-width: 640px) { .kap { padding-inline: var(--s3); } }

.atla { position: absolute; left: var(--s2); top: -100px; z-index: 100; background: var(--l800); color: #fff; padding: var(--s1) var(--s2); border-radius: var(--r); }
.atla:focus { top: var(--s2); color: #fff; }

/* ── Düğmeler ─────────────────────────────────────────────── */
.dug {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 44px; padding: 0 20px; border-radius: var(--r);
  font-size: var(--f-md); font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
}
.dug--dolu { background: var(--l700); color: #fff; box-shadow: var(--golge-1); }
.dug--dolu:hover { background: var(--l800); color: #fff; }
.dug--cizgi { background: #fff; color: var(--l800); border-color: var(--cizgi-2); }
.dug--cizgi:hover { border-color: var(--l700); color: var(--l900); }
.dug--kucuk { min-height: 40px; padding: 0 16px; font-size: var(--f-sm); }
.dug--acik { background: #fff; color: var(--l900); }
.dug--acik:hover { background: var(--l100); color: var(--l900); }
.dug--seffaf { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.dug--seffaf:hover { border-color: #fff; color: #fff; }
.dug .ik { width: 18px; height: 18px; }
.bag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.bag:hover { text-decoration: underline; }
.bag .ik { width: 16px; height: 16px; transition: transform .2s; }
.bag:hover .ik { transform: translateX(2px); }

/* ── Üst bar ──────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic { position: relative; display: flex; align-items: center; height: var(--ust-yuk); gap: var(--s4); }
.ust__logo { display: block; flex: none; }
.ust__logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; flex: 1; }
.nav__liste { display: flex; align-items: center; gap: 4px; }
.nav__oge { position: static; }
.nav__dug, .nav__bag {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  font-size: var(--f-sm); font-weight: 500; color: var(--metin-2); background: none; border: 0;
  border-radius: 6px; cursor: pointer; text-decoration: none;
}
.nav__dug:hover, .nav__bag:hover, .nav__dug[aria-expanded="true"] { color: var(--metin); background: var(--zemin-2); }
.nav__dug .ik { width: 16px; height: 16px; transition: transform .2s; }
.nav__dug[aria-expanded="true"] .ik { transform: rotate(180deg); }
.nav__sag { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.nav__giris { font-size: var(--f-sm); font-weight: 600; color: var(--l700); text-decoration: none; padding: 8px 4px; }
.nav__giris:hover { text-decoration: underline; }
.ust__ac { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff; cursor: pointer; }
.ust__ac .ik { width: 22px; height: 22px; }

/* Açılır paneller (masaüstü) */
.panel {
  position: absolute; left: 0; right: 0; top: calc(var(--ust-yuk) - 1px);
  background: #fff; border: 1px solid var(--cizgi); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 24px 48px -16px rgba(12,35,64,.18);
  padding: var(--s4);
}
.js .panel[hidden] { display: none; }
.panel:not(.panel--dar) { left: var(--s4); right: var(--s4); }
.panel--dar { left: auto; right: auto; width: 320px; padding: var(--s1); margin-left: -12px; }
.mega { display: grid; grid-template-columns: 1fr 1fr 300px; gap: var(--s1) var(--s3); }
.mega__baslik { grid-column: 1 / 3; font-size: var(--f-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); padding: 0 12px var(--s1); }
.mega__oge { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--r); text-decoration: none; color: var(--metin-2); }
.mega__oge:hover { background: var(--zemin-2); color: var(--metin); }
.mega__oge img { height: 22px; width: auto; }
.mega__oge span { font-size: var(--f-sm); line-height: 1.45; }
.mega__yan { grid-column: 3; grid-row: 1 / span 5; background: var(--l50); border: 1px solid var(--cizgi); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: 12px; }
.mega__yan h3 { font-size: var(--f-md); }
.mega__yan p { font-size: var(--f-sm); color: var(--metin-2); }
.mega__yan .bag { margin-top: auto; font-size: var(--f-sm); }
.alt-liste a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--metin); }
.alt-liste a:hover { background: var(--zemin-2); }
.alt-liste strong { font-size: var(--f-sm); font-weight: 600; }
.alt-liste span { font-size: var(--f-xs); color: var(--metin-3); line-height: 1.45; }

/* ── Bölüm ortakları ──────────────────────────────────────── */
.bolum { padding-block: var(--s16); }
.bolum--gri { background: var(--zemin-2); border-block: 1px solid var(--cizgi); }
.ust-yazi { display: inline-flex; align-items: center; gap: 10px; font-size: var(--f-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--l700); }
.ust-yazi::before { content: ""; width: 16px; height: 2px; background: var(--amber); border-radius: 1px; }
.bolum__bas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s8); align-items: end; margin-bottom: var(--s10); }
.bolum__bas h2 { font-size: var(--f-h2); line-height: 1.12; letter-spacing: -0.025em; margin-top: var(--s2); max-width: 18ch; }
.bolum__bas p { font-size: var(--f-lg); color: var(--metin-2); max-width: 52ch; }
.bolum__bas--tek { grid-template-columns: minmax(0, 1fr); }
.bolum__bas--tek h2 { max-width: 22ch; }

/* ── Ekran çerçevesi (gerçek ürün görüntüsü) ──────────────── */
.ekran { margin: 0; background: #fff; border: 1px solid var(--cizgi-2); border-radius: var(--r-lg); box-shadow: var(--golge-ekran); overflow: hidden; }
.ekran__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); }
.ekran__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd6e0; }
.ekran__bar span { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ekran img { width: 100%; }
.ekran-not { margin-top: var(--s2); font-size: var(--f-xs); color: var(--metin-3); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { position: relative; padding-top: var(--s12); overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--l50); border-top: 1px solid var(--cizgi); z-index: -1; }
.hero__ust { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s8); align-items: end; }
.hero h1 { font-size: var(--f-h1); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; margin-top: var(--s3); max-width: 13ch; }
.hero__sag p { font-size: var(--f-lg); line-height: 1.6; color: var(--metin-2); max-width: 46ch; }
.hero__dug { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero__sahne { position: relative; margin-top: var(--s10); padding-bottom: var(--s16); }
.hero__ana { width: 88%; }
.hero__ikinci { position: absolute; right: 0; bottom: var(--s10); width: 40%; }
.hero__alt { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s3); font-size: var(--f-sm); color: var(--metin-3); }
.hero__alt span { display: inline-flex; align-items: center; gap: 6px; }
.hero__alt .ik { width: 16px; height: 16px; color: var(--l700); }

/* ── Güven şeridi ─────────────────────────────────────────── */
.guven { border-bottom: 1px solid var(--cizgi); background: #fff; }
.guven__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guven__oge { display: flex; gap: 14px; padding: var(--s5) var(--s3); border-left: 1px solid var(--cizgi); }
.guven__oge:first-child { border-left: 0; padding-left: 0; }
.guven__oge .ik { width: 22px; height: 22px; color: var(--l700); margin-top: 2px; }
.guven__oge strong { display: block; font-size: var(--f-md); font-weight: 600; line-height: 1.35; }
.guven__oge span { display: block; margin-top: 4px; font-size: var(--f-sm); color: var(--metin-3); line-height: 1.5; }

/* ── Modül vitrini (sekmeler) ─────────────────────────────── */
.vitrin { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.vitrin__liste { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--ust-yuk) + var(--s4)); }
.vitrin__sekme {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%;
  padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r); background: none;
  text-align: left; cursor: pointer; text-decoration: none; color: var(--metin-3);
  transition: background-color .2s, border-color .2s;
}
.vitrin__sekme img { height: 20px; width: auto; opacity: .72; transition: opacity .2s; }
.vitrin__sekme span { font-size: var(--f-sm); line-height: 1.4; }
.vitrin__sekme:hover { background: #fff; color: var(--metin-2); }
.vitrin__sekme:hover img { opacity: 1; }
.vitrin__sekme[aria-selected="true"] { background: #fff; border-color: var(--cizgi-2); box-shadow: var(--golge-1); color: var(--metin-2); }
.vitrin__sekme[aria-selected="true"] img { opacity: 1; }
.vitrin__panel + .vitrin__panel { margin-top: var(--s10); }
.js .vitrin__panel + .vitrin__panel { margin-top: 0; }
.js .vitrin__panel[hidden] { display: none; }
.vitrin__metin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s6); margin-top: var(--s5); }
.vitrin__metin h3 { font-size: var(--f-2xl); line-height: 1.25; letter-spacing: -0.02em; }
.vitrin__metin p { margin-top: 12px; color: var(--metin-2); }
.madde li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--cizgi); font-size: var(--f-sm); color: var(--metin-2); line-height: 1.5; }
.madde li:first-child { border-top: 0; padding-top: 0; }
.madde .ik { width: 18px; height: 18px; color: var(--l700); margin-top: 1px; }
.bagli { margin-top: var(--s3); font-size: var(--f-xs); color: var(--metin-3); }
.bagli strong { font-weight: 600; color: var(--metin-2); letter-spacing: .02em; }

/* ── Özellik hikâyeleri ───────────────────────────────────── */
.hikaye { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s10); align-items: center; }
.hikaye + .hikaye { margin-top: var(--s16); }
.hikaye--ters { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hikaye--ters .hikaye__metin { order: 2; }
.hikaye__no { font-size: var(--f-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--metin-3); }
.hikaye h3 { margin-top: var(--s2); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.18; letter-spacing: -0.025em; }
.hikaye__metin > p { margin-top: var(--s2); font-size: var(--f-lg); color: var(--metin-2); }
.karsi { margin-top: var(--s4); border-top: 1px solid var(--cizgi); }
.karsi div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--cizgi); font-size: var(--f-sm); line-height: 1.5; }
.karsi dt { font-weight: 600; color: var(--metin-3); }
.karsi dd { margin: 0; color: var(--metin-2); }
.karsi div:last-child dt { color: var(--l700); }
.karsi div:last-child dd { color: var(--metin); }
.hikaye__ekran--dar { max-width: 520px; justify-self: center; width: 100%; }

.izgara-bas { margin-top: var(--s16); padding-top: var(--s10); border-top: 1px solid var(--cizgi); }
.izgara-bas h3 { font-size: var(--f-2xl); letter-spacing: -0.02em; }
.izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--s5); background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.izgara__oge { background: #fff; padding: var(--s4) var(--s4) var(--s4); display: flex; flex-direction: column; gap: 12px; }
.izgara__oge .ik { width: 22px; height: 22px; color: var(--l700); }
.izgara__oge h4 { font-size: var(--f-md); line-height: 1.35; }
.izgara__oge p { font-size: var(--f-sm); color: var(--metin-2); line-height: 1.55; }
.izgara__oge p b { font-weight: 600; color: var(--metin-3); }
.izgara__oge p + p b { color: var(--l700); }
.dipnot { margin-top: var(--s3); font-size: var(--f-sm); color: var(--metin-3); max-width: 72ch; }

/* ── Çözümler (roller) ───────────────────────────────────── */
.sektor { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s6); }
.sektor li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cizgi-2); border-radius: 999px; font-size: var(--f-sm); color: var(--metin-2); background: #fff; }
.sektor .ik { width: 16px; height: 16px; color: var(--l700); }
.roller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.rol { display: flex; flex-direction: column; gap: 12px; padding: var(--s4); background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-lg); scroll-margin-top: calc(var(--ust-yuk) + 24px); }
.rol__ik { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--l50); border: 1px solid var(--cizgi); color: var(--l700); }
.rol h3 { font-size: var(--f-lg); margin-top: 4px; }
.rol p { font-size: var(--f-sm); color: var(--metin-2); line-height: 1.6; }
.rol__ekran { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--cizgi); font-size: var(--f-xs); color: var(--metin-3); line-height: 1.5; }
.rol__ekran strong { display: block; color: var(--metin-2); font-weight: 600; margin-bottom: 2px; }

/* ── Uygulama süreci ─────────────────────────────────────── */
.adimlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); counter-reset: adim; }
.adim { position: relative; padding-top: var(--s4); border-top: 1px solid var(--cizgi-2); }
.adim::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 2px; background: var(--amber); }
.adim__no { font-size: var(--f-sm); font-weight: 600; color: var(--l700); font-variant-numeric: tabular-nums; }
.adim h3 { margin-top: var(--s2); font-size: var(--f-lg); }
.adim p { margin-top: var(--s1); font-size: var(--f-sm); color: var(--metin-2); line-height: 1.6; }

/* ── Güvenlik (koyu bant) ────────────────────────────────── */
.koyu { background: var(--l800); color: #fff; }
.koyu .ust-yazi { color: #d6e2f1; }
.koyu .bolum__bas h2 { color: #fff; }
.koyu .bolum__bas p { color: #c3d1e3; }
.guvenlik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; }
.guvenlik__oge { background: var(--l800); padding: var(--s4); }
.guvenlik__oge .ik { width: 22px; height: 22px; color: #a9c1e0; }
.guvenlik__oge h3 { margin-top: var(--s2); font-size: var(--f-md); color: #fff; }
.guvenlik__oge p { margin-top: var(--s1); font-size: var(--f-sm); color: #c3d1e3; line-height: 1.6; }

/* ── SSS ──────────────────────────────────────────────────── */
.sss { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
.sss__bas h2 { font-size: var(--f-h2); line-height: 1.12; letter-spacing: -0.025em; margin-top: var(--s2); }
.sss__bas p { margin-top: var(--s2); color: var(--metin-2); }
.sss__liste { border-top: 1px solid var(--cizgi-2); }
.sss details { border-bottom: 1px solid var(--cizgi-2); }
.sss summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 22px 0; cursor: pointer; list-style: none; font-size: var(--f-lg); font-weight: 600; letter-spacing: -0.01em; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary .ik { width: 20px; height: 20px; color: var(--metin-3); transition: transform .2s; }
.sss details[open] summary .ik { transform: rotate(45deg); }
.sss details p { padding: 0 var(--s6) 24px 0; color: var(--metin-2); max-width: 68ch; }

/* ── Kapanış CTA ─────────────────────────────────────────── */
.cta { padding-block: var(--s12); }
.cta__kutu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s8); align-items: center; padding: var(--s10) var(--s8); background: var(--l50); border: 1px solid var(--cizgi); border-radius: 16px; }
.cta h2 { font-size: var(--f-h2); line-height: 1.12; letter-spacing: -0.025em; max-width: 20ch; }
.cta p { margin-top: var(--s2); color: var(--metin-2); max-width: 52ch; }
.cta__sag { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta__sag .dug { min-width: 220px; }
.cta__eposta { font-size: var(--f-sm); color: var(--metin-3); }

/* ── Alt bilgi ───────────────────────────────────────────── */
.alt { background: var(--l900); color: #c3d1e3; padding-top: var(--s12); }
.alt__ust { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)) minmax(0, 3fr); gap: var(--s5); padding-bottom: var(--s10); }
.alt__marka img { height: 28px; width: auto; }
.alt__marka p { margin-top: var(--s3); font-size: var(--f-sm); line-height: 1.6; max-width: 36ch; }
.alt h2 { font-size: var(--f-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: var(--s2); }
.alt li + li { margin-top: 10px; }
.alt a { color: #c3d1e3; text-decoration: none; font-size: var(--f-sm); }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt__alt { display: flex; justify-content: space-between; gap: var(--s2); padding-block: var(--s3); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--f-xs); color: #a9bad0; }

/* ── Hareket (ölçülü belirme) ───────────────────────────── */
.js:not(.statik) .belir { opacity: 0; transform: translateY(12px); transition: opacity .45s ease-out, transform .45s ease-out; }
.js:not(.statik) .belir.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .belir { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ── Duyarlı ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mega { grid-template-columns: 1fr 1fr; }
  .mega__yan { display: none; }
  .roller { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt__ust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alt__marka { grid-column: 1 / -1; }
  .vitrin { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 960px) {
  :root { --ust-yuk: 60px; }
  .ust__ac { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: var(--ust-yuk); flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--cizgi); box-shadow: 0 24px 48px -16px rgba(12,35,64,.18); padding: var(--s1) var(--s3) var(--s3); max-height: calc(100vh - var(--ust-yuk)); overflow-y: auto; }
  .nav.acik { display: flex; }
  .no-js .nav { display: flex; position: static; box-shadow: none; border: 0; padding: 0; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__oge { border-bottom: 1px solid var(--cizgi); }
  .nav__dug, .nav__bag { width: 100%; justify-content: space-between; height: 52px; padding: 0 4px; font-size: var(--f-md); color: var(--metin); }
  .nav__dug:hover, .nav__dug[aria-expanded="true"] { background: none; }
  .panel, .panel--dar { position: static; width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 var(--s2); }
  .mega { grid-template-columns: 1fr; gap: 0; }
  .mega__baslik { display: none; }
  .mega__oge { padding: 10px 4px; }
  .alt-liste a { padding: 10px 4px; }
  .nav__sag { flex-direction: column; align-items: stretch; margin: var(--s3) 0 0; gap: 12px; }
  .nav__giris { text-align: center; padding: 12px; border: 1px solid var(--cizgi-2); border-radius: var(--r); }
  .hero__ust, .bolum__bas, .cta__kutu, .sss { grid-template-columns: minmax(0, 1fr); }
  .bolum__bas { margin-bottom: var(--s8); }
  .hero__ana { width: 100%; }
  .hero__ikinci { position: relative; right: auto; bottom: auto; width: 72%; margin: calc(-1 * var(--s10)) 0 0 auto; }
  .hero__sahne { padding-bottom: var(--s10); }
  .guven__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guven__oge { border-left: 0; padding-left: 0; border-top: 1px solid var(--cizgi); }
  .guven__oge:nth-child(-n+2) { border-top: 0; }
  .guven__oge:nth-child(2n) { padding-left: var(--s3); border-left: 1px solid var(--cizgi); }
  .vitrin { grid-template-columns: minmax(0, 1fr); }
  .vitrin__liste { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--s1); padding-bottom: 4px; scrollbar-width: thin; }
  .vitrin__sekme { width: auto; flex: none; padding: 10px 14px; }
  .vitrin__sekme span { display: none; }
  .vitrin__metin { grid-template-columns: minmax(0, 1fr); }
  .hikaye { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .hikaye--ters { grid-template-columns: minmax(0, 1fr); }
  .hikaye--ters .hikaye__metin { order: 0; }
  .hikaye + .hikaye { margin-top: var(--s12); }
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .guvenlik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__kutu { padding: var(--s6) var(--s4); }
}
@media (max-width: 640px) {
  .bolum { padding-block: var(--s10); }
  .hero { padding-top: var(--s8); }
  .hero__dug .dug { flex: 1 1 100%; }
  .hero__ikinci { width: 84%; margin-top: calc(-1 * var(--s5)); }
  .guven__liste, .roller, .izgara, .adimlar, .guvenlik { grid-template-columns: minmax(0, 1fr); }
  .guven__oge, .guven__oge:nth-child(2n) { padding: var(--s3) 0; border-left: 0; border-top: 1px solid var(--cizgi); }
  .guven__oge:first-child { border-top: 0; }
  .guven__oge:nth-child(2) { border-top: 1px solid var(--cizgi); }
  .karsi div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sss summary { font-size: var(--f-md); }
  .sss details p { padding-right: 0; }
  .alt__ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt__alt { flex-direction: column; }
  .cta__sag .dug { width: 100%; }
  .ekran__bar { height: 26px; }
}