/* ==========================================================================
   Write & Hear — FULL UI CSS PACK (Light & Dark, Smooth, Animated)
   (fieldset border off, player gated, animated footer)
   ========================================================================== */



html[data-theme="light"]{
  --surface:#FFFFFF;
  --text:#0B1220;
  --border:#E5E7EB;
  --accent:#1F6FEB;        
  --btn-primary-fore:#FFFFFF;
}
html[data-theme="dark"]{
  --surface:#111827;
  --text:#E5E7EB;
  --border:#1F2937;
  --accent:#2563EB;
  --btn-primary-fore:#FFFFFF;
}

:root{
  --bg:#0f1115; --bg-soft:#0b0d12; --card:#151823; --surface:#1a1f2f;
  --text:#e8ecf1; --text-weak:#bcc7d6; --muted:#9aa4b2; --border:#23283a;
  --brand:#6ea8ff; --accent:#4f8cff; --accent-2:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --shadow:0 18px 50px rgba(0,0,0,.35);

  --radius-xs:8px; --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-xl:20px;
  --gap-1:6px; --gap-2:10px; --gap-3:14px; --gap-4:18px; --gap-5:24px;

  --font:16px/1.55 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --focus:0 0 0 3px rgba(79,140,255,.35);

  --grad-a:#4f8cff; --grad-b:#22d3ee; --grad-c:#22c55e;

  --range-track:#273049; --range-fill:linear-gradient(90deg,var(--grad-a),var(--grad-b)); --range-thumb:#e8ecf1;

  --chip-bg:#0f1729; --chip-bd:#26314e; --glass:rgba(255,255,255,.035);
}

html[data-theme="light"]{
  --bg:#f6f8fc; --bg-soft:#eef2f7; --card:#fff; --surface:#fff;
  --text:#0d1220; --text-weak:#4b5563; --muted:#5c6a7a; --border:#e6eaf2;
  --brand:#2c70ff; --accent:#1e6eff; --accent-2:#16a34a; --shadow:0 12px 32px rgba(28,45,90,.12);
  --range-track:#e8edf6; --range-thumb:#0d1220; --chip-bg:#f2f5fb; --chip-bd:#e2e8f4; --glass:rgba(255,255,255,.6);
}

/* ===== 02) Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.08), transparent 60%),
    radial-gradient(800px 400px at 90% 10%, rgba(34,211,238,.08), transparent 60%),
    var(--bg);
  color:var(--text); font:var(--font); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* Focus */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus);
  border-color:color-mix(in srgb, var(--accent) 60%, var(--border));
}

/* ===== 03) Layout ===== */
.page-tts{max-width:1100px; margin:28px auto 40px; padding:0 16px}
.hero{display:grid; gap:var(--gap-2); margin:8px 0 18px; align-items:start}
.hero__title{margin:0; font-size:clamp(26px,3.4vw,40px); letter-spacing:.2px}
.hero__subtitle{margin:0; color:var(--muted); font-size:14px}

/* Gradient title */
.grad-txt{
  background:linear-gradient(92deg,var(--grad-a),var(--grad-b),var(--grad-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.12)); animation:hueShift 14s linear infinite;
}

/* ===== 04) Card ===== */
.card{
  background:color-mix(in srgb, var(--card) 94%, transparent);
  border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow); padding:clamp(16px,2.2vw,22px);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(600px 160px at -10% -10%, rgba(79,140,255,.07), transparent 60%),
    radial-gradient(600px 160px at 110% -10%, rgba(34,211,238,.07), transparent 60%);
}

/* ===== 05) Buttons ===== */
.btn{
  --btn-bg:var(--surface); --btn-bd:var(--border); --btn-fg:var(--text);
  display:inline-flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  user-select:none;
}
.btn svg{width:18px; height:18px; flex:0 0 auto}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  --btn-bg:linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, transparent), var(--accent));
  --btn-bd:transparent; --btn-fg:#fff; box-shadow:0 10px 24px rgba(79,140,255,.35)
}
.btn-primary:hover{filter:brightness(.98)}
.btn-secondary{--btn-bg:color-mix(in srgb, var(--chip-bg) 85%, transparent); --btn-bd:var(--chip-bd)}
.btn-ghost{--btn-bg:transparent; --btn-bd:var(--border); --btn-fg:var(--text-weak)}
.btn-icon{padding:9px; width:38px; height:38px; justify-content:center}
.btn[disabled]{opacity:.6; cursor:not-allowed}
/* Ripple (JS ekliyor) */
.ripple{position:absolute; border-radius:50%; transform:scale(0); background:color-mix(in srgb, var(--brand) 18%, transparent); animation:ripple .6s ease-out forwards; pointer-events:none; mix-blend-mode:screen}

