/*
 * Web sayfalarinin tek stil dosyasi (index, mobile, privacy, terms).
 *
 * Eklenti paneliyle (extension/content/overlay.js) ayni palet (21 Eyl 2026,
 * "kategori standardi"): koyu notr zemin, tek yesil vurgu, sistem tipografisi,
 * 44 px dokunma hedefleri, WCAG AA kontrast.
 * Sinif adlari degismedi - sayfalarin HTML'i ve web/mobile.js ayni adlari
 * kullanmaya devam ediyor.
 */
:root {
  --bg: #121212;
  --card: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.12);
  --line-kuvvetli: rgba(255,255,255,.22);
  --fg: #ffffff;
  --dim: #a3a3a3;
  /* Yesil vurgu. Yesil uzerine BEYAZ metin 2.3:1 (AA degil): dolgulu dugmede
     metin koyu (--accent-ustu), 8.9:1. */
  --accent: #22c55e;
  --accent-2: #14b8a6;
  --accent-ustu: #04130a;
  --link: #4ade80;
  --warn: #ffb020;
  --r-buyuk: 18px;
  --r-orta: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, system-ui, "Segoe UI", sans-serif;
  letter-spacing: .1px;
  display: flex;
  justify-content: center;
  /* Safe-area: iPhone'da ana ekran cubugu ve centik icerigi kesiyordu. */
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
main { width: 100%; max-width: 640px; }
h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; letter-spacing: -.4px; margin: 0 0 6px; }
h2 { font-size: 18px; letter-spacing: -.1px; margin: 34px 0 10px; }
.lede { color: var(--dim); margin: 0 0 26px; font-size: 17px; }

/* Marka satiri: ikonun (tools/make-icons.js) vektor esi + ad. */
.marka { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.marka svg, .marka img { width: 40px; height: 40px; display: block; flex: none; }
.marka h1 { margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-buyuk);
  padding: 18px;
  margin-bottom: 16px;
}
label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 8px; }
input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r-orta);
  border: 1px solid var(--line-kuvvetli);
  background: rgba(0,0,0,.35);
  color: var(--fg);
  /* 16 px alti: iOS Safari odaklaninca sayfayi otomatik yakinlastiriyor. */
  font: 16px/1.3 ui-monospace, "SF Mono", monospace;
  letter-spacing: 1px;
  transition: border-color .15s;
}
input::placeholder { color: #7d8797; }
input:focus { border-color: var(--accent); outline: none; }
.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button {
  flex: 1;
  min-width: 140px;
  /* 44 px: Apple HIG ve WCAG 2.5.5 asgari dokunma hedefi. */
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--r-orta);
  border: 1px solid var(--line-kuvvetli);
  background: rgba(255,255,255,.08);
  color: var(--fg);
  font: 500 15px/1.2 -apple-system, system-ui, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
button:active:not(:disabled) { transform: scale(.98); }
button.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--accent-ustu); font-weight: 650; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
/* Kapali mikrofon/kamera. Eskiden opacity .5 kullaniliyordu; yazi kontrasti
   yariya duserek okunmaz hale geliyordu. Renk kirmizinin ZEMIN tonunda,
   metin beyaz kaliyor. */
button.off { background: rgba(255,69,58,.2); border-color: rgba(255,69,58,.55); }
button.off:hover:not(:disabled) { background: rgba(255,69,58,.3); }
button:disabled { opacity: .55; cursor: not-allowed; }
.note { font-size: 15px; color: var(--dim); }
.warn { color: var(--warn); }
code {
  background: rgba(255,255,255,.1);
  padding: 2px 6px;
  border-radius: 6px;
  font: 14px ui-monospace, "SF Mono", monospace;
}
ul { padding-left: 22px; color: var(--dim); font-size: 15px; }
li { margin-bottom: 6px; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tile {
  position: relative;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--r-orta);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,.62);
  padding: 3px 8px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pos {
  font: 600 38px/1.1 ui-monospace, "SF Mono", monospace;
  text-align: center;
  margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.posLabel { text-align: center; color: var(--dim); font-size: 14px; }

/* Klavye odagi gorunur olmali; fare tiklamasinda halka cikmasin diye
   :focus degil :focus-visible. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(34,197,94,.4); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}