:root {
  --ground:    #EDF0F4;
  --surface:   #FBFCFD;
  --surface-2: #E4E9EF;
  --ink:       #101720;
  --ink-2:     #3A4452;
  --muted:     #626C7B;
  --line:      #CBD4DE;
  --line-soft: #DDE3EA;
  --accent:    #1B4B73;
  --accent-bg: #DCE7F1;
  --warm:      #A44F27;
  --warm-bg:   #F2E3D9;
  --good:      #2C6B4C;
  --good-bg:   #D9E9DF;
  --risk:      #96302B;
  --risk-bg:   #F3DDDB;

  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #0D1218;
    --surface:   #151C25;
    --surface-2: #1D2631;
    --ink:       #E4EAF1;
    --ink-2:     #B4C0CE;
    --muted:     #8A97A7;
    --line:      #2A3542;
    --line-soft: #222C37;
    --accent:    #7FB3DD;
    --accent-bg: #16283A;
    --warm:      #E09065;
    --warm-bg:   #33231A;
    --good:      #6FBF95;
    --good-bg:   #14291F;
    --risk:      #E4867F;
    --risk-bg:   #2E1917;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.kabuk { max-width: 780px; margin: 0 auto; padding: 0 16px 64px; }

/* ---------- üst çubuk ---------- */

.ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.ust .marka {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--ink);
}
.ust nav { display: flex; gap: 14px; align-items: center; }
.ust nav a {
  font-size: .88rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 2px;
}
.ust nav a:hover, .ust nav a:focus-visible { color: var(--accent); }

h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 4px;
}
h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  margin: 32px 0 12px;
}
.alt-metin { color: var(--muted); font-size: .92rem; margin: 0 0 24px; }

/* ---------- kartlar ---------- */

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.izgara > div { background: var(--surface); padding: 14px 16px; }
.izgara dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.izgara dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.izgara dd small {
  display: block;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 2px;
}

.kart {
  border: 1px solid var(--line);
  border-left: 3px solid var(--kc, var(--accent));
  background: var(--surface);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.kart--acik { --kc: var(--good); }
.kart--durmus { --kc: var(--muted); }
.kart h3 {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.kart dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 18px;
  margin: 0;
  font-size: .85rem;
}
.kart dt { color: var(--muted); font-size: .78rem; }
.kart dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.rozet {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 8px;
}
.rozet--iyi { background: var(--good-bg); color: var(--good); }
.rozet--bekle { background: var(--surface-2); color: var(--muted); }
.rozet--uyari { background: var(--warm-bg); color: var(--warm); }

/* ---------- uyarı ---------- */

.uyari {
  border: 1px solid var(--line);
  border-left: 3px solid var(--risk);
  background: var(--surface);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: .9rem;
}
.uyari b {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--risk);
  margin-bottom: 5px;
  font-weight: 500;
}

/* Aynı kalıp, farklı ton: `uyari` bir şeyin olmadığını, `bilgi` olduğunu
   söyler. İkisi de sayfanın üstünde aynı yerde görünür. */
.bilgi {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: .9rem;
}
.bilgi b {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  font-weight: 500;
}

/* ---------- giriş ---------- */

.giris {
  max-width: 340px;
  margin: 14vh auto 0;
  padding: 0 16px;
}
.giris h1 { margin-bottom: 6px; }
.giris p { color: var(--muted); font-size: .9rem; margin: 0 0 24px; }
.giris form { display: grid; gap: 12px; }

input[type="password"] {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px; /* iOS zoom'u engeller */
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}
input[type="password"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

button {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  padding: 13px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--accent);
  color: var(--surface);
  cursor: pointer;
  width: 100%;
}
button:hover { filter: brightness(1.1); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* giriş sayfası: marka yok, sessiz başlık */
.giris h1.sessiz {
  font-size: 2rem;
  color: var(--line);
  text-align: center;
  margin: 0 0 22px;
  user-select: none;
}
input[type="text"] {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}
input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
input:disabled, button:disabled { opacity: .5; cursor: not-allowed; }

/* ================= galeri ve kimlik ekranları ================= */

.kabuk--genis { max-width: 1100px; }

.satir-form { display: flex; gap: 8px; margin-bottom: 8px; }
.satir-form input { flex: 1; min-width: 0; }
.satir-form button { width: auto; flex: 0 0 auto; padding: 13px 20px; }

.ipucu { font-size: .82rem; color: var(--muted); margin: 6px 0 8px; }

.dugme-ikincil {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .92rem;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  width: auto;
}
.dugme-ikincil:hover { border-color: var(--accent); color: var(--accent); }
.tekrar-form { margin: 0 0 20px; }
.tekrar-form button { width: auto; }

/* ---- kimlik listesi ---- */
.kimlik-listesi { display: grid; gap: 10px; margin-top: 20px; }
.kimlik-kart {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 3px; background: var(--surface);
  padding: 14px 16px; text-decoration: none; color: var(--ink);
}
.kimlik-kart:hover { border-color: var(--accent); }
.kimlik-kart strong { font-family: var(--f-display); font-size: 1.02rem; }
.kimlik-kart span { font-size: .84rem; color: var(--muted); }

/* ---- profil şeridi ---- */
.profil {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); padding: 12px 14px; margin-bottom: 16px;
}
.profil__avatar { border-radius: 50%; flex: 0 0 auto; }
.profil__ad { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profil__ad strong { font-family: var(--f-display); font-size: 1rem; }
.profil__ad span { font-size: .8rem; color: var(--muted); }
.profil__kredi {
  font-family: var(--f-mono); font-size: 11px; white-space: nowrap;
  background: var(--accent-bg); color: var(--accent);
  padding: 4px 9px; border-radius: 2px;
}

/* ---- sekmeler ---- */
.sekmeler { display: flex; gap: 6px; margin-bottom: 16px; }
.sekmeler a {
  font-family: var(--f-display); font-weight: 600; font-size: .88rem;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 3px;
  text-decoration: none; color: var(--muted); background: var(--surface);
}
.sekmeler a.etkin { color: var(--surface); background: var(--accent); border-color: var(--accent); }

/* ---- ızgara: sabit oranlı hücreler, masonry değil ---- */
.galeri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding-bottom: 96px;
}
@media (min-width: 560px) {
  .galeri { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}

.oge {
  position: relative;
  display: block;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
  -webkit-tap-highlight-color: transparent;
}
.oge input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}

