/* ============================================================
   EmlakDiyo · Kullanım Kılavuzu
   Tasarım belirteçleri (token) — renkler ürün ekranlarından örneklendi.
   ============================================================ */
:root{
  --mor:#6358D2;  --mor-koyu:#4C42B0;  --mor-sis:#EFEDFC;  --mor-cizgi:#D9D4F5;
  --turuncu:#FF9718;  --turuncu-sis:#FFF2E1;
  --deniz:#12414F;  --deniz-sis:#E4EEF1;
  --yesil:#1E9E6A;  --yesil-sis:#E4F5EE;
  --kirmizi:#D9455F;  --kirmizi-sis:#FCE9EC;

  --zemin:#F4F3F9;
  --yuzey:#FFFFFF;
  --yuzey-2:#FAF9FD;
  --cizgi:#E7E4F1;
  --cizgi-yumusak:#F0EEF7;
  --metin:#16162E;
  --metin-2:#4B4B66;
  --metin-3:#8785A0;

  --golge-1:0 1px 2px rgba(22,22,46,.05), 0 1px 3px rgba(22,22,46,.04);
  --golge-2:0 2px 6px rgba(22,22,46,.06), 0 8px 24px rgba(22,22,46,.06);
  --golge-3:0 10px 30px rgba(22,22,46,.10), 0 30px 60px rgba(22,22,46,.10);

  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;
  --ust-h:64px;
  --yan-w:272px;
  --bilgi-w:340px;
  --gecis:180ms cubic-bezier(.4,0,.2,1);
}
html[data-tema="koyu"]{
  --mor:#8F84F0;  --mor-koyu:#A79EF7;  --mor-sis:#252048;  --mor-cizgi:#3A3270;
  --turuncu:#FFA940;  --turuncu-sis:#3A2A14;
  --deniz:#7FB6C6;  --deniz-sis:#16303A;
  --yesil:#4FC898;  --yesil-sis:#12332A;
  --kirmizi:#F2788C;  --kirmizi-sis:#3A1D24;

  --zemin:#0E0E1A;
  --yuzey:#17172B;
  --yuzey-2:#1D1D34;
  --cizgi:#2A2A45;
  --cizgi-yumusak:#22223A;
  --metin:#F1F0F7;
  --metin-2:#BDBBD0;
  --metin-3:#8785A0;

  --golge-1:0 1px 2px rgba(0,0,0,.4);
  --golge-2:0 2px 8px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --golge-3:0 12px 34px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--zemin);
  color:var(--metin);
  -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.55;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--mor-sis);color:var(--mor-koyu)}

/* ---------------- ÜST BAR ---------------- */
.ustbar{
  height:var(--ust-h);
  display:flex;align-items:center;gap:20px;
  padding:0 18px;
  background:var(--yuzey);
  border-bottom:1px solid var(--cizgi);
  position:relative;z-index:40;
}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
.marka-sembol{width:30px;height:30px;border-radius:9px}
.marka-yazi{display:flex;flex-direction:column;line-height:1.15}
.marka-yazi b{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.marka-yazi i{font-style:normal;font-size:11px;color:var(--metin-3);letter-spacing:.02em}

.urun-secim{
  display:flex;gap:2px;padding:3px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:11px;
}
.urun-secim button{
  padding:6px 15px;border-radius:8px;font-size:13px;font-weight:550;
  color:var(--metin-2);transition:var(--gecis);white-space:nowrap;
}
.urun-secim button:hover{color:var(--metin)}
.urun-secim button.secili{background:var(--yuzey);color:var(--mor);box-shadow:var(--golge-1);font-weight:600}

.ustbar-sag{margin-left:auto;display:flex;align-items:center;gap:8px}
.ust-dugme{
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--cizgi);background:var(--yuzey);
  font-size:13px;font-weight:500;color:var(--metin-2);
  transition:var(--gecis);
}
.ust-dugme:hover{background:var(--yuzey-2);color:var(--metin);border-color:var(--mor-cizgi)}
.ust-dugme.ikon{padding:0;width:36px;justify-content:center}
.ust-dugme kbd{
  font:inherit;font-size:11px;padding:1px 5px;border-radius:5px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-3);
}
.ust-dugme .gunes{display:none}
html[data-tema="koyu"] .ust-dugme .gunes{display:block}
html[data-tema="koyu"] .ust-dugme .ay{display:none}

