/* ==========================================================================
   Duru Yazılım — ön yüz stilleri
   Tek dosya, framework yok. Renk ve boşluklar değişkenlerde; koyu bantlar
   (.koyu) kendi değişkenlerini ezer, bileşenler iki zeminde de çalışır.
   Kontrast ölçüldü: birincil düğme 4.8:1, bağlantı 5.8:1, soluk metin 4.7:1.
   ========================================================================== */

/* --- Yazı tipi (Inter, yerel; Türkçe harfler 3 KB'lık ayrı alt kümede) ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../font/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-011D, U+0120-012F, U+0132-0151, U+0154-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../font/inter-tr.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA; }
@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; }

:root {
  --marka: #009fe2;
  --marka-acik: #38bdf8;
  --marka-koyu: #0277bd;
  --marka-koyu-2: #036aa8;
  --marka-zemin: #e8f6fd;

  --murekkep: #0b1626;
  --metin: #334155;
  --soluk: #5a6a7e;
  --cizgi: #e3e8ef;
  --cizgi-2: #eef2f6;
  --zemin: #ffffff;
  --zemin-2: #f6f8fb;
  --baglanti: #036aa8;

  --koyu-zemin: #07111f;
  --koyu-zemin-2: #0b1a2e;
  --koyu-kart: rgba(255, 255, 255, .04);
  --koyu-cizgi: rgba(255, 255, 255, .09);

  --basari: #0e8a5f; --basari-zemin: #e8f6ef;
  --hata: #c2362b;   --hata-zemin: #fdeeec;
  --uyari: #a35b00;  --uyari-zemin: #fff4e1;

  --yazi: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --kod: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fs-h1: clamp(2.15rem, 1.35rem + 3.3vw, 3.9rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.65rem);
  --fs-h3: clamp(1.12rem, 1.04rem + .35vw, 1.3rem);
  --fs-giris: clamp(1.05rem, 1rem + .3vw, 1.2rem);

  --kap: 1240px;
  --kenar: clamp(18px, 4vw, 32px);
  --bolum: clamp(72px, 9vw, 128px);
  --ust-yukseklik: 72px;

  --r-kucuk: 8px;
  --r: 14px;
  --r-buyuk: 22px;

  --golge-1: 0 1px 2px rgba(11, 22, 38, .05), 0 1px 1px rgba(11, 22, 38, .03);
  --golge-2: 0 12px 32px -12px rgba(11, 22, 38, .18), 0 2px 6px rgba(11, 22, 38, .04);
  --golge-3: 0 32px 64px -24px rgba(11, 22, 38, .35);

  --gecis: .2s cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* --- Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-yukseklik) + 24px); }
body {
  margin: 0; font-family: var(--yazi); font-size: 1.0625rem; line-height: 1.65; color: var(--metin);
  background: var(--zemin); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--baglanti); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marka-koyu-2); }
h1, h2, h3, h4 { color: var(--murekkep); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: #bfe8fb; color: var(--murekkep); }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }

.gizli-metin { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--murekkep); color: #fff; padding: 10px 16px; border-radius: var(--r-kucuk); font-weight: 600; text-decoration: none; transition: top var(--gecis); }
.atla:focus { top: 12px; color: #fff; }
.ikon { width: 1.25em; height: 1.25em; flex: none; }
.ikon-kume { position: absolute; width: 0; height: 0; overflow: hidden; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }
.kap--dar { max-width: calc(820px + 2 * var(--kenar)); }
.bolum { padding-block: var(--bolum); position: relative; }
.bolum--sik { padding-block: clamp(48px, 6vw, 80px); }
.bolum--gri { background: var(--zemin-2); }
/* Aynı zeminde art arda gelen bölümler arasında çift boşluk olmasın. */
.bolum:not(.bolum--gri):not(.koyu) + .bolum:not(.bolum--gri):not(.koyu) { padding-top: 0; }
.bolum--gri + .bolum--gri { padding-top: 0; }

/* --- Koyu bant ------------------------------------------------------------- */
.koyu {
  --murekkep: #ffffff; --metin: #a9b6c8; --soluk: #8c9aae; --cizgi: var(--koyu-cizgi); --cizgi-2: rgba(255,255,255,.06);
  --baglanti: var(--marka-acik); --zemin-2: rgba(255,255,255,.03);
  background: var(--koyu-zemin); color: var(--metin); color-scheme: dark; isolation: isolate;
}
/* :where → özgüllük 0,1,0: bileşenlerin kendi bağlantı rengi (footer, yol, çağrı) bunu ezer. */
.koyu :where(a:not(.dugme)) { color: var(--marka-acik); }
.izgara-desen { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.izgara-desen::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 100%);
}
.izgara-desen::after {
  content: ''; position: absolute; width: 900px; height: 600px; left: 58%; top: -260px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 159, 226, .32), rgba(0, 159, 226, 0)); filter: blur(10px);
}