.oge__cerceve {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.oge__cerceve img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.oge__bos {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; color: var(--muted); text-align: center; padding: 8px;
}

/* seçim göstergesi: daire + tik, iç kenarlık, hafif küçülme */
.oge__tik {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.28);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.oge input:checked + .oge__cerceve {
  transform: scale(.94);
  filter: brightness(.82);
  box-shadow: inset 0 0 0 3px #2563eb;
}
.oge input:checked + .oge__cerceve .oge__tik {
  background: #2563eb;
  border-color: #fff;
}
.oge input:checked + .oge__cerceve .oge__tik::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.oge input:focus-visible + .oge__cerceve {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.oge__etiket, .oge__boyut, .oge__alindi, .oge__ac {
  position: absolute;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .05em;
  background: rgba(0,0,0,.62); color: #fff;
  padding: 3px 6px; border-radius: 2px; line-height: 1.3;
}
.oge__etiket { left: 6px; bottom: 6px; }
.oge__boyut  { right: 6px; bottom: 6px; }
.oge__alindi { left: 6px; top: 6px; background: rgba(37,99,235,.9); }
.oge__ac {
  right: 6px; top: 6px; text-decoration: none;
  background: rgba(255,255,255,.92); color: #111;
}

.oge--alindi { opacity: .55; cursor: default; }
.oge--durum-hata .oge__cerceve { box-shadow: inset 0 0 0 2px var(--risk); }
.oge--durum-iniyor .oge__cerceve { box-shadow: inset 0 0 0 2px var(--warm); }
.oge__hata {
  display: block; font-size: .72rem; color: var(--risk);
  margin-top: 4px; line-height: 1.35;
}

/* ---- daha fazla ---- */
.daha { text-align: center; padding: 8px 0 20px; }
.daha small { display: block; color: var(--muted); font-size: .76rem; margin-top: 8px; }

/* ---- sabit alt çubuk: sadece seçim varken ---- */
.alt-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px -8px rgba(0,0,0,.35);
  transform: translateY(140%);
  transition: transform .18s ease;
}
form:has(input[name="oge"]:checked) .alt-cubuk { transform: none; }
.alt-cubuk__sayac {
  flex: 1; font-family: var(--f-display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.alt-cubuk button { width: auto; padding: 12px 26px; }

@media (prefers-reduced-motion: reduce) {
  .oge__cerceve, .alt-cubuk { transition: none; }
}

/* hesap listesi ve zaman derinliği */
.hesap-listesi { display: grid; gap: 8px; margin-bottom: 14px; }
.hesap-satir {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); padding: 10px 12px;
}
.hesap-satir > a {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
.hesap-satir strong { font-family: var(--f-display); font-size: .96rem; }
.hesap-satir span { font-size: .74rem; color: var(--muted); }
.hesap-satir form { margin: 0; }
.dugme-sil {
  width: auto; padding: 7px 12px; font-size: .8rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px;
}
.dugme-sil:hover { color: var(--risk); border-color: var(--risk); filter: none; }

.sekmeler--hesap { margin-bottom: 10px; }
.sekmeler--hesap a { font-size: .82rem; padding: 7px 13px; }

.derinlik {
  font-size: .82rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 3px;
  padding: 9px 12px; margin: 0 0 14px;
}
.derinlik strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.oge__tarih {
  position: absolute; left: 6px; top: 6px;
  font-family: var(--f-mono); font-size: 9.5px;
  background: rgba(0,0,0,.62); color: #fff;
  padding: 3px 6px; border-radius: 2px;
}

/* çoklu gönderi (carousel) parça rozeti */
.oge__album {
  position: absolute; right: 6px; top: 36px;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  background: rgba(255,255,255,.92); color: #111;
  padding: 3px 6px; border-radius: 2px;
}

/* highlight kapakları */
.hl-kapaklar {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.hl-kapak {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  padding: 12px 8px; text-decoration: none; color: var(--ink); text-align: center;
}
.hl-kapak:hover { border-color: var(--accent); }
.hl-kapak img { border-radius: 50%; width: 68px; height: 68px; object-fit: cover; }
.hl-kapak strong { font-family: var(--f-display); font-size: .86rem; }
.hl-kapak span { font-size: .74rem; color: var(--muted); }

/* toplu seçim */
.toplu { margin: 4px 0 14px; }
.toplu__kutu {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  padding: 10px 14px; font-size: .88rem;
}
.toplu__kutu input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- yüz analizi ---------- */

.yuz-ozet {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.yuz-ozet__kart {
  border: 1px solid var(--line); border-left: 3px solid var(--yc, var(--muted));
  background: var(--surface); border-radius: 3px; padding: 11px 13px;
}
.yuz-ozet__kart strong {
  display: block; font-family: var(--f-display); font-size: 1.35rem;
  line-height: 1.1; color: var(--yc, var(--ink)); font-variant-numeric: tabular-nums;
}
.yuz-ozet__kart span { font-size: .76rem; color: var(--muted); }
.yuz-ozet__kart--iyi   { --yc: var(--good); }
.yuz-ozet__kart--uyari { --yc: var(--warm); }
.yuz-ozet__kart--kotu  { --yc: var(--risk); }
.yuz-ozet__kart--notr  { --yc: var(--muted); }

.referans-onay {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 3px; padding: 14px; margin: 14px 0;
}
.referans-onay img { border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
.referans-onay > div { flex: 1; min-width: 190px; }
.referans-onay strong { font-family: var(--f-display); font-size: 1rem; }
.referans-onay p { font-size: .84rem; color: var(--muted); margin: 5px 0 11px; }
.referans-onay button { width: auto; }

.yuz-rozet {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  padding: 3px 6px; border-radius: 2px; color: #fff;
}
.yuz-rozet--eslesti     { background: rgba(44,107,76,.92); }
.yuz-rozet--coklu-yuz   { background: rgba(164,79,39,.92); }
.yuz-rozet--belirsiz    { background: rgba(164,79,39,.92); }
.yuz-rozet--farkli-kisi { background: rgba(150,48,43,.94); }
.yuz-rozet--yuz-yok     { background: rgba(0,0,0,.55); }

/* ---------- mobil ince ayar ---------- */

@media (max-width: 560px) {
  .kabuk, .kabuk--genis { padding-left: 12px; padding-right: 12px; }
  .ust { flex-wrap: wrap; gap: 8px; padding: 14px 0; }
  .ust nav { gap: 10px; flex-wrap: wrap; }
  .ust nav a { font-size: .82rem; }
  .satir-form { flex-wrap: wrap; }
  .satir-form input { flex: 1 1 100%; }
  .satir-form button { width: 100%; }
  .sekmeler { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .sekmeler a { white-space: nowrap; flex: 0 0 auto; }
  .izgara { grid-template-columns: repeat(2, 1fr); }
  .kart dl { grid-template-columns: repeat(2, 1fr); }
  .hesap-satir { flex-wrap: wrap; }
  h2 { margin-top: 26px; }
}

/* ================= profil sayfası yeniden ================= */

.baslik-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.baslik-satir h1 { margin: 0; }
.baslik-eylem { display: flex; gap: 8px; flex-wrap: wrap; }
.dugme-kucuk { padding: 8px 14px; font-size: .84rem; }

.ozet-serit {
  display: grid; gap: 8px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.ozet-kutu {
  border: 1px solid var(--line); border-left: 3px solid var(--oc, var(--muted));
  background: var(--surface); border-radius: 3px; padding: 11px 13px;
}
.ozet-kutu strong {
  display: block; font-family: var(--f-display); font-size: 1.5rem;
  line-height: 1.05; color: var(--oc, var(--ink)); font-variant-numeric: tabular-nums;
}
.ozet-kutu span { font-size: .75rem; color: var(--muted); }
.ozet-kutu--iyi { --oc: var(--good); }
.ozet-kutu--kotu { --oc: var(--risk); }
.ozet-kutu--calisiyor { --oc: var(--warm); }

/* süzgeç */
.suzgec {
  display: flex; gap: 7px; margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.suzgec__dugme {
  width: auto; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--f-body); font-weight: 500; font-size: .85rem;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.suzgec__dugme b {
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500;
  color: var(--muted); margin-left: 3px;
}
.suzgec__dugme.etkin {
  background: var(--accent); border-color: var(--accent); color: var(--surface);
}
.suzgec__dugme.etkin b { color: var(--surface); opacity: .85; }
.suzgec__dugme:hover:not(.etkin) { border-color: var(--accent); color: var(--accent); }

/* profil galerisi: daha büyük kartlar, tamamı dokunulabilir */
.galeri--profil { grid-template-columns: repeat(2, 1fr); padding-bottom: 32px; }
@media (min-width: 620px) {
  .galeri--profil { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.oge--dugme {
  padding: 0; border: 0; background: none; width: 100%;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.oge--dugme:focus-visible .oge__cerceve {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.oge--dugme:hover .oge__cerceve { filter: brightness(1.06); }
.oge[hidden] { display: none; }

.oge__oynat {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; padding-left: 3px; pointer-events: none;
}

.yuz-rozet {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  padding: 3px 7px; border-radius: 2px; color: #fff; line-height: 1.4;
}

/* ---------- şablon sayfası ---------- */

.sablon-form {
  display: grid; gap: 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 3px; padding: 16px;
}
.sablon-form input[type="url"] {
  width: 100%; font-family: var(--f-body); font-size: 16px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--ground); color: var(--ink);
}
.sablon-form button { width: 100%; }

.model-sec__baslik {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.model-sec__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.model-sec__liste--dar { margin: 8px 0 10px; }

.model-kutu {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--ground); padding: 9px 14px 9px 11px;
  font-size: .88rem; -webkit-tap-highlight-color: transparent;
}
.model-kutu input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.model-kutu span { display: flex; flex-direction: column; line-height: 1.25; }
.model-kutu small { font-size: .68rem; color: var(--muted); }
.model-kutu:has(input:checked) {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent);
}
.model-kutu--kucuk { padding: 7px 12px 7px 9px; font-size: .82rem; }

.sablon-kart {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-left: 3px solid var(--sc, var(--muted));
  background: var(--surface); border-radius: 3px; padding: 14px; margin-bottom: 12px;
}
.sablon-kart--hazir  { --sc: var(--good); }
.sablon-kart--iniyor { --sc: var(--warm); }
.sablon-kart--hata   { --sc: var(--risk); }
.sablon-kart__gorsel { flex: 0 0 auto; }
.sablon-kart__gorsel img { border-radius: 3px; object-fit: cover; display: block; }
.sablon-kart__bos {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 160px; border-radius: 3px;
  background: var(--surface-2); color: var(--muted); font-size: .78rem;
}
.sablon-kart__govde { flex: 1; min-width: 0; }
.sablon-kart__govde strong {
  display: block; font-family: var(--f-display); font-size: 1rem; margin-bottom: 3px;
}
.sablon-kart__meta { font-family: var(--f-mono); font-size: .76rem; color: var(--muted); }
.sablon-kart__eylem {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.sablon-kart__eylem form { margin: 0; }
.sablon-kart__sayac { font-size: .78rem; color: var(--muted); }
.sablon-uygula { margin-top: 10px; }
.sablon-uygula button { width: auto; }

@media (max-width: 560px) {
  .sablon-kart { flex-direction: column; }
  .sablon-kart__gorsel img, .sablon-kart__bos { width: 100%; height: 180px; }
}

/* ================= tamamlananlar ================= */

.baslik-sayac {
  font-family: var(--f-mono); font-size: .8rem; color: var(--muted);
  white-space: nowrap;
}

/* model kartlari */
.model-izgara {
  display: grid; gap: 12px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (max-width: 520px) {
  .model-izgara { grid-template-columns: repeat(2, 1fr); }
}
.model-kart {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.model-kart__gorsel {
  position: relative; display: block; aspect-ratio: 3/4;
  border-radius: 5px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease;
}
.model-kart:hover .model-kart__gorsel,
.model-kart:focus-visible .model-kart__gorsel {
  transform: translateY(-2px); border-color: var(--accent);
}
.model-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-kart__adet {
  position: absolute; right: 8px; top: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,.68); color: #fff;
  padding: 4px 9px; border-radius: 999px;
}
.model-kart__ad {
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; line-height: 1.2;
}
.model-kart__meta { font-size: .74rem; color: var(--muted); }

/* ---------- tam ekran izleyici ----------

   Üç satırlık ızgara: üst çubuk / video / alt çubuk. Daha önce oklar ve
   bilgi şeridi videonun üzerine mutlak konumlanıyordu; telefonda tam da
   videonun kendi kontrol çubuğunun üstüne düşüyor, kullanıcı ilerletme
   çubuğuna basamıyordu. Artık üst üste binen hiçbir katman yok.

   Yükseklik 100dvh — 100vh mobil tarayıcıda adres çubuğunu saymıyor,
   video ekrandan taşıyor ve kontroller görünmez oluyordu.               */

.izleyici {
  position: fixed; inset: 0; z-index: 100;
  background: #08090c;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh;
  overscroll-behavior: contain;
}
.izleyici[hidden] { display: none; }

.izleyici__ust {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
           8px calc(10px + env(safe-area-inset-left));
}
.izleyici__dugme {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.izleyici__dugme:hover, .izleyici__dugme:focus-visible { background: rgba(255,255,255,.22); }
.izleyici__dugme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.izleyici__govde {
  min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.izleyici__govde video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; display: block;
  border-radius: 4px; background: #000;
}

.izleyici__alt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px calc(10px + env(safe-area-inset-right))
           calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
}
.izleyici__ok {
  width: 46px; height: 46px; flex: 0 0 auto; padding: 0 0 3px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff;
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.izleyici__ok:hover { background: rgba(255,255,255,.22); }
.izleyici__ok[hidden] { display: none; }

.izleyici__bilgi {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; text-align: center;
}
.izleyici__bilgi strong {
  font-family: var(--f-display); font-weight: 600; font-size: .9rem; color: #fff;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.izleyici__bilgi span {
  font-family: var(--f-mono); font-size: .72rem; color: #aab3c0;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- çıktı kartı ---------- */

.galeri--cikti {
  display: grid; gap: 10px; padding-bottom: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
  .galeri--cikti { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

.cikti-kart {
  padding: 0; border: 0; background: none; width: 100%; min-width: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 7px;
  -webkit-tap-highlight-color: transparent;
}
.cikti-kart__cerceve {
  position: relative; display: block; aspect-ratio: 3/4;
  border-radius: 5px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease;
}
.cikti-kart:hover .cikti-kart__cerceve { transform: translateY(-2px); border-color: var(--accent); }
.cikti-kart:active .cikti-kart__cerceve { transform: scale(.985); }
.cikti-kart:focus-visible .cikti-kart__cerceve { outline: 3px solid var(--accent); outline-offset: 2px; }
.cikti-kart__cerceve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cikti-kart__oynat {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding-left: 2px; pointer-events: none;
}
.cikti-kart__sure {
  position: absolute; right: 6px; bottom: 6px;
  font-family: var(--f-mono); font-size: 10px; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 3px 6px; border-radius: 3px; line-height: 1.3;
}
.cikti-kart__alt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cikti-kart__ad {
  font-family: var(--f-display); font-weight: 600; font-size: .82rem;
  line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cikti-kart__meta {
  font-family: var(--f-mono); font-size: .68rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- başlık satırı / geri ---------- */

.baslik-satir__sol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geri-baglanti {
  font-family: var(--f-mono); font-size: .72rem; color: var(--muted);
  text-decoration: none;
}
.geri-baglanti:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cikti-kart__cerceve, .izleyici__dugme { transition: none; }
  .cikti-kart:hover .cikti-kart__cerceve,
  .cikti-kart:active .cikti-kart__cerceve { transform: none; }
}

/* ==========================================================================
   MOBİL DENETİMİ — düzeltmeler
   ==========================================================================

   1. Yatay kayma. `.galeri` iki eşit sütun istiyordu ama `1fr` aslında
      `minmax(auto, 1fr)`; `auto` asgarisi hücrenin min-content genişliği.
      Kartlarda `content-visibility: auto` + `contain-intrinsic-size: auto
      240px` vardı: tarayıcı çizimi atladığında hücre 240px genişliğinde
      sayılıyor, iki sütun 500px oluyordu. 390px'lik telefonda sayfa
      yanlara kayıyordu. Çözüm iki yerde birden: `minmax(0, 1fr)` ve
      kartlardan `content-visibility` kaldırıldı (kartlar zaten
      `loading="lazy"` ve `aspect-ratio` ile ucuz).

   2. Dokunma hedefleri. Üstteki metin gezinti bağlantıları ~20px
      yüksekliğindeydi; parmak için asgari 44px gerekir. Mobilde gezinti
      alta, başparmak bölgesine taşındı.

   3. Boşluk ve hiyerarşi. Marka + gezinti + başlık üst üste ~150px yer
      yiyordu. Üst çubuk yapışkan ve 52px.
   ========================================================================== */

/* ---------- 1. yatay kayma ---------- */

html, body { max-width: 100%; overflow-x: clip; }

.galeri,
.galeri--profil,
.galeri--cikti,
.model-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 560px) {
  .galeri { grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); }
}
@media (min-width: 620px) {
  .galeri--profil { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
  .galeri--cikti  { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
  .model-izgara   { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
}

/* Izgara hücresi içeriğinden dolayı şişmesin. */
.galeri > *, .galeri--profil > *, .galeri--cikti > *, .model-izgara > * { min-width: 0; }

/* Çizimi atlanan kart 240px genişliğinde sayılıyordu — ızgarayı taşıran
   asıl sebep buydu. */
.oge { content-visibility: visible; contain-intrinsic-size: auto; }

.izgara, .kart dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Uzun metin (şablon adı, kullanıcı adı, hata) kutuyu genişletmesin. */
.oge__etiket, .oge__hata, .sablon-kart__meta, .kart__ad, .baslik-sayac {
  min-width: 0; overflow-wrap: anywhere;
}

/* Tablolar kendi kutusunda kaysın, sayfa gövdesi değil. */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw table { min-width: 480px; }

/* ---------- 2. üst çubuk ---------- */

.ust {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 54px;
  padding-top: env(safe-area-inset-top);
  height: calc(54px + env(safe-area-inset-top));
  margin: 0 -16px 18px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.ust .marka {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.02em; text-decoration: none; color: var(--ink);
  flex: 0 0 auto;
}
.ust__yol {
  font-family: var(--f-mono); font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ust__yol::before { content: "/"; margin-right: 6px; opacity: .5; }

.ust .ust__nav { display: none; }

.ust__cikis {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 10px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: .82rem;
  -webkit-tap-highlight-color: transparent;
}
.ust__cikis:hover { color: var(--risk); background: var(--risk-bg); }
.ust__cikis-yazi { display: none; }

/* ---------- 2b. alt sekme çubuğu (mobil) ---------- */

.sekme {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.sekme a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 7px 2px 8px;
  text-decoration: none; color: var(--muted);
  font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.sekme a span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sekme a[aria-current="page"] { color: var(--accent); }
.sekme a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.sekme a:active { background: var(--surface-2); }

/* Sabit çubuk içeriği örtmesin. */
.kabuk { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

@media (min-width: 720px) {
  .sekme { display: none; }
  .ust .ust__nav { display: flex; gap: 4px; margin-left: auto; }
  .ust .ust__nav a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 11px;
    border-radius: 8px; font-size: .87rem; color: var(--muted); text-decoration: none;
  }
  .ust .ust__nav a:hover { color: var(--ink); background: var(--surface-2); }
  .ust .ust__nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
  .ust__cikis { margin-left: 6px; }
  .ust__cikis-yazi { display: inline; }
  .kabuk { padding-bottom: 72px; }
}

/* ---------- 3. başlık bloğu ---------- */

.baslik-satir {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 12px; margin-bottom: 14px;
}
.baslik-satir h1 { margin: 0; }
.baslik-satir__sol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.baslik-eylem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.baslik-sayac {
  font-family: var(--f-mono); font-size: .76rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.geri-baglanti {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: var(--f-mono); font-size: .74rem; color: var(--muted);
  text-decoration: none;
}
.geri-baglanti:hover { color: var(--accent); }

h1 { font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-family: var(--f-mono); font-weight: 500;
  margin: 26px 0 10px;
}
@media (min-width: 720px) { h1 { font-size: 1.75rem; } }

/* ---------- 4. dokunma hedefleri ---------- */

button, .dugme-ikincil, .dugme-sil, .dugme-kucuk {
  -webkit-tap-highlight-color: transparent;
}
.dugme-kucuk, .dugme-ikincil, .dugme-sil {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.dugme-kucuk { padding: 0 13px; }
button:active, .dugme-ikincil:active, .dugme-sil:active { transform: scale(.975); }

.model-kutu { min-height: 46px; }
.model-kutu span { line-height: 1.25; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ---------- 5. şablon kartı: model listesini katla ----------

   Her şablon kartı yedi model onay kutusunu tekrar ediyordu. Beş şablonda
   35 satır: sayfa 390px'te 5548px uzunluğundaydı ve kullanıcı listeyi
   geçmek için ekranlarca kaydırıyordu. Artık açılır. */

.model-ac { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; }
.model-ac > summary {
  display: flex; align-items: center; gap: 7px;
  min-height: 42px; cursor: pointer; list-style: none;
  font-family: var(--f-body); font-size: .86rem; font-weight: 500; color: var(--accent);
}
.model-ac > summary::-webkit-details-marker { display: none; }
.model-ac > summary::after {
  content: "▾"; margin-left: auto; font-size: .8rem; color: var(--muted);
  transition: transform .15s ease;
}
.model-ac[open] > summary::after { transform: rotate(180deg); }
.model-ac__govde { display: grid; gap: 8px; padding: 6px 0 4px; }

.model-sec__liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 520px) {
  .model-sec__liste { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
}

.sablon-kart__eylem {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.sablon-kart__sayac {
  font-family: var(--f-mono); font-size: .72rem; color: var(--muted);
  margin-left: auto; font-variant-numeric: tabular-nums;
}

/* ---------- 6. süzgeç şeridi kenara yapışmasın ---------- */

.suzgec {
  margin-left: -16px; margin-right: -16px;
  padding-left: 16px; padding-right: 16px;
  scroll-padding-left: 16px; scrollbar-width: none;
}
.suzgec::-webkit-scrollbar { display: none; }
.suzgec__dugme { min-height: 42px; }

/* ---------- 7. hareket tercihi ---------- */

@media (prefers-reduced-motion: reduce) {
  .model-ac > summary::after { transition: none; }
  button:active, .dugme-ikincil:active, .dugme-sil:active { transform: none; }
}

.suzgec {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
}

/* Sablon karti: poster kutusu sabit oranli olsun.

   Dikey (1080x1920) ve yatay (1920x1080) sablonlar yan yana gelince
   kartlarin yuksekligi zipliyor ve liste tirtikli goruniyordu. */
.sablon-kart { display: flex; gap: 12px; align-items: flex-start; }
.sablon-kart__gorsel {
  flex: 0 0 96px; width: 96px; aspect-ratio: 3/4;
  border-radius: 5px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.sablon-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sablon-kart__govde { flex: 1 1 auto; min-width: 0; }
.sablon-kart__govde > strong {
  display: block; font-family: var(--f-display); font-size: .95rem;
  line-height: 1.25; margin-bottom: 3px; overflow-wrap: anywhere;
}
.sablon-kart__meta {
  display: block; font-family: var(--f-mono); font-size: .7rem;
  color: var(--muted); margin-bottom: 2px;
}
@media (min-width: 560px) {
  .sablon-kart__gorsel { flex-basis: 128px; width: 128px; }
}

/* ---------- kuyruk durum şeridi ----------

   İşler tablosu şablon listesinin en altındaydı: 390px'te oraya varmak
   ~4000px kaydırma demekti. Özet artık sayfanın en üstünde tek satır,
   ayrıntı kendi sayfasında. */

.kuyruk-serit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; background: var(--surface);
}
.kuyruk-serit__ad {
  font-family: var(--f-display); font-weight: 600; font-size: .88rem;
  color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kuyruk-serit__asama {
  font-family: var(--f-mono); font-size: .72rem; color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kuyruk-serit__link {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; min-height: 34px;
  font-family: var(--f-mono); font-size: .72rem; color: var(--accent);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.kuyruk-serit__link:hover { text-decoration: underline; }

.calisan {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--warm);
  border-radius: 4px; background: var(--surface);
}
.calisan__nokta {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warm); animation: nabiz 1.6s ease-in-out infinite;
}
@keyframes nabiz { 0%, 100% { opacity: 1 } 50% { opacity: .28 } }
@media (prefers-reduced-motion: reduce) {
  .calisan__nokta { animation: none; }
}
.calisan__ad { font-family: var(--f-display); font-weight: 600; font-size: .9rem; }
.calisan__asama { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }

/* ---------- iş listesi ----------

   Tablo değil kart. Beş sütunlu tablo 390px'te yatay kaydırma istiyordu
   ve hiçbir satır tek bakışta okunmuyordu. */

.is-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.is-satir {
  display: grid; gap: 4px;
  padding: 11px 13px; border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 4px;
  background: var(--surface);
}
.is-satir--calisiyor    { border-left-color: var(--warm); }
.is-satir--bitti        { border-left-color: var(--good); }
.is-satir--hata         { border-left-color: var(--risk); }
.is-satir--sirada       { border-left-color: var(--line); }
.is-satir--duraklatildi { border-left-color: var(--line-soft); opacity: .72; }

.is-satir__ust { display: flex; align-items: center; gap: 8px; min-width: 0; }
.is-satir__kimlik {
  font-family: var(--f-display); font-weight: 600; font-size: .92rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-satir__ust .rozet { margin-left: auto; flex: 0 0 auto; }
.is-satir__sablon {
  font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere;
}
.is-satir__alt { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.is-satir__meta {
  font-family: var(--f-mono); font-size: .69rem; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-satir__alt .dugme-kucuk { margin-left: auto; flex: 0 0 auto; }
.is-satir__hata {
  margin: 4px 0 0; font-family: var(--f-mono); font-size: .69rem;
  color: var(--risk); overflow-wrap: anywhere;
}

.rozet--kotu { background: var(--risk-bg); color: var(--risk); }

/* ---------- şablon ekleme katlanır ---------- */

.ekle-ac {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); margin-bottom: 18px;
}
.ekle-ac > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 13px; cursor: pointer; list-style: none;
  font-family: var(--f-body); font-weight: 600; font-size: .9rem; color: var(--accent);
}
.ekle-ac > summary::-webkit-details-marker { display: none; }
.ekle-ac > summary::after {
  content: "▾"; margin-left: auto; color: var(--muted); font-size: .8rem;
}
.ekle-ac[open] > summary::after { content: "▴"; }
.ekle-ac[open] > summary { border-bottom: 1px solid var(--line-soft); }
.ekle-ac .sablon-form { border: 0; background: none; margin: 0; }

.sablon-kart__sayac {
  font-family: var(--f-mono); font-size: .7rem; color: var(--muted);
  margin-left: auto; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.sablon-kart__sayac:hover { color: var(--accent); text-decoration: underline; }

/* Suzgec dugmeleri artik <a>: bagalanti alt cizgisi ve renk mirasi
   pill gorunumunu bozuyordu. */
a.suzgec__dugme {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
a.suzgec__dugme:hover:not(.etkin) { text-decoration: none; }
a.suzgec__dugme.etkin { color: var(--surface); }

/* ---------- karar sayfasi ----------

   Telefonda tek elle yapilan bir is: bak, karar ver, kaydir. Bu yuzden
   tek sutun, buyuk gorsel, ekranin altina yakin iki buyuk dugme. */

.karar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warm);
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 14px;
  display: grid;
  gap: 11px;
  transition: opacity .18s ease, border-color .18s ease;
}
.karar[data-durum="coklu-yuz"]   { border-left-color: var(--accent); }
.karar[data-durum="farkli-kisi"] { border-left-color: var(--risk); }

.karar--bitti  { opacity: .5; }
.karar--alindi { border-left-color: var(--good); }
.karar--elendi { border-left-color: var(--muted); }
.karar--hata   { border-left-color: var(--risk); opacity: 1; }
.karar--bitti .karar-dugme { pointer-events: none; }

.karar__ust { display: grid; gap: 2px; }
.karar__soru {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.karar__meta {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Kaynak medya — karar icin baglam sart. */
.karar__kaynak {
  position: relative;
  display: block;
  aspect-ratio: 1;
  max-height: 340px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  -webkit-tap-highlight-color: transparent;
}
.karar__kaynak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karar__buyut {
  position: absolute; right: 7px; bottom: 7px;
  font-family: var(--f-mono); font-size: 10px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 4px 8px; border-radius: 3px;
}

/* Bulunan yuzler. Coklu yuzde dogru olani sec. */
.karar__yuzler {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.yuz-sec {
  position: relative;
  padding: 0; border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface-2); cursor: pointer; overflow: hidden;
  width: 72px; height: 72px; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.yuz-sec:disabled { cursor: default; opacity: .85; }
.yuz-sec img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yuz-sec--secili { border-color: var(--good); box-shadow: 0 0 0 2px var(--good-bg); }
.yuz-sec__skor {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-mono); font-size: 9.5px;
  background: rgba(0,0,0,.72); color: #fff;
  padding: 2px 0; text-align: center;
  font-variant-numeric: tabular-nums;
}
.karar__ipucu {
  font-family: var(--f-mono); font-size: .68rem; color: var(--muted);
}

/* Serbest not: sistemin goremedigi baglam. */
.karar__not { display: grid; gap: 4px; }
.karar__not > span {
  font-family: var(--f-mono); font-size: .68rem; color: var(--muted);
}
.karar__not textarea {
  width: 100%; resize: vertical;
  font-family: var(--f-body); font-size: 16px;  /* 16px: iOS yakinlastirmasin */
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--ground); color: var(--ink);
  line-height: 1.4;
}
.karar__not textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Iki buyuk dugme — basparmak bolgesi. */
.karar__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.karar-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 52px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 5px;
  font-family: var(--f-body); font-weight: 600; font-size: .93rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--surface); color: var(--ink);
}
.karar-dugme--evet  { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.karar-dugme--hayir { background: var(--surface-2); color: var(--ink-2); }
.karar-dugme:active { transform: scale(.975); }

.bitti-kutu {
  display: grid; gap: 7px; justify-items: start;
  background: var(--good-bg); border-radius: 4px; padding: 18px 20px;
}
.bitti-kutu strong { font-family: var(--f-display); font-size: 1.05rem; color: var(--good); }
.bitti-kutu span { font-size: .9rem; color: var(--ink-2); }

/* Karar sayfasina kisayol — kimlik sayfasindan. */
.karar-cagri {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--warm-bg); border-radius: 4px;
  padding: 12px 14px; margin-bottom: 16px;
  text-decoration: none; color: var(--ink);
}
.karar-cagri strong { font-family: var(--f-display); font-size: .95rem; }
.karar-cagri span { font-size: .84rem; color: var(--ink-2); }
.karar-cagri .dugme-kucuk { margin-left: auto; }

@media (min-width: 620px) {
  .karar { grid-template-columns: 300px 1fr; align-items: start; }
  .karar__ust      { grid-column: 2; }
  .karar__kaynak   { grid-row: 1 / span 4; grid-column: 1; max-height: none; }
  .karar__yuzler,
  .karar__not,
  .karar__dugmeler { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .karar { transition: none; }
  .karar-dugme:active { transform: none; }
}


/* ---------- karar sayfasi: coklu secim ve geri alma ----------

   Iki gercek sorun:
   1. Ayni kisi bir karede iki kez bulunabiliyor (video karelerinde
      tekillestirme her zaman toplamiyor). Tek secime zorlamak "hangisini
      seceyim" ikilemi yaratiyordu -> secim coklu.
   2. Karar verilen kart listeden kayboluyordu, yanlis dokunmanin donusu
      yoktu -> ayri "Verilmis kararlar" bolumu ve Geri al dugmesi. */

.karar__secenekler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 10px;
}
.yuz-kart {
  position: relative; padding: 0; overflow: hidden;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface-2); cursor: pointer; text-align: left;
  display: grid;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .14s ease, transform .14s ease;
}
.yuz-kart img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.yuz-kart:active { transform: scale(.98); }
.yuz-kart:hover  { border-color: var(--accent); }
.yuz-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Secili oldugu tek bakista belli olsun: cerceve + tik rozeti. */
.yuz-kart__tik {
  position: absolute; right: 6px; top: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.42); color: transparent;
  border: 2px solid rgba(255,255,255,.75);
  transition: background .14s ease, color .14s ease;
}
.yuz-kart--secili { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.yuz-kart--secili .yuz-kart__tik {
  background: var(--good); color: #fff; border-color: #fff;
}
.yuz-kart__alt {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; padding: 7px 9px 8px;
}
.yuz-kart__alt b {
  font-family: var(--f-display); font-size: .82rem; font-weight: 600; color: var(--ink);
}
.yuz-kart__alt > span {
  font-family: var(--f-mono); font-size: .68rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.karar__ipucu {
  margin: 0; font-family: var(--f-mono); font-size: .7rem;
  color: var(--muted); line-height: 1.45;
}
.karar__ipucu b { color: var(--ink-2); }

.karar__tekyuz { display: flex; align-items: center; gap: 10px; }
.karar__tekyuz img {
  width: 72px; height: 72px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--line); display: block; flex: 0 0 auto;
}
.karar__tekyuz span { font-family: var(--f-mono); font-size: .72rem; color: var(--muted); }

/* Sonuc satiri: ne oldugunu YAZIYLA soyle, renk tek basina yetmez. */
.karar__sonuc {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 500;
  padding: 8px 11px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-2);
}
.karar__sonuc[hidden] { display: none; }
.karar--alindi .karar__sonuc { background: var(--good-bg); color: var(--good); }
.karar--elendi .karar__sonuc { background: var(--surface-2); color: var(--muted); }
.karar--hata   .karar__sonuc { background: var(--risk-bg); color: var(--risk); }

.karar--coklu .karar__soru { color: var(--accent); }

/* Geri al: her zaman erisilebilir, karar kalici degil. */
.geri-al {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--ink-2);
  font-family: var(--f-body); font-size: .84rem; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.geri-al[hidden] { display: none; }
.geri-al:hover { border-color: var(--accent); color: var(--accent); }
.geri-al:active { transform: scale(.975); }

/* Karar verilmis kart: sonuc ve geri al gorunur kalsin, gerisi soluk. */
.karar--bitti .karar__kaynak,
.karar--bitti .karar__secenekler,
.karar--bitti .karar__tekyuz,
.karar--bitti .karar__not,
.karar--bitti .karar__ipucu { opacity: .45; }
.karar--bitti .karar__dugmeler { display: none; }
.karar--bitti .yuz-kart { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .yuz-kart, .yuz-kart__tik { transition: none; }
  .yuz-kart:active, .geri-al:active { transform: none; }
}

.sessiz-not { font-size: .84rem; }
.sessiz-not a { color: var(--accent); }

/* ---------- medya izleyici (kimlik galerisi) ----------

   Eskisi bozuktu: gorsel modala sigmiyor, oklar kayiyor, karar vermek
   icin kapatip galeriye donmek gerekiyordu.

   Uc satirlik izgara: ust cubuk / medya / alt panel. Ust uste binen
   mutlak katman yok, o yuzden oklar video kontrollerinin ustune
   dusmuyor. 100dvh: 100vh mobilde adres cubugunu saymiyor. */

.mi {
  position: fixed; inset: 0; z-index: 120;
  background: #08090c;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh;
  overscroll-behavior: contain;
}
.mi[hidden] { display: none; }

.mi__ust {
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}
.mi__sayac {
  font-family: var(--f-mono); font-size: .76rem; color: #93a0ad;
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.mi__dugme {
  width: 42px; height: 42px; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.mi__dugme:hover { background: rgba(255,255,255,.22); }

/* Medya alani: goruntu ve video HER ZAMAN kutuya sigar. */
.mi__govde {
  min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
}
.mi__govde img,
.mi__govde video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: 4px; background: #000;
}

.mi__alt {
  display: grid; gap: 10px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
}
.mi__satir { display: flex; align-items: center; gap: 10px; }
.mi__ok {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0 0 3px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff;
  font-size: 25px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mi__ok:hover { background: rgba(255,255,255,.22); }
.mi__ok[hidden] { display: none; }

.mi__bilgi {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; text-align: center;
}
.mi__bilgi strong {
  font-family: var(--f-display); font-weight: 600; font-size: .88rem; color: #fff;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi__bilgi span {
  font-family: var(--f-mono); font-size: .7rem; color: #93a0ad;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bulunan yuzler: coklu yuzde dogru olan(lar)a dokun. */
.mi__yuzler {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.mi__yuzler::-webkit-scrollbar { display: none; }
.mi__yuzler[hidden] { display: none; }
.mi__yuz {
  position: relative; flex: 0 0 auto; padding: 0; overflow: hidden;
  width: 76px; border-radius: 6px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  -webkit-tap-highlight-color: transparent;
}
.mi__yuz:disabled { cursor: default; }
.mi__yuz img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mi__yuz-alt {
  display: block; padding: 4px 2px;
  font-family: var(--f-mono); font-size: 9.5px; color: #b9c4cf;
  text-align: center; font-variant-numeric: tabular-nums;
}
.mi__yuz--secili { border-color: #6FBF95; }
.mi__yuz--secili .mi__yuz-alt { background: #6FBF95; color: #0b1a12; }
.mi__ipucu {
  flex: 0 0 auto; font-family: var(--f-mono); font-size: .68rem; color: #93a0ad;
  padding-left: 4px;
}

/* Kararlar modalin icinde: kapatip galeriye donmek gerekmiyor. */
.mi__kararlar { display: flex; gap: 8px; flex-wrap: wrap; }
.mi__kararlar[hidden] { display: none; }
.mi__karar {
  flex: 1 1 130px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  font-family: var(--f-body); font-weight: 600; font-size: .9rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: rgba(255,255,255,.08); color: #fff;
}
.mi__karar--evet  { background: #2C6B4C; border-color: #2C6B4C; }
.mi__karar--hayir { background: rgba(255,255,255,.08); }
.mi__karar--geri  { flex: 0 0 auto; font-weight: 500; font-size: .82rem;
                    min-height: 42px; color: #b9c4cf; }
.mi__karar[hidden] { display: none; }
.mi__karar:active { transform: scale(.975); }

.mi__sonuc {
  font-family: var(--f-mono); font-size: .74rem;
  padding: 7px 10px; border-radius: 4px;
  background: rgba(255,255,255,.08); color: #cfd6e0; text-align: center;
}
.mi__sonuc[hidden] { display: none; }

/* Galeri kartinda karar rozeti — modal kapaninca ne yaptigin gorunsun. */
.oge--karar-al   .oge__cerceve { box-shadow: inset 0 0 0 3px var(--good); }
.oge--karar-alma .oge__cerceve { opacity: .45; }

@media (min-width: 720px) {
  .mi__alt { grid-template-columns: 1fr auto; align-items: center; }
  .mi__satir    { grid-column: 1 / -1; }
  .mi__yuzler   { grid-column: 1; }
  .mi__kararlar { grid-column: 2; flex-wrap: nowrap; }
  .mi__sonuc    { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .mi__karar:active { transform: none; }
}

/* Son karar seridi: gecilmis olsa bile geri alinabilsin.
   Modal karar verince sonrakine geciyor; "Geri al" ise her zaman o an
   gorunen medyaya ait. Yanlis dokunup gecince donusu yoktu. */
.mi__songeri {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
}
.mi__songeri[hidden] { display: none; }
.mi__songeri span {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--f-mono); font-size: .74rem; color: #b9c4cf;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi__songeri button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 13px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 5px;
  background: transparent; color: #fff;
  font-family: var(--f-body); font-size: .82rem; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mi__songeri button:hover { background: rgba(255,255,255,.14); }
.mi__songeri button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .mi__songeri button:active { transform: none; }
}

/* ---------- toplu secim ----------
   Tek tek gitmek 30-140 medyada kullanilabilir degil. Onay kutusuyla
   isaretleyip topluca karar vermek ayni isi dakikalar yerine saniyeler
   aliyor. */

.karar__sec {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; cursor: pointer; justify-self: start;
  font-family: var(--f-mono); font-size: .72rem; color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.karar__sec input { width: 20px; height: 20px; accent-color: var(--accent); }
.karar--bitti .karar__sec { opacity: .4; }

.toplu {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
.toplu__hepsi {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; cursor: pointer;
  font-family: var(--f-body); font-size: .88rem; font-weight: 500;
}
.toplu__hepsi input { width: 20px; height: 20px; accent-color: var(--accent); }
.toplu__sayi {
  margin-left: auto; font-family: var(--f-mono); font-size: .76rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Yapiskan: uzun listede kaydirirken de erisilebilir olsun.
   Alt sekme cubugunun uzerine binmesin diye 72px pay. */
.toplu-cubuk {
  position: sticky; z-index: 30;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; margin: 14px 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.toplu-cubuk[hidden] { display: none; }
.toplu-cubuk > span {
  flex: 1 1 100%; font-family: var(--f-mono); font-size: .76rem;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.toplu-cubuk .karar-dugme { flex: 1 1 140px; min-height: 48px; }

@media (min-width: 620px) {
  .toplu-cubuk { bottom: 16px; }
  .toplu-cubuk > span { flex: 0 0 auto; margin-right: auto; }
}

/* Karar verilmis kart sayfa yenilenince de ayirt edilsin. */
.karar-cagri-satir { margin-bottom: 10px; }
.oge--karar-al   .oge__cerceve { box-shadow: inset 0 0 0 3px var(--good); }
.oge--karar-alma .oge__cerceve { opacity: .42; }
.oge--karar-al::after,
.oge--karar-alma::after {
  position: absolute; left: 6px; top: 6px; z-index: 3;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  padding: 3px 7px; border-radius: 2px; line-height: 1.4;
}
.oge--karar-al::after   { content: "✓ alındı"; background: var(--good); color: #fff; }
.oge--karar-alma::after { content: "elendi";   background: var(--muted); color: #fff; }