/* ============================================================
 * features/settings.css — uygulama ayarları popup'ı + arkaplan
 * katmanları (JS karşılığı: js/features/settings/index.js)
 *
 * İki bölge:
 *   bgfx-* — body zemininin üstünde, her ekranın ALTINDA yaşayan
 *            üç arkaplan katmanı (index.html #bgfx): fotoğraf →
 *            renk perdesi → cam (backdrop-filter). Değerler JS'ten
 *            --bgfx-* var'larıyla beslenir (K5: veri-türevi inline
 *            var beslemesi serbest); ayar yoksa kök hidden → sıfır
 *            maliyet.
 *   stp-*  — ayar popup'ının (sheet) öğeleri. Altın kural: her öğe
 *            tek kimlik sınıfı, reçeteler components'ten KOPYALANDI
 *            (opt-pill/btn--sm/legal-row eşleri), ortaklık var'la.
 * ============================================================ */

/* ── Bölge var'ları (K3) ────────────────────────────────────── */
:root {
  --stp-chip-bg: var(--surface-2);
  --stp-chip-bg-hover: var(--surface-3);
}

/* ── ARKAPLAN KATMANLARI ────────────────────────────────────── */
/* Kök: ICB'ye çıpalı tam-ekran katman (kök kilidi — fixed YASAK,
   base.css 2026-07-12). z-index:-1 → body zemininin üstünde ama
   login/app dahil tüm içeriğin altında boyanır. */
.bgfx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Fotoğraf — en alt katman; doldurma modu JS'ten (kapla/sığdır/uzat/döşe) */
.bgfx-photo {
  position: absolute; inset: 0;
  background-image: var(--bgfx-img, none);
  background-position: center;
  background-size: var(--bgfx-size, cover);
  background-repeat: var(--bgfx-repeat, no-repeat);
}
/* Renk perdesi — fotoğrafın üstünde yarı saydam renk (renk + yoğunluk) */
.bgfx-tint { position: absolute; inset: 0; background: var(--bgfx-tint, transparent); }
/* Gradient perdesi (2026-07-20) — renk perdesinin üstünde, camın
   altında. Reçete aşağıdaki [data-bgg] KATALOĞUNDAN gelir (JS katmana
   data-bgg + data-bgr basar), gücü --bgfx-gop (0..1, JS'ten).
   --bgg-img:none yereli: kök html de popup deseni için data-bgg
   taşıdığından --bgg-img artık HERKESE miras iner — attribute'suz
   (kapalı) katman kökün desenini devralıp boyamasın (katalog blokları
   dosyada bundan SONRA geldiğinden attribute varken onlar kazanır). */
.bgfx-grad {
  position: absolute; inset: 0;
  --bgg-img: none;
  background-image: var(--bgg-img, none);
  opacity: var(--bgfx-gop, 1);
}
/* Cam — en üst katman; altındaki fotoğraf+renk+gradyanı bulanıklaştırır */
.bgfx-veil {
  position: absolute; inset: 0;
  backdrop-filter: var(--bgfx-veil, none);
  -webkit-backdrop-filter: var(--bgfx-veil, none);
}

/* ── GRADIENT KATALOĞU v2 — [data-bgg] tek kaynak ─────────────
   SİSTEMİN TEK GRADIENT LİSTESİ (kullanıcı 2026-07-20: --hero-grad
   dahil katalog dışı süs gradyanları ÖLDÜ). Aynı attribute ÜÇ tür
   taşıyıcıda yaşar, --bgg-img taşıyanın kapsamında çözülür (swatch'ların
   çıplak [data-accent] hilesi; :root'a yazılsaydı kökte çözülürdü):
     • #bgfx .bgfx-grad  — arkaplan katmanı (data-bgg + data-bgr)
     • .stp-gpre         — ayar popup'ı önizleme karoları
     • html KÖKÜ         — POPUP deseni: kökte hesaplanan --bgg-img
                           tüm popup yüzeylerine miras iner (consumer:
                           background-image: var(--bgg-img, none)).
   RENK KURALI (2026-07-20): 1. renk TEK — --bgg-rgb (varsayılan vurgu;
   ÖZEL renkte JS taşıyıcıya üçlüyü inline basar, K5 veri-türevi).
   Katalogda başka renk YASAK. 2. renk --bgg-dark (1 = siyah,
   0 = şeffaf): siyah duraklar alfalarını calc'la bu anahtardan çarpar.
   ÇEVİRME (data-bgr, yalnız #bgfx katmanı): desenler KANONİK
   geometrisini --gN-* var'larıyla bildirir; alttaki eşleme blokları
   pozisyonu 90°'lik adımlarla döndürür ((x,y)→(100−y,x) saat yönü),
   eksen boylarını takaslar, linear açılara --bgg-turn ekler. Desen
   reçetesi TEK yerde kalır — 4 kopya yazılmaz.
   12 desen: yön (tepe/taban/capraz), ışıma (isik/odak/perde), serpme
   (kose/serpinti), bant (cift/ufuk), tül (sis), vinyet (cerceve). */