/* --- Tipografi yardımcıları ----------------------------------------------- */
.ust-baslik {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--kod); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marka-koyu);
}
.ust-baslik::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .9; }
.koyu .ust-baslik { color: var(--marka-acik); }
.bolum-bas { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.bolum-bas--orta { margin-inline: auto; text-align: center; }
.bolum-bas--orta .ust-baslik { justify-content: center; }
.bolum-bas h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.bolum-bas p { font-size: var(--fs-giris); color: var(--soluk); margin: 0; }
.bolum-bas--yan { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; max-width: none; }
.bolum-bas--yan > div { max-width: 720px; }
.giris { font-size: var(--fs-giris); color: var(--soluk); }
.vurgu-metin { background: linear-gradient(92deg, #5cc8f5 0%, #009fe2 45%, #7aa7ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Düğmeler -------------------------------------------------------------- */
.dugme {
  --d-zemin: var(--marka-koyu); --d-metin: #fff; --d-cizgi: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid var(--d-cizgi); background: var(--d-zemin); color: var(--d-metin);
  font-size: .975rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.dugme .ikon { width: 18px; height: 18px; }
.dugme:hover { color: var(--d-metin); }
.dugme:active { transform: translateY(1px); }
.dugme--birincil:hover { --d-zemin: var(--marka-koyu-2); box-shadow: 0 8px 24px -10px rgba(2, 119, 189, .7); }
.dugme--ikincil { --d-zemin: #fff; --d-metin: var(--murekkep); --d-cizgi: var(--cizgi); box-shadow: var(--golge-1); }
.dugme--ikincil:hover { --d-cizgi: #c5d0dd; --d-metin: var(--murekkep); }
.dugme--cizgi { --d-zemin: transparent; --d-metin: var(--murekkep); --d-cizgi: var(--cizgi); }
.dugme--cizgi:hover { --d-cizgi: var(--murekkep); }
.koyu .dugme--birincil { --d-zemin: var(--marka); --d-metin: #04111f; }
.koyu .dugme--birincil:hover { --d-zemin: #2bb3ee; box-shadow: 0 10px 30px -10px rgba(0, 159, 226, .8); }
.koyu .dugme--ikincil, .koyu .dugme--cizgi { --d-zemin: rgba(255,255,255,.04); --d-metin: #fff; --d-cizgi: rgba(255,255,255,.18); box-shadow: none; }
.koyu .dugme--ikincil:hover, .koyu .dugme--cizgi:hover { --d-zemin: rgba(255,255,255,.08); --d-cizgi: rgba(255,255,255,.34); }
.dugme--kucuk { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.dugme--buyuk { min-height: 54px; padding: 14px 28px; font-size: 1.02rem; }
.dugme--tam { width: 100%; }
.dugme .dugme__ok { transition: transform var(--gecis); }
.dugme:hover .dugme__ok { transform: translateX(3px); }
.dugme--yukleniyor { pointer-events: none; opacity: .75; }
.dugme--yukleniyor::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.ok-baglanti { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--baglanti); }
.ok-baglanti .ikon { width: 17px; height: 17px; transition: transform var(--gecis); }
.ok-baglanti:hover .ikon { transform: translateX(3px); }

/* --- Üst bar (header) ------------------------------------------------------ */
.ust {
  position: sticky; top: 0; z-index: 100; height: var(--ust-yukseklik); color: #fff;
  background: rgba(7, 17, 31, .0); border-bottom: 1px solid transparent;
  transition: background var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.ust__ic { height: 100%; display: flex; align-items: center; gap: 28px; }
.ust--dolu, .ust:focus-within, .ust--menu-acik { background: rgba(7, 17, 31, .9); border-bottom-color: rgba(255,255,255,.08); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 40px; width: auto; }
.ust__menu { flex: 1; display: flex; justify-content: center; }
.ana-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ana-menu__oge { position: relative; }
.ana-menu__baglanti, .ana-menu__ac {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: none;
  color: rgba(255,255,255,.82); font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color var(--gecis), background var(--gecis);
}
.ana-menu__baglanti:hover, .ana-menu__ac:hover, .ana-menu__oge--acik > .ana-menu__ac { color: #fff; background: rgba(255,255,255,.07); }
.ana-menu__baglanti[aria-current="page"], .ana-menu__oge--aktif > .ana-menu__ac { color: #fff; }
.ana-menu__ac .ikon { width: 15px; height: 15px; transition: transform var(--gecis); opacity: .7; }
.ana-menu__oge--acik > .ana-menu__ac .ikon { transform: rotate(180deg); }
.ust__sag { display: flex; align-items: center; gap: 10px; flex: none; }
.ust__tel { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: .92rem; font-weight: 500; text-decoration: none; padding: 0 8px; }
.ust__tel:hover { color: #fff; }
.ust__tel .ikon { width: 16px; height: 16px; color: var(--marka-acik); }
.ust__dugme { color: #fff; width: 44px; height: 44px; display: none; place-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor: pointer; }
.ust__dugme .ikon { width: 22px; height: 22px; }

/* Açılır menü (mega) */
.acilir {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
  width: min(940px, calc(100vw - 48px)); background: #fff; color: var(--metin); border-radius: var(--r-buyuk); box-shadow: var(--golge-3), 0 0 0 1px rgba(11,22,38,.06);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 120;
}
.acilir::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.ana-menu__oge--acik > .acilir { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.acilir--dar { width: 300px; padding: 10px; }
.acilir--dar .acilir__oge { padding: 10px 12px; }
.mega { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.mega__gruplar { padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.mega__grup-ad { margin: 6px 12px 4px; font-family: var(--kod); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.acilir__oge { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: var(--murekkep); transition: background var(--gecis); }
.acilir__oge:hover { background: var(--zemin-2); color: var(--murekkep); }
.acilir__ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--marka-koyu); background: var(--marka-zemin); }
.acilir__ikon .ikon { width: 19px; height: 19px; }
.acilir__metin { display: grid; gap: 2px; min-width: 0; }
.acilir__metin strong { font-size: .94rem; font-weight: 600; line-height: 1.3; }
.acilir__metin small { font-size: .82rem; color: var(--soluk); line-height: 1.4; }
.mega__yan { background: linear-gradient(160deg, #0b1a2e, #07111f); color: #a9b6c8; padding: 26px 24px; border-radius: 0 var(--r-buyuk) var(--r-buyuk) 0; display: flex; flex-direction: column; gap: 12px; }
.mega__yan strong { color: #fff; font-size: 1.05rem; line-height: 1.35; }
.mega__yan p { font-size: .9rem; margin: 0; }
.mega__yan .ok-baglanti { color: var(--marka-acik); margin-top: auto; }
.mega__alt { grid-column: 1 / -1; border-top: 1px solid var(--cizgi); padding: 14px 34px; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--soluk); }

/* Çekmece (mobil menü) */
.cekmece { position: fixed; inset: 0; z-index: 200; }
.cekmece__perde { position: absolute; inset: 0; background: rgba(4, 10, 20, .55); opacity: 0; transition: opacity .25s ease; }
.cekmece__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--koyu-zemin); color: #cbd5e1;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); overflow-y: auto; overscroll-behavior: contain;
}
.cekmece--acik .cekmece__perde { opacity: 1; }
.cekmece--acik .cekmece__panel { transform: none; }
.cekmece__ust { display: flex; align-items: center; justify-content: space-between; height: var(--ust-yukseklik); padding: 0 var(--kenar); border-bottom: 1px solid var(--koyu-cizgi); flex: none; }
.cekmece__ust .logo img { height: 36px; }
.cekmece-menu { list-style: none; margin: 0; padding: 12px var(--kenar); }
.cekmece-menu > li { border-bottom: 1px solid var(--koyu-cizgi); }
.cekmece-menu a, .cekmece-menu__ac { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 2px; color: #fff; font-size: 1.08rem; font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.cekmece-menu__ac .ikon { width: 18px; height: 18px; transition: transform var(--gecis); color: #8c9aae; }
.cekmece-menu__ac[aria-expanded="true"] .ikon { transform: rotate(180deg); }
.cekmece-menu ul { list-style: none; margin: 0 0 12px; padding: 0; }
.cekmece-menu ul a { padding: 10px 2px 10px 14px; font-size: .98rem; color: #a9b6c8; border-left: 1px solid var(--koyu-cizgi); }
.cekmece-menu ul a small { display: block; font-size: .8rem; color: #7d8ba0; font-weight: 400; }
.cekmece__alt { margin-top: auto; padding: 20px var(--kenar) 28px; display: grid; gap: 10px; border-top: 1px solid var(--koyu-cizgi); }
.cekmece__iletisim { display: grid; gap: 6px; margin-bottom: 8px; font-size: .92rem; }
.cekmece__iletisim a { color: #cbd5e1; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.cekmece__iletisim .ikon { width: 16px; height: 16px; color: var(--marka-acik); }
body.kilitli { overflow: hidden; }

/* Arama penceresi */
.arama-kutusu { border: 0; padding: 0; width: min(640px, calc(100% - 32px)); margin: 12vh auto auto; border-radius: var(--r-buyuk); box-shadow: var(--golge-3); background: #fff; }
.arama-kutusu::backdrop { background: rgba(4, 10, 20, .6); }
.arama-kutusu form { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.arama-kutusu input { flex: 1; border: 0; outline: 0; font-size: 1.1rem; padding: 10px 0; min-width: 0; background: transparent; }
.arama-kutusu .ikon { width: 20px; height: 20px; color: var(--soluk); }
.ikon-dugme { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ikon-dugme:hover { background: rgba(127,127,127,.12); }

/* --- Hero (anasayfa) ------------------------------------------------------- */
.hero { margin-top: calc(-1 * var(--ust-yukseklik)); padding-top: calc(var(--ust-yukseklik) + clamp(48px, 8vw, 104px)); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; }
.hero__izgara { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero__rozet { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-size: .85rem; color: #cbd5e1; margin-bottom: 26px; }
.hero__rozet b { font-family: var(--kod); font-size: .7rem; letter-spacing: .08em; font-weight: 600; color: #04111f; background: var(--marka); padding: 3px 8px; border-radius: 999px; }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -.038em; line-height: 1.04; margin-bottom: 24px; }
.hero__giris { font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem); color: #a9b6c8; max-width: 620px; margin-bottom: 34px; }
.hero__notlar { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; color: #a9b6c8; }
.hero__notlar li { display: inline-flex; align-items: center; gap: 8px; }
.hero__notlar .ikon { width: 17px; height: 17px; color: #34d399; }

/* Kod penceresi */
.pencere { border-radius: var(--r-buyuk); background: linear-gradient(180deg, rgba(20, 34, 56, .92), rgba(10, 20, 36, .96)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,159,226,.06), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; position: relative; }
.pencere__ust { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pencere__nokta { width: 11px; height: 11px; border-radius: 50%; background: #334155; }
.pencere__nokta:nth-child(1) { background: #f87171; } .pencere__nokta:nth-child(2) { background: #fbbf24; } .pencere__nokta:nth-child(3) { background: #34d399; }
.pencere__ad { margin-left: 10px; font-family: var(--kod); font-size: .78rem; color: #8c9aae; }
.kod { margin: 0; padding: 20px 0 22px; font-family: var(--kod); font-size: clamp(.74rem, .7rem + .2vw, .86rem); line-height: 1.75; color: #cbd5e1; counter-reset: satir; overflow-x: auto; white-space: pre; tab-size: 2; }
.kod span.s { display: block; padding: 0 22px 0 0; counter-increment: satir; }
.kod span.s::before { content: counter(satir); display: inline-block; width: 3.2em; padding-right: 1.2em; text-align: right; color: #475569; user-select: none; }
.kod .k { color: #7dd3fc; } .kod .d { color: #a7f3d0; } .kod .n { color: #fcd34d; } .kod .y { color: #64748b; font-style: italic; } .kod .p { color: #94a3b8; }
.kod__imlec { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; background: var(--marka); margin-left: 2px; animation: imlec 1.1s steps(1) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.hero__gorsel { position: relative; }
.hero__gorsel::before { content: ''; position: absolute; inset: -40px -30px; background: radial-gradient(closest-side, rgba(0,159,226,.22), transparent); z-index: -1; }
.hero__etiket { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(13, 26, 45, .92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); font-size: .85rem; color: #cbd5e1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__etiket strong { display: block; color: #fff; font-size: .9rem; }
.hero__etiket .ikon-kutu { width: 34px; height: 34px; }
.hero__etiket--1 { left: -28px; bottom: 54px; }
.hero__etiket--2 { right: -18px; top: -22px; }
.ikon-kutu { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--marka-koyu); background: var(--marka-zemin); }
.ikon-kutu .ikon { width: 22px; height: 22px; }
.koyu .ikon-kutu { color: var(--marka-acik); background: rgba(56, 189, 248, .1); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .18); }

/* --- Marka şeridi ---------------------------------------------------------- */
.markalar { border-bottom: 1px solid var(--cizgi); }
.markalar__ic { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 34px; }
.markalar__baslik { margin: 0; font-size: .9rem; color: var(--soluk); line-height: 1.45; }
.markalar__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.marka-adi { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 16px; border-radius: 12px; text-decoration: none; color: var(--murekkep); transition: background var(--gecis); }
.marka-adi:hover { background: var(--zemin-2); color: var(--murekkep); }
.marka-adi strong { font-size: 1.12rem; font-weight: 700; letter-spacing: -.025em; display: inline-flex; align-items: center; gap: 6px; }
.marka-adi strong .ikon { width: 14px; height: 14px; color: var(--soluk); opacity: 0; transition: opacity var(--gecis); }
.marka-adi:hover strong .ikon { opacity: 1; }
.marka-adi small { font-size: .8rem; color: var(--soluk); line-height: 1.35; }
.marka-adi img { max-height: 32px; width: auto; }

/* --- Kartlar --------------------------------------------------------------- */
.izgara { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara > * { min-width: 0; }
.kart {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-buyuk);
  background: var(--zemin); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.kart h3 { font-size: var(--fs-h3); margin: 0; letter-spacing: -.018em; }
.kart p { margin: 0; color: var(--soluk); font-size: .98rem; }
a.kart, .kart--tiklanir { text-decoration: none; color: inherit; }
a.kart:hover, .kart--tiklanir:hover { border-color: #c9d6e4; box-shadow: var(--golge-2); transform: translateY(-2px); }
.koyu .kart { background: var(--koyu-kart); box-shadow: none; }
.koyu a.kart:hover { border-color: rgba(56, 189, 248, .35); background: rgba(255,255,255,.06); }

.cozum-kart { padding: 30px; }
.cozum-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cozum-kart__marka { font-family: var(--kod); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.cozum-kart__liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; color: var(--metin); }
.cozum-kart__liste li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.5; }
.cozum-kart__liste .ikon { width: 16px; height: 16px; margin-top: 3px; color: var(--marka-koyu); }
.cozum-kart__alt { margin-top: auto; padding-top: 10px; }
.cozum-kart__alt .ok-baglanti { font-size: .95rem; }
.cozum-kart--genis { grid-column: span 2; }

.ozellik { display: grid; gap: 14px; align-content: start; }
.ozellik h3 { font-size: 1.08rem; margin: 0; }
.ozellik p { margin: 0; font-size: .96rem; color: var(--soluk); }
.ozellik-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.ozellik-izgara > * { min-width: 0; }

/* --- Vitrin (canlı ürünler) ------------------------------------------------ */
.vitrin { display: grid; gap: clamp(56px, 8vw, 104px); }
.vitrin__satir { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vitrin__satir:nth-child(even) .vitrin__gorsel { order: 2; }
.vitrin__metin h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 14px; }
.vitrin__metin > p { color: var(--soluk); font-size: 1.04rem; }
.vitrin__marka { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; color: var(--murekkep); }
.tarayici { margin: 0; border-radius: 14px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-3); overflow: hidden; }
.tarayici__ust { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f1f4f8; border-bottom: 1px solid var(--cizgi); }
.tarayici__ust .pencere__nokta { width: 10px; height: 10px; }
.tarayici__adres { flex: 1; margin-left: 10px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--cizgi); font-size: .76rem; color: var(--soluk); display: flex; align-items: center; gap: 6px; padding: 0 10px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tarayici__adres .ikon { width: 12px; height: 12px; color: var(--basari); }
.tarayici img { width: 100%; height: auto; aspect-ratio: 16 / 9.4; object-fit: cover; object-position: top; }
.tik-liste { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.tik-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.tik-liste .ikon { width: 18px; height: 18px; margin-top: 3px; color: var(--marka-koyu); }
.koyu .tik-liste .ikon { color: #34d399; }

/* --- Sayaçlar -------------------------------------------------------------- */
.sayaclar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.sayac { padding: 30px 26px; border-left: 1px solid var(--cizgi); min-width: 0; }
.sayac:first-child { border-left: 0; padding-left: 0; }
.sayac strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; letter-spacing: -.035em; color: var(--murekkep); line-height: 1.1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.sayac span { color: var(--soluk); font-size: .94rem; }

/* --- Süreç ----------------------------------------------------------------- */
.surec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: adim; }
.surec > li { position: relative; padding: 30px 28px 28px; border-radius: var(--r-buyuk); border: 1px solid var(--cizgi); background: var(--zemin); counter-increment: adim; min-width: 0; }
.surec > li::before { content: counter(adim, decimal-leading-zero); display: block; font-family: var(--kod); font-size: .82rem; font-weight: 600; color: var(--marka-koyu); margin-bottom: 18px; letter-spacing: .08em; }
.surec > li::after { content: ''; position: absolute; top: 40px; left: 64px; right: 28px; height: 1px; background: linear-gradient(90deg, var(--cizgi), transparent); }
.surec h3 { font-size: 1.1rem; margin-bottom: 10px; }
.surec p { margin: 0; color: var(--soluk); font-size: .96rem; }
.koyu .surec > li { background: var(--koyu-kart); }
.koyu .surec > li::before { color: var(--marka-acik); }

/* --- Teknoloji ------------------------------------------------------------- */
.teknoloji { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); overflow: hidden; }
.teknoloji__grup { background: var(--zemin); padding: 26px 28px; min-width: 0; }
.koyu .teknoloji { background: var(--koyu-cizgi); }
.koyu .teknoloji__grup { background: var(--koyu-zemin); }
.teknoloji__grup h3 { font-family: var(--kod); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin-bottom: 14px; font-weight: 600; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.cip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: .88rem; font-weight: 500; background: var(--zemin-2); border: 1px solid var(--cizgi); color: var(--murekkep); line-height: 1.3; }
.koyu .cip { background: rgba(255,255,255,.05); color: #e2e8f0; }
.cip--marka { background: var(--marka-zemin); border-color: #c7eafa; color: #055b8c; }
.koyu .cip--marka { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.25); color: #7dd3fc; }

/* --- Blog kartları --------------------------------------------------------- */
.yazi-kart { padding: 0; overflow: hidden; gap: 0; }
.yazi-kart__gorsel { aspect-ratio: 16 / 9; background: var(--zemin-2); overflow: hidden; }
.yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yazi-kart__desen { aspect-ratio: 16 / 7; position: relative; overflow: hidden; background: linear-gradient(135deg, #0b1a2e, #07111f); display: flex; align-items: flex-end; padding: 18px 24px; }
.yazi-kart__desen::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; }
.yazi-kart__desen::after { content: ''; position: absolute; width: 260px; height: 260px; right: -60px; top: -120px; background: radial-gradient(closest-side, rgba(0,159,226,.45), transparent); }
.yazi-kart__desen .cip { position: relative; z-index: 1; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #e2e8f0; font-size: .8rem; }
.yazi-kart__govde { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.yazi-kart h3 { font-size: 1.14rem; line-height: 1.35; }
.yazi-kart p { font-size: .95rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .84rem; color: var(--soluk); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta .ikon { width: 15px; height: 15px; }

/* --- SSS (akordeon) -------------------------------------------------------- */
.sss-duzen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.sss-liste { border-top: 1px solid var(--cizgi); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; cursor: pointer; font-weight: 600; color: var(--murekkep); font-size: 1.04rem; line-height: 1.45; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary .ikon { width: 20px; height: 20px; margin-top: 2px; color: var(--soluk); transition: transform var(--gecis); }
.sss-oge[open] summary .ikon { transform: rotate(45deg); color: var(--marka-koyu); }
.sss-oge__cevap { padding: 0 44px 24px 0; color: var(--metin); }
.sss-oge__cevap p:last-child { margin-bottom: 0; }

/* --- Çağrı bandı ----------------------------------------------------------- */
.cagri { border-radius: 28px; padding: clamp(40px, 6vw, 76px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.cagri h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.cagri p { font-size: var(--fs-giris); margin: 0; }
.cagri__yan { display: grid; gap: 14px; justify-items: start; }
.cagri__iletisim { display: grid; gap: 8px; margin-top: 6px; font-size: .95rem; }
.cagri__iletisim a { color: #cbd5e1; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.cagri__iletisim a:hover { color: #fff; }
.cagri__iletisim .ikon { width: 17px; height: 17px; color: var(--marka-acik); }

/* --- Sayfa başlığı (iç sayfalar) ------------------------------------------- */
.sayfa-bas { margin-top: calc(-1 * var(--ust-yukseklik)); padding-top: calc(var(--ust-yukseklik) + clamp(44px, 6vw, 80px)); padding-bottom: clamp(48px, 6vw, 84px); overflow: hidden; }
.sayfa-bas h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 18px; max-width: 900px; }
.sayfa-bas__giris { font-size: var(--fs-giris); color: #a9b6c8; max-width: 760px; margin: 0; }
.yol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; font-size: .86rem; color: #8c9aae; }
.yol a { color: #a9b6c8; text-decoration: none; }
.yol a:hover { color: #fff; }
.yol li + li::before { content: '/'; margin-right: 6px; color: #475569; }
.sayfa-bas--cozum .sayfa-bas__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.sayfa-bas__marka { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sayfa-bas__marka .cip { font-size: .8rem; }
.sayfa-bas .dugmeler { margin-top: 30px; }
.sayfa-bas .tik-liste { margin: 26px 0 0; font-size: .95rem; color: #cbd5e1; }

/* Alt gezinme (çözüm sayfası) */
.alt-gezinme { position: sticky; top: var(--ust-yukseklik); z-index: 50; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.alt-gezinme ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.alt-gezinme ul::-webkit-scrollbar { display: none; }
.alt-gezinme a { display: block; padding: 16px 14px; font-size: .92rem; font-weight: 500; color: var(--soluk); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.alt-gezinme a:hover { color: var(--murekkep); }
.alt-gezinme a[aria-current="true"] { color: var(--murekkep); border-bottom-color: var(--marka); }

/* İçerik + kenar sütunu */
.icerik-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.icerik-duzen--sol { grid-template-columns: 260px minmax(0, 1fr); }
.kenar { position: sticky; top: calc(var(--ust-yukseklik) + 76px); display: grid; gap: 18px; }
.kenar-kutu { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 22px; background: var(--zemin); }
.kenar-kutu h2, .kenar-kutu h3 { font-size: .78rem; font-family: var(--kod); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin-bottom: 12px; font-weight: 600; }
.kenar-kutu--koyu { background: linear-gradient(160deg, #0b1a2e, #07111f); border-color: transparent; color: #a9b6c8; }
.kenar-kutu--koyu strong { display: block; color: #fff; font-size: 1.08rem; line-height: 1.35; margin-bottom: 8px; }
.kenar-kutu--koyu p { font-size: .92rem; }
.icindekiler { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; }
.icindekiler a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--cizgi); color: var(--soluk); text-decoration: none; line-height: 1.4; }
.icindekiler a:hover { color: var(--murekkep); }
.icindekiler a[aria-current="true"] { color: var(--murekkep); border-left-color: var(--marka); }
.icindekiler .seviye-3 a { padding-left: 24px; font-size: .86rem; }
.yan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.yan-liste a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--metin); text-decoration: none; font-size: .94rem; }
.yan-liste a:hover { background: var(--zemin-2); color: var(--murekkep); }
.yan-liste a[aria-current="page"] { background: var(--marka-zemin); color: #055b8c; font-weight: 600; }

/* Zengin metin */
.zengin { font-size: 1.0625rem; line-height: 1.78; color: var(--metin); overflow-wrap: anywhere; }
.zengin > *:first-child { margin-top: 0; }
.zengin h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); margin: 2em 0 .6em; }
.zengin h3 { font-size: 1.22rem; margin: 1.7em 0 .5em; }
.zengin h4 { font-size: 1.05rem; margin: 1.5em 0 .4em; }
.zengin p, .zengin ul, .zengin ol { margin: 0 0 1.15em; }
.zengin li { margin-bottom: .45em; }
.zengin li::marker { color: var(--marka-koyu); }
.zengin strong { color: var(--murekkep); font-weight: 650; }
.zengin blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--marka); color: var(--murekkep); font-size: 1.1rem; }
.zengin table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.zengin th, .zengin td { border: 1px solid var(--cizgi); padding: 10px 14px; text-align: left; vertical-align: top; }
.zengin th { background: var(--zemin-2); color: var(--murekkep); font-weight: 600; }
.zengin img { border-radius: var(--r); margin: 1.5em 0; }
.zengin code { font-family: var(--kod); font-size: .88em; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 6px; padding: 1px 6px; }
.zengin pre { background: var(--koyu-zemin); color: #e2e8f0; border-radius: var(--r); padding: 18px 20px; overflow-x: auto; font-size: .88rem; }
.zengin pre code { background: none; border: 0; padding: 0; color: inherit; }
.zengin hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2.4em 0; }
.zengin a { font-weight: 500; }
.zengin h2[id], .zengin h3[id] { scroll-margin-top: calc(var(--ust-yukseklik) + 80px); }

/* Teknik tablo */
.teknik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.teknik > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); min-width: 0; }
.teknik dt { font-weight: 600; color: var(--murekkep); font-size: .95rem; }
.teknik dd { margin: 0; color: var(--soluk); font-size: .95rem; }

/* Öne çıkanlar kutusu */
.one-cikan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; list-style: none; margin: 0; padding: 30px; border-radius: var(--r-buyuk); background: var(--zemin-2); border: 1px solid var(--cizgi); }
.one-cikan li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--murekkep); font-weight: 500; }
.one-cikan .ikon { width: 20px; height: 20px; margin-top: 2px; color: var(--basari); }

/* Numaralı yetenek listesi */
.yetenekler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--cizgi); }
.yetenek { padding: 28px 28px 30px 0; border-bottom: 1px solid var(--cizgi); min-width: 0; }
.yetenek:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--cizgi); }
.yetenek__no { font-family: var(--kod); font-size: .78rem; color: var(--marka-koyu); font-weight: 600; letter-spacing: .06em; margin-bottom: 14px; display: block; }
.yetenek h3 { font-size: 1.08rem; margin-bottom: 10px; }
.yetenek p { margin: 0; color: var(--soluk); font-size: .95rem; }

/* --- Blog yazısı ----------------------------------------------------------- */
.yazi-bas .meta { color: #8c9aae; margin-top: 22px; }
.yazi-bas .cip { margin-bottom: 18px; }
.paylas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paylas a, .paylas button { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin); cursor: pointer; text-decoration: none; }
.paylas a:hover, .paylas button:hover { border-color: var(--murekkep); color: var(--murekkep); }
.paylas .ikon { width: 18px; height: 18px; }
.paylas--kopyalandi [data-kopyala] { border-color: var(--basari); color: var(--basari); }
.yazi-alt { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--cizgi); display: grid; gap: 28px; }
.etiketler { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.etiketler a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--zemin-2); border: 1px solid var(--cizgi); font-size: .86rem; color: var(--metin); text-decoration: none; }
.etiketler a:hover { border-color: var(--murekkep); color: var(--murekkep); }
.onceki-sonraki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.onceki-sonraki a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: var(--r); text-decoration: none; color: var(--murekkep); font-weight: 600; line-height: 1.4; }
.onceki-sonraki a:hover { border-color: #c5d0dd; box-shadow: var(--golge-2); }
.onceki-sonraki small { font-weight: 500; font-size: .82rem; color: var(--soluk); }
.onceki-sonraki a:last-child:not(:first-child) { text-align: right; }
.kurum-kutu { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: var(--r); background: var(--zemin-2); border: 1px solid var(--cizgi); }
.kurum-kutu img { width: 64px; height: auto; flex: none; margin-top: 4px; }
.kurum-kutu strong { color: var(--murekkep); display: block; margin-bottom: 4px; }
.kurum-kutu p { margin: 0; font-size: .95rem; color: var(--soluk); }

/* Filtre çipleri */
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 36px; }
.suzgec a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--metin); font-size: .92rem; font-weight: 500; text-decoration: none; background: var(--zemin); }
.suzgec a:hover { border-color: var(--murekkep); color: var(--murekkep); }
.suzgec a[aria-current="page"] { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.suzgec small { font-size: .78rem; opacity: .7; }

/* --- Referanslar ----------------------------------------------------------- */
.marka-kart { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; padding: 0; overflow: hidden; }
.marka-kart__gorsel { background: var(--zemin-2); border-right: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: center; padding: 28px; min-height: 260px; }
.marka-kart__gorsel .tarayici { box-shadow: var(--golge-2); width: 100%; }
.marka-kart__govde { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.marka-kart__govde h2 { font-size: 1.6rem; margin: 0; letter-spacing: -.03em; }
.marka-kart__alan { font-family: var(--kod); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--marka-koyu); font-weight: 600; }
.marka-kart__govde .dugmeler { margin-top: auto; padding-top: 8px; }
.marka-yerlesim { display: grid; gap: 24px; }

/* --- İletişim -------------------------------------------------------------- */
.iletisim-duzen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
.form-kart { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-buyuk); border: 1px solid var(--cizgi); background: var(--zemin); box-shadow: var(--golge-2); }
.form-kart h2 { font-size: 1.5rem; margin-bottom: 6px; }
.form-kart > p { color: var(--soluk); margin-bottom: 28px; }
.iletisim-liste { display: grid; gap: 12px; }
.iletisim-oge { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r); border: 1px solid var(--cizgi); background: var(--zemin); text-decoration: none; color: inherit; transition: border-color var(--gecis), box-shadow var(--gecis); }
a.iletisim-oge:hover { border-color: #c5d0dd; box-shadow: var(--golge-2); color: inherit; }
.iletisim-oge small { display: block; font-size: .8rem; color: var(--soluk); margin-bottom: 2px; }
.iletisim-oge strong { display: block; color: var(--murekkep); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.iletisim-oge__alt { display: block; font-size: .88rem; color: var(--soluk); margin-top: 2px; }

/* Form */
.form__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.alan { display: grid; gap: 7px; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }
.alan__etiket { font-size: .9rem; font-weight: 600; color: var(--murekkep); }
.zorunlu { color: var(--hata); }
.alan__girdi { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd8e3; background: #fff; font-size: 1rem; color: var(--murekkep); transition: border-color var(--gecis), box-shadow var(--gecis); appearance: none; -webkit-appearance: none; }
select.alan__girdi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
textarea.alan__girdi { min-height: 150px; resize: vertical; line-height: 1.6; }
.alan__girdi:hover { border-color: #b4c1d0; }
.alan__girdi:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 4px rgba(0, 159, 226, .15); }
.alan--hata .alan__girdi { border-color: var(--hata); }
.alan__hata { margin: 0; font-size: .86rem; color: var(--hata); font-weight: 500; }
.onaylar { display: grid; gap: 12px; margin: 22px 0 6px; }
.onay-kutusu { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .92rem; color: var(--metin); }
.onay-kutusu input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marka-koyu); }
.onay-kutusu--hata label { color: var(--hata); }
.onay-kutusu .alan__hata { grid-column: 2; }
.form__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.form__not { margin: 0; font-size: .86rem; color: var(--soluk); display: inline-flex; align-items: center; gap: 8px; }
.form__not .ikon { width: 16px; height: 16px; color: var(--basari); }
.secenekler { display: grid; gap: 8px; }
.secenek { display: flex; gap: 10px; align-items: center; }

/* Uyarılar */
.uyari { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; margin-bottom: 22px; font-size: .96rem; border: 1px solid transparent; }
.uyari p { margin: 0; }
.uyari .ikon { width: 20px; height: 20px; margin-top: 1px; }
.uyari--basari { background: var(--basari-zemin); color: #075e41; border-color: #bfe6d3; }
.uyari--hata { background: var(--hata-zemin); color: #8f2219; border-color: #f4c7c2; }
.uyari--bilgi { background: var(--marka-zemin); color: #055b8c; border-color: #c7eafa; }

/* Harita */
.harita { border-radius: var(--r); overflow: hidden; border: 1px solid var(--cizgi); background: var(--zemin-2); min-height: 260px; position: relative; }
.harita iframe { width: 100%; height: 320px; border: 0; display: block; }
.harita__perde { padding: 26px; display: grid; gap: 12px; justify-items: start; }
.harita__ikon { color: var(--marka-koyu); }
.harita__adres { margin: 0; color: var(--murekkep); font-weight: 500; }
.harita__dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.harita__not { margin: 0; font-size: .8rem; color: var(--soluk); }

/* --- Sayfalama, arama, 404 ------------------------------------------------- */
.sayfalama { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 48px; }
.sayfalama__oge { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; font-weight: 600; }
.sayfalama__oge:hover { border-color: var(--murekkep); color: var(--murekkep); }
.sayfalama__oge--aktif { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.sayfalama .ikon { width: 18px; height: 18px; }
.arama-form { display: flex; gap: 10px; max-width: 640px; }
.arama-form input { flex: 1; min-width: 0; }
.arama-sonuc { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--cizgi); }
.arama-sonuc a { font-size: 1.15rem; font-weight: 600; text-decoration: none; color: var(--murekkep); }
.arama-sonuc a:hover { color: var(--baglanti); }
.arama-sonuc p { margin: 0; color: var(--soluk); font-size: .95rem; }
.bos-durum { text-align: center; padding: 40px 0; color: var(--soluk); }
.hata-kod { font-family: var(--kod); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); margin: 0 0 10px; }

/* --- Footer ---------------------------------------------------------------- */
.alt { padding-top: clamp(64px, 8vw, 104px); }
.alt__ust { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; }
.alt__marka .logo img { height: 46px; }
.alt__marka p { margin: 22px 0 22px; font-size: .95rem; max-width: 380px; }
.alt h2 { font-size: .76rem; font-family: var(--kod); letter-spacing: .12em; text-transform: uppercase; color: #8c9aae; margin-bottom: 18px; font-weight: 600; }
.alt-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .95rem; }
.alt-menu a { color: #cbd5e1; text-decoration: none; }
.alt-menu a:hover { color: #fff; }
.alt__iletisim { display: grid; gap: 12px; font-size: .94rem; }
.alt__iletisim > a, .alt__iletisim > span { color: #cbd5e1; text-decoration: none; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.5; }
.alt__iletisim > a:hover { color: #fff; }
.alt__iletisim .ikon { width: 17px; height: 17px; margin-top: 3px; color: var(--marka-acik); }
.sosyal { display: flex; gap: 8px; margin-top: 18px; }
.sosyal a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--koyu-cizgi); color: #cbd5e1; }
.sosyal a:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.sosyal .ikon { width: 18px; height: 18px; }
.alt__alt p { margin: 0; }
.alt__alt { border-top: 1px solid var(--koyu-cizgi); padding: 24px 0 30px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; font-size: .86rem; color: #8c9aae; }
.alt__yasal { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.alt__yasal a, .alt__yasal button { color: #8c9aae; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.alt__yasal a:hover, .alt__yasal button:hover { color: #fff; }

/* --- Yüzen öğeler ve çerez bandı ------------------------------------------- */
.whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .55); transition: transform var(--gecis); }
.whatsapp:hover { transform: translateY(-2px) scale(1.03); color: #fff; }
.whatsapp .ikon { width: 28px; height: 28px; }
.cerez { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; display: flex; justify-content: center; pointer-events: none; }
.cerez__ic { pointer-events: auto; width: min(760px, 100%); background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); box-shadow: var(--golge-3); padding: 20px 22px; display: grid; gap: 14px; font-size: .92rem; }
.cerez__baslik { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; color: var(--murekkep); }
.cerez__baslik .ikon { width: 18px; height: 18px; color: var(--marka-koyu); }
.cerez__metin p { margin: 0; }
.cerez__dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cerez__tercihler { display: grid; gap: 8px; }
.anahtar { display: flex; gap: 10px; align-items: center; }

/* --- Görünme animasyonu ----------------------------------------------------
   Gizleme yalnız site.js gözlemciyi kurduktan sonra (html.belir-hazir):
   betik yüklenemezse içerik görünmez kalmasın. */
.belir { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.belir-hazir .belir:not(.belir--gorundu) { opacity: 0; transform: translateY(14px); }

/* --- Duyarlı --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .ust__tel { display: none; }
  .ozellik-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .ust__menu, .ust__sag .dugme { display: none; }
  .ust__dugme { display: grid; }
  .ust__ic { justify-content: space-between; }
  .hero__izgara, .sayfa-bas--cozum .sayfa-bas__izgara { grid-template-columns: minmax(0, 1fr); }
  .hero__gorsel { max-width: 620px; }
  .hero__etiket--1 { left: 12px; bottom: -22px; }
  .hero__etiket--2 { right: 12px; }
  .markalar__ic { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 28px; }
  .markalar__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .izgara, .izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cozum-kart--genis { grid-column: auto; }
  .vitrin__satir { grid-template-columns: minmax(0, 1fr); }
  .vitrin__satir:nth-child(even) .vitrin__gorsel { order: 0; }
  .surec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teknoloji { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sss-duzen, .cagri, .iletisim-duzen { grid-template-columns: minmax(0, 1fr); }
  .icerik-duzen, .icerik-duzen--sol { grid-template-columns: minmax(0, 1fr); }
  .kenar { position: static; }
  .kenar--icindekiler { display: none; }
  .alt__ust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alt__marka { grid-column: 1 / -1; }
  .yetenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yetenek:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .yetenek:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--cizgi); }
  .teknik { grid-template-columns: minmax(0, 1fr); }
  .marka-kart { grid-template-columns: minmax(0, 1fr); }
  .marka-kart__gorsel { border-right: 0; border-bottom: 1px solid var(--cizgi); min-height: 0; }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  :root { --ust-yukseklik: 64px; }
  .logo img { height: 36px; }
  .izgara, .izgara--2, .izgara--4, .ozellik-izgara, .surec, .teknoloji, .yetenekler { grid-template-columns: minmax(0, 1fr); }
  .yetenek, .yetenek:nth-child(even) { padding-left: 0; border-left: 0; padding-right: 0; }
  .markalar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marka-adi { padding: 10px 12px; min-height: 0; }
  .sayaclar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sayac { padding: 22px 16px; }
  .sayac:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sayac:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .form__izgara { grid-template-columns: minmax(0, 1fr); }
  .one-cikan { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .teknik > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .alt__ust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .onceki-sonraki { grid-template-columns: minmax(0, 1fr); }
  .onceki-sonraki a:last-child:not(:first-child) { text-align: left; }
  .hero__etiket { display: none; }
  .kart, .cozum-kart { padding: 24px; }
  .cagri { border-radius: 22px; }
  .dugmeler .dugme { flex: 1 1 auto; }
  .sss-oge__cevap { padding-right: 0; }
  .kurum-kutu { flex-direction: column; }
  .whatsapp { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .surec > li::after { display: none; }
}
@media (max-width: 420px) {
  .alt__ust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .alt__ust > nav:first-of-type { grid-column: 1 / -1; }
  .markalar__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .belir-hazir .belir:not(.belir--gorundu) { opacity: 1; transform: none; }
}
@media print {
  .ust, .alt, .whatsapp, .cerez, .alt-gezinme, .kenar, .cagri { display: none !important; }
  .koyu { background: #fff !important; color: #000; --murekkep: #000; --metin: #222; }
  .sayfa-bas, .hero { margin-top: 0; padding-top: 24px; }
}
.bolum-bas__baglanti { margin-top: 24px !important; }

/* --- Sayfa şablonlarına özel ---------------------------------------------- */
.cozum-alan--ara { margin-top: clamp(64px, 8vw, 104px); }
.bolum-ic { margin-top: clamp(40px, 5vw, 64px); }
.onizleme-serit { position: sticky; top: 0; z-index: 300; margin: 0; border-radius: 0; justify-content: center; }
.yazi-kapak { margin: 0 0 36px; border-radius: var(--r-buyuk); overflow: hidden; }
.yazi-kapak img { width: 100%; }
.yazi-bas h1 { max-width: none; }
.yazi-bas .cip { text-decoration: none; }
.kaynakca { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cizgi); font-size: .95rem; }
.kaynakca h2 { font-size: 1.1rem; margin-top: 0; }
.kunye { margin: 0; display: grid; gap: 14px; }
.kunye dt { font-size: .8rem; color: var(--soluk); margin-bottom: 2px; }
.kunye dd { margin: 0; color: var(--murekkep); font-weight: 500; font-size: .95rem; line-height: 1.5; }
.sss-gruplar { display: grid; gap: 48px; }
.sss-grup h2 { font-size: 1.35rem; margin-bottom: 8px; scroll-margin-top: calc(var(--ust-yukseklik) + 24px); }
.iletisim-yan { display: grid; gap: 20px; }
.arama-form--404 { margin-top: 28px; }
.arama-form--404 .alan__girdi { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.hata-tam { margin-top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: 64px; }
.hata-tam img { margin-bottom: 36px; }
.marka-kart__ad { font-size: 2rem; color: var(--murekkep); letter-spacing: -.03em; }
.paylas .meta { margin-right: 4px; }
.sayfa-bas .arama-form { margin-top: 28px; }
.sayfa-bas .arama-form .alan__girdi { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.sayfa-bas .arama-form .alan__girdi::placeholder { color: #8c9aae; }
@media (max-width: 1080px) {
  .sss-duzen > .kenar { display: none; }
}

/* --- Editör sınıfları (HtmlTemizleyici izin listesiyle aynı) --------------- */
.zengin .hiza-sol { text-align: left; } .zengin .hiza-orta { text-align: center; } .zengin .hiza-sag { text-align: right; } .zengin .hiza-iki-yana { text-align: justify; }
.zengin .gorsel-sol { float: left; max-width: 45%; margin: .3em 1.4em 1em 0; }
.zengin .gorsel-sag { float: right; max-width: 45%; margin: .3em 0 1em 1.4em; }
.zengin .gorsel-orta { margin-inline: auto; }
.zengin .gorsel-tam { width: 100%; }
.zengin .not-kutusu, .zengin .bilgi-kutusu, .zengin .uyari-kutusu { padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--cizgi); background: var(--zemin-2); margin: 1.5em 0; }
.zengin .bilgi-kutusu { background: var(--marka-zemin); border-color: #c7eafa; }
.zengin .uyari-kutusu { background: var(--uyari-zemin); border-color: #f5d9a8; }
.zengin .tablo-cizgili tr:nth-child(even) td { background: var(--zemin-2); }
.zengin .buyuk-metin { font-size: 1.2em; } .zengin .kucuk-metin { font-size: .88em; }
.zengin .gomulu { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; margin: 1.5em 0; }
.zengin .gomulu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .zengin .gorsel-sol, .zengin .gorsel-sag { float: none; max-width: 100%; margin: 1em 0; } }
.cozum-cta { background: radial-gradient(120% 140% at 100% 0%, rgba(0,159,226,.28), transparent 55%), linear-gradient(160deg, #0b1a2e, #07111f); border-color: transparent; height: 100%; }
.cozum-cta h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.cozum-kart--genis > .kart, .izgara > .belir > .kart { height: 100%; }
@media (max-width: 420px) {
  .kod span.s::before { width: 2.4em; padding-right: .9em; }
  .kod { font-size: .72rem; }
}
.bal-kupu { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }