/* Gürses Arçelik — ortak tasarım sistemi (ui.css)
   Mevcut sayfa CSS'lerinden SONRA yüklenir; değişkenleri ve ortak bileşenleri yeniden tanımlar.
   İşlev koduna (JS, ID, data-attribute) dokunmaz. */

/* ============ 1. Tasarım token'ları ============ */
:root,:root[data-theme="light"],:root:not([data-theme="light"]),:root[data-theme="dark"]{
  /* yüzeyler ve metin */
  --paper:#F7F8FA;--card:#FFFFFF;--ink:#111827;--ink2:#667085;--rule:#E5E7EB;--soft:#F3F4F6;
  /* marka */
  --brand:#D71920;--brand-dark:#A80F17;--brand-soft:#FDECEC;
  /* durumlar */
  --good:#059669;--good-bg:#ECFDF5;--bad:#DC2626;--bad-bg:#FEF2F2;--warn:#B45309;--warn-bg:#FFFBEB;--info:#2563EB;--info-bg:#EFF6FF;
  --early:#059669;--early-bg:#ECFDF5;--late:#DC2626;--late-bg:#FEF2F2;--flat:#667085;--flat-bg:#F3F4F6;
  /* perakende / vurgu şeridi: yumuşak amber */
  --tape:#FEF3C7;--tape-ink:#78350F;
  --focus:#2563EB;--bar-bg:#111827;--bar-fg:#FFFFFF;--shadow:rgba(16,24,40,.12);
  /* tipografi */
  --f-head:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  /* ölçü sistemi (4/8 px) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-sm:8px;--r-md:12px;--r-lg:14px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);--sh-2:0 4px 12px rgba(16,24,40,.08);
  --um-w:248px;
  color-scheme:light;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--f-body);font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--paper)}
td,th,.pnum,.kpi b,.tnum,.num,input[type=number],input[inputmode=decimal],input[inputmode=numeric]{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'cv11' 1}

/* ============ 2. Başlıklar ============ */
h1{font:700 clamp(22px,4.6vw,26px)/1.15 var(--f-head);letter-spacing:-.02em;color:var(--ink)}
h2{font:600 17px/1.25 var(--f-head);letter-spacing:-.01em}
h3{font:600 15px/1.3 var(--f-head)}
.info,.datainfo,.note,.sub,.foot{color:var(--ink2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ============ 3. Kartlar ve yüzeyler ============ */
.card,.tw,.kpi,.results,.sheet-card,.actcard,.sumcard,.optcard,.who{border:1px solid var(--rule)!important;border-radius:var(--r-md);box-shadow:var(--sh-1)}
.card,.tw,.sheet-card{background:var(--card)}
html[data-pg="teklif"] .tag,html[data-pg="yonetim"] .tag,html[data-pg="yonetim-tarama"] .tag{border:1px solid var(--rule);border-left:4px solid var(--state,var(--flat));border-radius:var(--r-md);box-shadow:var(--sh-1)}
html[data-pg="teklif"] .tag-head::after,html[data-pg="yonetim"] .tag-head::after{border-color:var(--rule);background:var(--soft)}
.results{box-shadow:var(--sh-2)}
.kpi{padding:14px 16px;background:var(--card)}
.kpi span{font-size:12px;font-weight:500;color:var(--ink2)}
.kpi b{font:600 26px/1.15 var(--f-head);letter-spacing:-.02em}
.kpi.good{background:var(--good-bg);border-color:#A7F3D0!important}
.kpi.bad{background:var(--bad-bg);border-color:#FECACA!important}
.kpi.warn{background:var(--warn-bg);border-color:#FDE68A!important}
.listprice,.revbar,.t-pp,.qpay .card,.cside .crow.card{background:var(--tape);color:var(--tape-ink)}
.revbar{border-bottom:1px solid #FDE68A}

/* ============ 4. Düğmeler ============ */
.btn,button.btn,a.btn{min-height:40px;padding:0 14px;border:1px solid #D0D5DD;border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:500 14px var(--f-body);box-shadow:var(--sh-1);transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn:hover{background:var(--soft);border-color:#98A2B3}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.primary,.btn.dark{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.primary:hover,.btn.dark:hover{background:var(--brand-dark);border-color:var(--brand-dark);filter:none}
.btn.primary:disabled,.btn.dark:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.quiet{border-color:var(--rule);background:transparent;box-shadow:none;color:var(--ink2)}
.btn.quiet:hover{background:var(--soft);color:var(--ink)}
.btn.red{color:var(--bad);border-color:#FECACA;background:var(--card)}
.btn.red:hover{background:var(--bad-bg);border-color:#FCA5A5}
.btn.sm{min-height:32px;padding:0 10px;font-size:13px}
.btn.wa,.btn.wa2{background:#16A34A;border-color:#16A34A;color:#fff}
.btn.wa:hover,.btn.wa2:hover{background:#15803D;border-color:#15803D}

/* ============ 5. Form alanları ============ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{border:1px solid #D0D5DD;border-radius:var(--r-sm);background:var(--card);color:var(--ink);transition:border-color .16s ease,box-shadow .16s ease}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover,select:hover,textarea:hover{border-color:#98A2B3}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
input:disabled,select:disabled{background:var(--soft);color:var(--ink2)}
input::placeholder{color:#98A2B3}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
.searchbox input{height:52px;border:1px solid #D0D5DD!important;border-radius:var(--r-md);font-size:16px;font-weight:500;box-shadow:var(--sh-1)}
.searchbox input:focus{border-color:var(--focus)!important}
.fld,.filters label,.gform label{font-weight:500;color:var(--ink2)}
.fld input,.filters input,.filters select,.gform input,.gform select{border:1px solid #D0D5DD!important}
.fld input:focus,.filters input:focus,.filters select:focus,.gform input:focus,.gform select:focus{border-color:var(--focus)!important}
.msg.ok{color:var(--good)}.msg.err{color:var(--bad)}
.msg.err:not(:empty){background:var(--bad-bg);border-radius:var(--r-sm)}

/* ============ 6. Sekmeler ve etiketler ============ */
.tab{border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink2);font:500 13px var(--f-body);transition:background-color .16s,color .16s,border-color .16s}
.tab:hover{background:var(--soft);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip{border-color:var(--rule);background:var(--soft);color:var(--ink2)}
.tag.m,.tag.t,.tag.s,.tag.h,.tag.off{border-radius:999px}

/* ============ 7. Tablolar ============ */
table{border-collapse:collapse}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t,table.dt,.tw table{font-size:13.5px}
.t th,.tw th,table th{background:#F9FAFB;color:var(--ink2);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--rule)!important;padding:10px 12px}
.t td,.tw td,table td{padding:10px 12px;border-bottom:1px solid #EEF0F3;vertical-align:middle}
.t tbody tr:hover td,.tw tbody tr:hover td{background:#F9FAFB}
.t tr.tot td{background:#F9FAFB;border-top:1px solid var(--rule)!important;font-weight:600}
.t .neg,.neg{color:var(--bad);font-weight:600}.t .pos,.pos{color:var(--good)}
.t tr.on td{background:var(--warn-bg)}
tr.clk:hover td{background:#F9FAFB}tr.clk.on td{background:var(--info-bg)}
.detr>td{background:#F9FAFB}
table.dt{border:1px solid var(--rule);border-radius:var(--r-sm)}
.dt th{background:#F3F4F6}
.dt tr.dsip td{background:var(--info-bg)}
div.wrap table th:last-child,div.wrap table td:last-child{padding-right:16px}

/* ============ 8. Uyarılar ve bildirimler ============ */
.al{border:1px solid;border-radius:var(--r-sm)}
.al.bad{background:var(--bad-bg);border-color:#FECACA;color:#991B1B}
.al.warn{background:var(--warn-bg);border-color:#FDE68A;color:#92400E}
.al.ok{background:var(--good-bg);border-color:#A7F3D0;color:#065F46}
.toast{background:var(--ink);border-radius:var(--r-sm);box-shadow:var(--sh-2)}
.drop{border:1.5px dashed #D0D5DD;border-radius:var(--r-md);background:#F9FAFB}
.drop:hover{border-color:var(--ink2)}.drop.over{border-color:var(--focus);background:var(--info-bg)}

/* ============ 9. Sol menü (nav.um) ============ */
html .um{position:fixed;left:0;top:0;bottom:0;width:var(--um-w);z-index:80;display:flex;flex-direction:column;background:#fff;border:0;border-right:1px solid var(--rule);color:var(--ink);font:500 14px var(--f-body);transition:width .2s ease}
html .um-in{max-width:none;margin:0;padding:12px;gap:4px;display:flex;flex-direction:column;align-items:stretch;height:100%;position:static;min-height:0}
html .um-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;min-height:52px;border-bottom:1px solid var(--rule);margin-bottom:8px}
html .um-logo{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;font:700 15px/1 var(--f-head);letter-spacing:-.02em}
html .um-bt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
html .um-bt b{font:600 14px var(--f-head);letter-spacing:-.01em;white-space:nowrap}
html .um-bt small{font-size:11.5px;color:var(--ink2);white-space:nowrap}
html .um-col{margin-left:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--ink2);cursor:pointer;transition:background-color .16s}
html .um-col:hover{background:var(--soft);color:var(--ink)}
html .um-col svg{transition:transform .2s ease}
html .um-l{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:2px;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 0}
html .um-a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--ink2);text-decoration:none;white-space:nowrap;font-weight:500;position:relative;transition:background-color .16s ease,color .16s ease}
html .um-a:hover{background:var(--soft);color:var(--ink)}
html .um-a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
html .um-a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
html .um-ic{flex:none;width:18px;height:18px;display:block}
html .um-tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
html .um-b{margin-left:auto;display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--brand);color:#fff;font:600 11px/20px var(--f-body);text-align:center}
html .um-u{margin:0;margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 4px 2px;border-top:1px solid var(--rule);white-space:normal}
html .um-u .um-r{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;color:var(--ink2);line-height:1.3}
html .um-av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--ink);font:600 12px var(--f-body);border:1px solid var(--rule)}
html .um-ut{min-width:0;display:flex;flex-direction:column}
html .um-ut b{color:var(--ink);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .um-ut span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .um-x{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border:1px solid var(--rule);border-radius:9px;color:var(--ink2);text-decoration:none;font-weight:500;font-size:13px;transition:background-color .16s,color .16s,border-color .16s}
html .um-x:hover{background:var(--bad-bg);border-color:#FECACA;color:var(--bad)}
html .um-t{display:none}
html .um-mtitle{display:none}
html.um-on body{margin-left:var(--um-w);transition:margin-left .2s ease}
.um-on .topbtns a.btn,.um-on .btns a.btn,.um-on #talepBtn,.um-on #paramBtn,.um-on #whoT{display:none!important}

/* daraltılmış menü (masaüstü) */
html.um-c{--um-w:72px}
html.um-c .um-bt,html.um-c .um-tx,html.um-c .um-ut,html.um-c .um-xt{display:none}
html.um-c .um-brand{justify-content:center;padding-left:0;padding-right:0;flex-direction:column;gap:8px}
html.um-c .um-col{margin-left:0}
html.um-c .um-col svg{transform:rotate(180deg)}
html.um-c .um-a{justify-content:center;padding:10px}
html.um-c .um-b{position:absolute;top:2px;right:4px;min-width:16px;padding:0 4px;font-size:10px;line-height:16px}
html.um-c .um-u .um-r{justify-content:center}
html.um-c .um-x{padding:8px}

/* geniş içerik alanı: menüyle birlikte daha geniş kullan */
@media (min-width:1400px){div.wrap{max-width:1360px!important}}

/* ============ 10. Tablet ve mobil: üst çubuk + çekmece menü ============ */
@media (max-width:1023px){
  html.um-on body,html.um-c.um-on body{margin-left:0}
  html .um{position:sticky;top:0;bottom:auto;left:0;right:0;width:auto;height:56px;flex-direction:row;border-right:0;border-bottom:1px solid var(--rule);transition:none}
  html .um-in{flex-direction:row;align-items:center;padding:0 12px;gap:10px;height:56px}
  html .um-brand{border:0;margin:0;padding:0;min-height:0}
  html .um-bt small,html .um-col{display:none}
  html .um-mtitle{display:block;flex:1;min-width:0;font:600 15px var(--f-head);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  html .um-t{display:inline-flex;order:3;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:0;cursor:pointer}
  html .um-t svg{width:20px;height:20px}
  html .um-bt{display:none}
  /* çekmece */
  html .um-l,html .um-u{position:fixed;left:0;width:min(86vw,300px);background:#fff;transform:translateX(-102%);transition:transform .22s ease;visibility:hidden}
  html .um-l{top:56px;bottom:auto;height:auto;max-height:calc(100dvh - 56px - 132px);padding:12px;z-index:82;border-right:1px solid var(--rule);overflow-y:auto;display:flex}
  html .um-u{bottom:0;top:auto;z-index:82;padding:12px;border-right:1px solid var(--rule);margin:0;display:flex}
  html .um.open .um-l,html .um.open .um-u{transform:none;visibility:visible}
  html .um.open::before{content:"";position:fixed;inset:56px 0 0 0;background:rgba(16,24,40,.4);z-index:81}
  html .um-a{padding:12px 12px;font-size:15px}
  html .um-a.on::before{left:-12px}
  html .um-tx,html .um-xt,html.um-c .um-tx,html.um-c .um-xt{display:inline}
  html .um-ut,html.um-c .um-ut{display:flex}
  html .um-l,html .um-u{border-radius:0;box-shadow:none;border-top:0;border-bottom:0;border-left:0}
  html .um.open::after{content:"";position:fixed;left:0;top:56px;bottom:0;width:min(86vw,300px);background:#fff;border-right:1px solid var(--rule);z-index:81;box-shadow:0 0 24px rgba(16,24,40,.18)}
  html .um-l{max-height:calc(100dvh - 56px - 124px)}
  html .um-u{border-top:1px solid var(--rule)}
  html.um-c .um-a{justify-content:flex-start;padding:12px}
}
@media (max-width:480px){div.wrap{padding-left:12px!important;padding-right:12px!important}}

@media print{.um{display:none!important}html.um-on body{margin-left:0!important}}

/* ============ 11. Hareket ============ */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@keyframes ui-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.card,.tag,.kpi{animation:ui-in .22s ease both}}

/* ============ 12. Giriş ekranı (index.html) ============ */
html[data-pg="index"] body{background:radial-gradient(1200px 500px at 50% -10%,#FFFFFF 0,#F7F8FA 60%)}
html[data-pg="index"] main{width:min(420px,100%)}
html[data-pg="index"] .card{border:1px solid var(--rule)!important;border-radius:16px;box-shadow:0 8px 30px rgba(16,24,40,.08);overflow:hidden}
html[data-pg="index"] .logos{padding:22px 24px 18px;border-bottom:1px solid var(--rule);background:#fff}
html[data-pg="index"] form{padding:24px}
html[data-pg="index"] h1{font:700 22px/1.2 var(--f-head);letter-spacing:-.02em}
html[data-pg="index"] .fld input{height:46px;font:500 15px var(--f-body);border-radius:10px}
html[data-pg="index"] .btn{min-height:46px;line-height:44px;border-radius:10px;font:600 15px var(--f-body);background:var(--brand);border-color:var(--brand);box-shadow:var(--sh-1)}
html[data-pg="index"] .btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
html[data-pg="index"] .who{background:#F9FAFB}

/* ============ 13. Ağır siyah çerçevelerin yumuşatılması (sayfa CSS'lerinden otomatik derlendi) ============ */
.cart,
.cart2 .actcard,
.cart2 .cmain,
.cart2 .sumcard,
.cats,
.cattoggle,
.cpick,
.cpl,
.cr .dinp,
.cust,
.dclose,
.dinp,
.kark,
.list,
.phone,
.stepper,
.tform,
.tlist,
.tlistp,
.tuse,
.vb,
.vkart{border:1px solid var(--rule)!important;border-radius:var(--r-md)}
.bgrow .field input,
.calc .field input,
.fld input,
.mesg input,
.revbar .tnot input,
.searchbox input,
.subesel select,
.tbox textarea,
.tools input,
.tpf input,
.vkr input{border:1px solid #D0D5DD!important}
.det,
.listprice,
.qpay>div,
.revbar,
.t th,
.tblock,
.ver th,
th{border-bottom-color:var(--rule)!important;border-bottom-width:1px!important}
.qpay .cash{border-right-color:var(--rule)!important;border-right-width:1px!important}
.camp,
.listprice,
.qt,
.t tr.tot td,
.totals{border-top-color:var(--rule)!important;border-top-width:1px!important}
.dclose,.dinp,.cr .dinp,.stepper,.phone{border-radius:var(--r-sm)}
html[data-pg="index"] .btn{color:#fff}

/* ============ 14. Mobil: kullanıcı listesi kart düzeni ============ */
@media (max-width:720px){
  html[data-pg="yonetim-kullanicilar"] .list{overflow:visible}
  html[data-pg="yonetim-kullanicilar"] .list table,html[data-pg="yonetim-kullanicilar"] .list tbody{display:block;width:100%}
  html[data-pg="yonetim-kullanicilar"] .list thead{display:none}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k]{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px 14px;padding:14px 16px;border-bottom:1px solid var(--rule)}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td{display:block;padding:0;border:0;background:none}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td:nth-child(1){grid-column:1/-1}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td:nth-child(5),html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td:nth-child(6){display:none}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td:last-child{grid-column:1/-1;padding-top:4px}
  html[data-pg="yonetim-kullanicilar"] .list tr[data-k] td:last-child .act{display:flex;flex-wrap:wrap;gap:8px}
  html[data-pg="yonetim-kullanicilar"] .list tr.edit{display:block;border-bottom:1px solid var(--rule);background:#F9FAFB}
  html[data-pg="yonetim-kullanicilar"] .list tr.edit td{display:block;padding:12px 16px}
}

/* ============ 15. Mobil: gider kayıtları kart düzeni ============ */
@media (max-width:720px){
  html[data-pg="giderler"] .tw:has(td.acts){overflow:visible}
  html[data-pg="giderler"] table:has(td.acts),html[data-pg="giderler"] table:has(td.acts) tbody{display:block;width:100%}
  html[data-pg="giderler"] table:has(td.acts) thead{display:none}
  html[data-pg="giderler"] table:has(td.acts) tr:not(.tot){display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
  html[data-pg="giderler"] table:has(td.acts) tr:not(.tot) td{display:block;grid-column:1/-1;padding:0;border:0;background:none;text-align:left;white-space:normal;min-width:0}
  html[data-pg="giderler"] table:has(td.acts) tr:not(.tot) td:first-child{grid-column:1;grid-row:1;color:var(--ink2);font-size:13px}
  html[data-pg="giderler"] table:has(td.acts) tr:not(.tot) td:has(>b){grid-column:2;grid-row:1;text-align:right;font-size:16px}
  html[data-pg="giderler"] table:has(td.acts) tr:not(.tot) td.acts{padding-top:6px}
  html[data-pg="giderler"] table:has(td.acts) tr.tot{display:flex;justify-content:space-between;padding:12px 16px;background:#F9FAFB}
  html[data-pg="giderler"] table:has(td.acts) tr.tot td{border:0;padding:0}
  html[data-pg="giderler"] table:has(td.acts) tr.tot td:empty{display:none}
}
@media (max-width:720px){html[data-pg="giderler"] table:has(td.acts) tr:not(.tot) td.wrap{margin:0;max-width:none;color:var(--ink2);font-size:13.5px}}
html .um-b[hidden]{display:none}

/* Açılır menü grupları (V189) */
html .um-g{display:flex;flex-direction:column;gap:2px;margin:2px 0}
html .um-gi{display:flex;flex-direction:column;gap:2px}
html .um-g[data-open="false"] .um-gi{display:none}
html .um-gh{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--ink2);font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:12px 10px 7px;cursor:pointer;text-align:left}
html .um-gh:hover{color:var(--ink)}
html .um-gh svg{width:12px;height:12px;flex:none;transition:transform .15s}
html .um-g[data-open="false"] .um-gh svg{transform:rotate(-90deg)}
html .um-gb{margin-left:auto;display:inline-block;min-width:18px;padding:0 6px;border-radius:10px;background:var(--brand);color:#fff;font:600 10.5px/18px var(--f-body);text-align:center;letter-spacing:0}
html .um-gb[hidden],html .um-g[data-open="true"] .um-gb{display:none}
html .um-gh:focus-visible{outline:3px solid var(--focus,#E30613);outline-offset:2px}
html.um-c .um-gh{display:none}
html.um-c .um-g[data-open="false"] .um-gi{display:flex}