/* ============================================================
   YOLZZ PRO — tanıtım sitesi
   Düz CSS, derleme adımı yok. Mobil öncelikli: 390 / 768 / 1280.
   Renk değerleri tasarım tuvalinden; metin/zemin oranları WCAG AA (≥ 4,5:1).
   ============================================================ */

/* ---------- 1) YAZI TİPLERİ (yerelde barındırılır) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibmplexsans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibmplexsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2) TASARIM DEĞİŞKENLERİ ---------- */
:root {
  /* koyu yüzeyler */
  --zemin: #0E1116;
  --kart: #12171D;
  --kenar: #1F252E;
  /* metin */
  --metin: #F5F4F1;      /* 17,19:1 */
  --ikincil: #A5ACB6;    /*  8,26:1 */
  --soluk: #8A929D;      /*  6,01:1 */
  /* vurgu */
  --vurgu: #E8A33D;      /*  8,77:1 */
  --vurgu-uzeri: #17110A;/*  8,69:1 (vurgu zemininde) */
  --vurgu-koyu: #8A5A00; /*  5,39:1 (açık bantta metin için) */
  --mavi: #9BBBFF;       /*  9,86:1 — yalnız bölüm etiketi ve ikon çizgisi */
  /* açık bant */
  --bant: #F5F4F1;
  --bant-metin: #0E1116; /* 17,19:1 */
  --bant-govde: #3A4048; /*  9,51:1 */
  --bant-soluk: #545B64; /*  6,24:1 */
  --bant-kenar: #D8D6D0;
  /* ölçüler */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --bolum: 56px;         /* mobil; 768+ üzerinde 100px */
  --kap: 1200px;
  /* yazı tipleri */
  --f-baslik: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-govde: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}

/* ---------- 3) TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* yapışkan üst menü payı */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-baslik);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 7.4vw, 56px); }
h2 { font-size: clamp(25px, 5.2vw, 40px); }
h3 { font-size: clamp(17px, 2.2vw, 20px); letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--vurgu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #F2B65C; }

:focus-visible {
  outline: 3px solid var(--mavi);
  outline-offset: 3px;
  border-radius: 4px;
}

.kap {
  width: 100%;
  max-width: var(--kap);
  margin: 0 auto;
  padding: 0 20px;
}

.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vurgu);
  color: var(--vurgu-uzeri);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  z-index: 100;
}
.atla:focus { left: 0; }

section { padding: var(--bolum) 0; }

.etiket {
  display: inline-block;
  font-family: var(--f-baslik);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mavi);
  margin: 0 0 14px;
}
.bolum-giris { max-width: 720px; margin-bottom: 36px; }
.bolum-giris p { color: var(--ikincil); font-size: 17px; margin-bottom: 0; }

/* ---------- 4) BUTONLAR ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--f-govde);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  min-height: 48px;
}
.btn-ana { background: var(--vurgu); color: var(--vurgu-uzeri); }
.btn-ana:hover { background: #F2B65C; color: var(--vurgu-uzeri); transform: translateY(-1px); }
.btn-ikincil { background: transparent; color: var(--metin); border-color: #39414D; }
.btn-ikincil:hover { background: #171D25; color: var(--metin); border-color: #4A5462; }
.btn-blok { width: 100%; }
.btn svg { flex: none; }

/* ---------- 5) ÜST MENÜ ---------- */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 17, 22, 0.92);
  border-bottom: 1px solid var(--kenar);
  backdrop-filter: blur(10px);
}
.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.logo {
  font-family: var(--f-baslik);
  font-size: 20px;
  font-weight: 700;
  color: var(--metin);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo span { color: var(--vurgu); }

.menu-ac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--kenar);
  border-radius: var(--r-sm);
  color: var(--metin);
  cursor: pointer;
}
.nav { display: none; }
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav ul a {
  display: block;
  padding: 12px 4px;
  color: var(--ikincil);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav ul a:hover { color: var(--metin); }
.ust-cta { display: none; }

/* mobilde açılan menü */
.ust.acik .nav {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--kart);
  border-bottom: 1px solid var(--kenar);
  padding: 12px 20px 20px;
}
.ust.acik .nav .btn { margin-top: 10px; }

/* ---------- 6) KAHRAMAN ---------- */
.hero { padding-top: 44px; padding-bottom: var(--bolum); }
.hero-ic { display: grid; gap: 36px; }
.hero p.girisi { color: var(--ikincil); font-size: 18px; max-width: 56ch; }
.hero-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-not {
  margin-top: 16px;
  color: var(--soluk);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-not svg { flex: none; color: var(--mavi); }

/* tarayıcı çerçevesi */
.tarayici {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.tarayici-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kenar);
  background: #0F141A;
}
.tarayici-nokta { display: flex; gap: 6px; flex: none; }
.tarayici-nokta i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #2A313B; display: block;
}
.tarayici-adres {
  flex: 1;
  min-width: 0;
  background: #0B0F14;
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--soluk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 7) GÖRSEL YER TUTUCU ---------- */
.yer-tutucu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px 18px;
  border: 2px dashed #39414D;
  border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, #12171D, #12171D 10px, #141A21 10px, #141A21 20px);
  color: var(--soluk);
  font-size: 13px;
  line-height: 1.5;
}
.yer-tutucu b { color: var(--ikincil); font-weight: 600; font-size: 13px; }
.yer-tutucu code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--mavi);
  word-break: break-all;
}
.tarayici .yer-tutucu { border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.tarayici img { width: 100%; height: auto; display: block; }
figure img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); border: 1px solid var(--bant-kenar); }
.bant .yer-tutucu {
  border-color: #C3C0B8;
  background: repeating-linear-gradient(135deg, #EDECE8, #EDECE8 10px, #E6E5E0 10px, #E6E5E0 20px);
  color: var(--bant-soluk);
}
.bant .yer-tutucu b { color: var(--bant-govde); }
.bant .yer-tutucu code { color: var(--vurgu-koyu); }

/* ---------- 8) OLGU ŞERİDİ ---------- */
.olgular {
  border-top: 1px solid var(--kenar);
  border-bottom: 1px solid var(--kenar);
  background: var(--kart);
  padding: 0;
}
.olgu-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.olgu {
  padding: 22px 18px;
  border-bottom: 1px solid var(--kenar);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}
.olgu:nth-child(odd) { border-right: 1px solid var(--kenar); }
.olgu:nth-last-child(-n+2) { border-bottom: 0; }
.olgu svg { flex: none; color: var(--mavi); }

/* ---------- 9) KARTLAR ---------- */
.izgara { display: grid; gap: 16px; }
.kart {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  padding: 24px;
}
.kart h3 { margin-bottom: 8px; }
.kart p { color: var(--ikincil); font-size: 15px; margin: 0; }
.kart-ikon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--kenar);
  background: #0F141A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mavi);
  margin-bottom: 16px;
}

