/* QP Distribution — kullanıcı tarafından seçilebilen panel temaları.
   Obsidian Gold mevcut tasarımın aynısıdır; diğer temalar yalnızca CSS değişkenlerini
   ve panel yüzeylerini değiştirir. İşlevsel düzen ve form davranışı etkilenmez. */

:root {
  color-scheme: dark;
  --tema-vurgu: #d4af37;
  --tema-vurgu-acik: #f5d576;
  --tema-vurgu-rgb: 212, 175, 55;
  --tema-zemin-1: #07070c;
  --tema-zemin-2: #090910;
  --tema-kart: rgba(17, 18, 28, 0.9);
  --tema-kart-kati: #11121c;
  --tema-girdi: #0a0b12;
  --tema-yazi: #e9e6dc;
  --tema-soluk: #9a96a8;
  --tema-cizgi: rgba(212, 175, 55, 0.24);
  --tema-ikincil-rgb: 105, 74, 214;
}

:root[data-theme="midnight-sapphire"] {
  --tema-vurgu: #4aa8ff;
  --tema-vurgu-acik: #9bd4ff;
  --tema-vurgu-rgb: 74, 168, 255;
  --tema-zemin-1: #030812;
  --tema-zemin-2: #071426;
  --tema-kart: rgba(8, 20, 38, 0.92);
  --tema-kart-kati: #0a1728;
  --tema-girdi: #050d1a;
  --tema-yazi: #edf7ff;
  --tema-soluk: #8ea8c2;
  --tema-cizgi: rgba(74, 168, 255, 0.28);
  --tema-ikincil-rgb: 39, 90, 185;
}

:root[data-theme="emerald-noir"] {
  --tema-vurgu: #31d98b;
  --tema-vurgu-acik: #9cf0c9;
  --tema-vurgu-rgb: 49, 217, 139;
  --tema-zemin-1: #030a08;
  --tema-zemin-2: #071610;
  --tema-kart: rgba(8, 25, 19, 0.92);
  --tema-kart-kati: #0a1a14;
  --tema-girdi: #04100c;
  --tema-yazi: #edfff7;
  --tema-soluk: #8eafa0;
  --tema-cizgi: rgba(49, 217, 139, 0.26);
  --tema-ikincil-rgb: 13, 110, 78;
}

:root[data-theme="royal-amethyst"] {
  --tema-vurgu: #9d74ff;
  --tema-vurgu-acik: #d4c2ff;
  --tema-vurgu-rgb: 157, 116, 255;
  --tema-zemin-1: #080511;
  --tema-zemin-2: #160b26;
  --tema-kart: rgba(24, 14, 40, 0.92);
  --tema-kart-kati: #1a102b;
  --tema-girdi: #0e0818;
  --tema-yazi: #faf5ff;
  --tema-soluk: #aa9abb;
  --tema-cizgi: rgba(157, 116, 255, 0.28);
  --tema-ikincil-rgb: 219, 82, 190;
}

:root[data-theme="crimson-velvet"] {
  --tema-vurgu: #ef5f78;
  --tema-vurgu-acik: #ffb1bd;
  --tema-vurgu-rgb: 239, 95, 120;
  --tema-zemin-1: #0c0306;
  --tema-zemin-2: #210811;
  --tema-kart: rgba(35, 10, 18, 0.92);
  --tema-kart-kati: #241018;
  --tema-girdi: #13060b;
  --tema-yazi: #fff4f6;
  --tema-soluk: #b79aa0;
  --tema-cizgi: rgba(239, 95, 120, 0.28);
  --tema-ikincil-rgb: 137, 32, 61;
}

:root[data-theme="arctic-silver"] {
  --tema-vurgu: #9fc9e8;
  --tema-vurgu-acik: #e3f3ff;
  --tema-vurgu-rgb: 159, 201, 232;
  --tema-zemin-1: #080c10;
  --tema-zemin-2: #101820;
  --tema-kart: rgba(19, 28, 36, 0.94);
  --tema-kart-kati: #151e27;
  --tema-girdi: #0b1117;
  --tema-yazi: #f5f9fc;
  --tema-soluk: #9caab5;
  --tema-cizgi: rgba(159, 201, 232, 0.25);
  --tema-ikincil-rgb: 82, 118, 145;
}

