@import url('fonts.css');

:root {
  --navy: #0E2340; --navy-2: #14507A; --blue: #1A9BD7; --green: #22A45D; --red: #C8341F; --amber: #B7791F;
  --bg: #F3F6FA; --card: #FFFFFF; --line: #D9E3EE; --text: #1F2A3A; --muted: #5B6B80; --soft: #F2F7FB;
  --radius: 10px;
  /* Tema değişkenleri (varsayılan: Klasik) */
  --bar: #0E2340; --bar-line: linear-gradient(90deg, #0E2340, #1A9BD7, #22A45D); --bar-text: #C9D6E6; --bar-muted: #9FB3CC; --bar-on: rgba(255,255,255,.14);
  --hi: #5EDB96; --primary: #0E2340; --primary-2: #14507A; --heading: #0E2340; --h3: #14507A; --link: #14507A; --accent: #1A9BD7;
  --field: #FFFFFF; --line-2: #EDF2F7; --hover: #FAFCFE; --chip: #EEF1F5; --table-head: #14507A; --ring: rgba(26,155,215,.15);
  --glass: rgba(243,246,250,.94); --overlay: rgba(14,35,64,.45); --dash: #B9C8D8; --code-bg: #0E2340; --code-text: #C9D6E6;
  --ok-bg: #E7F6EE; --ok-tx: #11663A; --ok-bd: #BFE6CF; --err-bg: #FDECEA; --err-tx: #8F2414; --err-bd: #F5C6BE; --info-bg: #E8F4FB; --info-tx: #14507A; --info-bd: #BFDDF0;
  --bd-draft: #EEF1F5; --bt-draft: #4A5568; --bd-sent: #E3F1FA; --bt-sent: #14507A; --bd-ok: #E3F5EA; --bt-ok: #11663A; --bd-no: #FBE6E3; --bt-no: #8F2414; --bd-exp: #FFF4DE; --bt-exp: #8A5A0B;
  --btn-bg: var(--primary); --btn-bg-hover: var(--primary-2); --btn-border: var(--primary); --btn-tx: #fff; --btn-radius: 7px; --btn-shadow: none; --btn-green: var(--green);
  --tab-on-bg: transparent; --tab-on-tx: var(--heading); --tab-radius: 0; --card-accent: transparent; --title: var(--heading);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.45; }
a { color: var(--link); }
h1, h2, h3 { font-family: 'Exo 2', sans-serif; color: var(--heading); margin: 0; letter-spacing: .3px; }
h1 { font-size: 22px; color: var(--title); } h2 { font-size: 17px; } h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--h3); }