/* Taşıyıcı tabanı: 1. renk varsayılanı + kimlik (0°) eşlemesi.
   --bgg-rgb BURADA (yerel) tanımlanır ki kökteki özel popup rengi
   karo/katmana miras yoluyla SIZMASIN — özel renk isteyen taşıyıcı
   inline üçlüyle ezer. --bgg-dark bilerek YOK: o miras KANALIYLA gelir
   (JS onu #bgfx köküne / önizleme şeridine / html'e basar). */
[data-bgg] {
  --bgg-rgb: var(--accent-rgb);
  --g1-w: var(--g1-sa); --g1-h: var(--g1-sb); --g1-px: var(--g1-x); --g1-py: var(--g1-y);
  --g2-w: var(--g2-sa); --g2-h: var(--g2-sb); --g2-px: var(--g2-x); --g2-py: var(--g2-y);
  --g3-w: var(--g3-sa); --g3-h: var(--g3-sb); --g3-px: var(--g3-x); --g3-py: var(--g3-y);
}
/* Çevirme eşlemeleri — data-bgg ile AYNI öğede durur; dosyada tabandan
   sonra geldiklerinden aynı özgüllükte kazanırlar. 90° adım = saat
   yönü: nokta (x,y) → (100−y, x); eksen boyları (sa,sb) takaslanır;
   linear açı +90°. Döndürmesi anlamsız desende (isik/cerceve gibi
   merkezciler) zararsız no-op'a yakındır. */
[data-bgr="90"] {
  --bgg-turn: 90deg;
  --g1-w: var(--g1-sb); --g1-h: var(--g1-sa);
  --g1-px: calc(100% - var(--g1-y)); --g1-py: var(--g1-x);
  --g2-w: var(--g2-sb); --g2-h: var(--g2-sa);
  --g2-px: calc(100% - var(--g2-y)); --g2-py: var(--g2-x);
  --g3-w: var(--g3-sb); --g3-h: var(--g3-sa);
  --g3-px: calc(100% - var(--g3-y)); --g3-py: var(--g3-x);
}
[data-bgr="180"] {
  --bgg-turn: 180deg;
  --g1-px: calc(100% - var(--g1-x)); --g1-py: calc(100% - var(--g1-y));
  --g2-px: calc(100% - var(--g2-x)); --g2-py: calc(100% - var(--g2-y));
  --g3-px: calc(100% - var(--g3-x)); --g3-py: calc(100% - var(--g3-y));
}
[data-bgr="270"] {
  --bgg-turn: 270deg;
  --g1-w: var(--g1-sb); --g1-h: var(--g1-sa);
  --g1-px: var(--g1-y); --g1-py: calc(100% - var(--g1-x));
  --g2-w: var(--g2-sb); --g2-h: var(--g2-sa);
  --g2-px: var(--g2-y); --g2-py: calc(100% - var(--g2-x));
  --g3-w: var(--g3-sb); --g3-h: var(--g3-sa);
  --g3-px: var(--g3-y); --g3-py: calc(100% - var(--g3-x));
}