/* ---------------- GÖVDE ---------------- */
.govde{
  height:calc(100vh - var(--ust-h));
  display:grid;
  grid-template-columns:var(--yan-w) minmax(0,1fr) var(--bilgi-w);
}

/* ---------------- YAN MENÜ ---------------- */
.yan-menu{
  min-height:0;
  border-right:1px solid var(--cizgi);
  background:var(--yuzey);
  overflow-y:auto;padding:16px 12px 28px;
}
.ilerleme-kutu{
  background:linear-gradient(150deg,var(--mor-sis),transparent 70%);
  border:1px solid var(--mor-cizgi);border-radius:var(--r-m);
  padding:12px 13px;margin-bottom:18px;position:relative;
}
.ilerleme-ust{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ilerleme-etiket{font-size:11.5px;font-weight:600;color:var(--metin-2);letter-spacing:.02em}
.ilerleme-yuzde{font-size:15px;font-weight:700;color:var(--mor);font-variant-numeric:tabular-nums}
.ilerleme-cubuk{height:5px;border-radius:99px;background:var(--yuzey);overflow:hidden;border:1px solid var(--mor-cizgi)}
.ilerleme-cubuk i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mor),var(--mor-koyu));transition:width 400ms cubic-bezier(.4,0,.2,1)}
.ilerleme-sifirla{
  margin-top:9px;font-size:11px;color:var(--metin-3);text-decoration:underline;
  text-underline-offset:2px;
}
.ilerleme-sifirla:hover{color:var(--kirmizi)}

