/* ==========================================================================
   Mahremiyet — ürünün en güçlü farkı.
   Tek koyu bant: rengi ürünün "sınır" fikrini taşıyor (mürekkep petrolü).
   Koyu tema değil, tek bir editoryal bant; altın/neon vurgu yok.
   ========================================================================== */

.mahremiyet {
  --m-metin:   oklch(95% 0.012 85);
  --m-ikincil: oklch(79% 0.018 195);
  --m-cizgi:   oklch(38% 0.03 205);
  --m-yuzey:   oklch(28% 0.035 208);

  background: var(--renk-birincil-gece);
  color: var(--m-ikincil);
}

.mahremiyet .bolum__etiket--acik {
  background: transparent;
  border-color: color-mix(in oklab, var(--renk-dikkat) 60%, transparent);
  color: var(--renk-dikkat);
}

.mahremiyet__baslik {
  max-width: 20ch;
  margin-bottom: var(--bosluk-m);
  font-family: var(--yazi-soz);
  font-size: var(--ol-h2);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--m-metin);
}

.mahremiyet__giris {
  max-width: 38rem;
  font-size: var(--ol-govde-buyuk);
}

/* ── Sınır diyagramı ─────────────────────────────────────────────────────── */

.sinir-alani {
  display: grid;
  gap: var(--bosluk-m);
  align-items: center;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

@media (min-width: 58rem) {
  .sinir-alani {
    grid-template-columns: minmax(0, 1.35fr) 5.5rem minmax(0, 1fr);
    gap: 0;
  }
}

.sinir {
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: 2px dashed var(--m-cizgi);
  border-radius: var(--yuvarlak-kart) 3rem var(--yuvarlak-kart) var(--yuvarlak-kart);
  background: color-mix(in oklab, var(--m-yuzey) 70%, transparent);
}

.sinir__etiket,
.cikan__etiket {
  margin-bottom: var(--bosluk-s);
  font-size: var(--ol-etiket);
  font-weight: 600;
  letter-spacing: var(--harf-genis);
  text-transform: uppercase;
  color: var(--m-ikincil);
}

.sinir__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sinir__liste li {
  padding: 0.42rem 0.75rem 0.46rem;
  border: 1px solid var(--m-cizgi);
  border-radius: var(--yuvarlak-hap);
  font-size: var(--ol-mini);
  color: var(--m-metin);
  background: color-mix(in oklab, var(--renk-birincil-gece) 60%, transparent);
}

.sinir__alt {
  margin-top: var(--bosluk-s);
  font-size: var(--ol-mini);
  color: var(--m-ikincil);
}

/* Geçiş — dışarı çıkan tek paket */

.gecis {
  position: relative;
  justify-self: center;
  width: 2px;
  height: 3.5rem;
}

.gecis__cizgi {
  position: absolute;
  inset: 0;
  border-left: 2px dashed var(--m-cizgi);
}

.gecis__paket {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--yuvarlak-xs);
  background: var(--renk-dikkat);
  transform: translate3d(-50%, 0, 0);
}

@media (min-width: 58rem) {
  .gecis { width: 100%; height: 2px; }
  .gecis__cizgi { border-left: 0; border-top: 2px dashed var(--m-cizgi); }
  .gecis__paket { left: 0; top: 50%; transform: translate3d(0, -50%, 0); }
}

.cikan {
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: 1px solid color-mix(in oklab, var(--renk-dikkat) 45%, transparent);
  border-radius: var(--yuvarlak-kart);
  background: var(--m-yuzey);
  box-shadow: var(--golge-gece);
}

.cikan__deger {
  font-family: var(--yazi-soz);
  font-size: 1.3125rem;
  line-height: 1.25;
  color: var(--renk-dikkat);
  word-break: break-word;
}

.cikan__deger span {
  font-size: 1rem;
  color: var(--m-ikincil);
  font-variant-numeric: tabular-nums;
}

.cikan__not {
  margin-top: var(--bosluk-s);
  padding-top: var(--bosluk-s);
  border-top: 1px solid var(--m-cizgi);
  font-size: var(--ol-mini);
}

.cikan__not strong { color: var(--m-metin); }

/* ── Notlar ──────────────────────────────────────────────────────────────── */

.mahremiyet__notlar {
  display: grid;
  gap: var(--bosluk-m);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  border-top: 1px solid var(--m-cizgi);
}

@media (min-width: 44rem) { .mahremiyet__notlar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .mahremiyet__notlar { grid-template-columns: repeat(4, 1fr); } }

.not h3 {
  margin-bottom: var(--bosluk-2xs);
  font-size: var(--ol-h4);
  color: var(--m-metin);
}

.not p { font-size: var(--ol-kucuk); }
.not em { color: var(--m-metin); }

.not {
  position: relative;
  padding-left: var(--bosluk-s);
  border-left: 2px solid color-mix(in oklab, var(--renk-dikkat) 55%, transparent);
}

/* ── Hareket ─────────────────────────────────────────────────────────────── */

@keyframes paket-dikey {
  from { opacity: 0; transform: translate3d(-50%, 0, 0); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(-50%, 2.9rem, 0); }
}

@keyframes paket-yatay {
  from { opacity: 0; transform: translate3d(0, -50%, 0); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(4.9rem, -50%, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gecis__paket {
      animation: paket-dikey linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 45%;
    }

    @media (min-width: 58rem) {
      .gecis__paket { animation-name: paket-yatay; }
    }
  }
}