/* ---- Yerleşim ---- */
.topbar { background: var(--bar); color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar::after { content: ''; display: block; height: 4px; background: var(--bar-line); }
.topbar-in { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; height: 58px; }
.brand { font-family: 'Exo 2', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 16px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand small { font-weight: 700; color: var(--hi); letter-spacing: 1px; margin-left: 6px; font-size: 11px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 36px; height: 36px; background: #fff; border-radius: 8px; padding: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.login .top .brand-logo { width: 46px; height: 46px; border-radius: 10px; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a { color: var(--bar-text); text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.on { background: var(--bar-on); color: #fff; font-weight: 600; }
.user { display: flex; align-items: center; gap: 10px; color: var(--bar-muted); font-size: 13px; white-space: nowrap; }
.user form { margin: 0; }
.user button { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: inset 0 3px 0 var(--card-accent); }
.card + .card { margin-top: 16px; }
.card > h3 { margin-bottom: 14px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .span2 { grid-column: auto; } .user span { display: none; } }

/* ---- Form ---- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
textarea { resize: vertical; min-height: 64px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); font-weight: 500; }
.check input { width: 16px; height: 16px; }

.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: var(--btn-radius);
  border: 1px solid var(--line); background: var(--field); color: var(--heading); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--primary-2); }
.btn:focus-visible, .tabs a:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--btn-bg); border-color: var(--btn-border); color: var(--btn-tx); box-shadow: var(--btn-shadow); }
.btn.primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-border); }
.btn.green { background: var(--btn-green); border-color: transparent; color: #fff; box-shadow: var(--btn-shadow); }
.btn.green:hover { filter: brightness(1.06); }
.btn.red { color: var(--red); }
.btn.red:hover { border-color: var(--red); }
.btn.sm { padding: 5px 9px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: wait; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Bildirim ---- */
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.flash.ok { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd); }
.flash.err { background: var(--err-bg); color: var(--err-tx); border: 1px solid var(--err-bd); }
.flash.info { background: var(--info-bg); color: var(--info-tx); border: 1px solid var(--info-bd); }

/* ---- Tablo ---- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--soft); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:hover td { background: var(--hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-draft { background: var(--bd-draft); color: var(--bt-draft); }
.b-sent { background: var(--bd-sent); color: var(--bt-sent); }
.b-approved { background: var(--bd-ok); color: var(--bt-ok); }
.b-rejected { background: var(--bd-no); color: var(--bt-no); }
.b-expired { background: var(--bd-exp); color: var(--bt-exp); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a.on { color: var(--tab-on-tx); border-color: var(--accent); font-weight: 700; background: var(--tab-on-bg); border-radius: var(--tab-radius); }
.tabs a .c { background: var(--chip); border-radius: 999px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }

.filters { display: flex; gap: 8px; align-items: center; }
.filters input { width: 260px; }

/* ---- Teklif formu: kalemler ---- */
.items { width: 100%; border-collapse: collapse; }
.items th { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #fff; background: var(--table-head); background-attachment: fixed; padding: 8px 6px; text-align: left; }
.items th:first-child { border-radius: 7px 0 0 0; } .items th:last-child { border-radius: 0 7px 0 0; }
.items td { padding: 6px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.items tr:nth-child(even) td { background: var(--soft); }
.items input { padding: 7px 8px; }
.items .n { width: 92px; } .items .q { width: 76px; } .items .d { width: 64px; }
.items .out { text-align: right; padding-top: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.items .out b { color: var(--heading); }
.items td.prod { min-width: 300px; }
.items textarea.f-product { resize: none; overflow: hidden; line-height: 1.4; }
.items .idx { color: var(--muted); padding-top: 14px; text-align: center; width: 28px; }
.imgcell { width: 64px; }
.imgbox { width: 52px; height: 52px; border: 1px dashed var(--dash); border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--field); position: relative; overflow: hidden; color: var(--muted); font-size: 20px; }
.imgbox img { width: 100%; height: 100%; object-fit: contain; }
.imgbox .x { position: absolute; top: 0; right: 0; background: rgba(14,35,64,.8); color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 0 0 0 5px; display: none; }
.imgbox:hover .x { display: block; }
.rowdel { background: none; border: none; color: var(--dash); cursor: pointer; font-size: 18px; padding: 8px 4px; }
.rowdel:hover { color: var(--red); }
@media (max-width: 900px) {
  .items thead { display: none; }
  .items tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .items td { border: none; padding: 2px; background: none !important; }
  .items td.prod { grid-column: 1 / -1; min-width: 0; }
.items textarea.f-product { resize: none; overflow: hidden; line-height: 1.4; }
.items .idx { display: none; }
  .items .n, .items .q, .items .d { width: 100%; }
}

.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(14,35,64,.12); margin-top: 3px; max-height: 300px; overflow-y: auto; display: none; }
.ac-list div { padding: 8px 10px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.ac-list div:hover, .ac-list div.on { background: var(--soft); }
.ac-list img { width: 28px; height: 28px; object-fit: contain; }
.ac-list small { color: var(--muted); display: block; }

.totals { margin-left: auto; width: 340px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 14px; }
.totals div { display: flex; justify-content: space-between; padding: 8px 12px; }
.totals div:nth-child(2) { background: var(--soft); }
.totals .grand { background: var(--bar); color: #fff; align-items: center; }
.totals .grand b { font-family: 'Exo 2', sans-serif; font-size: 19px; color: var(--hi); }

.sticky-actions { position: sticky; bottom: 0; background: var(--glass); backdrop-filter: blur(6px); border-top: 1px solid var(--line); padding: 12px 0; margin-top: 18px; z-index: 10; }

.side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .side { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.linkbox { display: flex; gap: 6px; } .linkbox input { font-size: 12px; }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal.open { display: flex; }
.modal .box { background: var(--card); border-radius: 12px; width: 520px; max-width: 100%; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal .box h2 { margin-bottom: 14px; }

.log { background: var(--code-bg); color: var(--code-text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; padding: 10px; border-radius: 7px; max-height: 260px; overflow: auto; white-space: pre-wrap; margin-top: 10px; display: none; }
.steps { margin: 0; padding-left: 20px; color: var(--text); } .steps li { margin-bottom: 6px; }
.steps code, .hint code { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12px; }
.method-pane { display: none; } .method-pane.on { display: block; }
.radio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.radio-cards label { border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; color: var(--text); font-weight: 600; font-size: 14px; margin: 0; }
.radio-cards label small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 3px; }
.radio-cards input { margin-right: 6px; }
.radio-cards label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--hover); }
@media (max-width: 700px) { .radio-cards { grid-template-columns: 1fr; } .filters input { width: 100%; } .filters { flex-wrap: wrap; } }
.empty { text-align: center; padding: 40px 10px; color: var(--muted); }

/* ================= Temalar =================
   Klasik: :root değerleri. Diğerleri yalnızca renk değişkenlerini değiştirir; düzen aynı kalır. */

/* Alev — mor gece barı, turuncu → pembe → mor geçişli butonlar */
html[data-theme="alev"] {
  --bg: #F8F6FF; --card: #FFFFFF; --line: #E6DFF7; --text: #20123A; --muted: #6B5E86; --soft: #F6F1FF;
  --bar: linear-gradient(100deg, #20123A 0%, #3A1C6E 60%, #5B1F7A 100%); --bar-line: linear-gradient(90deg, #FFBD4F, #FF7139 30%, #FF4F5E 60%, #9059FF);
  --bar-text: #E4D9FF; --bar-muted: #B9A9E6; --bar-on: rgba(255,255,255,.16);
  --hi: #FFBD4F; --primary: #9059FF; --primary-2: #6E3BE8; --heading: #20123A; --h3: #E2405C; --link: #7D3FF2; --accent: #FF4F5E; --title: #20123A;
  --line-2: #F0EBFA; --hover: #FCFAFF; --chip: #F1E9FF; --table-head: linear-gradient(90deg, #FF7139, #FF4F5E 45%, #9059FF); --ring: rgba(144,89,255,.2);
  --glass: rgba(248,246,255,.94); --overlay: rgba(32,18,58,.5); --dash: #CDBFF0;
  --btn-bg: linear-gradient(90deg, #FF7139, #FF4F5E 50%, #9059FF); --btn-bg-hover: linear-gradient(90deg, #FF8650, #FF6573 50%, #A275FF); --btn-border: transparent;
  --btn-radius: 999px; --btn-shadow: 0 4px 14px rgba(255,79,94,.28); --btn-green: linear-gradient(90deg, #12BC74, #00B3C7);
  --tab-on-bg: linear-gradient(90deg, rgba(255,113,57,.12), rgba(144,89,255,.12)); --tab-on-tx: #C4233F; --tab-radius: 8px 8px 0 0;
  --card-accent: #FF4F5E; --green: #12BC74;
  --info-bg: #F3ECFF; --info-tx: #5B2BC4; --info-bd: #DCCBFF; --bd-sent: #F1E9FF; --bt-sent: #6E3BE8; --bd-exp: #FFF0D9; --bt-exp: #A3530A;
}
html[data-theme="alev"] .card:nth-of-type(3n+2) { --card-accent: #9059FF; }
html[data-theme="alev"] .card:nth-of-type(3n) { --card-accent: #FF9500; }

/* Turkuaz — derin petrol bar, turkuaz → yeşil butonlar, kehribar vurgu */
html[data-theme="turkuaz"] {
  --bg: #EAF6F5; --card: #FFFFFF; --line: #C9E3E0; --text: #12302D; --muted: #4A6C68; --soft: #EBF7F5;
  --bar: linear-gradient(100deg, #062F33 0%, #0B4B4F 70%, #0E5E5A 100%); --bar-line: linear-gradient(90deg, #00C2B8, #3BD67A 55%, #F7B731);
  --bar-text: #BFE6E2; --bar-muted: #8CC4BE; --bar-on: rgba(255,255,255,.14);
  --hi: #F7C548; --primary: #009C95; --primary-2: #007A75; --heading: #073B3E; --h3: #00857F; --link: #007E78; --accent: #00B3A8; --title: #073B3E;
  --line-2: #DDEFEC; --hover: #F3FBFA; --chip: #D7F0EC; --table-head: linear-gradient(90deg, #007E78, #00B3A8); --ring: rgba(0,179,168,.2);
  --glass: rgba(234,246,245,.94); --overlay: rgba(6,47,51,.5); --dash: #A3D2CC;
  --btn-bg: linear-gradient(90deg, #00A89F, #19C27A); --btn-bg-hover: linear-gradient(90deg, #00BDB3, #2BD68C); --btn-border: transparent;
  --btn-radius: 10px; --btn-shadow: 0 4px 14px rgba(0,168,159,.28); --btn-green: linear-gradient(90deg, #F2A516, #F7C548);
  --tab-on-bg: rgba(0,179,168,.1); --tab-on-tx: #00706B; --tab-radius: 8px 8px 0 0;
  --card-accent: #00B3A8; --green: #19A874;
  --info-bg: #DDF3F1; --info-tx: #006B66; --info-bd: #ACE0DA; --bd-sent: #D7F0EC; --bt-sent: #006B66;
}
html[data-theme="turkuaz"] .btn.green { color: #3A2600; }

/* Gece — koyu zemin, camgöbeği → yeşil parlak butonlar */
html[data-theme="gece"] {
  --bg: #0C1119; --card: #141C27; --line: #243245; --text: #DCE5EF; --muted: #8C9CB0; --soft: #192331;
  --bar: linear-gradient(100deg, #070A10, #0F1A2A); --bar-line: linear-gradient(90deg, #22D3EE, #3B82F6 40%, #A855F7 70%, #4ADE80);
  --bar-text: #A9B8CA; --bar-muted: #7D8DA2; --bar-on: rgba(34,211,238,.14);
  --hi: #4ADE80; --primary: #2E8FD0; --primary-2: #3BA9E6; --heading: #EEF3F9; --h3: #67E8F9; --link: #7DD3FC; --accent: #22D3EE; --title: #FFFFFF;
  --field: #0F1620; --line-2: #1D2938; --hover: #1A2534; --chip: #223044; --table-head: linear-gradient(90deg, #1E3A8A, #0E7490); --ring: rgba(34,211,238,.25);
  --glass: rgba(12,17,25,.92); --overlay: rgba(0,0,0,.6); --dash: #3A4C61; --code-bg: #05080D; --code-text: #A9B8CA;
  --btn-bg: linear-gradient(90deg, #06B6D4, #3B82F6); --btn-bg-hover: linear-gradient(90deg, #22D3EE, #60A5FA); --btn-border: transparent;
  --btn-radius: 10px; --btn-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 6px 18px rgba(6,182,212,.25); --btn-green: linear-gradient(90deg, #16A34A, #22C55E);
  --tab-on-bg: rgba(34,211,238,.1); --tab-on-tx: #67E8F9; --tab-radius: 8px 8px 0 0;
  --card-accent: rgba(34,211,238,.55); --green: #22C55E; --red: #F87171;
  --ok-bg: #102E1D; --ok-tx: #86EFAC; --ok-bd: #1C5134; --err-bg: #381615; --err-tx: #FCA5A5; --err-bd: #5C2422; --info-bg: #0F2A3A; --info-tx: #7DD3FC; --info-bd: #1E4660;
  --bd-draft: #223044; --bt-draft: #B7C4D3; --bd-sent: #0F3348; --bt-sent: #7DD3FC; --bd-ok: #11351F; --bt-ok: #86EFAC; --bd-no: #3B1716; --bt-no: #FCA5A5; --bd-exp: #3A2B0F; --bt-exp: #FCD34D;
  color-scheme: dark;
}
html[data-theme="gece"] .modal .box { border: 1px solid var(--line); }

/* Ametist — mor-mürdüm bar, mor → pembe butonlar, nane vurgu */
html[data-theme="ametist"] {
  --bg: #F5F1FD; --card: #FFFFFF; --line: #DCD2F2; --text: #241A3D; --muted: #625782; --soft: #F3EEFC;
  --bar: linear-gradient(100deg, #1E0F4A 0%, #3B1A7A 65%, #5A1F86 100%); --bar-line: linear-gradient(90deg, #A78BFA, #EC4899 55%, #34D399);
  --bar-text: #DDD2FA; --bar-muted: #AFA0DA; --bar-on: rgba(255,255,255,.15);
  --hi: #5EF2C2; --primary: #6D28D9; --primary-2: #5B21B6; --heading: #2A1466; --h3: #7C3AED; --link: #6D28D9; --accent: #8B5CF6; --title: #2A1466;
  --line-2: #ECE6F8; --hover: #FAF7FF; --chip: #EDE5FD; --table-head: linear-gradient(90deg, #6D28D9, #A855F7); --ring: rgba(139,92,246,.2);
  --glass: rgba(245,241,253,.94); --overlay: rgba(30,15,74,.5); --dash: #C7B8EC;
  --btn-bg: linear-gradient(90deg, #7C3AED, #DB2777); --btn-bg-hover: linear-gradient(90deg, #8B5CF6, #EC4899); --btn-border: transparent;
  --btn-radius: 10px; --btn-shadow: 0 4px 14px rgba(124,58,237,.28); --btn-green: linear-gradient(90deg, #10B981, #34D399);
  --tab-on-bg: rgba(139,92,246,.1); --tab-on-tx: #6D28D9; --tab-radius: 8px 8px 0 0;
  --card-accent: #8B5CF6; --green: #10B981;
  --info-bg: #EFE8FE; --info-tx: #5B21B6; --info-bd: #D6C6FB; --bd-sent: #EDE5FD; --bt-sent: #5B21B6;
}

/* Tema seçici */
.themes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.themes label { margin: 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; }
.themes label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.themes input { position: absolute; opacity: 0; pointer-events: none; }
.themes label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch { display: block; height: 46px; border-radius: 6px; margin-bottom: 7px; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,.08); }
.swatch i { position: absolute; left: 0; right: 0; top: 0; height: 14px; }
.swatch b { position: absolute; left: 8px; bottom: 7px; width: 34px; height: 10px; border-radius: 3px; }
.swatch em { position: absolute; right: 8px; bottom: 7px; width: 18px; height: 10px; border-radius: 3px; }
@media (max-width: 900px) { .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }