/* Popup container: her zaman altta, ortalı, max 1080px */
.vk-popup{
  position: fixed;
  left: 0; right: 0;
  bottom: 50px;              /* ✅ 50px yukarı */
  z-index: 999999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 10px 10px 12px;
}


/* keyboard box */
.vk-wrap{
  width: 100%;
  max-width: 1080px;
  max-height: 300px;
  background: #8c8c8c;           /* gri background */
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 35px rgba(0,0,0,.35);
  overflow: hidden;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .18s ease, transform .18s ease;
}

/* open state = fade in */
.vk-popup.vk-open{
  pointer-events: auto;
}
.vk-popup.vk-open .vk-wrap{
  opacity: 1;
  transform: translateY(0);
}

/* top bar */
.vk-topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.vk-title{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 14px;
  color: #fff;
  opacity: .9;
}
.vk-close{
  border: none;
  background: #5a5a5a;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

/* keys grid */
.vk-keys{
  display: grid;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 6px;                /* eskisi 10px */
  gap: 6px; 
}

/* row layout */
.vk-row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

/* key button */
.vk-key{
  border: none;
  background: #3a3a3a;           /* dark gri tuş */
  color: #fff;                   /* beyaz yazı */
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  padding: 9px 8px;            /* eskisi 12px 10px */
  font-size: 16px;             /* eskisi 18px */
  border-radius: 12px;
}
.vk-key:active{
  transform: translateY(1px);
}
.vk-key.action{
  background: #2f2f2f;
  font-size: 14px;
}
.vk-key.primary{
  background: #18a84a;
}
.vk-key.wide{ grid-column: span 2; }
.vk-key.xwide{ grid-column: span 3; }
/* wide/xwide sadece normal satırlarda çalışsın */
.vk-row:not(.single) .vk-key.wide{ grid-column: span 2; }
.vk-row:not(.single) .vk-key.xwide{ grid-column: span 3; }

/* single row = tek tuş tam genişlik */
.vk-row.single{
  grid-template-columns: 1fr;  /* tek kolon */
}
.vk-row.single .vk-key{
  grid-column: 1 / -1;
  width: 100%;
}