:root[data-theme="copper-sunset"] {
  --tema-vurgu: #db884f;
  --tema-vurgu-acik: #ffc79f;
  --tema-vurgu-rgb: 219, 136, 79;
  --tema-zemin-1: #0d0704;
  --tema-zemin-2: #211108;
  --tema-kart: rgba(36, 20, 12, 0.93);
  --tema-kart-kati: #26170f;
  --tema-girdi: #140b06;
  --tema-yazi: #fff7f0;
  --tema-soluk: #b8a092;
  --tema-cizgi: rgba(219, 136, 79, 0.27);
  --tema-ikincil-rgb: 138, 62, 35;
}

:root[data-theme="ocean-depths"] {
  --tema-vurgu: #26c6c8;
  --tema-vurgu-acik: #92f0ef;
  --tema-vurgu-rgb: 38, 198, 200;
  --tema-zemin-1: #020b0f;
  --tema-zemin-2: #041c25;
  --tema-kart: rgba(5, 28, 36, 0.93);
  --tema-kart-kati: #09222b;
  --tema-girdi: #031219;
  --tema-yazi: #effeff;
  --tema-soluk: #8aacb1;
  --tema-cizgi: rgba(38, 198, 200, 0.27);
  --tema-ikincil-rgb: 34, 91, 164;
}

:root[data-theme="aurora-borealis"] {
  --tema-vurgu: #79df7a;
  --tema-vurgu-acik: #c6ffc3;
  --tema-vurgu-rgb: 121, 223, 122;
  --tema-zemin-1: #050811;
  --tema-zemin-2: #071a22;
  --tema-kart: rgba(8, 24, 31, 0.93);
  --tema-kart-kati: #0c2028;
  --tema-girdi: #051016;
  --tema-yazi: #f2fff4;
  --tema-soluk: #91aaa2;
  --tema-cizgi: rgba(121, 223, 122, 0.26);
  --tema-ikincil-rgb: 89, 90, 232;
}

:root[data-theme="platinum-mono"] {
  --tema-vurgu: #c8cbd1;
  --tema-vurgu-acik: #ffffff;
  --tema-vurgu-rgb: 200, 203, 209;
  --tema-zemin-1: #070809;
  --tema-zemin-2: #121315;
  --tema-kart: rgba(22, 23, 26, 0.95);
  --tema-kart-kati: #191a1d;
  --tema-girdi: #0c0d0f;
  --tema-yazi: #f7f7f8;
  --tema-soluk: #a1a2a7;
  --tema-cizgi: rgba(200, 203, 209, 0.24);
  --tema-ikincil-rgb: 90, 92, 98;
}

/* Varsayılan tema dışındaki seçimlerde mevcut bileşen değişkenlerini güvenli biçimde eşleştir. */
:root[data-theme]:not([data-theme="obsidian-gold"]) {
  --altin: var(--tema-vurgu);
  --altin-acik: var(--tema-vurgu-acik);
  --zemin: var(--tema-zemin-1);
  --kart: var(--tema-kart);
  --kart-cizgi: var(--tema-cizgi);
  --girdi: var(--tema-girdi);
  --yazi: var(--tema-yazi);
  --soluk: var(--tema-soluk);
  --panel-bg: var(--tema-zemin-1);
  --panel-card: var(--tema-kart);
  --panel-card-2: var(--tema-kart-kati);
  --panel-line: var(--tema-cizgi);
  --panel-line-soft: rgba(var(--tema-vurgu-rgb), 0.14);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) body:not(.auth-redesign) {
  color: var(--tema-yazi);
  background:
    radial-gradient(920px 560px at 12% -10%, rgba(var(--tema-vurgu-rgb), 0.15), transparent 64%),
    radial-gradient(820px 560px at 96% 96%, rgba(var(--tema-ikincil-rgb), 0.16), transparent 66%),
    linear-gradient(180deg, var(--tema-zemin-1), var(--tema-zemin-2) 54%, var(--tema-zemin-1));
}