/* ===== 06) Inputs ===== */
.label{display:inline-block; margin-bottom:6px; color:var(--muted); font-size:13px}
.textarea{
  width:100%; border:1px solid var(--border); background:var(--bg-soft); color:var(--text);
  border-radius:var(--radius-lg); padding:14px; transition:border-color .2s, background .2s, box-shadow .2s; resize:vertical
}
.textarea--xl{min-height:220px}
.textarea::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
.textarea:hover{background:color-mix(in srgb, var(--bg-soft) 90%, #000 0%)}
.textarea:focus{background:color-mix(in srgb, var(--bg-soft) 100%, transparent)}

.select, select{
  appearance:none; width:100%; border:1px solid var(--border);
  background:var(--bg-soft) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239aa4b2' d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 12px center/12px;
  color:var(--text); padding:11px 36px 11px 12px; border-radius:12px; transition:border-color .2s, background .2s
}
select:focus,.select:focus{background-color:color-mix(in srgb, var(--bg-soft) 98%, transparent)}

/* === Fieldset reset: İSTENMEYEN kutu/çerçeve KALKAR === */
fieldset{border:0; margin:0; padding:0; min-inline-size:auto}
.controls{
  background:transparent; border:0; box-shadow:none;
  display:grid; gap:var(--gap-3); grid-template-columns:repeat(12,1fr);
  margin:var(--gap-4) 0 var(--gap-2)
}
.control{grid-column:span 12}
@media (min-width:760px){
  .control:first-child{grid-column:span 6}
  .control.slider{grid-column:span 3}
}

/* Range */
.slider__wrap{position:relative; padding:10px 0 22px}
input[type="range"]{appearance:none; width:100%; height:28px; background:transparent; margin:0; background-image:var(--range-fill); background-size:0% 8px; background-repeat:no-repeat; background-position:left center}
input[type="range"]::-webkit-slider-runnable-track{height:8px; border-radius:999px; background:var(--range-track); border:1px solid rgba(255,255,255,.06)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--range-thumb); border:2px solid color-mix(in srgb, var(--accent) 75%, transparent); margin-top:-5px; box-shadow:0 4px 16px rgba(0,0,0,.25), 0 0 0 6px rgba(79,140,255,.12); transition:transform .08s}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.04)}
input[type="range"]::-moz-range-track{height:8px; border-radius:999px; background:var(--range-track); border:1px solid rgba(0,0,0,.15)}
input[type="range"]::-moz-range-thumb{width:18px; height:18px; border:2px solid color-mix(in srgb, var(--accent) 75%, transparent); border-radius:50%; background:var(--range-thumb); box-shadow:0 4px 16px rgba(0,0,0,.25), 0 0 0 6px rgba(79,140,255,.12)}

/* Bubbles */
.bubble{
  position:absolute; top:-4px; translate:-50% -100%;
  background:var(--card); color:var(--text); padding:4px 7px; border-radius:8px; font-size:12px;
  border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none
}
.bubble::after{content:""; position:absolute; left:50%; bottom:-5px; translate:-50% 0; border:6px solid transparent; border-top-color:var(--card)}

/* ===== 07) Composer / Counters / Progress ===== */
.composer__bar{display:flex; gap:var(--gap-2); align-items:center; justify-content:space-between; margin-bottom:10px}
.composer__tools{display:flex; gap:8px; align-items:center}
.composer__count{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px}
.dot{opacity:.6}

.char-progress{position:relative; height:8px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--range-track) 70%, transparent); border:1px solid var(--border); margin-top:10px}
.char-progress__bar{position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); box-shadow:inset 0 -1px 0 rgba(255,255,255,.15); transition:width .25s ease}

.stats{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:8px; color:var(--muted); font-size:13px}

/* ===== 08) Preset Chips ===== */
.presets{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--chip-bg); color:var(--text-weak); border:1px solid var(--chip-bd);
  cursor:pointer; font-size:13px; transition:transform .08s, background .2s, color .2s, border-color .2s
}
.chip:hover{transform:translateY(-1px); color:var(--text); border-color:color-mix(in srgb, var(--accent) 50%, var(--chip-bd))}
.chip:active{transform:translateY(0)}
.chip[data-preset="news"]::before{content:"📰"; font-size:14px}
.chip[data-preset="narration"]::before{content:"🎙️"; font-size:14px}
.chip[data-preset="audiobook"]::before{content:"📚"; font-size:14px}