/* ---------- 10) AÇIK BANT ---------- */
.bant {
  background: var(--bant);
  color: var(--bant-metin);
}
.bant h2, .bant h3 { color: var(--bant-metin); }
.bant p { color: var(--bant-govde); }
.bant .etiket { color: var(--vurgu-koyu); }
.bant .bolum-giris p { color: var(--bant-govde); }
.bant .kart {
  background: #FFFFFF;
  border-color: var(--bant-kenar);
}
.bant .kart p { color: var(--bant-govde); }
.bant .btn-ikincil { color: var(--bant-metin); border-color: #BFBCB4; }
.bant .btn-ikincil:hover { background: #E7E6E1; color: var(--bant-metin); }
.bant .kart-ikon { background: #F0EFEB; border-color: var(--bant-kenar); color: var(--vurgu-koyu); }

.urun-alt {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.urun-alt p { color: var(--bant-soluk); font-size: 14px; margin: 0; }

/* ---------- 11) AKIŞ (entegrasyon) ---------- */
.akis {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.akis-kutu {
  background: #FFFFFF;
  border: 1px solid var(--bant-kenar);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
}
.akis-kutu strong { display: block; font-family: var(--f-baslik); font-size: 17px; margin-bottom: 4px; }
.akis-kutu span { color: var(--bant-soluk); font-size: 14px; }
.akis-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vurgu-koyu);
}
.akis-ok svg { transform: rotate(90deg); }
.durum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.durum-liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--bant-kenar);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 15px;
  color: var(--bant-govde);
}
.durum-liste svg { flex: none; margin-top: 3px; color: var(--vurgu-koyu); }
.durum-liste strong { color: var(--bant-metin); }

/* ---------- 12) ADIMLAR ---------- */
.adimlar { counter-reset: adim; }
.adim { position: relative; padding-left: 58px; }
.adim::before {
  counter-increment: adim;
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: #0F141A;
  border: 1px solid var(--kenar);
  color: var(--vurgu);
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adim h3 { margin-bottom: 6px; }
.adim p { color: var(--ikincil); font-size: 15px; margin: 0; }

/* ---------- 13) FİYATLAR ---------- */
.fiyat-not {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  padding: 16px 18px;
  color: var(--ikincil);
  font-size: 15px;
  margin-bottom: 26px;
}
.fiyat-not strong { color: var(--metin); }
.fiyat-kart { display: flex; flex-direction: column; }
.fiyat-kart .ad { font-family: var(--f-baslik); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.fiyat-kart .tutar {
  font-family: var(--f-baslik);
  font-size: clamp(30px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fiyat-kart .birim { color: var(--soluk); font-size: 15px; margin-bottom: 18px; display: block; }
.fiyat-kart .btn { margin-top: auto; }
.fiyat-kart .kime {
  color: var(--soluk);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 14px;
}
.fiyat-kart .birim { margin-bottom: 20px; }
.paket-ustu {
  color: var(--metin);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--kenar);
}
.paket-liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  color: var(--ikincil);
  font-size: 15px;
  line-height: 1.5;
}
.paket-liste li { display: flex; gap: 10px; align-items: flex-start; }
.paket-liste svg { flex: none; margin-top: 5px; color: var(--vurgu); }
.fiyat-one .paket-ustu { border-top-color: rgba(232, 163, 61, .35); }
.fiyat-one {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 1px var(--vurgu) inset, 0 18px 40px rgba(232, 163, 61, .10);
  position: relative;
}
.fiyat-rozet {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--vurgu);
  color: var(--vurgu-uzeri);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.paket-ortak {
  margin-top: 22px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.paket-ortak h3 { font-size: 17px; margin-bottom: 12px; }
.paket-ortak ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--ikincil);
  font-size: 15px;
}
.paket-ortak li { display: flex; gap: 10px; align-items: flex-start; }
.paket-ortak svg { flex: none; margin-top: 5px; color: var(--vurgu); }

/* ---------- 14) SSS ---------- */
.sss { display: grid; gap: 10px; max-width: 860px; }
.sss details {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sss summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-family: var(--f-baslik);
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: var(--metin);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-right: 2px solid var(--vurgu);
  border-bottom: 2px solid var(--vurgu);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.sss details[open] summary::after { transform: rotate(225deg); margin-top: 10px; }
.sss .cevap { padding: 0 20px 20px; color: var(--ikincil); font-size: 15px; }

/* ---------- 15) İLETİŞİM ---------- */
.iletisim-ic { display: grid; gap: 28px; }
.iletisim-yan .kart { height: 100%; }
.iletisim-kanal { display: grid; gap: 12px; margin-top: 18px; }
.kanal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  background: #0F141A;
  color: var(--metin);
  text-decoration: none;
  font-weight: 500;
}
.kanal:hover { border-color: #39414D; color: var(--metin); }
.kanal svg { flex: none; color: var(--vurgu); }
.kanal span { display: block; font-size: 13px; color: var(--soluk); font-weight: 400; }

form .satir { display: grid; gap: 16px; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan label { font-size: 14px; font-weight: 500; color: var(--ikincil); }
.alan .zorunlu { color: var(--vurgu); }
.alan input,
.alan select,
.alan textarea {
  width: 100%;
  padding: 13px 14px;
  background: #0F141A;
  border: 1px solid var(--kenar);
  border-radius: var(--r-sm);
  color: var(--metin);
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.4;
}
.alan textarea { min-height: 120px; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: #6C737D; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .18);
}
.alan select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%), linear-gradient(135deg, var(--soluk) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kvkk { color: var(--soluk); font-size: 13px; margin: 14px 0 0; }

.form-mesaj {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 15px;
  border: 1px solid;
}
.form-mesaj[hidden] { display: none; }
.form-mesaj.ok { background: rgba(155, 187, 255, .10); border-color: #3C557F; color: var(--metin); }
.form-mesaj.hata { background: rgba(232, 163, 61, .10); border-color: #7A5A22; color: var(--metin); }

/* ---------- 16) SON ÇAĞRI ---------- */
.cagri {
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 36px;
}
.cagri h2 { margin-bottom: 10px; }
.cagri p { color: var(--ikincil); max-width: 60ch; margin-inline: auto; }
.cagri .hero-btn { justify-content: center; }

/* ---------- 17) ALT BİLGİ ---------- */
.alt {
  border-top: 1px solid var(--kenar);
  padding: 40px 0 32px;
  color: var(--soluk);
  font-size: 14px;
}
.alt-ic { display: grid; gap: 24px; }
.alt a { color: var(--ikincil); text-decoration: none; }
.alt a:hover { color: var(--metin); text-decoration: underline; }
.alt-baslik {
  font-family: var(--f-baslik);
  font-size: 15px;
  font-weight: 700;
  color: var(--metin);
  margin-bottom: 10px;
}
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* dokunma hedefi en az 24 px (WCAG 2.5.8) */
.alt ul a { display: inline-block; padding: 5px 0; }
.alt-telif {
  border-top: 1px solid var(--kenar);
  margin-top: 28px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}

/* ---------- 18) 768 px VE ÜSTÜ ---------- */
@media (min-width: 768px) {
  :root { --bolum: 100px; }
  body { font-size: 17px; }
  .kap { padding: 0 32px; }
  .menu-ac { display: none; }
  .nav { display: block; }
  .nav ul { flex-direction: row; gap: 4px; }
  .nav ul a { padding: 8px 12px; border-radius: var(--r-sm); }
  .nav ul a:hover { background: #161C24; }
  .nav .btn { display: none; }   /* mobil menüdeki demo butonu; masaüstünde sağdaki .ust-cta kullanılır */
  .ust-cta { display: inline-flex; }
  .ust-ic { min-height: 76px; }
  .hero { padding-top: 64px; }
  .olgu-izgara { grid-template-columns: repeat(4, 1fr); }
  .olgu { border-bottom: 0; border-right: 1px solid var(--kenar); padding: 26px 22px; }
  .olgu:last-child { border-right: 0; }
  .izgara-2 { grid-template-columns: repeat(2, 1fr); }
  .izgara-3 { grid-template-columns: repeat(3, 1fr); }
  .izgara { gap: 20px; }
  .akis { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
  .akis-ok svg { transform: none; }
  .durum-liste { grid-template-columns: repeat(3, 1fr); }
  .adimlar { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .iletisim-ic { grid-template-columns: 1.15fr 0.85fr; gap: 24px; }
  form .satir-2 { grid-template-columns: 1fr 1fr; }
  .cagri { padding: 48px 40px; }
  .alt-ic { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
}

/* ---------- 19) 1280 px VE ÜSTÜ ---------- */
@media (min-width: 1280px) {
  html { scroll-padding-top: 92px; }
  .hero-ic { grid-template-columns: 1.02fr 1.08fr; align-items: center; gap: 56px; }
  .izgara-3 { gap: 24px; }
  .adimlar { grid-template-columns: repeat(4, 1fr); }
  .kart { padding: 28px; }
  .bolum-giris { margin-bottom: 48px; }
}

/* ---------- 20) HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 21) YAZDIRMA ---------- */
@media print {
  .ust, .menu-ac, .hero-btn, form, .cagri { display: none; }
  body { background: #fff; color: #000; }
}


/* ============================================================
   SATIR İÇİ STİLLERİN KARŞILIĞI
   İçerik Güvenliği Politikası (style-src self) satır içi
   style="" özniteliklerini engelliyor; hepsi buraya taşındı.
   ============================================================ */
#urun figure.kart-gorsel { margin: 0; }
#urun .kart-gorsel figcaption { margin-top: 14px; }
#urun .kart-gorsel figcaption h3 { font-size: 17px; margin-bottom: 6px; }
.hero-ic p.ikincil { color: var(--ikincil); }
#iletisim p.form-giris { margin-bottom: 22px; }
#iletisim .satir.satir-ust { margin-top: 16px; }
#iletisim .btn.form-gonder { margin-top: 22px; }
#iletisim .kanal .kanal-ad { color: var(--metin); font-size: 16px; }
#iletisim p.kvkk.kvkk-saat { margin-top: 18px; }
.alt-ic p.alt-ozet { margin: 0; max-width: 44ch; }

/* ============================================================
   ÖZELLİKLER — pakete göre değişenler notu
   ============================================================ */
#ozellikler .ozellik-not {
  margin-top: 22px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  padding: 14px 18px;
  color: var(--ikincil);
  font-size: 15px;
}
#ozellikler .ozellik-not a { color: var(--mavi); }

/* ============================================================
   MOBİL WHATSAPP BALONU
   Yalnız 768 px altında görünür. Telefonun alt güvenli alanına
   ve sağ kenarına saygı gösterir; alt bilgiye ek boşluk verilir
   ki balon içeriği örtmesin. Satır içi stil YOK (CSP).
   ============================================================ */
.wa-balon {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 40;                      /* üst menünün (50) altında kalsın */
  -webkit-tap-highlight-color: transparent;
}
.wa-balon svg { width: 30px; height: 30px; display: block; }
.wa-balon:hover { background: #1EB854; }

/* Alt bilgi balonun altında kalmasın */
.alt { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Mobil menü açıkken balon gizlenir */
#ust.acik ~ .wa-balon { display: none; }

@media (min-width: 768px) {
  .wa-balon { display: none; }      /* masaüstünde hiç görünmez */
  .alt { padding-bottom: 32px; }
}

@media print {
  .wa-balon { display: none; }
}