/* 08-gizlilik.css — bölüm 8: iki sütun (metin + "kilit" illüstrasyonu). */

.sahne-gizlilik {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: 110px clamp(16px, 7vw, 120px) 90px;
  max-width: 1280px; margin: 0 auto;
}

.gizlilik-listeler {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 28px);
  margin: 8px 0 22px;
}
.gizlilik-liste h3 { font-size: 13px; letter-spacing: 0.04em; margin: 0 0 10px; color: var(--metin); }
.gizlilik-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gizlilik-liste li {
  font-size: 14px; line-height: 1.45; color: var(--metin-ikincil);
  padding-left: 16px; position: relative;
}
.gizlilik-liste li::before { content: "·"; position: absolute; left: 0; color: var(--altin); font-weight: 700; }

.not { font-size: 13.5px; line-height: 1.55; color: var(--metin-ikincil); max-width: 46ch; margin: 0; }
.not a { color: var(--altin); }
.not a:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

/* ── Kilit illüstrasyonu ───────────────────────────────────────────
   Ekran görüntüsü yerine: veri "cip"leri telefonun içine kayar,
   ardından kilit kapanır. Tetik: sahneler/gizlilik.js, bölüm ilk kez
   görününce `.oynat` sınıfını bir kez ekliyor. */
.gizlilik-sahne-gorsel { display: flex; justify-content: center; }
.gizlilik-telefon {
  width: min(220px, 60vw); aspect-ratio: 9 / 17.5;
  background: var(--kart-zemin); border-radius: 32px;
  border: 6px solid #1e1a16;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px 14px; position: relative; overflow: hidden;
}
.gizlilik-veri { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.gizlilik-cip {
  font: 600 12.5px var(--govde-font); text-align: center; color: #1e1a16;
  background: color-mix(in srgb, var(--kor) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--kor) 30%, transparent);
  border-radius: 999px; padding: 7px 10px;
  opacity: 0; transform: translateY(-46px);
  transition: opacity 0.5s var(--yay), transform 0.5s var(--yay);
  transition-delay: calc(var(--gecikme) * 100ms);
}
.oynat .gizlilik-cip { opacity: 1; transform: none; }

.gizlilik-kilit { width: 40px; height: 40px; position: relative; margin-top: 6px; }
.gizlilik-kilit-govde {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 22px;
  border-radius: 6px; background: var(--altin);
}
.gizlilik-kilit-kavis {
  position: absolute; top: 0; left: 50%; width: 22px; height: 20px;
  border: 4px solid var(--altin); border-bottom: none; border-radius: 50% 50% 0 0;
  transform-origin: bottom right;
  transform: translateX(-50%) rotate(-38deg);
  transition: transform 0.6s var(--yay);
  transition-delay: 0.45s;
}
.oynat .gizlilik-kilit-kavis { transform: translateX(-50%) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .gizlilik-cip, .gizlilik-kilit-kavis { transition: none; }
}

@media (max-width: 760px) {
  .sahne-gizlilik { grid-template-columns: 1fr; padding-top: 100px; }
  .gizlilik-sahne-gorsel { order: -1; margin-bottom: 8px; }
  .gizlilik-listeler { grid-template-columns: 1fr; }
}