.bolum{margin-bottom:18px}
.bolum-baslik{
  display:flex;align-items:center;gap:8px;
  padding:0 8px 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);
}
.bolum-baslik .sayi{
  margin-left:auto;font-size:10px;letter-spacing:0;
  color:var(--metin-3);font-weight:600;
}
.adim-link{
  display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border-radius:9px;
  font-size:13px;line-height:1.4;color:var(--metin-2);
  transition:background var(--gecis),color var(--gecis);
}
.adim-link:hover{background:var(--yuzey-2);color:var(--metin)}
.adim-link.aktif{background:var(--mor-sis);color:var(--mor-koyu);font-weight:600}
html[data-tema="koyu"] .adim-link.aktif{color:var(--mor)}
.adim-link .tik{
  flex-shrink:0;width:17px;height:17px;border-radius:50%;margin-top:1px;
  border:1.6px solid var(--cizgi);display:grid;place-items:center;
  transition:var(--gecis);
}
.adim-link .tik svg{width:10px;height:10px;stroke-width:2.8;opacity:0;color:#fff}
.adim-link.bitti .tik{background:var(--yesil);border-color:var(--yesil)}
.adim-link.bitti .tik svg{opacity:1}
.adim-link.bitti span{color:var(--metin-3)}

/* ---------------- SAHNE ---------------- */
.sahne-alani{
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  background:var(--zemin);
  background-image:radial-gradient(circle at 1px 1px, var(--cizgi) 1px, transparent 0);
  background-size:22px 22px;
}
.sahne-ust{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px 0;
}
.ekmek-kirintisi{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--metin-3);min-width:0;
}
.ekmek-kirintisi b{font-weight:600;color:var(--metin-2)}
.ekmek-kirintisi .ayrac{opacity:.5}
.ipucu-dugme{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  height:32px;padding:0 12px;border-radius:99px;
  background:var(--turuncu-sis);color:#9A5A00;
  border:1px solid #FFD9A6;
  font-size:12.5px;font-weight:600;transition:var(--gecis);
}
html[data-tema="koyu"] .ipucu-dugme{color:var(--turuncu);border-color:#5A421C}
.ipucu-dugme:hover{filter:brightness(.97)}
.ipucu-dugme svg{width:15px;height:15px}

.sahne{
  flex:1;min-height:0;
  display:grid;place-items:center;
  padding:18px 24px;
}
.cerceve{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r-l);
  box-shadow:var(--golge-3);
  overflow:hidden;
  max-height:100%;min-height:0;
  display:flex;flex-direction:column;
  transition:max-width 300ms cubic-bezier(.4,0,.2,1), border-radius var(--gecis);
}
/* tarayıcı çerçevesi */
.sahne[data-cerceve="tarayici"] .cerceve{width:100%;max-width:1180px}
.tarayici-bar{
  height:36px;flex-shrink:0;
  display:flex;align-items:center;gap:7px;padding:0 14px;
  background:var(--yuzey-2);border-bottom:1px solid var(--cizgi);
}
.tarayici-bar .nokta{width:9px;height:9px;border-radius:50%;background:var(--cizgi)}
.tarayici-bar .nokta:nth-child(1){background:#FF7A6B}
.tarayici-bar .nokta:nth-child(2){background:#FFC24B}
.tarayici-bar .nokta:nth-child(3){background:#5BD08A}
.tarayici-bar .adres{
  margin:0 auto;padding:3px 16px;border-radius:99px;
  background:var(--yuzey);border:1px solid var(--cizgi);
  font-size:11.5px;color:var(--metin-3);
}
/* telefon çerçevesi */
.sahne[data-cerceve="telefon"] .cerceve{
  width:auto;max-width:none;height:100%;border-radius:38px;padding:9px;
  background:#0D0D18;border-color:#2A2A3D;
}
.sahne[data-cerceve="telefon"] .cerceve{align-items:center}
.sahne[data-cerceve="telefon"] .ekran{overflow:hidden;width:auto;flex:1;min-height:0}
.sahne[data-cerceve="telefon"] .ekran-ic{
  height:100%;width:auto;aspect-ratio:var(--oran, 760 / 1651);
}
.sahne[data-cerceve="telefon"] .ekran-gorsel{width:100%;height:100%;object-fit:fill}
.sahne[data-cerceve="telefon"] .tarayici-bar{display:none}
.sahne[data-cerceve="telefon"] .ekran{border-radius:30px;overflow:hidden}
.telefon-cizgi{display:none}
.sahne[data-cerceve="telefon"] .telefon-cizgi{
  display:block;height:4px;width:34%;margin:7px auto 2px;
  border-radius:99px;background:#3A3A4E;
}

.ekran{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--yuzey)}
.ekran-ic{position:relative;display:block;width:100%}
.ekran::-webkit-scrollbar{width:9px}
.ekran::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:99px;border:2px solid var(--yuzey)}
.ekran-gorsel{display:block;width:100%;height:auto}
.hotspot-katman{position:absolute;inset:0;pointer-events:none}
.hotspot-katman > *{pointer-events:auto}

/* --- HOTSPOT --- */
.hotspot{
  position:absolute;
  border-radius:10px;
  border:2px solid var(--mor);
  background:rgba(99,88,210,.10);
  box-shadow:0 0 0 4px rgba(99,88,210,.14), 0 6px 18px rgba(99,88,210,.22);
  cursor:pointer;
  transition:background var(--gecis),transform var(--gecis);
  animation:hs-nefes 2.4s ease-in-out infinite;
}
.hotspot:hover{background:rgba(99,88,210,.2);transform:scale(1.02)}
.sahne[data-cerceve="telefon"] .hotspot{border-color:var(--turuncu);background:rgba(255,151,24,.12);box-shadow:0 0 0 4px rgba(255,151,24,.16),0 6px 18px rgba(255,151,24,.26)}
@keyframes hs-nefes{
  0%,100%{box-shadow:0 0 0 4px rgba(99,88,210,.14), 0 6px 18px rgba(99,88,210,.20)}
  50%    {box-shadow:0 0 0 9px rgba(99,88,210,.05), 0 6px 18px rgba(99,88,210,.14)}
}
.hotspot .rozet{
  position:absolute;top:-11px;left:-11px;
  width:24px;height:24px;border-radius:50%;
  background:var(--mor);color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:700;
  box-shadow:0 2px 8px rgba(99,88,210,.5);
  border:2px solid var(--yuzey);
}
.sahne[data-cerceve="telefon"] .hotspot .rozet{background:var(--turuncu);box-shadow:0 2px 8px rgba(255,151,24,.5)}
.hotspot .etiket{
  position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  white-space:nowrap;padding:5px 11px;border-radius:8px;
  background:var(--metin);color:var(--yuzey);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  opacity:0;pointer-events:none;transition:opacity var(--gecis);
  box-shadow:var(--golge-2);
}
.hotspot .etiket::before{
  content:"";position:absolute;left:50%;top:-4px;transform:translateX(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--metin);border-radius:1px;
}
.hotspot:hover .etiket,.hotspot.goster .etiket{opacity:1}
.hotspot.parla{animation:hs-parla .7s ease-in-out 3}
@keyframes hs-parla{
  0%,100%{transform:scale(1);background:rgba(99,88,210,.10)}
  50%{transform:scale(1.06);background:rgba(99,88,210,.34)}
}

/* --- ADIM BARI --- */
.adim-bar{
  flex-shrink:0;
  display:flex;align-items:center;gap:18px;
  padding:13px 24px 17px;
  border-top:1px solid var(--cizgi);
  background:var(--yuzey);
}
.adim-metin{display:flex;gap:12px;align-items:flex-start;min-width:0}
.adim-rozet{
  flex-shrink:0;min-width:30px;height:30px;padding:0 8px;border-radius:9px;
  background:var(--mor-sis);color:var(--mor);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
  border:1px solid var(--mor-cizgi);
}
.adim-baslik{font-size:15.5px;font-weight:650;letter-spacing:-.2px;line-height:1.3}
.adim-eylem{font-size:13px;color:var(--metin-2);margin-top:2px}
.adim-eylem b{color:var(--mor);font-weight:650}
.adim-kontrol{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.gez{
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--cizgi);background:var(--yuzey);
  display:grid;place-items:center;color:var(--metin-2);transition:var(--gecis);
}
.gez:hover:not(:disabled){background:var(--mor);border-color:var(--mor);color:#fff}
.gez:disabled{opacity:.35;cursor:default}
.gez.ileri{background:var(--mor);border-color:var(--mor);color:#fff}
.gez.ileri:hover:not(:disabled){background:var(--mor-koyu)}
.adim-sayac{font-size:12px;color:var(--metin-3);font-variant-numeric:tabular-nums;min-width:46px;text-align:center}

/* ---------------- BİLGİ PANELİ ---------------- */
.bilgi-panel{
  min-height:0;
  border-left:1px solid var(--cizgi);
  background:var(--yuzey);
  overflow-y:auto;padding:20px 18px 40px;
}
.bilgi-etiket{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);margin-bottom:9px;
}
.bilgi-baslik{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.25;margin-bottom:7px}
.bilgi-ozet{font-size:13.5px;color:var(--metin-2);line-height:1.6}
.bilgi-ayrac{height:1px;background:var(--cizgi-yumusak);margin:18px 0}

.ozellik-liste li{
  display:flex;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--cizgi-yumusak);
  font-size:13.2px;line-height:1.5;color:var(--metin-2);
}
.ozellik-liste li:last-child{border-bottom:0}
.ozellik-liste li::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--mor);margin-top:7px;
}
.ozellik-liste b{color:var(--metin);font-weight:600}

