/* PASINLER HABER - OKUYUCU TEPKILERI PREMIUM V1 */

.reader-engagement .reaction-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:18px 0 22px;
}

.reader-engagement .reaction-grid .reaction-button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:62px;
  margin:0;
  padding:10px;
  border:1px solid #d5b879;
  border-radius:11px;
  background:#fffcf6;
  color:#142d4c;
  font:600 12px/1.4 Arial,sans-serif;
  text-align:left;
  white-space:normal;
  cursor:pointer;
  box-shadow:0 3px 9px rgba(20,45,76,.05);
  transition:background .2s,color .2s,border-color .2s;
}

.reader-engagement .reaction-grid .reaction-button::before{
  content:"";
  display:block;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:8px;
  background-color:#142d4c;
  background-repeat:no-repeat;
  background-position:center;
  background-size:21px 21px;
}

.reader-engagement .reaction-grid .reaction-button:hover{
  background:#f8f3e8;
  border-color:#b98e3e;
}

.reader-engagement .reaction-grid .reaction-button.selected{
  background:#142d4c;
  border-color:#142d4c;
  color:#fff8e8;
}

.reader-engagement .reaction-grid .reaction-button.selected::before{
  background-color:#27476b;
}

.reader-engagement .reaction-grid .reaction-button:focus-visible{
  outline:3px solid #c49b48;
  outline-offset:3px;
}

@media(max-width:850px){
  .reader-engagement .reaction-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:420px){
  .reader-engagement .reaction-grid .reaction-button{
    font-size:11px;
    gap:6px;
    padding:8px;
  }
  .reader-engagement .reaction-grid .reaction-button::before{
    flex-basis:29px;
    width:29px;
    height:29px;
    background-size:18px 18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .reader-engagement .reaction-grid .reaction-button{
    transition:none;
  }
}

.reader-engagement .reaction-grid .reaction-button:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e6c47b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2010v11H4a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h3Zm0%200%205-7a2%202%200%200%201%202%202v4h5a3%203%200%200%201%203%203l-1%207a3%203%200%200%201-3%203H7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.reader-engagement .reaction-grid .reaction-button:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e6c47b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m4%2012%205%205L20%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.reader-engagement .reaction-grid .reaction-button:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e6c47b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16m-4-4%204%204-4%204M20%2017H4m4-4-4%204%204%204%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.reader-engagement .reaction-grid .reaction-button:nth-child(4)::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23e6c47b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}