:root[data-theme]:not([data-theme="obsidian-gold"]) body:not(.auth-redesign)::before {
  background:
    radial-gradient(1px 1px at 10% 18%, rgba(var(--tema-vurgu-rgb), .72), transparent 70%),
    radial-gradient(1px 1px at 31% 46%, rgba(var(--tema-vurgu-rgb), .48), transparent 70%),
    radial-gradient(1px 1px at 68% 16%, rgba(var(--tema-vurgu-rgb), .62), transparent 70%),
    radial-gradient(1px 1px at 89% 66%, rgba(255,255,255,.44), transparent 70%),
    radial-gradient(700px 460px at 7% 0%, rgba(var(--tema-vurgu-rgb), .08), transparent 66%),
    radial-gradient(780px 540px at 94% 94%, rgba(var(--tema-ikincil-rgb), .13), transparent 68%);
  background-size: 430px 330px, 540px 430px, 610px 390px, 470px 350px, auto, auto;
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .topbar {
  background: color-mix(in srgb, var(--tema-zemin-1) 88%, transparent);
  border-bottom-color: var(--tema-cizgi);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .logo,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama h1,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .bh-deger {
  background-image: linear-gradient(112deg, #fff 10%, var(--tema-vurgu-acik) 54%, var(--tema-vurgu) 94%);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .vip-rozet,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .btn-gold,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .tip-btn.secili {
  background: linear-gradient(120deg, var(--tema-vurgu-acik), var(--tema-vurgu));
  color: #07090c;
  box-shadow: 0 8px 24px rgba(var(--tema-vurgu-rgb), 0.22);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .nav a.aktif {
  color: var(--tema-vurgu-acik);
  border-color: var(--tema-cizgi);
  background: rgba(var(--tema-vurgu-rgb), 0.11);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .kart,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .bakiye-hero,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .sohbet-kutu,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .destek-kart,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-hero-card,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-stat-card,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-toolbar,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-release-card,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .release-detail-hero,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .release-panel {
  background-color: var(--tema-kart);
  border-color: var(--tema-cizgi);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .kart::before,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-hero-card::before,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .release-detail-hero::before {
  background: linear-gradient(90deg, transparent, var(--tema-vurgu), var(--tema-vurgu-acik), transparent);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama input,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama select,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama textarea,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-search {
  border-color: rgba(var(--tema-vurgu-rgb), 0.17);
  background-color: var(--tema-girdi);
  color: var(--tema-yazi);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama input:focus,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama select:focus,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama textarea:focus,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-search:focus-within {
  border-color: var(--tema-vurgu);
  box-shadow: 0 0 0 4px rgba(var(--tema-vurgu-rgb), 0.13);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-catalog-v2 .music-catalog-panel,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-catalog-v2 .music-release-card {
  background: var(--tema-kart-kati);
  border-color: rgba(var(--tema-vurgu-rgb), 0.17);
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-catalog-v2 .music-catalog-actions .btn {
  background: var(--tema-vurgu);
  border-color: var(--tema-vurgu);
  color: #06080b;
}

:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-catalog-v2 .music-release-card:hover,
:root[data-theme]:not([data-theme="obsidian-gold"]) #uygulama .music-catalog-v2 .music-release-card:focus-within {
  border-color: var(--tema-vurgu);
}

/* Profil tema seçici */
.tema-secici-panel {
  margin: 4px 0 24px;
  padding: 22px;
  border: 1px solid var(--kart-cizgi);
  border-radius: 18px;
  background: rgba(5, 6, 11, 0.34);
}

.tema-secici-baslik {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.tema-secici-baslik h2 {
  margin: 0 0 5px;
  color: var(--yazi);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
}

.tema-secici-baslik p {
  margin: 0;
  color: var(--soluk);
  font-size: 12px;
  line-height: 1.55;
}

.tema-secici-durum {
  flex: 0 0 auto;
  color: var(--altin-acik);
  border: 1px solid var(--kart-cizgi);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tema-secici-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.tema-kart {
  --preview-bg: #08080d;
  --preview-card: #151622;
  --preview-accent: #d4af37;
  appearance: none;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(8, 9, 14, .72);
  color: var(--yazi);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tema-kart:hover { transform: translateY(-2px); border-color: var(--kart-cizgi); }
.tema-kart:focus-visible { outline: 3px solid rgba(var(--tema-vurgu-rgb), .25); outline-offset: 2px; }
.tema-kart.secili {
  border-color: var(--altin);
  box-shadow: 0 0 0 2px rgba(var(--tema-vurgu-rgb), .12), 0 10px 26px rgba(0,0,0,.24);
}
.tema-kart:disabled { cursor: wait; opacity: .72; transform: none; }

.tema-mini {
  position: relative;
  height: 76px;
  overflow: hidden;
  border-radius: 9px;
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--preview-accent) 44%, transparent), transparent 48%),
    var(--preview-bg);
  border: 1px solid rgba(255,255,255,.08);
}
.tema-mini::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 11px;
  height: 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--preview-accent) 84%, white 16%);
  box-shadow: 0 15px 0 var(--preview-card), 0 30px 0 var(--preview-card), 45px 30px 0 var(--preview-card);
}
.tema-mini::after {
  content: "✓";
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--preview-accent);
  color: #08090d;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}
.tema-kart.secili .tema-mini::after { opacity: 1; transform: scale(1); }

.tema-kart strong {
  display: block;
  margin: 9px 3px 2px;
  overflow: hidden;
  color: var(--yazi);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tema-kart small { display: block; margin: 0 3px 2px; color: var(--soluk); font-size: 9px; }

.tema-kart[data-theme-id="obsidian-gold"] { --preview-bg:#08080d; --preview-card:#171822; --preview-accent:#d4af37; }
.tema-kart[data-theme-id="midnight-sapphire"] { --preview-bg:#030812; --preview-card:#0a1728; --preview-accent:#4aa8ff; }
.tema-kart[data-theme-id="emerald-noir"] { --preview-bg:#030a08; --preview-card:#0a1a14; --preview-accent:#31d98b; }
.tema-kart[data-theme-id="royal-amethyst"] { --preview-bg:#080511; --preview-card:#1a102b; --preview-accent:#9d74ff; }
.tema-kart[data-theme-id="crimson-velvet"] { --preview-bg:#0c0306; --preview-card:#241018; --preview-accent:#ef5f78; }
.tema-kart[data-theme-id="arctic-silver"] { --preview-bg:#080c10; --preview-card:#151e27; --preview-accent:#9fc9e8; }
.tema-kart[data-theme-id="copper-sunset"] { --preview-bg:#0d0704; --preview-card:#26170f; --preview-accent:#db884f; }
.tema-kart[data-theme-id="ocean-depths"] { --preview-bg:#020b0f; --preview-card:#09222b; --preview-accent:#26c6c8; }
.tema-kart[data-theme-id="aurora-borealis"] { --preview-bg:#050811; --preview-card:#0c2028; --preview-accent:#79df7a; }
.tema-kart[data-theme-id="platinum-mono"] { --preview-bg:#070809; --preview-card:#191a1d; --preview-accent:#c8cbd1; }

@media (max-width: 980px) {
  .tema-secici-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .tema-secici-panel { padding: 17px 14px; margin-inline: -4px; }
  .tema-secici-baslik { display: block; }
  .tema-secici-durum { display: inline-flex; margin-top: 12px; }
  .tema-secici-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tema-mini { height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .tema-kart, .tema-mini::after { transition: none; }
}