/* numaralı işaret listesi */
.isaret-liste li{align-items:flex-start;cursor:pointer;border-radius:9px;padding:9px 8px;margin:0 -8px;transition:background var(--gecis)}
.isaret-liste li:hover{background:var(--yuzey-2)}
.isaret-liste li::before{margin-top:8px}
.isaret-liste b{display:block;color:var(--metin);font-weight:650;margin-bottom:2px;letter-spacing:-.1px}
.isaret-liste span{display:block;color:var(--metin-2)}
.isaret-liste li.sec{background:var(--mor-sis)!important}

.not{
  display:flex;gap:10px;padding:11px 12px;border-radius:var(--r-m);
  font-size:12.8px;line-height:1.55;margin-top:12px;
}
.not svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.not.ipucu{background:var(--yesil-sis);color:#0F6B48;border:1px solid rgba(30,158,106,.2)}
.not.dikkat{background:var(--kirmizi-sis);color:#9B2138;border:1px solid rgba(217,69,95,.2)}
.not.bilgi{background:var(--mor-sis);color:var(--mor-koyu);border:1px solid var(--mor-cizgi)}
html[data-tema="koyu"] .not.ipucu{color:var(--yesil)}
html[data-tema="koyu"] .not.dikkat{color:var(--kirmizi)}
html[data-tema="koyu"] .not.bilgi{color:var(--mor)}
.not b{font-weight:650}

.rol-etiketler{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rol-etiket{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-2);
}
.rol-etiket.mor{background:var(--mor-sis);border-color:var(--mor-cizgi);color:var(--mor-koyu)}
html[data-tema="koyu"] .rol-etiket.mor{color:var(--mor)}

.bitir-dugme{
  width:100%;margin-top:18px;height:42px;border-radius:var(--r-m);
  background:var(--mor);color:#fff;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:var(--gecis);box-shadow:0 4px 14px rgba(99,88,210,.28);
}
.bitir-dugme:hover{background:var(--mor-koyu)}
.bitir-dugme.bitti{background:var(--yesil-sis);color:#0F6B48;box-shadow:none;border:1px solid rgba(30,158,106,.25)}
html[data-tema="koyu"] .bitir-dugme.bitti{color:var(--yesil)}

/* ---------------- ARAMA ---------------- */
.arama-katman{
  position:fixed;inset:0;z-index:80;
  background:rgba(14,14,26,.42);backdrop-filter:blur(3px);
  display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.arama-kutu{
  width:min(620px,92vw);background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r-l);
  box-shadow:var(--golge-3);overflow:hidden;
}
.arama-giris{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--cizgi)}
.arama-giris svg{color:var(--metin-3)}
.arama-giris input{
  flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--metin);outline:none;
}
.arama-giris input::placeholder{color:var(--metin-3)}
.arama-giris button{
  font-size:11px;padding:3px 8px;border-radius:6px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-3);
}
.arama-sonuc{max-height:min(420px,50vh);overflow-y:auto;padding:8px}
.sonuc-satir{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:10px 12px;border-radius:10px;transition:background var(--gecis);
}
.sonuc-satir:hover,.sonuc-satir.imlec{background:var(--mor-sis)}
.sonuc-satir .yol{font-size:11px;color:var(--metin-3);margin-bottom:2px}
.sonuc-satir .bas{font-size:13.5px;font-weight:600;color:var(--metin)}
.sonuc-satir .urun{
  margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:99px;background:var(--yuzey-2);
  border:1px solid var(--cizgi);color:var(--metin-3);
}
.arama-bos{padding:26px;text-align:center;color:var(--metin-3);font-size:13.5px}