/* ===== 09) Dropzone ===== */
.dropzone{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:color-mix(in srgb, var(--card) 86%, transparent); border:1px dashed var(--border);
  border-radius:var(--radius-lg); padding:10px 12px; margin-bottom:10px
}
.dropzone__hint{color:var(--muted); font-size:13px}
.dropzone.is-drag{border-color:color-mix(in srgb, var(--accent) 70%, var(--border)); background:color-mix(in srgb, var(--card) 92%, transparent)}

/* ===== 10) Actions & Audio ===== */
.actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.tiny{color:var(--muted); font-size:12px; margin-top:8px}

/* === Player gating: Dinle'ye kadar GİZLİ === */
.player, audio#player{width:100%; margin-top:12px; border-radius:12px; overflow:hidden; background:var(--bg-soft)}
.player, audio#player{display:none !important}
.player.is-visible, audio#player.is-visible{display:block !important}

/* ===== 11) Utilities ===== */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px
}
kbd{
  background:color-mix(in srgb, var(--card) 80%, transparent); border:1px solid var(--border); border-bottom-width:2px;
  padding:1px 6px; border-radius:6px; font:12px/1.6 var(--mono); color:var(--text)
}

/* ===== 12) Animations & Motion ===== */
@keyframes ripple{to{transform:scale(3.2); opacity:0}}
@keyframes hueShift{0%{filter:hue-rotate(0deg) drop-shadow(0 1px 0 rgba(0,0,0,.12))}100%{filter:hue-rotate(360deg) drop-shadow(0 1px 0 rgba(0,0,0,.12))}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ===== 13) Scrollbar ===== */
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--accent) 45%, var(--border)) transparent}
*::-webkit-scrollbar{height:10px; width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 40%, transparent));
  border-radius:10px; border:2px solid transparent; background-clip:padding-box
}

/* ===== Header (opsiyonel) ===== */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--border); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)
}
.brand{font-weight:800; letter-spacing:.2px}
.brand em{color:var(--brand); font-style:normal}
.header-controls{display:flex; gap:10px; align-items:center}
.header-controls select,.header-controls button{border:1px solid var(--border); background:var(--card); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}

/* ===== Footer (animated, smooth) ===== */
.site-footer{
  --glow: radial-gradient(220px 24px at 50% -6px, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
  position:relative; margin-top:48px; padding:26px 16px 30px;
  color:var(--text-weak);
  background:
    radial-gradient(1200px 320px at 50% 0%, rgba(79,140,255,.06), transparent 60%),
    var(--bg);
  border-top:1px solid var(--border);
  overflow:hidden; text-align:center;
}
.site-footer::before{
  /* animated shimmer line */
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--grad-a), var(--grad-b), var(--grad-c), transparent);
  opacity:.65; animation:footerLine 8s linear infinite;
}
.site-footer::after{
  /* soft glow under border */
  content:""; position:absolute; left:0; right:0; top:0; height:28px; background:var(--glow); pointer-events:none
}
.site-footer p{margin:6px 0 0; font-size:13px}
.footer-nav{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0 0 6px}
.footer-nav a{color:var(--muted); font-size:13px}
.footer-nav a:hover{color:var(--text)}

@keyframes footerLine{
  0%{transform:translateX(-60%)}
  100%{transform:translateX(60%)}
}

/* ===== Legacy compatibility ===== */
.container{max-width:1100px; margin:36px auto; padding:0 16px}
h1{margin:0 0 14px; font-size:28px} /* overridden by .hero__title */

@media (max-width: 560px){
  .composer__bar{flex-direction: column; align-items: stretch; gap: 8px;}
  .presets{order: 2;}
  .composer__tools{order: 1; align-self: flex-end;}
  .composer__count{order: 3; align-self: flex-start;}

  .actions{flex-direction: column; gap: 8px;}
  .actions .btn{width: 100%;}
  .control{grid-column: span 12 !important;}
  .dropzone{flex-direction: column; align-items: stretch; gap: 8px;}
}

@media (max-width: 640px){
  .onb-layer{ display: block; } 
  .onb-tip.is-mobile{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 92vw;
    width: auto;
    inset: auto !important;   
    margin: 0;
  }
  .onb-actions{ justify-content: center; }
}

