/* ===========================================================================
   TFNUYSP — ARAYÜZ KATMANI  (assets/ui.css)
   ---------------------------------------------------------------------------
   Yeni tasarım dili: yönetim paneli giriş ekranı, panel kabuğu, KPI kartları,
   bayraklı dil menüsü, para birimi menüsü, gece/gündüz modu.
   fx.css animasyon katmanının ÜSTÜNE gelir; ondan sonra yüklenir.
   Saf CSS — Tailwind derlemesine bağımlı değildir.
   =========================================================================== */

:root{
  --ui-green:      #10b981;
  --ui-green-2:    #34d399;
  --ui-teal:       #14b8a6;
  --ui-cyan:       #22d3ee;
  --ui-green-rgb:  16, 185, 129;

  --ui-bg:         #05070c;
  --ui-bg-2:       #0a0e16;
  --ui-card:       #0e1420;
  --ui-card-2:     #121a28;
  --ui-line:       #1e2738;
  --ui-line-2:     #2a3546;

  --ui-text:       #e8ecf5;
  --ui-text-2:     #9aa6bf;
  --ui-text-3:     #6b7691;

  --ui-r-sm: 10px; --ui-r: 14px; --ui-r-lg: 20px; --ui-r-xl: 26px;
  --ui-ease:   cubic-bezier(.22,.61,.36,1);
  --ui-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. YÖNETİM PANELİ GİRİŞ EKRANI
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-login{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr;
  min-height: 100vh; width: 100%;
}
/* Sol taraftaki yeşil atmosfer */
.ui-login::before{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 6% -6%,  rgba(16,185,129,.30), transparent 62%),
    radial-gradient(760px 560px at 40% 108%, rgba(109,40,217,.26), transparent 66%),
    radial-gradient(700px 520px at 104% 42%, rgba(34,211,238,.16), transparent 64%),
    linear-gradient(160deg, #04140f 0%, #050810 42%, #05070c 100%);
}

/* ── sol sütun ───────────────────────────────────────────────────────────── */
.ui-login-hero{
  position: relative; overflow: hidden;
  padding: 38px 52px 52px;
  display: flex; flex-direction: column;
}
.ui-login-brand{ display: flex; align-items: center; gap: 12px; }
.ui-login-brand img{ width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(var(--ui-green-rgb), .55)); }
.ui-login-brand span{ display: flex; flex-direction: column; line-height: 1.15; }
.ui-login-brand strong{ font-size: 15px; font-weight: 800; letter-spacing: .14em; color: #fff; }
.ui-login-brand small{ font-size: 10.5px; color: var(--ui-text-3); letter-spacing: .04em; }

/* Metin daima yörünge grafiğinin ÖNÜNDE kalır */
.ui-login-hero-body{ position: relative; z-index: 2; margin-top: auto; max-width: 520px; }
.ui-login-brand{ position: relative; z-index: 2; }

.ui-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(var(--ui-green-rgb), .10);
  border: 1px solid rgba(var(--ui-green-rgb), .34);
  color: var(--ui-green-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
}
.ui-badge i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ui-green-2); box-shadow: 0 0 10px 1px var(--ui-green-2);
  animation: ui-blink 2.1s ease-in-out infinite;
}
@keyframes ui-blink{ 0%,100%{ opacity: 1; } 50%{ opacity: .28; } }