/* ---------------- SUNUM MODU ---------------- */
body.sunum .yan-menu,
body.sunum .bilgi-panel,
body.sunum .ustbar{display:none}
body.sunum .govde{grid-template-columns:1fr;height:100vh}
body.sunum .sahne{padding:26px 40px 10px}
body.sunum .sahne[data-cerceve="tarayici"] .cerceve{max-width:1480px}
body.sunum .adim-bar{padding:16px 40px 22px}
body.sunum .adim-baslik{font-size:20px}
body.sunum .adim-eylem{font-size:14.5px}
body.sunum .sahne-ust{padding:16px 40px 0}
.sunum-cikis{
  position:fixed;top:16px;right:18px;z-index:70;
  height:32px;padding:0 13px;border-radius:99px;
  background:var(--yuzey);border:1px solid var(--cizgi);
  font-size:12px;font-weight:600;color:var(--metin-2);
  box-shadow:var(--golge-2);
}
.sunum-cikis:hover{color:var(--metin)}

/* ---------------- GEÇİŞ ANİMASYONU ---------------- */
.ekran-gorsel,.hotspot-katman{animation:sahne-gir 260ms cubic-bezier(.2,.7,.3,1)}
@keyframes sahne-gir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bilgi-icerik{animation:sahne-gir 260ms cubic-bezier(.2,.7,.3,1)}

/* ---------------- DAR EKRAN ---------------- */
@media (max-width:1280px){
  :root{--bilgi-w:300px;--yan-w:238px}
}
@media (max-width:1080px){
  body{overflow:auto}
  .govde{grid-template-columns:1fr;height:auto}
  .yan-menu{border-right:0;border-bottom:1px solid var(--cizgi);max-height:none;overflow:visible}
  .bilgi-panel{border-left:0;border-top:1px solid var(--cizgi)}
  .sahne{padding:16px}
  .ekran{max-height:70vh}
  .ustbar{flex-wrap:wrap;height:auto;padding:10px 14px;gap:12px}
  .ust-dugme span,.ust-dugme kbd{display:none}
  .ust-dugme{width:36px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}