.lang-switch{position:relative}
.lang-btn{
  appearance:none; border:1px solid var(--border); background:var(--surface);
  color:var(--text); padding:.5rem .8rem; border-radius:12px; font:inherit;
}
.lang-btn[aria-expanded="true"]{outline:2px solid var(--accent)}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:180px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35); padding:6px; display:flex; flex-direction:column; z-index:50;
}
.lang-item{
  appearance:none; border:0; background:transparent; color:var(--text);
  text-align:left; padding:.55rem .7rem; border-radius:10px; font:inherit; cursor:pointer;
}
.lang-item:hover{background:var(--surface)}
.lang-item[aria-current="true"]{opacity:.6; pointer-events:none}

.btn{
  -webkit-appearance: none;
  appearance: none;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .95rem; border-radius:12px;
  border:1px solid var(--border, #D1D5DB);
  background-color: var(--surface, #111827);
  color: var(--text, #E5E7EB);
  font: inherit; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn svg{width:1.1em;height:1.1em}

.btn-primary{
  background-color: var(--accent, #2563EB);
  border-color: var(--accent, #2563EB);
  color: var(--btn-primary-fore, #FFFFFF);
}
.btn-primary:hover:not(:disabled){ filter:brightness(.95); }
.btn-primary:active:not(:disabled){ filter:brightness(.9); }

.btn:disabled,
.btn[disabled]{
  opacity:.75;
  cursor:not-allowed;
}

.btn-primary:disabled,
.btn-primary[disabled]{
  background-color: var(--accent, #2563EB) !important;
  border-color: var(--accent, #2563EB) !important;
  color: var(--btn-primary-fore, #FFFFFF) !important;
}

.btn:disabled svg{ opacity:.9; }

.section--features,
.section--languages{
  padding: clamp(44px, 6vw, 88px) 0;
  background: var(--bg);
  color: var(--text);
}
.section--languages{ border-top: 1px solid var(--border); }

.section--features .eyebrow,
.section--languages .eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:10px;
  font-weight:700;
}
.section--features .section__title,
.section--languages .section__title{
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.15;
  margin: 0 0 18px;
  font-weight: 800;
}

/* ======================== FEATURE GRID ======================== */
.section--features .feature-grid{
  list-style:none;
  margin: 28px 0 14px;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1024px){
  .section--features .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .section--features .feature-grid{ grid-template-columns: 1fr; }
}

/* Feature card */
.section--features .feature{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section--features .feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 50px rgba(79,140,255,.12);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.section--features .feature__icon{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:14px; margin-bottom:12px;
  color:var(--accent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}
.section--features .feature__icon svg{ width:28px; height:28px; }

.section--features .feature__title{
  font-size: 18px;
  margin: 2px 0 8px;
  font-weight: 700;
}
.section--features .feature__desc{
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

/* ======================== USE-CASES STRIP ======================== */
.section--features .use-row{
  margin: 16px 0 0;
  padding: 12px;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}
@media (max-width: 900px){
  .section--features .use-row{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 540px){
  .section--features .use-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.section--features .use{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
}

/* ======================== LANGUAGES GRID ======================== */
.section--languages .section__hint{
  color: var(--muted);
  margin: -6px 0 18px;
}

.section--languages .lang-grid{
  list-style:none; padding:0; margin: 12px 0 20px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 860px){
  .section--languages .lang-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .section--languages .lang-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.section--languages .lang-chip{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  box-shadow: 0 1px 0 rgba(16,24,40,.05);
  white-space: nowrap;
}
.section--languages .lang-chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 10px 30px rgba(79,140,255,.16);
}
.section--languages .lang-chip:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.section--languages .flag{ font-size: 18px; }

.section--languages .langs-cta{
  display:grid; place-items:center; margin-top: 20px;
}

.section--features .btn-ghost,
.section--languages .btn-ghost{
  background-color: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--border);
}

@media (max-width: 560px){
  .composer__bar{ align-items: stretch; }

  .composer__tools{
    order: 1;
    align-self: flex-start;
    justify-content: flex-start;   
  }

  .composer__tools .btn{
    margin-left: 0;
    margin-right: 0;
  }
}

.section--languages .flag-emo{
  display:inline-block;
  width: 1.35em;             
  line-height: 1;
  font-size: 18px;          
  margin-right: 10px;
  vertical-align: -1px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","EmojiOne Color",system-ui,sans-serif;
}