.ui-login-hero h1{
  margin: 20px 0 14px;
  font-size: clamp(30px, 3.5vw, 50px); line-height: 1.08;
  font-weight: 800; letter-spacing: -.025em; color: #fff;
}
.ui-login-hero h1 em{
  font-style: normal;
  background: linear-gradient(100deg, var(--ui-green-2), var(--ui-cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ui-login-hero p{
  margin: 0 0 30px; max-width: 430px;
  font-size: 14px; line-height: 1.68; color: var(--ui-text-2);
}

.ui-login-feats{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; max-width: 470px; }
.ui-login-feats li{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--ui-r);
  background: rgba(14, 20, 32, .62);
  border: 1px solid var(--ui-line);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transition: transform .26s var(--ui-ease), border-color .26s var(--ui-ease), background .26s var(--ui-ease);
}
.ui-login-feats li:hover{
  transform: translateX(5px);
  border-color: rgba(var(--ui-green-rgb), .40);
  background: rgba(16, 24, 38, .78);
}
.ui-feat-ico{
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 14px;
}
.ui-ico-green{ background: rgba(16,185,129,.14); color: #34d399; border: 1px solid rgba(16,185,129,.28); }
.ui-ico-teal { background: rgba(20,184,166,.14); color: #2dd4bf; border: 1px solid rgba(20,184,166,.28); }
.ui-ico-blue { background: rgba(56,189,248,.14); color: #38bdf8; border: 1px solid rgba(56,189,248,.28); }
.ui-login-feats b    { display: block; font-size: 13px; font-weight: 700; color: var(--ui-text); }
.ui-login-feats small{ display: block; font-size: 11.5px; color: var(--ui-text-3); margin-top: 2px; }

/* Dönen yörünge grafiği */
.ui-orbit{
  position: absolute; right: -34px; bottom: 14px; z-index: 0;
  width: 360px; height: 360px; pointer-events: none; opacity: .78;
}
.ui-orbit-ring{
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px dashed rgba(154, 166, 191, .17);
  transform: translate(-50%, -50%);
}
.ui-orbit-ring:nth-child(1){ width: 190px; height: 190px; animation: ui-spin 34s linear infinite; }
.ui-orbit-ring:nth-child(2){ width: 290px; height: 290px; animation: ui-spin 52s linear infinite reverse; }
.ui-orbit-ring:nth-child(3){ width: 400px; height: 400px; animation: ui-spin 76s linear infinite; }
@keyframes ui-spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

.ui-orbit-core{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 86px; height: 86px; border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #101828, #070b14);
  border: 1px solid var(--ui-line-2);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.9), 0 0 40px -12px rgba(var(--ui-green-rgb), .45);
}
.ui-orbit-core img{ width: 44px; height: 44px; object-fit: contain; }

.ui-orbit-chip{
  position: absolute; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; font-size: 14px; color: var(--ui-green-2);
  background: rgba(16, 24, 38, .92); border: 1px solid var(--ui-line-2);
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.8);
  animation: ui-bob 6.5s ease-in-out infinite;
}
.ui-chip-1{ top: 6%;  left: 30%; animation-delay: 0s;   }
.ui-chip-2{ top: 36%; left: 2%;  animation-delay: 1.4s; color: #38bdf8; }
.ui-chip-3{ bottom: 20%; left: 24%; animation-delay: 2.8s; color: #2dd4bf; }
.ui-chip-4{ top: 52%; right: 8%; animation-delay: 4.2s; color: #a78bfa; }
@keyframes ui-bob{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-14px); }
}

/* ── sağ sütun: giriş kartı ──────────────────────────────────────────────── */
.ui-login-panel{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 48px; gap: 18px;
}
.ui-login-card{
  width: 100%; max-width: 420px;
  padding: 34px 32px 28px; border-radius: var(--ui-r-xl);
  background: linear-gradient(165deg, rgba(17,25,39,.96), rgba(9,13,21,.97));
  border: 1px solid rgba(var(--ui-green-rgb), .26);
  box-shadow: 0 34px 80px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.02) inset;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: ui-card-in .6s var(--ui-spring) both;
}
@keyframes ui-card-in{
  from{ opacity: 0; transform: translateY(26px) scale(.97); }
  to  { opacity: 1; transform: none; }
}
.ui-login-card.is-shake{ animation: ui-shake .5s var(--ui-ease); }
@keyframes ui-shake{
  10%,90%{ transform: translateX(-2px); } 20%,80%{ transform: translateX(4px); }
  30%,50%,70%{ transform: translateX(-7px); } 40%,60%{ transform: translateX(7px); }
}

.ui-login-lock{
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px;
  display: grid; place-items: center; font-size: 22px; color: #04120d;
  background: linear-gradient(145deg, var(--ui-green-2), var(--ui-teal));
  box-shadow: 0 16px 34px -14px rgba(var(--ui-green-rgb), .85);
}
.ui-login-card h2{
  margin: 0 0 6px; text-align: center;
  font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #fff;
}
.ui-login-sub{ margin: 0 0 22px; text-align: center; font-size: 12.5px; color: var(--ui-text-2); }

.ui-login-error{
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding: 11px 13px; border-radius: var(--ui-r-sm);
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.34);
  color: #fca5a5; font-size: 12px; font-weight: 600;
}
.ui-login-error.hidden{ display: none; }

.ui-field-label{
  display: block; margin: 0 0 7px;
  font-size: 11.5px; font-weight: 700; color: var(--ui-text-2);
}
.ui-field{
  position: relative; display: flex; align-items: center; margin-bottom: 16px;
  background: #080c14; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r);
  transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
.ui-field:focus-within{
  border-color: rgba(var(--ui-green-rgb), .66);
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .13);
}
.ui-field > i{ position: absolute; left: 14px; font-size: 12.5px; color: var(--ui-text-3); pointer-events: none; }
.ui-field input{
  width: 100%; background: transparent; border: 0; outline: none;
  padding: 13px 44px 13px 38px;
  font-size: 13.5px; color: var(--ui-text); font-family: inherit;
}
.ui-field input::placeholder{ color: #4d5670; }
.ui-field input[readonly]{ color: var(--ui-text-2); cursor: default; }
.ui-field-eye{
  position: absolute; right: 8px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--ui-text-3); font-size: 13px; display: grid; place-items: center;
  transition: all .18s var(--ui-ease);
}
.ui-field-eye:hover{ background: rgba(255,255,255,.07); color: var(--ui-text); }

.ui-login-submit{
  width: 100%; margin-top: 6px; padding: 14px 18px; border: 0;
  border-radius: var(--ui-r); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(100deg, var(--ui-green) 0%, var(--ui-green-2) 48%, var(--ui-cyan) 100%);
  background-size: 190% 100%; background-position: 0 0;
  color: #04120d; font-size: 14px; font-weight: 800; font-family: inherit;
  box-shadow: 0 16px 34px -16px rgba(var(--ui-green-rgb), .92);
  transition: background-position .5s var(--ui-ease), transform .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
.ui-login-submit:hover{
  background-position: 100% 0; transform: translateY(-1px);
  box-shadow: 0 20px 40px -16px rgba(var(--ui-green-rgb), 1);
}
.ui-login-submit:active{ transform: translateY(0); }
.ui-login-submit i{ font-size: 11px; transition: transform .2s var(--ui-ease); }
.ui-login-submit:hover i{ transform: translateX(3px); }

.ui-login-note{
  margin: 16px 0 0; text-align: center;
  font-size: 11px; color: var(--ui-text-3);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ui-login-note i{ color: var(--ui-green-2); }
.ui-login-foot{ margin: 0; font-size: 11.5px; color: var(--ui-text-3); text-align: center; }
.ui-login-foot a{ color: var(--ui-text-2); font-weight: 700; text-decoration: none; }
.ui-login-foot a:hover{ color: var(--ui-green-2); }

@media (max-width: 1100px){
  .ui-login{ grid-template-columns: 1fr; }
  .ui-login-hero{ padding: 28px 26px 40px; min-height: auto; }
  .ui-login-hero-body{ margin-top: 30px; }
  .ui-orbit{ display: none; }
  .ui-login-panel{ padding: 10px 22px 44px; }
}
@media (max-width: 560px){
  .ui-login-hero h1{ font-size: 28px; }
  .ui-login-card{ padding: 26px 20px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BAYRAKLI DİL MENÜSÜ · PARA BİRİMİ · GECE-GÜNDÜZ
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-controls{ display: flex; align-items: center; gap: 8px; }

.ui-pop{ position: relative; }
.ui-pop-btn{
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px; border-radius: var(--ui-r-sm);
  background: #10151f; border: 1px solid var(--ui-line-2);
  color: var(--ui-text); font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s var(--ui-ease);
}
.ui-pop-btn:hover{ background: #151d2b; border-color: #3a475e; }
.ui-pop-btn .ui-flag{ font-size: 14px; line-height: 1; }
.ui-pop-btn .ui-caret{ font-size: 9px; color: var(--ui-text-3); transition: transform .2s var(--ui-ease); }
.ui-pop.is-open .ui-pop-btn{ border-color: rgba(var(--ui-green-rgb), .5); background: #151d2b; }
.ui-pop.is-open .ui-caret{ transform: rotate(180deg); }

.ui-pop-menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
  min-width: 212px; padding: 6px; border-radius: var(--ui-r);
  background: rgba(14, 19, 29, .98);
  border: 1px solid var(--ui-line-2);
  box-shadow: 0 26px 56px -20px rgba(0,0,0,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .2s var(--ui-ease), transform .24s var(--ui-spring), visibility .2s;
}
.ui-pop.is-open .ui-pop-menu{ opacity: 1; visibility: visible; transform: none; }

.ui-pop-item{
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border: 0; border-radius: var(--ui-r-sm);
  background: transparent; color: var(--ui-text);
  font-size: 13px; font-weight: 600; font-family: inherit; text-align: left;
  cursor: pointer; transition: background .16s var(--ui-ease);
  /* menü açılırken sırayla belirir */
  opacity: 0; transform: translateX(-6px);
}
.ui-pop.is-open .ui-pop-item{ animation: ui-item-in .28s var(--ui-ease) forwards; }
.ui-pop.is-open .ui-pop-item:nth-child(1){ animation-delay: .02s; }
.ui-pop.is-open .ui-pop-item:nth-child(2){ animation-delay: .05s; }
.ui-pop.is-open .ui-pop-item:nth-child(3){ animation-delay: .08s; }
.ui-pop.is-open .ui-pop-item:nth-child(4){ animation-delay: .11s; }
.ui-pop.is-open .ui-pop-item:nth-child(5){ animation-delay: .14s; }
.ui-pop.is-open .ui-pop-item:nth-child(6){ animation-delay: .17s; }
.ui-pop.is-open .ui-pop-item:nth-child(n+7){ animation-delay: .20s; }
@keyframes ui-item-in{ to{ opacity: 1; transform: none; } }

.ui-pop-item:hover{ background: rgba(255,255,255,.06); }
.ui-pop-item .ui-flag{ font-size: 17px; line-height: 1; width: 22px; text-align: center; }
.ui-pop-item .ui-pop-name{ flex: 1; }
.ui-pop-item .ui-pop-code{ font-size: 10.5px; font-weight: 800; color: var(--ui-text-3); letter-spacing: .06em; }
.ui-pop-item.is-active{ background: rgba(var(--ui-green-rgb), .12); color: var(--ui-green-2); }
.ui-pop-item.is-active .ui-pop-code{ color: var(--ui-green-2); }

/* Gece / gündüz düğmesi */
.ui-theme-btn{
  width: 34px; height: 34px; padding: 0; border-radius: var(--ui-r-sm);
  display: grid; place-items: center; cursor: pointer;
  background: #10151f; border: 1px solid var(--ui-line-2);
  color: var(--ui-text-2); font-size: 13px;
  transition: all .2s var(--ui-ease);
}
.ui-theme-btn:hover{ background: #151d2b; color: var(--ui-text); border-color: #3a475e; }
.ui-theme-btn i{ transition: transform .45s var(--ui-spring); }
.ui-theme-btn:hover i{ transform: rotate(-22deg) scale(1.12); }

@media (max-width: 640px){
  .ui-pop-menu{ min-width: 190px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. YÖNETİM PANELİ KABUĞU — kenar çubuğu, üst bar, KPI kartları
   ═══════════════════════════════════════════════════════════════════════════ */
body.admin-panel .arena-sidebar{
  background: linear-gradient(185deg, #0a0f18 0%, #070b12 100%);
  border-right: 1px solid var(--ui-line);
}
body.admin-panel .arena-brand strong{ letter-spacing: .13em; }
body.admin-panel .arena-nav-group p{
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  color: #59647d; margin: 20px 0 8px; padding-left: 14px;
}
body.admin-panel .arena-nav-group button{
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; margin-bottom: 3px; border: 0;
  border-radius: 11px; background: transparent;
  color: #9aa6bf; font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .18s var(--ui-ease), color .18s var(--ui-ease), transform .18s var(--ui-ease);
}
body.admin-panel .arena-nav-group button > i{
  width: 19px; font-size: 14px; text-align: center; color: #66738c;
  transition: color .18s var(--ui-ease), transform .28s var(--ui-spring);
}
body.admin-panel .arena-nav-group button:hover{
  background: rgba(255,255,255,.045); color: var(--ui-text); transform: translateX(2px);
}
body.admin-panel .arena-nav-group button:hover > i{ color: var(--ui-green-2); transform: scale(1.12); }
body.admin-panel .arena-nav-group button.active{
  background: linear-gradient(97deg, rgba(var(--ui-green-rgb), .17), rgba(var(--ui-green-rgb), .05));
  color: #fff;
}
body.admin-panel .arena-nav-group button.active > i{ color: var(--ui-green-2); }
body.admin-panel .arena-nav-group button.active::before{
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 21px; margin-top: -10.5px;
  border-radius: 0 3px 3px 0; background: var(--ui-green-2);
  box-shadow: 0 0 13px 1px rgba(var(--ui-green-rgb), .85);
}
body.admin-panel .arena-nav-group button > b{
  margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 7px;
  background: rgba(248,113,113,.17); border: 1px solid rgba(248,113,113,.34);
  color: #fca5a5; font-size: 10.5px; font-weight: 800; text-align: center;
}
body.admin-panel .arena-system{
  margin-top: auto; padding: 13px 14px; border-radius: var(--ui-r);
  background: rgba(16,185,129,.055); border: 1px solid rgba(var(--ui-green-rgb), .20);
}
body.admin-panel .arena-system b{ color: var(--ui-green-2); }

/* Üst bar */
body.admin-panel .arena-topbar{
  background: rgba(7,11,18,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ui-line);
}
body.admin-panel .arena-breadcrumb strong{ color: #fff; font-weight: 800; }
body.admin-panel .arena-search{
  background: #0c121c; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r);
  transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
body.admin-panel .arena-search:focus-within{
  border-color: rgba(var(--ui-green-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .11);
}
body.admin-panel .arena-icon-btn,
body.admin-panel .arena-avatar{
  border-radius: var(--ui-r-sm); border-color: var(--ui-line-2); background: #0f1622;
  transition: all .18s var(--ui-ease);
}
body.admin-panel .arena-icon-btn:hover{
  background: #16202e; color: var(--ui-green-2); border-color: rgba(var(--ui-green-rgb), .45);
}
body.admin-panel .arena-avatar{
  background: linear-gradient(140deg, var(--ui-green), var(--ui-teal));
  color: #04120d; font-weight: 800; border: 0;
}

/* Genel Bakış KPI kartları */
body.admin-panel #admin-view-dashboard article{
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, var(--ui-card) 0%, #0a1018 100%) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg) !important;
  transition: transform .26s var(--ui-ease), border-color .26s var(--ui-ease), box-shadow .26s var(--ui-ease);
}
body.admin-panel #admin-view-dashboard article::after{
  content: ""; position: absolute; right: -50px; top: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ui-green-rgb), .16), transparent 68%);
  opacity: 0; transition: opacity .3s var(--ui-ease); pointer-events: none;
}
body.admin-panel #admin-view-dashboard article:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--ui-green-rgb), .40) !important;
  box-shadow: 0 22px 46px -22px rgba(var(--ui-green-rgb), .55);
}
body.admin-panel #admin-view-dashboard article:hover::after{ opacity: 1; }
body.admin-panel #admin-view-dashboard article > div > i{
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(var(--ui-green-rgb), .12);
  border: 1px solid rgba(var(--ui-green-rgb), .26);
  transition: transform .3s var(--ui-spring);
}
body.admin-panel #admin-view-dashboard article:hover > div > i{ transform: rotate(-9deg) scale(1.08); }
body.admin-panel #admin-view-dashboard article strong{
  font-size: 30px !important; letter-spacing: -.02em; line-height: 1.12;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. MÜŞTERİ PANELLERİ (teslimat sonucu · durum · hesap · destek)
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal h1,
body.customer-portal .text-4xl,
body.customer-portal .text-3xl{ letter-spacing: -.028em; font-weight: 800; }

.ui-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(var(--ui-green-rgb), .10);
  border: 1px solid rgba(var(--ui-green-rgb), .32);
  color: var(--ui-green-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

/* Birincil aksiyon butonlarında degrade akışı */
body.customer-portal button.bg-gradient-to-r,
body.customer-portal a.bg-gradient-to-r{
  position: relative; overflow: hidden;
  background-size: 190% 100% !important; background-position: 0 0;
  transition: background-position .55s var(--ui-ease), transform .2s var(--ui-ease), box-shadow .22s var(--ui-ease);
}
body.customer-portal button.bg-gradient-to-r:hover,
body.customer-portal a.bg-gradient-to-r:hover{
  background-position: 100% 0; transform: translateY(-1px);
}

/* Form alanları */
body.customer-portal input[type="text"],
body.customer-portal input[type="email"],
body.customer-portal input[type="password"],
body.customer-portal textarea{
  transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
body.customer-portal input[type="text"]:focus,
body.customer-portal input[type="email"]:focus,
body.customer-portal input[type="password"]:focus,
body.customer-portal textarea:focus{
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .12);
}

/* Destek masası balonu ve sabit düğmesi */
body.customer-portal #support-widget-panel{
  border-radius: var(--ui-r-lg);
  box-shadow: 0 28px 62px -26px rgba(0,0,0,.92);
}
body.customer-portal #support-fab{ position: relative; }
body.customer-portal #support-fab::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(var(--ui-green-rgb), .55);
  animation: ui-fab-pulse 2.4s var(--ui-ease) infinite; pointer-events: none;
}
@keyframes ui-fab-pulse{
  0%  { transform: scale(1);    opacity: .8; }
  100%{ transform: scale(1.55); opacity: 0;  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. MÜŞTERİ ÜST MENÜ
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal .customer-utility-row{ font-size: 11.5px; }
body.customer-portal .customer-utility-row button{ font-weight: 600; transition: color .18s var(--ui-ease); }

.ui-navpill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px; border-radius: 11px;
  background: transparent; border: 1px solid transparent;
  color: var(--ui-text-2); font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .2s var(--ui-ease);
}
.ui-navpill:hover{ background: rgba(255,255,255,.05); color: var(--ui-text); }
.ui-navpill.is-active{
  background: linear-gradient(100deg, rgba(var(--ui-green-rgb), .20), rgba(var(--ui-green-rgb), .07));
  border-color: rgba(var(--ui-green-rgb), .40); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GÜNDÜZ (AÇIK) TEMA
   Tailwind'in köşeli-parantezli renk sınıfları hedeflenerek eşlenir.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="light"] body{ background: #f4f6fb !important; color: #1a2032 !important; }
html[data-theme="light"] .fx-bg{ opacity: .38; }

html[data-theme="light"] .bg-\[\#090a0f\],
html[data-theme="light"] .bg-\[\#0d0f17\]\/95,
html[data-theme="light"] .bg-\[\#0c0e17\],
html[data-theme="light"] .bg-\[\#101320\],
html[data-theme="light"] .bg-\[\#11131c\],
html[data-theme="light"] .bg-\[\#111521\],
html[data-theme="light"] .bg-\[\#151827\],
html[data-theme="light"] .bg-\[\#171c2d\],
html[data-theme="light"] .bg-\[\#10121d\],
html[data-theme="light"] .bg-\[\#090b12\]{
  background-color: #ffffff !important;
}
html[data-theme="light"] .border-\[\#262c44\],
html[data-theme="light"] .border-\[\#2b314c\],
html[data-theme="light"] .border-\[\#2b3149\],
html[data-theme="light"] .border-\[\#29314a\],
html[data-theme="light"] .border-\[\#303a58\],
html[data-theme="light"] .border-\[\#1c2033\]\/80{
  border-color: #dde2ee !important;
}
html[data-theme="light"] .text-white{ color: #131829 !important; }
html[data-theme="light"] .text-\[\#e1e4ee\],
html[data-theme="light"] .text-\[\#d8def4\],
html[data-theme="light"] .text-\[\#c5cce0\],
html[data-theme="light"] .text-\[\#e0e2ec\]{ color: #202738 !important; }
html[data-theme="light"] .text-\[\#8f96b0\],
html[data-theme="light"] .text-\[\#8a94b5\],
html[data-theme="light"] .text-\[\#aeb6cf\],
html[data-theme="light"] .text-\[\#7d86a6\],
html[data-theme="light"] .text-\[\#717a9c\],
html[data-theme="light"] .text-\[\#8f99b8\],
html[data-theme="light"] .text-\[\#60698a\]{ color: #5b6478 !important; }

html[data-theme="light"] .ui-pop-btn,
html[data-theme="light"] .ui-theme-btn{ background: #ffffff; border-color: #dde2ee; color: #202738; }
html[data-theme="light"] .ui-pop-btn:hover,
html[data-theme="light"] .ui-theme-btn:hover{ background: #eef1f8; }
html[data-theme="light"] .ui-pop-menu{
  background: rgba(255,255,255,.99); border-color: #dde2ee;
  box-shadow: 0 22px 48px -20px rgba(16,24,40,.24);
}
html[data-theme="light"] .ui-pop-item{ color: #202738; }
html[data-theme="light"] .ui-pop-item:hover{ background: #eef1f8; }
html[data-theme="light"] .ui-pop-item .ui-pop-code{ color: #7b849b; }

html[data-theme="light"] body,
html[data-theme="light"] header{
  transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BAYRAKLAR — gömülü SVG
   Bayrak emojileri (🇹🇷) Windows'ta RENDER EDİLMEZ; Windows'ta bayrak emoji
   fontu bulunmadığı için "TR", "GB" gibi harf çiftleri görünür. Bu yüzden
   bayraklar CSS içine gömülü SVG olarak çizilir — dış istek yok, her
   işletim sisteminde aynı görünür.
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-flagimg{
  display: inline-block; width: 21px; height: 14px; flex: 0 0 auto;
  border-radius: 3px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
  text-indent: -9999px; overflow: hidden;
}
.ui-pop-item .ui-flagimg{ width: 22px; height: 15px; }

.ui-flagimg[data-cc="tr"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23E30A17'/><circle cx='11.5' cy='10' r='5' fill='%23fff'/><circle cx='13.2' cy='10' r='4' fill='%23E30A17'/><polygon points='20,7 20.71,9.03 22.85,9.07 21.14,10.37 21.76,12.43 20,11.2 18.24,12.43 18.86,10.37 17.15,9.07 19.29,9.03' fill='%23fff'/></svg>");
}
.ui-flagimg[data-cc="gb"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23012169'/><path d='M0 0L30 20M30 0L0 20' stroke='%23fff' stroke-width='4'/><path d='M0 0L30 20M30 0L0 20' stroke='%23C8102E' stroke-width='2'/><path d='M15 0V20M0 10H30' stroke='%23fff' stroke-width='6.5'/><path d='M15 0V20M0 10H30' stroke='%23C8102E' stroke-width='3.8'/></svg>");
}
.ui-flagimg[data-cc="ru"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23fff'/><rect y='6.67' width='30' height='6.67' fill='%230039A6'/><rect y='13.33' width='30' height='6.67' fill='%23D52B1E'/></svg>");
}
.ui-flagimg[data-cc="de"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23000'/><rect y='6.67' width='30' height='6.67' fill='%23DD0000'/><rect y='13.33' width='30' height='6.67' fill='%23FFCE00'/></svg>");
}
.ui-flagimg[data-cc="es"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23AA151B'/><rect y='5' width='30' height='10' fill='%23F1BF00'/></svg>");
}
.ui-flagimg[data-cc="fr"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23fff'/><rect width='10' height='20' fill='%23002395'/><rect x='20' width='10' height='20' fill='%23ED2939'/></svg>");
}
.ui-flagimg[data-cc="az"]{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%2300B5E2'/><rect y='6.67' width='30' height='6.67' fill='%23EF3340'/><rect y='13.33' width='30' height='6.67' fill='%23509E2F'/><circle cx='13.6' cy='10' r='3.2' fill='%23fff'/><circle cx='14.8' cy='10' r='2.6' fill='%23EF3340'/><polygon points='19,8.1 19.45,9.4 20.8,9.42 19.72,10.24 20.11,11.55 19,10.73 17.89,11.55 18.28,10.24 17.2,9.42 18.55,9.4' fill='%23fff'/></svg>");
}

/* Para birimi menüsünde sembol metin kalır (₺ $ € her yerde çalışır) */
.ui-pop-btn .ui-flag:not(.ui-flagimg),
.ui-pop-item .ui-flag:not(.ui-flagimg){
  font-size: 14px; font-weight: 800; color: var(--ui-green-2);
}
.ui-pop-item .ui-flag:not(.ui-flagimg){ font-size: 16px; }

/* ─── Gündüz temasında kontrast düzeltmeleri ─────────────────────────────── */
/* Açık zeminde soluk gri metinler ve açık-yeşil üstü açık-yeşil yazı
   okunmuyordu; bu blok onları koyulaştırır. */
html[data-theme="light"] .ui-navpill{ color: #4a5468; }
html[data-theme="light"] .ui-navpill:hover{ background: #eef1f8; color: #131829; }
html[data-theme="light"] .ui-navpill.is-active{
  background: linear-gradient(100deg, rgba(var(--ui-green-rgb), .16), rgba(var(--ui-green-rgb), .06));
  border-color: rgba(var(--ui-green-rgb), .45);
  color: #05543c;
}
html[data-theme="light"] .ui-chip{
  background: rgba(var(--ui-green-rgb), .12);
  border-color: rgba(var(--ui-green-rgb), .38);
  color: #05543c;
}
html[data-theme="light"] .customer-utility-row,
html[data-theme="light"] .customer-utility-row button{ color: #4a5468 !important; }
html[data-theme="light"] .customer-utility-row button:hover{ color: #0a7a5a !important; }

/* Açık temada arka plan desenleri iyice geri çekilir */
html[data-theme="light"] .fx-aurora i{ opacity: .16; }
html[data-theme="light"] .fx-grid,
html[data-theme="light"] .fx-dots{ opacity: .30; }
html[data-theme="light"] .fx-beam,
html[data-theme="light"] .fx-petal{ display: none; }
html[data-theme="light"] .fx-hex b{ opacity: .18; }

/* Açık temada özel imleç okunur kalsın (koyu gövde zaten uygun) */
html[data-theme="light"] .fx-click{ border-color: rgba(5, 84, 60, .55); }

/* Bildirimler açık temada */
html[data-theme="light"] .fx-toast{
  background: linear-gradient(145deg, #ffffff, #f7f9fd);
  border-color: #dde2ee;
  box-shadow: 0 22px 48px -20px rgba(16,24,40,.26);
  color: #131829;
}
html[data-theme="light"] .fx-toast-msg{ color: #2a3244; }
html[data-theme="light"] .fx-toast-close{ color: #6b7691; }
html[data-theme="light"] .fx-toast-close:hover{ background: #eef1f8; color: #131829; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. YÖNETİM PANELİ EKRANLARI — profesyonel yeniden düzen
   Stok Yükleme · Hazır Stoklar · Kod Stokları · Telafi Havuzu ve diğerleri
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ekran başlığı ───────────────────────────────────────────────────────── */
body.admin-panel .ui-screen-title{
  font-size: 21px; font-weight: 800; letter-spacing: -.018em;
  color: #fff; margin: 0;
}
/* Başlıktaki emoji kutusu → sade, renkli ikon karesi */
body.admin-panel .admin-view .w-12.h-12.rounded-2xl{
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important; font-size: 16px !important;
  background: rgba(var(--ui-green-rgb), .11) !important;
  border: 1px solid rgba(var(--ui-green-rgb), .26) !important;
}

/* ── Ekran gövdesi: tek bir kart dili ───────────────────────────────────── */
body.admin-panel .admin-view > .bg-\[\#10121d\],
body.admin-panel .admin-view > .bg-\[\#111521\]{
  background: linear-gradient(170deg, #0d131e 0%, #090d15 100%) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.9);
}

/* ── Ürün sekmeleri (Adobe / ChatGPT / Gemini) ──────────────────────────── */
body.admin-panel .stock-product-tab,
body.admin-panel .stock-product-tab-inv{
  height: 38px; padding: 0 17px !important; border-radius: 11px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  background: #0d131e !important; color: var(--ui-text-2) !important;
  border: 1px solid var(--ui-line-2) !important;
  transition: all .2s var(--ui-ease);
}
body.admin-panel .stock-product-tab:hover,
body.admin-panel .stock-product-tab-inv:hover{
  background: #131b29 !important; color: #fff !important;
  border-color: #3a475e !important;
}
/* Seçili sekme — eski cyan dolgu yerine yeşil çerçeveli vurgu */
body.admin-panel .stock-product-tab.bg-cyan-500,
body.admin-panel .stock-product-tab-inv.bg-cyan-500{
  background: linear-gradient(100deg, rgba(var(--ui-green-rgb), .22), rgba(var(--ui-green-rgb), .08)) !important;
  border-color: rgba(var(--ui-green-rgb), .55) !important;
  color: #fff !important;
  box-shadow: 0 0 22px -8px rgba(var(--ui-green-rgb), .8);
}

/* ── Süre portu satırları (14 gün / 1 ay / 3 ay …) ──────────────────────── */
body.admin-panel .port-slot,
body.admin-panel label.port-slot{
  border-radius: 14px !important;
  transition: transform .2s var(--ui-ease), border-color .2s var(--ui-ease),
              background .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
body.admin-panel .port-slot:hover{ transform: translateX(3px); }

/* ── Bölüm etiketleri (SÜRE PORTLARI, TOPLU HESAP GİRİŞ ALANI …) ────────── */
body.admin-panel .admin-view .text-xs.font-bold.tracking-wider,
body.admin-panel .admin-view .uppercase.tracking-wider{
  font-size: 10.5px; letter-spacing: .14em; color: #66738c;
}

/* ── Metin alanı ve girdiler ────────────────────────────────────────────── */
body.admin-panel .admin-view textarea,
body.admin-panel .admin-view input[type="text"],
body.admin-panel .admin-view input[type="number"],
body.admin-panel .admin-view input[type="email"],
body.admin-panel .admin-view input[type="password"],
body.admin-panel .admin-view select{
  border-radius: 13px !important;
  background: #080d16 !important;
  border: 1px solid var(--ui-line-2) !important;
  transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
body.admin-panel .admin-view textarea:focus,
body.admin-panel .admin-view input:focus,
body.admin-panel .admin-view select:focus{
  outline: none;
  border-color: rgba(var(--ui-green-rgb), .60) !important;
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .12);
}

/* ── Birincil eylem butonu (ENJEKTE ET vb.) ─────────────────────────────── */
body.admin-panel .admin-view button.bg-gradient-to-r{
  border-radius: 14px !important;
  background-size: 190% 100% !important; background-position: 0 0;
  transition: background-position .5s var(--ui-ease), transform .2s var(--ui-ease),
              box-shadow .22s var(--ui-ease);
}
body.admin-panel .admin-view button.bg-gradient-to-r:hover{
  background-position: 100% 0; transform: translateY(-1px);
}

/* ── Tablolar (hazır stoklar, kodlar, telafi) ───────────────────────────── */
body.admin-panel .admin-view table{ border-collapse: separate; border-spacing: 0; }
body.admin-panel .admin-view thead th{
  position: sticky; top: 0; z-index: 1;
  background: #0b111b;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  color: #66738c; text-transform: uppercase;
  padding: 11px 12px; border-bottom: 1px solid var(--ui-line);
}
body.admin-panel .admin-view tbody tr{ transition: background .16s var(--ui-ease); }
body.admin-panel .admin-view tbody tr:hover{ background: rgba(255,255,255,.035); }
body.admin-panel .admin-view tbody td{
  padding: 11px 12px; border-bottom: 1px solid rgba(30,39,56,.7); font-size: 12.5px;
}

/* ── Durum rozetleri (KRİTİK / HAZIR / …) ───────────────────────────────── */
body.admin-panel .admin-view .rounded-full.text-\[10px\],
body.admin-panel .admin-view .rounded-md.text-\[10px\]{
  padding: 3px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. ÜST BAR ARAMASI — büyütüldü, logolu
   Eski hâli 290px'e kadar daralıp neredeyse görünmüyordu.
   ═══════════════════════════════════════════════════════════════════════════ */
body.admin-panel .arena-topbar{ gap: 12px; }
body.admin-panel .arena-search{
  margin-left: auto;
  width: min(520px, 42vw) !important;
  height: 44px !important;
  padding: 0 8px 0 14px !important;
  gap: 10px !important;
  border-radius: 14px !important;
  background: #0b111b !important;
  border: 1px solid var(--ui-line-2) !important;
}
body.admin-panel .arena-search > i{ font-size: 13px; color: #66738c; }
body.admin-panel .arena-search input{
  font-size: 13px !important; color: #e8ecf5 !important;
  font-family: inherit !important;
}
body.admin-panel .arena-search input::placeholder{ color: #5a6478; }
body.admin-panel .arena-search kbd{
  margin-left: auto; padding: 3px 7px !important;
  border-radius: 7px !important; font-size: 10px !important;
  background: #131b29; border-color: #33405a !important;
}
body.admin-panel .arena-search:focus-within{
  border-color: rgba(var(--ui-green-rgb), .58) !important;
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .11);
}

/* Marka: metin yerine gerçek logo + isim */
body.admin-panel .arena-brand{
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px; border: 0; background: transparent; cursor: pointer;
}
body.admin-panel .arena-brand span{ display: flex; flex-direction: column; line-height: 1.16; text-align: left; }
body.admin-panel .arena-brand strong{ font-size: 15px; font-weight: 800; letter-spacing: .13em; color: #fff; }
body.admin-panel .arena-brand small{ font-size: 10px; color: var(--ui-text-3); letter-spacing: .04em; }

@media (max-width: 900px){
  body.admin-panel .arena-search{ width: min(300px, 40vw) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. MÜŞTERİ ÜST MENÜSÜ — tek yazı stili
   "For Buyers", "Terms of Use", "FAQ", "Check Warranty" farklı boyut, ağırlık
   ve font aileleriyle yazılmıştı; hepsi tek dile getirilir.
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal .customer-utility-row > div:first-child{
  display: flex; align-items: center; gap: 4px;
}
body.customer-portal .customer-utility-row > div:first-child button{
  height: 30px; padding: 0 11px; border-radius: 9px;
  font-family: inherit !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: #8b95af !important; white-space: nowrap;
  transition: background .18s var(--ui-ease), color .18s var(--ui-ease);
}
body.customer-portal .customer-utility-row > div:first-child button:hover{
  background: rgba(255,255,255,.055); color: #fff !important;
}
/* Garanti bağlantısı yalnızca renkle ayrışır, boyutla değil */
body.customer-portal .customer-utility-row > div:first-child button[data-i18n="top_warranty_check"]{
  color: var(--ui-green-2) !important;
}
body.customer-portal .customer-utility-row > div:first-child button[data-i18n="top_warranty_check"]:hover{
  background: rgba(var(--ui-green-rgb), .11);
}

/* Giriş ekranı ürün hattı rozetleri */
.ui-login-pills{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px;
}
.ui-login-pills span{
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(14, 20, 32, .72);
  border: 1px solid var(--ui-line-2);
  color: var(--ui-text-2); font-size: 11.5px; font-weight: 700;
}
.ui-login-pills i{ font-size: 11px; color: var(--ui-green-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. ODAK HALKASI — cyan parlamadan kurtuluş
   styles.css:209 her odaklanan öğeye 2px cyan çerçeve + 5px cyan hale
   basıyordu; arama kutusunda kutu içinde kutu görüntüsü yaratıyordu.
   Klavye erişilebilirliği korunur: odak HÂLÂ görünür, sadece sakin.
   ═══════════════════════════════════════════════════════════════════════════ */
body.admin-panel .admin-shell :is(button, a, input, select, textarea):focus-visible{
  outline: 2px solid rgba(var(--ui-green-rgb), .75) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border-radius: 10px;
}
/* Arama kutusunda iç öğe kendi halkasını çizmez — halka DIŞ kabuğa aittir */
body.admin-panel .arena-search input:focus,
body.admin-panel .arena-search input:focus-visible{
  outline: none !important; box-shadow: none !important; border: 0 !important;
}
body.admin-panel .arena-search:focus-within{
  border-color: rgba(var(--ui-green-rgb), .55) !important;
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .10) !important;
}
body.admin-panel .arena-search kbd{
  font-family: inherit !important; letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. MÜŞTERİ BAŞLIĞI — daktilo yazısından kurtuluş
   Marka, etiket, destek bağlantıları ve üst menü JetBrains Mono ile
   yazılıyordu; hepsi ana yazı tipine alınır (örnek sitede mono hiç yok).
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal header .font-mono,
body.customer-portal .customer-main-header .font-mono,
body.customer-portal .customer-utility-row .font-mono{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* Marka bloğu */
body.customer-portal .customer-main-header .text-2xl.font-black{
  font-size: 23px !important; font-weight: 800 !important;
  letter-spacing: .13em !important;
}
/* "OFFICIAL" rozeti — cyan kutudan sakin yeşil hapa */
body.customer-portal .customer-main-header .bg-cyan-500\/20{
  padding: 3px 8px !important; border-radius: 999px !important;
  background: rgba(var(--ui-green-rgb), .13) !important;
  border-color: rgba(var(--ui-green-rgb), .34) !important;
  color: var(--ui-green-2) !important;
  font-size: 9px !important; font-weight: 800 !important; letter-spacing: .1em;
}
/* Slogan */
body.customer-portal .customer-main-header p[data-i18n="tagline"]{
  font-size: 10.5px !important; letter-spacing: .05em !important;
  color: #6b7691 !important; font-weight: 600;
  text-transform: none;
}

/* Telegram / WhatsApp — çıplak mono metinden hap düğmeye */
body.customer-portal .customer-utility-row a[title*="Telegram"],
body.customer-portal .customer-utility-row a[title*="WhatsApp"]{
  height: 30px; padding: 0 11px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ui-line);
  font-size: 12px !important; font-weight: 600;
  transition: all .18s var(--ui-ease);
}
body.customer-portal .customer-utility-row a[title*="Telegram"] span,
body.customer-portal .customer-utility-row a[title*="WhatsApp"] span{
  font-family: inherit !important; font-size: 12px !important; letter-spacing: 0;
}
body.customer-portal .customer-utility-row a[title*="Telegram"]:hover{
  background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.4);
}
body.customer-portal .customer-utility-row a[title*="WhatsApp"]:hover{
  background: rgba(var(--ui-green-rgb), .12); border-color: rgba(var(--ui-green-rgb), .4);
}

/* Üst menü "Check Warranty" — kalkan emojisi yerine sade renk ayrımı */
body.customer-portal .customer-utility-row button[data-i18n="top_warranty_check"]{
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. MÜŞTERİ ARAÇ KARTLARI (Doğrula · Durum · Garanti)
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal .customer-tool-card{
  background: linear-gradient(168deg, #0e141f 0%, #090d15 100%) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 70px -36px rgba(0,0,0,.92) !important;
}
body.customer-portal .customer-tool-card input:focus{
  border-color: rgba(var(--ui-green-rgb), .6) !important;
  box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .12) !important;
}
/* Kart içindeki başlık ve etiketler */
body.customer-portal .customer-tool-view h2,
body.customer-portal .customer-tool-view h1{
  letter-spacing: -.03em; font-weight: 800;
}
body.customer-portal .customer-tool-view label,
body.customer-portal .customer-tool-view .uppercase.tracking-wider{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; color: #6b7691 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. TESLİMAT SONUCU PENCERESİ
   Başlık/etiket tipografisi ve blok düzeni; hesap bilgisi alanı okunaklı
   mono kalır (kopyalanan teknik veri), çevresi sans'a geçer.
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal #delivery-result h3,
body.customer-portal [data-i18n="delivery_success_title"]{
  font-size: 27px !important; font-weight: 800 !important;
  letter-spacing: -.03em !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}
body.customer-portal [data-i18n="delivery_success_subtitle"]{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13.5px !important; color: #8b95af !important;
}
/* Sol sütun etiketleri: PRODUCT / GUARANTEE / LOGIN / PASSWORD */
body.customer-portal [data-i18n="delivery_full_label"],
body.customer-portal .delivery-label{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .13em !important; color: #66738c !important;
}
/* Teslimat metni kutusu — sakin çerçeve, okunur satır aralığı */
body.customer-portal #delivery-full-message,
body.customer-portal pre.delivery-message{
  border-radius: 16px !important;
  background: #070b12 !important;
  border: 1px solid var(--ui-line) !important;
  line-height: 1.62 !important;
  font-size: 12px !important;
}
/* EN / RU / HIDE düğmeleri */
body.customer-portal #dlv-lang-en,
body.customer-portal #dlv-lang-ru{
  font-family: inherit !important; border-radius: 999px !important;
  font-size: 11px !important; font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. KALAN YÖNETİM EKRANLARI
   Destek Radarı · Müşteriler · Siparişler · Finans · Mesaj Üretici · Araçlar
   ═══════════════════════════════════════════════════════════════════════════ */
/* Ekran içi alt kartlar tek dile gelir */
body.admin-panel .admin-view .bg-\[\#0c0e17\],
body.admin-panel .admin-view .bg-\[\#0f1119\],
body.admin-panel .admin-view .bg-\[\#111521\]{
  border-radius: 16px !important;
  border-color: var(--ui-line) !important;
}
/* Finans rakamları */
body.admin-panel #admin-view-finance .text-xl.font-black,
body.admin-panel #admin-view-finance .text-2xl.font-black{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: -.02em;
}
/* Araçlar / Mesaj Üretici form blokları */
body.admin-panel #admin-view-tools .rounded-2xl,
body.admin-panel #admin-view-generator .rounded-2xl{
  border-radius: 16px !important;
}
/* Destek Radarı talep kartları */
body.admin-panel #admin-view-support_radar .rounded-2xl{
  border-radius: 16px !important;
  transition: border-color .2s var(--ui-ease), transform .2s var(--ui-ease);
}
body.admin-panel #admin-view-support_radar .rounded-2xl:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--ui-green-rgb), .34) !important;
}
/* Panelde kalan daktilo yazısı: sadece teknik veri (kod, e-posta) mono kalır;
   başlık, etiket ve düğmeler ana yazı tipine geçer. */
body.admin-panel .admin-view h2,
body.admin-panel .admin-view h3,
body.admin-panel .admin-view label,
body.admin-panel .admin-view button{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* Garanti bağlantısının ikonu CSS ile çizilir — dil değişince kaybolmaz
   (setLanguage metni innerText ile yazıyor, HTML içindeki ikonu silerdi). */
body.customer-portal .customer-utility-row button[data-i18n="top_warranty_check"]::before{
  content: "\f3ed";                   /* fa-shield-halved */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-right: 7px; font-size: 11px;
}


/* Arama kutusu — mor/pembe hale yerine sakin yeşil odak */
body.customer-portal .customer-main-header .blur{
  background: linear-gradient(100deg, rgba(var(--ui-green-rgb), .55), rgba(45,212,191,.35)) !important;
  opacity: 0 !important; transition: opacity .35s var(--ui-ease);
}
body.customer-portal .customer-main-header .group:focus-within .blur{ opacity: .35 !important; }
body.customer-portal #global-search{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 13.5px !important;
}
body.customer-portal #global-search::placeholder{ color: #5a6478; }

/* ═══════════════════════════════════════════════════════════════════════════
   17. HESAP DURUMU EKRANI — sonuç blokları
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal #view-status .customer-tool-card{ max-width: 620px; width: 100%; }
/* Sonuç kutuları: uyarı / bilgi / talimat */
body.customer-portal #view-status .rounded-xl,
body.customer-portal #view-status .rounded-2xl{
  border-radius: 16px !important;
}
/* Tedarikçi çıktısı (Team / Plan satırları) okunur mono kalır */
body.customer-portal #view-status pre,
body.customer-portal #view-status .font-mono{
  font-size: 11.5px !important; line-height: 1.75 !important;
}
/* Talimat başlıkları sans'a geçer */
body.customer-portal #view-status h3,
body.customer-portal #view-status h4{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 700 !important; letter-spacing: -.01em;
}

/* Açık temada yüzen başlık */
html[data-theme="light"] body.customer-portal .customer-main-header p[data-i18n="tagline"]{
  color: #7b849b !important;
}
html[data-theme="light"] body.customer-portal .customer-utility-row a[title*="Telegram"],
html[data-theme="light"] body.customer-portal .customer-utility-row a[title*="WhatsApp"]{
  background: #f4f6fb; border-color: #dde2ee;
}
html[data-theme="light"] body.customer-portal .customer-tool-card{
  background: #ffffff !important; border-color: #dde2ee !important;
  box-shadow: 0 24px 56px -32px rgba(16,24,40,.26) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. ÜST MENÜ TAŞMA DÜZELTMESİ
   ---------------------------------------------------------------------------
   Sorun: .customer-navbar ızgarası `auto minmax(360px,1fr) auto` ile
   tanımlıydı. Orta sütun 360px'in ALTINA İNEMEDİĞİ için, sağdaki eylem
   kümesi (Shop + para birimi + dil + tema + Giriş + Kayıt) genişleyince
   çubuk kabına sığmıyor ve sağ kenardan taşıyordu. Daralma 1180px'e kadar
   devreye girmediğinden 1200-1450px arası masaüstlerinde kesik görünüyordu.
   Çözüm: orta sütun sıfıra kadar daralabilir + ara genişliklerde sekme
   etiketleri gizlenir (aktif sekme etiketi kalır).
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal .customer-navbar{
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
}
/* Üç sütun da gerektiğinde daralabilsin */
body.customer-portal .customer-brand,
body.customer-portal .customer-navbar-actions{ min-width: 0; }
body.customer-portal .customer-primary-nav{ min-width: 0; }

/* Sekme şeridi taşarsa kaydırılabilir olur, çubuğu itmez */
body.customer-portal .customer-navbar .customer-primary-nav{
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
body.customer-portal .customer-navbar .customer-primary-nav::-webkit-scrollbar{ display: none; }
body.customer-portal .customer-navbar .nav-tab{ flex: 0 0 auto; white-space: nowrap; }

/* Eylem kümesi asla sarmasın, sıkışsın */
body.customer-portal .customer-navbar-actions{
  display: flex; align-items: center; flex-wrap: nowrap; gap: 7px;
}

/* 1180-1460px arası: sekme etiketleri gizlenir, yalnız ikonlar kalır.
   Antigravity'nin kendi kuralı 1180px'te başlıyordu — bu aralık boştu. */

/* 1460px altında para birimi menüsünde yalnız sembol kalsın */
@media (max-width: 1340px){
  body.customer-portal .customer-navbar .ui-pop:first-child .ui-pop-tag{ display: none; }
}

/* Dar masaüstünde marka yazısı da gizlenir, logo kalır */
@media (max-width: 1240px){
  body.customer-portal .customer-brand span:last-child{ display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. DÜZELTMELER — logo · kart kenarlığı · teslimat modalı · menü hizası
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 19.1 Panel markası: TEK logo ────────────────────────────────────────── */
/* toprak.php'de gerçek <img class="arena-brand-logo"> var; ui.css ayrıca
   ::before ile ikinci bir logo çiziyordu (kaldırıldı). Kalan tek logo
   büyütülüp "TFNUYSP" yazısının üstüne ortalanır. */
body.admin-panel .arena-brand{
  flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 14px 10px 16px; text-align: center;
}
body.admin-panel .arena-brand-logo{
  width: 52px !important; height: 52px !important;
  object-fit: contain; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 14px rgba(var(--ui-green-rgb), .45));
}
body.admin-panel .arena-brand span{ display: block; text-align: center; }
body.admin-panel .arena-brand strong{ display: block; font-size: 15px; letter-spacing: .14em; }
body.admin-panel .arena-brand small{ display: block; margin-top: 3px; }
/* Başka bir yerden gelebilecek ikinci bir logoyu da kes */
body.admin-panel .arena-brand img:not(.arena-brand-logo){ display: none !important; }
body.admin-panel .arena-brand::before,
body.admin-panel .arena-brand::after{ content: none !important; }

/* ── 19.2 Modül kartlarındaki cyan dikey çizgi kaldırılır ────────────────── */
/* redesign.css:393 her modül kartının soluna 3px parlak accent çizgi +
   ışıma basıyordu. Kenarlık artık her yerde aynı: sakin, koyu, tek renk. */
body.admin-panel .admin-module > div:first-child::before{ content: none !important; display: none !important; }
body.admin-panel .admin-module > div{
  border: 1px solid var(--ui-line) !important;
  box-shadow: 0 22px 52px -34px rgba(0,0,0,.85) !important;
}
/* Kart üstündeki yatay accent şeridi de sadeleşir */
body.admin-panel .inventory-node-card::before,
body.admin-panel .key-vault-card::before,
body.admin-panel .replacement-account-card::before{
  background: var(--ui-line) !important; box-shadow: none !important;
}

/* ── 19.3 Teslimat modalı ────────────────────────────────────────────────── */
/* (c) İlerleme çubuğu ve dil seçici aynı hizada, üst üste binmez */
body.customer-portal .delivery-progress-row{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin: 18px 0 16px;
}
body.customer-portal .delivery-progress{
  display: flex; align-items: center; gap: 0; flex: 1 1 380px; min-width: 0;
}
body.customer-portal .delivery-progress > span{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0; position: relative;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: #66738c; text-transform: uppercase; text-align: center;
}
body.customer-portal .delivery-progress > span i{
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px;
  background: #121826; border: 1px solid var(--ui-line-2); color: #66738c;
  position: relative; z-index: 1;
}
body.customer-portal .delivery-progress > span b{
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; white-space: nowrap;
}
/* Adımlar arası bağlayıcı çizgi — ikonun arkasından geçer, yazıya değmez */
body.customer-portal .delivery-progress > span + span::after{
  content: ""; position: absolute; top: 15px; right: 50%; left: -50%;
  height: 2px; background: var(--ui-line-2); z-index: 0;
}
body.customer-portal .delivery-progress > span.is-complete i{
  background: rgba(var(--ui-green-rgb), .16);
  border-color: rgba(var(--ui-green-rgb), .55); color: var(--ui-green-2);
}
body.customer-portal .delivery-progress > span.is-complete b{ color: var(--ui-green-2); }
body.customer-portal .delivery-progress > span.is-complete + span.is-complete::after{
  background: rgba(var(--ui-green-rgb), .55);
}
body.customer-portal .delivery-language-switch{
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 7px; border-radius: 999px;
  background: #121826; border: 1px solid var(--ui-line-2);
}
body.customer-portal .delivery-language-switch small{
  margin: 0 3px 0 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; color: #66738c;
}
body.customer-portal .delivery-language-switch button{
  min-width: 34px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ui-text-2);
  font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
  transition: all .18s var(--ui-ease);
}
body.customer-portal .delivery-language-switch button.is-active{
  background: linear-gradient(120deg, var(--ui-green), var(--ui-teal)); color: #04120d;
}

/* (b) İki sütun tam simetrik: eşit yükseklik, aynı dolgu/kenarlık/yuvarlaklık */
@media (max-width: 860px){
  body.customer-portal .delivery-content-grid{ grid-template-columns: 1fr; }
}

/* (a) Ürün adı tek satıra sığmazsa taşmasın */
body.customer-portal #delivered-product-name{
  text-align: right; line-height: 1.35; word-break: break-word;
}

/* (d) Alttaki iki büyük buton birebir aynı yükseklik ve hizada */
body.customer-portal .delivery-action-row,
body.customer-portal .delivery-modal-actions{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch;
}
body.customer-portal .delivery-action-row > button,
body.customer-portal .delivery-modal-actions > button{
  min-height: 56px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 18px; border-radius: 16px;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.25; text-align: center;
}
@media (max-width: 640px){
  body.customer-portal .delivery-action-row,
  body.customer-portal .delivery-modal-actions{ grid-template-columns: 1fr; }
}

/* ── 19.4 Üst menü: uzun dillerde binme/taşma ────────────────────────────── */
/* İspanyolca "Estado de cuenta", Türkçe "Hesap Durumu" gibi uzun etiketlerde
   butonlar birbirine giriyordu. Sabit ölçüler kaldırılır, şerit esnek olur. */
body.customer-portal .customer-navbar .customer-primary-nav{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
body.customer-portal .customer-navbar .customer-primary-nav::-webkit-scrollbar{ display: none; }
body.customer-portal .customer-navbar .nav-tab:not(.hidden){
  flex: 0 0 auto !important;
  min-width: 0 !important; max-width: none !important;
  width: auto !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.customer-portal .customer-navbar .nav-tab span{
  overflow: visible !important; text-overflow: clip !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. ÜST MENÜ — ekranın tamamını kaplar
   ---------------------------------------------------------------------------
   Ortalanmış 1360px'lik hap çubuk, uzun dillerde (İspanyolca/Türkçe/Rusça)
   sekmelere yer bırakmıyordu. Çubuk artık kenardan kenara uzanır; kazanılan
   genişlik sayesinde etiketler her dilde sığar.
   ═══════════════════════════════════════════════════════════════════════════ */
body.customer-portal .customer-navbar-frame{
  padding: 0 !important;
  background: rgba(8,11,18,.92) !important;
  border-bottom: 1px solid var(--ui-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
body.customer-portal .customer-navbar{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 64px;
}
/* Tam genişlikte yer açıldığı için etiketler daha geç gizlenir */
@media (min-width: 1301px){
  body.customer-portal .customer-navbar .nav-tab:not(.active) span{ display: inline !important; }
  body.customer-portal .customer-brand small{ display: block !important; }
  body.customer-portal .customer-icon-action span{ display: inline !important; }
  body.customer-portal .customer-icon-action{ width: auto !important; padding: 0 12px !important; }
}
@media (max-width: 1300px) and (min-width: 1025px){
  body.customer-portal .customer-navbar .nav-tab:not(.active) span{ display: none; }
  body.customer-portal .customer-brand small{ display: none; }
  body.customer-portal .customer-icon-action span{ display: none; }
  body.customer-portal .customer-icon-action{ width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 720px){
  body.customer-portal .customer-navbar{ padding: 8px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. ÜST MENÜ — sekme şeridindeki boşluklar dolduruldu
   ---------------------------------------------------------------------------
   Şerit ortalanıyor ama içeriği kadar dar kalıyordu; orta sütunun iki yanında
   boş alan oluyordu. Şerit artık orta sütunun tamamını kaplar ve sekmeler
   kalan genişliği paylaşır.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px){
  body.customer-portal .customer-navbar .customer-primary-nav{
    width: 100% !important;
    justify-content: stretch !important;
    gap: 4px !important;
  }
  body.customer-portal .customer-navbar .nav-tab:not(.hidden){
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 0 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. TESLİMAT PENCERESİ — yeni tasarım
   ---------------------------------------------------------------------------
   index.php içindeki pencere baştan yazıldı (.dlv-* sınıfları). Eski
   .delivery-* sınıfları da öğelerde duruyor, bu yüzden önceki bölümlerde
   yazılmış kurallar burada SIFIRLANIR ve yerini bu bölüm alır.
   Tasarım hedefi: hiçbir şey taşmadan ekrana oturması; yalnızca mesaj
   kutusunun kendi içinde kayması.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Perde ───────────────────────────────────────────────────────────────── */
body.customer-portal .delivery-modal-backdrop{
  padding: 24px 20px;
  background: rgba(3, 5, 10, .80);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ── Kabuk: dikey akış, sabit yükseklik, iç kaydırma YOK ─────────────────── */
body.customer-portal .dlv-shell{
  position: relative;
  width: 100%;
  max-width: min(1120px, 100%) !important;
  max-height: min(880px, 92vh) !important;
  margin: 0 auto;
  padding: 24px !important;
  display: flex !important; flex-direction: column; gap: 16px;
  border-radius: 24px !important;
  background: linear-gradient(168deg, #0f1420 0%, #090d15 100%) !important;
  border: 1px solid #1e2738 !important;
  box-shadow: 0 44px 96px -36px rgba(0,0,0,.95) !important;
  overflow: hidden !important;          /* kabuk kaymaz, mesaj kutusu kayar */
  animation: dlv-in .42s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dlv-in{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to  { opacity: 1; transform: none; }
}

/* ── Başlık ──────────────────────────────────────────────────────────────── */
body.customer-portal .dlv-head{
  position: relative; flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 16px;
  text-align: left !important; margin: 0 !important;
}
body.customer-portal .dlv-head-main{ flex: 1 1 auto; min-width: 0; }
body.customer-portal .dlv-badge{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.34);
  color: #34d399; font-size: 9.5px; font-weight: 800; letter-spacing: .13em;
}
body.customer-portal .dlv-title{
  margin: 10px 0 5px !important;
  font-size: 25px !important; font-weight: 800; letter-spacing: -.028em;
  color: #fff; line-height: 1.15;
}
body.customer-portal .dlv-sub{
  margin: 0 !important; font-size: 13px; color: #8b95af; line-height: 1.5;
}
body.customer-portal .dlv-close{
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border-radius: 11px;
  background: #151b28; border: 1px solid #253046;
  color: #8b95af; font-size: 13px; cursor: pointer;
  transition: all .18s ease;
}
body.customer-portal .dlv-close:hover{ background: #1d2535; color: #fff; }

/* ── Adım göstergesi + dil ───────────────────────────────────────────────── */
body.customer-portal .dlv-meta{
  position: relative; flex: 0 0 auto;
  display: flex !important; align-items: center; justify-content: center !important;
  gap: 14px; margin: 0 !important; min-height: 46px;
}
body.customer-portal .dlv-steps{
  display: flex; align-items: flex-start;
  flex: 0 1 420px !important; width: 420px; max-width: 100%; margin: 0 auto;
}
body.customer-portal .dlv-steps > span{
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  color: #66738c; text-transform: uppercase; text-align: center;
}
body.customer-portal .dlv-steps > span i{
  position: relative; z-index: 1; box-sizing: border-box;
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  background: #121826; border: 1px solid #253046; color: #66738c;
}
/* Bağlayıcı çizgi: daireler ARASINDA kalır, altlarından GEÇMEZ.
   Eskiden -50%/50% ile daire merkezleri arasına çiziliyordu; yarı saydam
   daire zemini yüzünden çizgi halkanın içinden görünüyor, kalın ve
   düzensiz duruyordu. Ayrıca 2px çizgi top:14px ile merkezden 1.5px
   aşağıdaydı (27px daire → merkez 13.5px). */
body.customer-portal .dlv-steps > span + span::after{
  content: ""; position: absolute; z-index: 0;
  top: 13px; height: 2px; border-radius: 2px;
  left: calc(-50% + 18px); right: calc(50% + 18px);
  background: #253046;
}
body.customer-portal .dlv-steps > span.is-complete i{
  background: #0c2a22; border-color: rgba(16,185,129,.62); color: #34d399;
}
body.customer-portal .dlv-steps > span.is-complete b{ color: #34d399; }
body.customer-portal .dlv-steps > span.is-complete + span.is-complete::after{ background: #10b981; }
body.customer-portal .dlv-steps > span b{ font-size: 9px; letter-spacing: .09em; }

body.customer-portal .dlv-lang{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 999px;
  background: #121826; border: 1px solid #253046; margin: 0;
}
body.customer-portal .dlv-lang small{
  margin: 0 3px 0 5px; font-size: 9px; font-weight: 800;
  letter-spacing: .12em; color: #66738c;
}
body.customer-portal .dlv-lang button{
  min-width: 32px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: #9aa6bf;
  font-family: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  transition: all .18s ease;
}
body.customer-portal .dlv-lang button.is-active{
  background: linear-gradient(120deg, #10b981, #14b8a6); color: #04120d;
}

/* ── Gövde: iki sütun, kalan yüksekliği paylaşır ─────────────────────────── */
body.customer-portal .dlv-body{
  flex: 1 1 auto; min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(296px, 0.86fr) minmax(0, 1.14fr) !important;
  gap: 14px !important; align-items: stretch !important;
}
body.customer-portal .dlv-card{
  min-width: 0; min-height: 0;
  display: flex !important; flex-direction: column; gap: 12px;
  padding: 16px !important; border-radius: 16px !important;
  background: #070b12 !important; border: 1px solid #1a2231 !important;
}

/* Sol sütun: bilgi satırları */
body.customer-portal .dlv-rows{ display: flex; flex-direction: column; gap: 0; }
body.customer-portal .dlv-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #161d2a;
}
body.customer-portal .dlv-row:first-child{ padding-top: 0; }
body.customer-portal .dlv-key{
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  color: #66738c; text-transform: uppercase; white-space: nowrap;
}
body.customer-portal .dlv-val{
  min-width: 0; text-align: right;
  font-size: 12px; font-weight: 700; color: #e8ecf5; line-height: 1.35;
  word-break: break-word;
}
body.customer-portal .dlv-val-accent{ color: #34d399; }

/* Kopyalanabilir alanlar */
body.customer-portal .dlv-field{ display: flex; flex-direction: column; gap: 6px; }
body.customer-portal .dlv-field-top{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.customer-portal .dlv-field-tools{ display: inline-flex; align-items: center; gap: 4px; }
body.customer-portal .dlv-mini{
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border: 1px solid #253046; border-radius: 8px;
  background: #101724; color: #9aa6bf;
  font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; transition: all .18s ease;
}
body.customer-portal .dlv-mini:hover{ background: #16202e; color: #34d399; border-color: rgba(16,185,129,.45); }
body.customer-portal .dlv-mini i{ font-size: 9.5px; }

body.customer-portal .dlv-box{
  padding: 11px 12px !important; border-radius: 11px !important;
  background: #05080e !important; border: 1px solid #1c2534 !important;
  color: #fff; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700; line-height: 1.45;
  word-break: break-all; user-select: all;
  max-height: 74px; overflow-y: auto;
}
body.customer-portal .dlv-box-pass{ color: #34d399; letter-spacing: .06em; }

/* Güvenlik notu */
body.customer-portal .dlv-note{
  display: flex !important; align-items: center; gap: 11px;
  margin: 0 !important; padding: 11px 12px; border-radius: 12px;
  background: #0a101a; border: 1px solid #1c2534;
}
body.customer-portal .dlv-note-ico{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 12px;
  background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.3); color: #a5b4fc;
}
body.customer-portal .dlv-note-copy{ flex: 1 1 auto; min-width: 0; }
body.customer-portal .dlv-note-copy b{ display: block; font-size: 10.5px; font-weight: 800; color: #c7d0e4; letter-spacing: .05em; }
body.customer-portal .dlv-note-copy small{ display: block; margin-top: 2px; font-size: 10.5px; color: #66738c; }
body.customer-portal .dlv-note-ok{ flex: 0 0 auto; color: #34d399; font-size: 13px; }

/* Portal / webmail kısayolları */
body.customer-portal .dlv-link{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 12px; text-decoration: none;
  background: #0a101a; border: 1px solid rgba(16,185,129,.28);
  transition: all .18s ease;
}
body.customer-portal .dlv-link:hover{ border-color: rgba(16,185,129,.6); background: #0c141f; }
body.customer-portal .dlv-link.hidden{ display: none !important; }
body.customer-portal .dlv-link-copy{ min-width: 0; }
body.customer-portal .dlv-link-copy b{ display: block; font-size: 11px; font-weight: 800; color: #34d399; }
body.customer-portal .dlv-link-copy small{
  display: block; margin-top: 2px; font-size: 10px; color: #66738c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.customer-portal .dlv-link-go{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; color: #34d399;
}

/* Sağ sütun: mesaj */
body.customer-portal .dlv-msg{
  flex: 1 1 auto; min-height: 0; max-height: none !important;
  margin: 0 !important; padding: 14px !important;
  border-radius: 12px !important;
  background: #05080e !important; border: 1px solid #1c2534 !important;
  color: #c3cbe4;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px !important; line-height: 1.72 !important;
  white-space: pre-wrap; word-break: break-word;
  overflow-y: auto; user-select: all;
}

/* ── Aksiyonlar ──────────────────────────────────────────────────────────── */
body.customer-portal .dlv-actions{
  flex: 0 0 auto; margin: 0 !important;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
}
body.customer-portal .dlv-btn{
  min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.25; text-align: center;
  cursor: pointer; transition: transform .18s ease, box-shadow .2s ease, background-position .5s ease;
  background-size: 190% 100%; background-position: 0 0;
}
body.customer-portal .dlv-btn:hover{ transform: translateY(-1px); background-position: 100% 0; }
body.customer-portal .dlv-btn i{ font-size: 13px; }
body.customer-portal .dlv-btn-ghost{
  background: linear-gradient(100deg, #1f6feb, #22d3ee, #1f6feb);
  color: #04121c; box-shadow: 0 14px 30px -16px rgba(34,211,238,.8);
}
body.customer-portal .dlv-btn-go{
  background: linear-gradient(100deg, #10b981, #34d399, #10b981);
  color: #04120d; box-shadow: 0 14px 30px -16px rgba(16,185,129,.9);
}

/* ── Dar ekran ───────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  /* Tek sutuna dusunce kabuk KAYAR ve icerik dogal yuksekligini alir.
     Aksi halde flex sikismasi parola alanini kirpip mesaj kutusunu
     tek satira indiriyordu. */
  body.customer-portal .dlv-shell{
    padding: 18px !important; max-height: 94vh !important;
    overflow-y: auto !important; display: block !important;
  }
  body.customer-portal .dlv-shell > *{ margin-bottom: 14px !important; }
  body.customer-portal .dlv-shell > *:last-child{ margin-bottom: 0 !important; }
  body.customer-portal .dlv-body{
    display: grid !important; grid-template-columns: 1fr !important;
    flex: 0 0 auto !important; min-height: 0;
  }
  body.customer-portal .dlv-card{ min-height: 0; }
  body.customer-portal .dlv-box{ max-height: none; }
  body.customer-portal .dlv-msg{ min-height: 260px; max-height: 340px !important; }
  body.customer-portal .dlv-actions{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  body.customer-portal .dlv-meta{ flex-direction: column; gap: 12px; min-height: 0; }
  body.customer-portal .dlv-lang{ position: static; transform: none; }
  body.customer-portal .dlv-steps{ flex: 1 1 auto !important; width: 100%; }
  body.customer-portal .dlv-title{ font-size: 21px !important; }
}

/* ── Gündüz teması ───────────────────────────────────────────────────────── */
html[data-theme="light"] body.customer-portal .dlv-shell{
  background: #ffffff !important; border-color: #dde2ee !important;
  box-shadow: 0 34px 80px -34px rgba(16,24,40,.32) !important;
}
html[data-theme="light"] body.customer-portal .dlv-card{ background: #f7f9fd !important; border-color: #e3e8f2 !important; }
html[data-theme="light"] body.customer-portal .dlv-box,
html[data-theme="light"] body.customer-portal .dlv-msg{ background: #ffffff !important; border-color: #e3e8f2 !important; color: #202738; }
html[data-theme="light"] body.customer-portal .dlv-title{ color: #131829; }
html[data-theme="light"] body.customer-portal .dlv-sub{ color: #5b6478; }
html[data-theme="light"] body.customer-portal .dlv-val{ color: #202738; }
html[data-theme="light"] body.customer-portal .dlv-note,
html[data-theme="light"] body.customer-portal .dlv-link{ background: #ffffff; border-color: #e3e8f2; }

/* ═══════════════════════════════════════════════════════════════════════════
   25. ANAHTAR KULLANMA EKRANI  (#view-redeem · assets/redeem.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-entry{
  margin: 16px auto 0; padding: 10px 16px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.04); border: 1px solid var(--ui-line-2);
  color: var(--ui-text-2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ui-ease);
}
.rd-entry:hover{ color: #fff; border-color: rgba(var(--ui-green-rgb), .5); background: rgba(var(--ui-green-rgb), .08); }
.rd-entry i:first-child{ color: var(--ui-green-2); }
.rd-entry i:last-child{ font-size: 10px; opacity: .7; }

.rd-label{
  display: block; margin: 0 0 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #6b7691;
}
.rd-form-row, .rd-field-row{ display: flex; align-items: stretch; gap: 10px; }
.rd-input{
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px;
  border-radius: 14px; background: #070b12; border: 1px solid var(--ui-line-2);
  color: #fff; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: .04em;
  outline: none; transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}
.rd-input:focus{ border-color: rgba(var(--ui-green-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--ui-green-rgb), .12); }
.rd-input::placeholder{ color: #4d5670; letter-spacing: 0; font-family: inherit; }
.rd-hint{ margin: 12px 0 0; font-size: 11.5px; color: #6b7691; display: flex; align-items: center; gap: 7px; }

.rd-btn{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  cursor: pointer; transition: transform .18s var(--ui-ease), background .2s var(--ui-ease), border-color .2s var(--ui-ease), opacity .2s;
}
.rd-btn:disabled{ opacity: .55; cursor: not-allowed; }
.rd-btn:not(:disabled):hover{ transform: translateY(-1px); }
.rd-btn-primary{ min-height: 50px; background: linear-gradient(100deg, var(--ui-green), var(--ui-green-2)); color: #04120d; box-shadow: 0 14px 30px -16px rgba(var(--ui-green-rgb), .9); }
.rd-btn-accent{ background: linear-gradient(100deg, #f59e0b, #fbbf24); color: #1c1300; min-width: 104px; }
.rd-btn-ghost{ background: #101724; border-color: #253046; color: #c7d0e4; }
.rd-btn-ghost:not(:disabled):hover{ border-color: rgba(var(--ui-green-rgb), .45); color: var(--ui-green-2); }
.rd-btn-ghost.is-done{ color: var(--ui-green-2); border-color: rgba(var(--ui-green-rgb), .5); }
.rd-btn-secondary{ background: #131b29; border-color: #2a3546; color: #e8ecf5; }
.rd-btn-sm{ min-height: 36px; padding: 0 13px; font-size: 11.5px; border-radius: 10px; }
.rd-btn-block{ width: 100%; min-height: 50px; white-space: normal; text-align: center; }

.rd-msg{ margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.rd-msg.hidden{ display: none; }
.rd-msg-err { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.34); color: #fca5a5; }
.rd-msg-warn{ background: rgba(251,191,36,.10);  border: 1px solid rgba(251,191,36,.34);  color: #fde68a; }
.rd-msg-ok  { background: rgba(52,211,153,.10);  border: 1px solid rgba(52,211,153,.34);  color: #a7f3d0; }

.rd-result{ display: flex; flex-direction: column; gap: 16px; }
.rd-result.hidden{ display: none; }
.rd-result-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rd-badge{ display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.rd-badge-ok  { background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; }
.rd-badge-warn{ background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.4); color: #fde68a; }

.rd-account{ display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: #080c14; border: 1px solid var(--ui-line); }
.rd-field{ min-width: 0; }
.rd-field.hidden{ display: none; }
.rd-value{
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 12px;
  background: #05080e; border: 1px solid #1c2534;
  color: #7dd3fc; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600;
  word-break: break-all; user-select: all;
}
.rd-value-plain{ color: #c7d0e4; font-family: inherit; font-weight: 500; user-select: text; }
.rd-otp-code{
  flex: 1 1 auto; min-width: 0; display: grid; place-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px dashed #2a3546; background: #0b111b;
  color: #6b7691; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; font-weight: 700; letter-spacing: .22em;
}
.rd-otp-waiting{ color: #fde68a; border-color: rgba(251,191,36,.45); letter-spacing: .06em; font-size: 14px; }
.rd-otp-success{ color: #6ee7b7; border: 1px solid rgba(52,211,153,.55); background: rgba(52,211,153,.08); cursor: pointer; font-size: 20px; }
.rd-otp-error{ color: #fca5a5; border-color: rgba(248,113,113,.5); }
.rd-otp-msg{ margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #8b95af; }
.rd-otp-msg.hidden{ display: none; }
.rd-otp-msg-success{ color: #6ee7b7; }
.rd-otp-msg-error{ color: #fca5a5; }
.rd-otp-msg-waiting{ color: #fde68a; }

.rd-meta{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rd-meta small{ display: block; font-size: 11px; color: #6b7691; margin-bottom: 3px; }
.rd-meta b{ display: block; font-size: 14px; font-weight: 800; color: #fff; word-break: break-word; }

.rd-tutorial{ padding: 14px 16px; border-radius: 14px; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.28); color: #f1e3b5; font-size: 12.5px; line-height: 1.6; }
.rd-tutorial.hidden{ display: none; }
.rd-tutorial strong{ display: block; margin-bottom: 6px; color: #fff; font-size: 13px; }
.rd-tutorial ol{ margin: 0; padding-left: 20px; list-style: decimal; }
.rd-tutorial li + li{ margin-top: 6px; }

.rd-note{ margin: -4px 0 0; padding: 12px 14px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.26); border-left: 3px solid #38bdf8; color: #cfe6fb; font-size: 12.5px; line-height: 1.55; }
.rd-note.hidden{ display: none; }
.rd-note i{ color: #38bdf8; margin-top: 2px; }

@media (max-width: 640px){
  .rd-form-row{ flex-direction: column; }
  .rd-btn-primary{ width: 100%; }
  .rd-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-entry{ width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

html[data-theme="light"] .rd-input,
html[data-theme="light"] .rd-value,
html[data-theme="light"] .rd-otp-code{ background: #fff; border-color: #dde2ee; color: #172033; }
html[data-theme="light"] .rd-account{ background: #f7f9fd; border-color: #e3e8f2; }
html[data-theme="light"] .rd-meta b{ color: #131829; }
html[data-theme="light"] .rd-btn-ghost,
html[data-theme="light"] .rd-btn-secondary{ background: #fff; border-color: #dde2ee; color: #202738; }
html[data-theme="light"] .rd-tutorial{ color: #5c4a12; }
html[data-theme="light"] .rd-tutorial strong{ color: #2b2206; }
html[data-theme="light"] .rd-note{ color: #1e3a52; }

/* ─── Teslimat penceresi: anahtar teslimatı ──────────────────────────────── */
/* Hesap değil anahtar teslim edildiğinde şifre, 2FA ve "hesap durumu" düğmesi
   anlamsızdır; gizlenir ve "Anahtarı kullan" bağlantısı öne çıkar. */
body.customer-portal .dlv-shell.is-key-delivery .dlv-only-account{ display: none !important; }
body.customer-portal .dlv-shell.is-key-delivery .dlv-btn-go{ display: none !important; }
body.customer-portal .dlv-shell.is-key-delivery .dlv-actions{ grid-template-columns: 1fr; }
body.customer-portal .dlv-link-key{
  margin-top: auto; padding: 14px 16px;
  background: linear-gradient(100deg, rgba(var(--ui-green-rgb), .16), rgba(var(--ui-green-rgb), .05));
  border-color: rgba(var(--ui-green-rgb), .5);
}
body.customer-portal .dlv-link-key .dlv-link-copy b{ font-size: 12.5px; }
body.customer-portal .dlv-link-key .dlv-link-copy small{ white-space: normal; }
body.customer-portal .dlv-link-key .dlv-link-go{
  height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12px;
  background: linear-gradient(100deg, var(--ui-green), var(--ui-green-2)); color: #04120d;
}