[data-bgg="tepe"] {   /* Yukarıdan — tepe renk, tabana doğru söner */
  --bgg-img: linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
    rgba(var(--bgg-rgb), .50) 0%,
    rgba(var(--bgg-rgb), .20) 36%,
    rgba(0, 0, 0, calc(.30 * var(--bgg-dark, 1))) 70%,
    rgba(0, 0, 0, calc(.62 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="taban"] {  /* Aşağıdan — tepe aynasının tersi */
  --bgg-img: linear-gradient(calc(0deg + var(--bgg-turn, 0deg)),
    rgba(var(--bgg-rgb), .50) 0%,
    rgba(var(--bgg-rgb), .20) 36%,
    rgba(0, 0, 0, calc(.30 * var(--bgg-dark, 1))) 70%,
    rgba(0, 0, 0, calc(.62 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="capraz"] { /* Çapraz — köşeden köşeye, karşı uç 2. renk */
  --bgg-img: linear-gradient(calc(135deg + var(--bgg-turn, 0deg)),
    rgba(var(--bgg-rgb), .44) 0%,
    rgba(var(--bgg-rgb), .24) 38%,
    rgba(0, 0, 0, calc(.28 * var(--bgg-dark, 1))) 68%,
    rgba(0, 0, 0, calc(.58 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="isik"] {   /* Işıma — geniş merkez parlaması, kenarlar 2. renk */
  --g1-sa: 90%; --g1-sb: 70%; --g1-x: 50%; --g1-y: 42%;
  --bgg-img: radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
    rgba(var(--bgg-rgb), .44) 0%,
    rgba(var(--bgg-rgb), .15) 46%,
    rgba(0, 0, 0, calc(.55 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="odak"] {   /* Odak — dar/yoğun merkez ışıması (isik'in sıkısı) */
  --g1-sa: 52%; --g1-sb: 40%; --g1-x: 50%; --g1-y: 50%;
  --bgg-img: radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
    rgba(var(--bgg-rgb), .52) 0%,
    rgba(var(--bgg-rgb), .14) 52%,
    rgba(0, 0, 0, calc(.60 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="kose"] {   /* Köşeler — iki çapraz köşe serpmesi + hafif perde */
  --g1-sa: 46%; --g1-sb: 38%; --g1-x: 0%;   --g1-y: 0%;
  --g2-sa: 46%; --g2-sb: 38%; --g2-x: 100%; --g2-y: 100%;
  --bgg-img:
    radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
      rgba(var(--bgg-rgb), .36), transparent 70%),
    radial-gradient(var(--g2-w) var(--g2-h) at var(--g2-px) var(--g2-py),
      rgba(var(--bgg-rgb), .22), transparent 70%),
    linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
      rgba(0, 0, 0, calc(.16 * var(--bgg-dark, 1))),
      rgba(0, 0, 0, calc(.38 * var(--bgg-dark, 1))));
}
[data-bgg="serpinti"] { /* Serpinti — üç dağınık ışık lekesi + hafif perde */
  --g1-sa: 44%; --g1-sb: 32%; --g1-x: 16%; --g1-y: 20%;
  --g2-sa: 38%; --g2-sb: 28%; --g2-x: 84%; --g2-y: 36%;
  --g3-sa: 46%; --g3-sb: 32%; --g3-x: 30%; --g3-y: 88%;
  --bgg-img:
    radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
      rgba(var(--bgg-rgb), .34), transparent 70%),
    radial-gradient(var(--g2-w) var(--g2-h) at var(--g2-px) var(--g2-py),
      rgba(var(--bgg-rgb), .22), transparent 70%),
    radial-gradient(var(--g3-w) var(--g3-h) at var(--g3-px) var(--g3-py),
      rgba(var(--bgg-rgb), .26), transparent 70%),
    linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
      rgba(0, 0, 0, calc(.14 * var(--bgg-dark, 1))),
      rgba(0, 0, 0, calc(.36 * var(--bgg-dark, 1))));
}
[data-bgg="perde"] {  /* Perde — zemin ışımasının (bg-grad) belirgin eşi */
  --g1-sa: 140%; --g1-sb: 85%; --g1-x: 50%; --g1-y: -22%;
  --bgg-img:
    radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
      rgba(var(--bgg-rgb), .58) 0%,
      rgba(var(--bgg-rgb), .21) 46%, transparent 68%),
    linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
      transparent 42%,
      rgba(0, 0, 0, calc(.55 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="cift"] {   /* Çift uç — iki uç renk, orta 2. renk */
  --bgg-img: linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
    rgba(var(--bgg-rgb), .42) 0%,
    rgba(0, 0, 0, calc(.26 * var(--bgg-dark, 1))) 40% 60%,
    rgba(var(--bgg-rgb), .34) 100%);
}
[data-bgg="ufuk"] {   /* Ufuk — ortada yatay ışıma bandı, uçlar 2. renk */
  --bgg-img: linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
    rgba(0, 0, 0, calc(.44 * var(--bgg-dark, 1))) 0%,
    rgba(var(--bgg-rgb), .10) 32%,
    rgba(var(--bgg-rgb), .40) 50%,
    rgba(var(--bgg-rgb), .10) 68%,
    rgba(0, 0, 0, calc(.44 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="sis"] {    /* Sis — tüm yüzeye ince renk tülü, dibe doğru 2. renk */
  --bgg-img: linear-gradient(calc(180deg + var(--bgg-turn, 0deg)),
    rgba(var(--bgg-rgb), .26) 0%,
    rgba(var(--bgg-rgb), .10) 60%,
    rgba(0, 0, 0, calc(.30 * var(--bgg-dark, 1))) 100%);
}
[data-bgg="cerceve"] { /* Çerçeve — vinyet: orta temiz, kenar renk+2. renk */
  --g1-sa: 120%; --g1-sb: 90%; --g1-x: 50%; --g1-y: 50%;
  --bgg-img: radial-gradient(var(--g1-w) var(--g1-h) at var(--g1-px) var(--g1-py),
    transparent 50%,
    rgba(var(--bgg-rgb), .28) 78%,
    rgba(0, 0, 0, calc(.66 * var(--bgg-dark, 1))) 100%);
}

/* ── AYAR POPUP'I ───────────────────────────────────────────── */
.pp[data-pp="appset"] { --pp-w: 460px; }

.stp { display: flex; flex-direction: column; }
.stp-h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* Bölüm başlığı — silik uppercase şerit */
.stp-sec {
  margin: 18px 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.stp-note { font-size: 12.5px; line-height: 1.45; color: var(--text-3); margin-bottom: 10px; }

/* Vurgu paleti swatch'ları — daire sırası (görev: flex satırı).
   RENK KAYNAĞI TEK: buton kendi data-accent'iyle tokens.css'in
   [data-accent] bloğunu YERELDE kuşanır; gradient ÜÇLÜLERDEN yazılır
   (miras --accent-grad kökte çoktan çözüldüğünden yerel paleti
   göremezdi — üçlüler ham değer, butonun kapsamında çözülür). */
.stp-accs { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px; }
.stp-acc {
  width: var(--circle-sm); height: var(--circle-sm); border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--accent-pop-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform var(--tr-fast);
}
.stp-acc:hover { transform: scale(1.1); }
.stp-acc.active { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }
/* Özel renk swatch'ı (kimlik+varyant) — gökkuşağı = "istediğini seç"
   göstergesi; BİLİNÇLİ literal renkler (renk seçici ikonografisi,
   vurgu ailesi değil). data-accent TAŞIMAZ: aktifken kökten miras
   aile = kullanıcının özel ailesi → halka rengi kendiliğinden doğru. */
.stp-acc--custom {
  background: conic-gradient(from 210deg,
    #f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e);
}

/* Seçenek pill'leri (opt-pill reçetesinin kopyası — K4 istisnası erimesi) */
.stp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.stp-pill {
  padding: 8px 15px; border-radius: var(--r-full);
  background: var(--stp-chip-bg); color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.stp-pill:hover { background: var(--stp-chip-bg-hover); color: var(--text); }
.stp-pill.active { background: var(--accent-grad); color: var(--on-accent); }

/* Cihaz segmenti (PC | Mobil) — arkaplan lab'inin DÜZENLEME hedefi:
   mobil PC'yi devralır, Mobil'de değişen her alan mobile özel fark
   olur (settings/index.js delta deposu). Aktiflik DÜZ accent
   (2026-07-20 kuralı: gradient yalnız arkaplanın). */
.stp-devs { display: flex; gap: 6px; margin-bottom: 4px; }
.stp-dev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-full);
  background: var(--stp-chip-bg); color: var(--text-2);
  font-size: 13px; font-weight: 650;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.stp-dev:hover { background: var(--stp-chip-bg-hover); color: var(--text); }
.stp-dev.active { background: var(--accent); color: var(--on-accent); }
/* mobilde PC'den ayrışan alan varsa segmentte minik nokta */
.stp-dev-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-bright);
}
.stp-dev.active .stp-dev-dot { background: var(--on-accent); }

/* Gradient önizleme karoları — karo data-bgg ile kataloğun reçetesini
   YERELDE kuşanır (üstteki katalog notu); 2. renk anahtarını şerit
   taşır (JS --bgg-dark'ı şeride basar → karolar canlı döner), ÖZEL
   1. renkte JS karolara --bgg-rgb üçlüsünü inline basar (miras
   yetmez — [data-bgg] tabanı vurguya sabitler). Aynı şerit hem
   arkaplan katmanı hem "Popup arkaplanı" bölümünde kullanılır.
   Zemin = uygulama zemini: karo gradyanı gerçek fonda gösterir. */
.stp-gpres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stp-gpre {
  width: 58px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  background-color: var(--bg);
  background-image: var(--bgg-img, none);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform var(--tr-fast);
}
.stp-gpre:hover { transform: scale(1.07); }
.stp-gpre.active { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }
/* "Yok" karosu — kesikli boş yuva (stp-thumb dili), ortada ✕ glifi.
   --bgg-img:none yereli: kök html popup deseni taşıdığından miras
   inen reçete bu karoyu boyamasın. */
.stp-gpre--off {
  display: grid; place-items: center;
  --bgg-img: none;
  background-color: transparent;
  box-shadow: none; border: 1px dashed var(--border-strong);
  color: var(--text-3); font-size: 12px;
}

/* Katman grubu alt başlığı — bölüm içi mini şerit (tema tasarlayıcı
   gruplaması, kullanıcı 2026-07-20: "mantıklı parametre gruplamaları"):
   Fotoğraf / Renk perdesi / Gradyan / Cam kümeleri bununla ayrılır. */
.stp-sub {
  margin: 14px 0 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-4);
}

/* Kontrol satırı (görev: yatay flex satırı) */
.stp-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.stp-lbl { flex: 0 0 42px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.stp-val {
  flex: 0 0 46px; text-align: right;
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* Küçük aksiyon butonu (btn--sm reçetesinin pill eşi) */
.stp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-full);
  background: var(--stp-chip-bg); color: var(--text);
  font-size: 12.5px; font-weight: 600;
  transition: background var(--tr-fast);
}
.stp-btn:hover { background: var(--stp-chip-bg-hover); }
/* silik aksiyon varyantı (sıfırla + tema çıktısı — .stp-row içinde) */
.stp-btn--reset { color: var(--text-2); }

/* Fotoğraf önizleme karosu — görsel yoksa kesikli boş yuva */
.stp-thumb {
  width: 64px; height: 40px; flex: 0 0 auto; border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background: var(--stp-chip-bg) center / cover no-repeat;
  background-image: var(--stp-thumb, none);
}
.stp-thumb.has-img { border: 1px solid var(--border); }

/* Kaydırıcı — ince ray + gradient başparmak */
.stp-range {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; min-width: 0; height: 5px; border-radius: 3px;
  background: var(--surface-3); outline-offset: 6px;
}
.stp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-grad); border: 0; cursor: pointer;
}
.stp-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 0; cursor: pointer;
}

/* Renk seçici — çıplak yuvarlak swatch (native input süsü sıfırlanır) */
.stp-color {
  width: 42px; height: 30px; flex: 0 0 auto;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.stp-color::-webkit-color-swatch-wrapper { padding: 0; }
.stp-color::-webkit-color-swatch { border: 1px solid var(--border-strong); border-radius: 9px; }
.stp-color::-moz-color-swatch { border: 1px solid var(--border-strong); border-radius: 9px; }
/* Gradyan renk satırındaki kuyu ÖZEL renk aktifken halka alır
   (Vurgu pill'i ile karşılıklı seçim — geçiş tek tık) */
.stp-color.on { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; border-radius: 9px; }

/* Yasal satırı (eski profil legal-row reçetesi — o kart 2026-07-19'da
   silindi, yasal girişleri artık yalnız burada) */
.stp-legal {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 4px; text-align: left;
  border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 550;
}
.stp-legal:last-child { border-bottom: 0; }
.stp-legal i { font-size: 15px; color: var(--text-2); flex: 0 0 auto; }
.stp-legal .chev { margin-left: auto; color: var(--text-3); }
.stp-legal .chev i { font-size: 12px; }